:root { color: #172033; background: #fff; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 900px; background: #fff; }
.ongoing-screen { position: relative; min-height: 100vh; padding: 18px 3vw 3vw; }
.home-button { position: absolute; top: 12px; right: 18px; z-index: 2; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #cbd8e8; border-radius: 50%; background: rgba(255,255,255,.9); color: #1769d1; font-size: 18px; line-height: 1; text-decoration: none; }
.home-button:hover { background: #eaf2fc; }
.pitch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; }
.pitch-panel { min-height: 62vh; padding: 2.4vw; border: 1px solid #d7e0ec; border-radius: 20px; background: #f8fafc; box-shadow: 0 18px 50px rgba(31, 53, 83, .12); }
.pitch-panel h2 { margin: 0 0 2vw; color: #1769d1; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; }
.live-card { padding: 2vw 0 2.5vw; border-bottom: 1px solid #d7e0ec; }
.live-card.is-empty { color: #738096; font-size: 1.15rem; }
.match-time { color: #1769d1; font-size: .9rem; font-weight: 700; }
.teams-score { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: start; gap: clamp(10px, 1.5vw, 24px); margin: 2vw 0 1.2vw; }
.team { min-width: 0; font-size: clamp(.95rem, 1.45vw, 1.45rem); font-weight: 700; line-height: 1.12; text-align: center; }
.score { min-width: 150px; color: #172033; font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 800; letter-spacing: .02em; line-height: 1; white-space: nowrap; text-align: center; }
.team-with-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.team-with-logo > span:last-child { overflow-wrap: anywhere; }
.team-logo, .team-logo-placeholder { width: clamp(42px, 5vw, 72px); height: clamp(42px, 5vw, 72px); flex: 0 0 auto; border-radius: 50%; object-fit: contain; background: #e8eef7; }
.scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; min-height: 36px; }
.scorer-column { display: grid; gap: 5px; min-width: 0; }
.scorer-column--right { text-align: right; }
.scorer { display: inline-flex; align-items: center; gap: 7px; color: #536176; font-size: .9rem; }
.scorer-column--right .scorer { justify-content: flex-end; }
.scorer img, .scorer-placeholder { width: 34px; height: 34px; border-radius: 50%; background: #dce5f1; object-fit: cover; }
.scorer strong { color: #172033; }
.match-cards { margin-top: 12px; padding-top: 10px; border-top: 1px solid #d7e0ec; }
.match-cards-label { display: block; margin-bottom: 6px; color: #738096; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.match-card-event { display: inline-flex; align-items: center; gap: 6px; color: #536176; font-size: .86rem; animation: card-event-in .4s ease-out both; }
.match-card-event--red { color: #b42318; }
.match-card-event--yellow { color: #946200; }
.card-symbol { font-size: 1rem; }
.next-match { padding-top: 2vw; color: #68768b; }
.next-match strong { display: block; margin-top: 7px; color: #172033; font-size: 1.2rem; }
.screen-message { color: #738096; text-align: center; }
.goal-celebration { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; visibility: hidden; opacity: 0; background: rgba(255,255,255,.94); pointer-events: none; }
.goal-celebration.is-visible { visibility: visible; opacity: 1; animation: celebration-in .35s ease-out both; }
.celebration-card { display: grid; width: min(1100px, 90vw); max-height: calc(100vh - 48px); aspect-ratio: 16 / 9; grid-template-columns: 44% 56%; grid-template-rows: auto 1fr auto auto auto auto; grid-template-areas: "visual kicker" "visual photo" "visual player" "visual type" "visual team" "visual logo" "visual match"; align-items: center; padding: clamp(24px, 4vw, 64px); border: 2px solid #1769d1; border-radius: 28px; background: #fff; box-shadow: 0 24px 80px rgba(23,105,209,.24); text-align: center; animation: celebration-pop .55s cubic-bezier(.2,1.5,.4,1) both; }
.celebration-kicker { grid-area: kicker; margin: 0; color: #e53935; font-size: clamp(2rem, 5vw, 5rem); font-weight: 900; letter-spacing: .08em; }
.goal-visual { position: relative; grid-area: visual; width: 100%; height: 140px; margin: 0 auto; overflow: hidden; border-bottom: 5px solid #1769d1; background: linear-gradient(90deg, transparent 0 8%, rgba(23,105,209,.1) 8% 9%, transparent 9% 18%, rgba(23,105,209,.1) 18% 19%, transparent 19% 28%, rgba(23,105,209,.1) 28% 29%, transparent 29% 100%); }
.goal-net { position: absolute; right: 10%; bottom: 5px; width: 55%; height: 82px; border: 5px solid #1769d1; border-bottom: 0; background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(23,105,209,.23) 15px 17px), repeating-linear-gradient(90deg, transparent 0 18px, rgba(23,105,209,.23) 19px 21px); transform: perspective(220px) rotateY(-18deg); transform-origin: right; }
.goal-ball { position: absolute; left: 12%; bottom: 18px; z-index: 1; font-size: 52px; animation: ball-in-net 1.1s cubic-bezier(.2,.8,.3,1) infinite alternate; }
.celebration-player-photo { grid-area: photo; display: grid; place-items: center; min-height: 80px; }
.celebration-player-photo img, .celebration-player-photo .scorer-placeholder { width: 120px; height: 120px; border: 5px solid #e8b923; border-radius: 50%; object-fit: cover; }
.celebration-card h2 { grid-area: player; margin: 0; color: #172033; font-size: clamp(1.8rem, 4vw, 3.5rem); }
.celebration-type { grid-area: type; margin: 0; color: #e53935; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; }
.celebration-team { grid-area: team; margin: 0; color: #1769d1; font-size: 1.4rem; font-weight: 700; }
.celebration-team-logo { grid-area: logo; min-height: 55px; margin: 4px 0; }
.celebration-team-logo img, .celebration-team-logo .team-logo-placeholder { width: 72px; height: 72px; border-radius: 50%; object-fit: contain; background: #e8eef7; }
.celebration-match { grid-area: match; margin: 0; color: #68768b; font-size: 1rem; }
.card-celebration { position: fixed; inset: 0; z-index: 11; display: grid; place-items: center; visibility: hidden; opacity: 0; background: rgba(20, 27, 38, .9); pointer-events: none; }
.card-celebration.is-visible { visibility: visible; opacity: 1; animation: celebration-in .25s ease-out both; }
.card-celebration-card { display: grid; width: min(1100px, 90vw); max-height: calc(100vh - 48px); aspect-ratio: 16 / 9; grid-template-columns: 44% 56%; grid-template-rows: auto 1fr auto auto auto auto; grid-template-areas: "visual kicker" "visual photo" "visual player" "visual type" "visual team" "visual logo" "visual match"; align-items: center; padding: clamp(24px, 4vw, 64px); border: 2px solid #f0c419; border-radius: 28px; background: #fffdf1; box-shadow: 0 24px 80px rgba(240,196,25,.28); text-align: center; animation: card-pop .55s cubic-bezier(.2,1.5,.4,1) both; }
.card-celebration-kicker { grid-area: kicker; margin: 0; color: #e0aa00; font-size: clamp(2rem, 5vw, 5rem); font-weight: 900; letter-spacing: .06em; }
.card-visual { position: relative; display: grid; place-items: center; grid-area: visual; height: 220px; margin: 0 auto; }
.match-card-icon { display: block; width: 130px; height: 180px; border: 7px solid #e0b000; border-radius: 12px; background: #ffdf32; box-shadow: 13px 15px 0 rgba(224,176,0,.18); transform: rotate(-8deg); animation: card-wiggle 1.1s ease-in-out infinite alternate; }
.card-visual--red .match-card-icon { border-color: #c62828; background: #e53935; box-shadow: 13px 15px 0 rgba(198,40,40,.22); }
.celebration-type--red { color: #c62828; }
.celebration-type--yellow { color: #a06b00; }
@keyframes card-event-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-pop { from { transform: scale(.72) rotate(3deg); } to { transform: scale(1) rotate(0); } }
@keyframes card-wiggle { from { transform: rotate(-8deg) translateY(4px); } to { transform: rotate(8deg) translateY(-4px); } }
@keyframes celebration-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes celebration-pop { from { transform: scale(.7) rotate(-3deg); } to { transform: scale(1) rotate(0); } }
@keyframes ball-in-net { from { left: 10%; transform: rotate(0deg) scale(1); } to { left: 63%; transform: rotate(430deg) scale(.78); } }
@media (max-width: 950px) { .ongoing-screen { padding: 18px 24px 24px; } .pitch-panel { padding: 24px; } .teams-score { grid-template-columns: minmax(0, 1fr) 115px minmax(0, 1fr); margin: 24px 0 14px; } .score { min-width: 115px; font-size: 2.5rem; } .live-card { padding: 24px 0; } .next-match { padding-top: 24px; } }