:root {
  color-scheme: dark;
  --eng: #f5f7ff;
  --fra: #3868ff;
  --lime: #dfff4f;
  --ink: #070a0d;
  --score-top: clamp(96px, 12vh, 152px);
  --score-block-height: 88px;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020604; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { font: inherit; }
.football-app, #footballCanvas, .stadium-vignette { position: fixed; inset: 0; width: 100%; height: 100%; }
#footballCanvas { display: block; }
.stadium-vignette { pointer-events: none; background: radial-gradient(circle at 50% 45%, transparent 35%, rgba(1,4,3,.26) 72%, rgba(1,3,2,.72) 100%), linear-gradient(rgba(0,0,0,.24), transparent 16%, transparent 72%, rgba(0,0,0,.58)); }
.match-header { position: fixed; top: 0; left: 0; right: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; padding: clamp(16px, 3vw, 34px); background: linear-gradient(rgba(2,5,4,.78), transparent); }
.competition { display: flex; gap: 10px; align-items: center; }
.header-status { display: flex; gap: 8px; align-items: center; }
.live-crowd { display: flex; gap: 6px; align-items: center; padding: 7px 9px; border: 1px solid rgba(223,255,79,.2); border-radius: 99px; color: var(--lime); background: rgba(6,10,8,.48); backdrop-filter: blur(12px); }
.live-crowd b { font-size: 10px; font-variant-numeric: tabular-nums; }.live-crowd span { color: rgba(255,255,255,.48); font-size: 6px; font-weight: 900; letter-spacing: .8px; }
.competition b, .competition small { display: block; }
.competition b { font-size: clamp(10px, 1.3vw, 14px); letter-spacing: 1.2px; }
.competition small { margin-top: 2px; color: rgba(255,255,255,.54); font-size: 8px; letter-spacing: 1.8px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff315d; box-shadow: 0 0 16px #ff315d; animation: live 1.2s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }
.connection-pill { padding: 8px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; color: rgba(255,255,255,.6); background: rgba(6,10,8,.42); backdrop-filter: blur(12px); font-size: 8px; font-weight: 850; letter-spacing: 1px; }
.connection-pill.online { border-color: rgba(223,255,79,.46); color: var(--lime); }
.score-hud { position: fixed; top: var(--score-top); left: 50%; z-index: 5; display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); width: min(780px, calc(100% - 28px)); transform: translateX(-50%); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; overflow: hidden; background: rgba(6,10,8,.86); box-shadow: 0 18px 50px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.hud-team { position: relative; display: flex; gap: 12px; align-items: center; padding: 14px 18px; overflow: hidden; }
.hud-team::before { content: ""; position: absolute; inset: 0; opacity: .12; }
.hud-team.england::before { background: linear-gradient(90deg, #fff, transparent); }
.hud-team.france { justify-content: flex-end; text-align: right; }
.hud-team.france::before { background: linear-gradient(-90deg, #3868ff, transparent); }
.flag { position: relative; flex: 0 0 31px; width: 31px; height: 20px; overflow: hidden; border-radius: 2px; box-shadow: 0 5px 9px rgba(0,0,0,.3); }
.england-flag { background: #fff; }
.england-flag::before, .england-flag::after { content: ""; position: absolute; background: #d51f3d; }
.england-flag::before { top: 0; left: 12px; width: 7px; height: 100%; }
.england-flag::after { top: 7px; left: 0; width: 100%; height: 6px; }
.france-flag { background: linear-gradient(90deg, #143c9b 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%); }
.hud-team small, .hud-team b, .hud-team span { position: relative; display: block; }
.hud-team small { color: rgba(255,255,255,.68); font-size: 8px; font-weight: 900; letter-spacing: 1.4px; }
.hud-team b { margin: 2px 0; font-size: clamp(24px, 4vw, 42px); line-height: .9; font-variant-numeric: tabular-nums; }
.hud-team.france b { color: #6f91ff; }
.hud-team span { color: rgba(255,255,255,.46); font-size: 8px; text-transform: uppercase; }
.clock-block { display: grid; min-width: 118px; place-content: center; padding: 10px 16px; border-right: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); text-align: center; background: rgba(0,0,0,.18); }
.clock-block small, .clock-block b, .clock-block span { display: block; }
.clock-block small { color: var(--lime); font-size: 7px; font-weight: 900; letter-spacing: 1.4px; }
.clock-block b { margin: 2px 0; font-size: clamp(25px, 4vw, 41px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.clock-block span { color: rgba(255,255,255,.42); font-size: 7px; font-weight: 800; letter-spacing: 1.1px; }
.clock-block i, .hud-team i, .hud-team em { font-style: normal; }
.clock-block.urgent { animation: urgent-clock .55s ease-in-out infinite alternate; }
.clock-block.urgent small, .clock-block.urgent b { color: #ff4467; text-shadow: 0 0 22px rgba(255,49,93,.55); }
@keyframes urgent-clock { to { background: rgba(255,49,93,.16); } }
.hud-team em { color: rgba(255,255,255,.78); }
.support-meter { position: fixed; top: calc(var(--score-top) + var(--score-block-height)); left: 50%; z-index: 5; width: min(660px, calc(100% - 74px)); height: 8px; transform: translateX(-50%); overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; background: var(--fra); box-shadow: 0 5px 20px rgba(0,0,0,.35); }
.support-meter i { display: block; width: 50%; height: 100%; background: var(--eng); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.support-meter b { position: absolute; top: -2px; left: 50%; width: 2px; height: 11px; background: #101615; }
.support-meter span { position: fixed; top: 11px; color: rgba(255,255,255,.55); font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.meter-eng { left: 2px; }.meter-fra { right: 2px; }
.pitch-action { position: fixed; top: calc(var(--score-top) + var(--score-block-height) + 20px); left: 50%; z-index: 5; transform: translateX(-50%); padding: 6px 10px; border: 1px solid rgba(223,255,79,.22); border-radius: 99px; color: var(--lime); background: rgba(3,8,5,.68); font-size: 7px; font-weight: 900; letter-spacing: 1.2px; backdrop-filter: blur(10px); }
.camera-shot { position: fixed; top: calc(var(--score-top) + var(--score-block-height) + 20px); left: calc(50% + 106px); z-index: 5; padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: rgba(255,255,255,.62); background: rgba(3,8,5,.6); font-size: 6px; font-weight: 850; letter-spacing: .9px; backdrop-filter: blur(10px); transition: color .25s, border-color .25s; }
.camera-shot.switching { color: #fff; border-color: rgba(223,255,79,.52); animation: camera-cut .7s ease-out; }
@keyframes camera-cut { from { transform: scale(.88); opacity: .45; } to { transform: scale(1); opacity: 1; } }
.hero-card { position: fixed; left: 50%; bottom: clamp(154px, 18vh, 240px); z-index: 5; display: flex; gap: 14px; align-items: center; width: min(480px, calc(100% - 40px)); padding: 14px 18px; transform: translate(-50%, 30px) scale(.96); border: 1px solid rgba(255,255,255,.16); border-radius: 15px; opacity: 0; background: rgba(5,9,7,.84); box-shadow: 0 20px 55px rgba(0,0,0,.38); backdrop-filter: blur(18px); transition: .35s; pointer-events: none; }
.hero-card.visible { transform: translate(-50%, 0) scale(1); opacity: 1; }
.hero-card > span { display: grid; flex: 0 0 45px; height: 45px; place-items: center; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 22px; }
.hero-card small, .hero-card b, .hero-card p { display: block; margin: 0; }
.hero-card small { color: var(--lime); font-size: 7px; font-weight: 900; letter-spacing: 1.3px; }
.hero-card b { margin: 3px 0; font-size: 14px; letter-spacing: .2px; }
.hero-card p { color: rgba(255,255,255,.58); font-size: 10px; }
.gift-recognition { --tier-color: var(--lime); position: fixed; top: calc(var(--score-top) + var(--score-block-height) + 58px); left: 50%; z-index: 7; display: grid; grid-template-columns: 48px minmax(0,1fr) 30px; gap: 8px; align-items: center; width: min(330px, calc(100% - 28px)); min-height: 64px; padding: 8px 10px 12px; transform: translate(-50%, -14px) scale(.88); overflow: visible; border: 1px solid var(--tier-color); border-radius: 15px; opacity: 0; background: linear-gradient(115deg, rgba(3,8,5,.95), rgba(9,16,12,.88)); box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 0 30px color-mix(in srgb, var(--tier-color) 34%, transparent), 0 14px 36px rgba(0,0,0,.48); backdrop-filter: blur(16px); pointer-events: none; transition: opacity .18s, transform .3s cubic-bezier(.15,1.35,.28,1); }
.gift-recognition::before { display: none; }
.gift-recognition::after { content: "THANK YOU!"; position: absolute; top: -7px; right: 14px; padding: 3px 6px; border-radius: 99px; color: #071006; background: var(--tier-color); font-size: 5.5px; font-weight: 1000; letter-spacing: .8px; box-shadow: 0 0 12px color-mix(in srgb, var(--tier-color) 52%, transparent); }
.gift-recognition.visible { transform: translate(-50%, 0) scale(1); opacity: 1; animation: recognition-pulse 1s ease-in-out infinite alternate; }
.gift-recognition.paused::after { content: "ĐANG GIỮ LƯỢT"; }
.gift-recognition.tier-common { --tier-color: #dfff4f; }.gift-recognition.tier-rare { --tier-color: #53d5ff; }.gift-recognition.tier-epic { --tier-color: #b77aff; }.gift-recognition.tier-legendary { --tier-color: #ffd84d; }
.recognition-avatar { position: relative; display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 2px solid var(--tier-color); border-radius: 50%; color: #071006; background: var(--tier-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier-color) 16%, transparent), 0 0 18px color-mix(in srgb, var(--tier-color) 48%, transparent); }
.recognition-avatar img { width: 100%; height: 100%; object-fit: cover; }.recognition-avatar span { font-size: 14px; font-weight: 1000; letter-spacing: -.4px; }
.recognition-copy { min-width: 0; }.recognition-copy small, .recognition-copy b, .recognition-copy p { display: block; margin: 0; }
.recognition-copy small { color: var(--tier-color); font-size: 6px; font-weight: 1000; letter-spacing: 1.1px; }
.recognition-copy b { margin: 2px 0; overflow: hidden; color: #fff; font-size: clamp(16px, 3.2vw, 19px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 16px color-mix(in srgb, var(--tier-color) 32%, transparent); }
.recognition-copy p { overflow: hidden; color: rgba(255,255,255,.72); font-size: 7.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.gift-recognition > strong { color: var(--tier-color); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.recognition-progress { position: absolute; right: 10px; bottom: 6px; left: 10px; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.recognition-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--tier-color); box-shadow: 0 0 14px var(--tier-color); }
@keyframes recognition-pulse { to { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tier-color) 10%, transparent), 0 0 38px color-mix(in srgb, var(--tier-color) 42%, transparent), 0 14px 38px rgba(0,0,0,.52); } }
.celebration-overlay { position: fixed; top: 50%; left: 50%; z-index: 8; display: grid; width: min(680px, calc(100% - 34px)); min-height: 230px; place-content: center; transform: translate(-50%, -50%) scale(.72); border: 2px solid rgba(223,255,79,.64); border-radius: 28px; opacity: 0; text-align: center; background: radial-gradient(circle, rgba(55,104,255,.32), rgba(4,9,7,.94) 62%); box-shadow: 0 0 0 999px rgba(0,0,0,.38), 0 0 80px rgba(223,255,79,.28); backdrop-filter: blur(14px); pointer-events: none; transition: opacity .3s, transform .45s cubic-bezier(.2,1.4,.3,1); }
.celebration-overlay.visible { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: celebration-pulse .7s ease-in-out infinite alternate; }
.celebration-overlay small { color: var(--lime); font-size: 9px; font-weight: 950; letter-spacing: 2.4px; }
.celebration-overlay b { margin: 10px 0 2px; font-size: clamp(28px, 5vw, 58px); line-height: .94; letter-spacing: -1.8px; }
.celebration-overlay strong { color: #fff; font-size: clamp(32px, 5.5vw, 62px); font-variant-numeric: tabular-nums; }
.celebration-overlay span { margin-top: 8px; color: rgba(255,255,255,.7); font-size: 11px; }
.celebration-overlay .celebration-mvp { justify-self: center; margin-top: 13px; padding: 8px 13px; border: 1px solid rgba(223,255,79,.36); border-radius: 99px; color: var(--lime); background: rgba(223,255,79,.08); font-size: 9px; font-weight: 950; letter-spacing: .8px; }
.celebration-overlay .celebration-reason { margin-top: 7px; color: rgba(255,255,255,.44); font-size: 8px; font-weight: 800; letter-spacing: .4px; }
@keyframes celebration-pulse { to { border-color: #fff; box-shadow: 0 0 0 999px rgba(0,0,0,.34), 0 0 110px rgba(223,255,79,.46); } }
.kickoff-countdown { position: fixed; top: 53%; left: 50%; z-index: 9; display: grid; min-width: 210px; place-items: center; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; transition: opacity .16s, transform .28s cubic-bezier(.2,1.5,.3,1); }
.kickoff-countdown.visible { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.kickoff-countdown::before { content: ""; position: absolute; width: 230px; height: 230px; border: 2px solid rgba(223,255,79,.45); border-radius: 50%; background: radial-gradient(circle, rgba(223,255,79,.2), rgba(3,8,5,.78) 62%, transparent 64%); box-shadow: 0 0 70px rgba(223,255,79,.24); animation: countdown-ring .8s ease-out infinite; }
.kickoff-countdown small, .kickoff-countdown b, .kickoff-countdown span { position: relative; }
.kickoff-countdown small { color: var(--lime); font-size: 9px; font-weight: 950; letter-spacing: 2px; }.kickoff-countdown b { font-size: 104px; line-height: .92; font-variant-numeric: tabular-nums; text-shadow: 0 8px 40px rgba(0,0,0,.6); }.kickoff-countdown span { color: #fff; font-size: 10px; font-weight: 950; letter-spacing: 1.4px; }
@keyframes countdown-ring { from { transform: scale(.82); opacity: 1; } to { transform: scale(1.12); opacity: .18; } }
.final-push { position: fixed; top: 58%; left: 50%; z-index: 7; display: flex; gap: 9px; align-items: center; padding: 9px 13px; transform: translate(-50%, 18px) scale(.92); border: 1px solid rgba(255,49,93,.5); border-radius: 99px; opacity: 0; color: #fff; background: rgba(31,2,9,.82); box-shadow: 0 0 34px rgba(255,49,93,.24); backdrop-filter: blur(14px); pointer-events: none; transition: .2s; }
.final-push.visible { transform: translate(-50%, 0) scale(1); opacity: 1; animation: final-push .55s ease-in-out infinite alternate; }.final-push small { color: #ff5d7b; font-size: 8px; font-weight: 950; letter-spacing: 1px; }.final-push b { font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; }.final-push span { color: rgba(255,255,255,.72); font-size: 8px; font-weight: 900; white-space: nowrap; }
@keyframes final-push { to { border-color: #fff; box-shadow: 0 0 48px rgba(255,49,93,.44); } }
.player-guide { position: fixed; top: max(34%, calc(var(--score-top) + var(--score-block-height) + 112px)); left: max(18px, env(safe-area-inset-left)); z-index: 6; display: grid; gap: 7px; width: clamp(118px, 13vw, 150px); padding: 10px; border: 1px solid rgba(223,255,79,.38); border-left: 3px solid var(--lime); border-radius: 15px; background: rgba(3,8,5,.84); box-shadow: 0 14px 38px rgba(0,0,0,.38), 0 0 24px rgba(223,255,79,.08); backdrop-filter: blur(14px); pointer-events: none; }
.player-guide small { padding: 0 3px 2px; color: var(--lime); font-size: clamp(8px, .75vw, 10px); font-weight: 1000; letter-spacing: 1.25px; }
.player-guide span { display: grid; gap: 2px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: rgba(255,255,255,.68); background: rgba(0,0,0,.38); font-size: clamp(8px, .72vw, 10px); line-height: 1.25; }
.player-guide b { color: #fff; font-size: clamp(10px, .9vw, 13px); letter-spacing: .15px; }
.match-footer { position: fixed; right: 0; bottom: 0; left: 0; z-index: 4; padding: 12px clamp(18px, 4vw, 42px) 15px; text-align: center; background: linear-gradient(transparent, rgba(2,5,4,.82) 48%); }
#lastAction { margin-bottom: 3px; color: rgba(255,255,255,.76); font-size: clamp(10px, 1.5vw, 13px); }
.portrait-credit { display: inline-block; margin-top: 4px; color: rgba(255,255,255,.27); font-size: 6px; text-decoration: none; letter-spacing: .35px; }
.audio-button { position: fixed; right: 24px; bottom: 104px; z-index: 6; padding: 9px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 99px; color: rgba(255,255,255,.64); background: rgba(5,8,7,.68); font-size: 8px; font-weight: 850; letter-spacing: .7px; backdrop-filter: blur(12px); cursor: pointer; }
.audio-button.active { color: var(--lime); border-color: rgba(223,255,79,.35); }
.inactive-notice { position: fixed; top: 50%; left: 50%; z-index: 9; width: min(430px, calc(100% - 36px)); padding: 24px; transform: translate(-50%, -50%); border: 1px solid rgba(255,210,75,.35); border-radius: 17px; text-align: center; background: rgba(8,10,8,.94); box-shadow: 0 30px 90px rgba(0,0,0,.5); backdrop-filter: blur(20px); }
.inactive-notice b, .inactive-notice span { display: block; }
.inactive-notice b { color: #ffd24b; font-size: 12px; letter-spacing: .7px; }
.inactive-notice span { margin: 8px 0 15px; color: rgba(255,255,255,.58); font-size: 10px; line-height: 1.5; }
.inactive-notice a { display: inline-block; padding: 9px 13px; border-radius: 8px; color: #07100b; background: var(--lime); text-decoration: none; font-size: 10px; font-weight: 900; }
.operator-panel { position: fixed; top: 230px; right: 18px; z-index: 8; width: 220px; padding: 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(5,8,7,.82); backdrop-filter: blur(18px); }
.operator-panel > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.operator-panel > div b { font-size: 9px; letter-spacing: 1px; }.operator-panel a { color: var(--lime); font-size: 8px; }
.operator-panel section { display: flex; flex-wrap: wrap; gap: 5px; }
.operator-panel button { flex: 1; padding: 7px; border: 1px solid rgba(255,255,255,.11); border-radius: 6px; color: #dfe4df; background: rgba(255,255,255,.06); font-size: 8px; cursor: pointer; }
.operator-panel button:hover { border-color: var(--lime); }.operator-panel button.danger { color: #ff7892; }
.operator-panel > small { display: block; margin: 12px 0 6px; color: rgba(255,255,255,.42); font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.goal-previews button { min-width: 62px; }.operator-panel p { margin: 10px 0 0; color: rgba(255,255,255,.4); font-size: 8px; }
@media (max-width: 620px) {
  .score-hud { grid-template-columns: 1fr 86px 1fr; }.hud-team { gap: 6px; padding: 11px 9px; }.hud-team .flag { display: none; }.clock-block { min-width: 86px; padding: 8px; }
  .player-guide { left: max(18px, env(safe-area-inset-left)); width: 108px; gap: 5px; padding: 7px; border-radius: 12px; }.player-guide span { padding: 6px; }.audio-button { right: 12px; bottom: 82px; }.operator-panel { top: 205px; }.pitch-action { left: 34%; }.camera-shot { left: 68%; transform: translateX(-50%); }.header-status { gap: 5px; }.live-crowd { padding: 6px 7px; }.live-crowd span { display: none; }.kickoff-countdown { top: 55%; }.final-push { top: 61%; }
  .gift-recognition { grid-template-columns: 44px minmax(0,1fr) 28px; gap: 7px; width: min(310px, calc(100% - 24px)); min-height: 60px; border-radius: 14px; }.recognition-avatar { width: 44px; height: 44px; }.recognition-copy b { font-size: clamp(15px, 4.3vw, 18px); }.recognition-copy p { font-size: 7px; }
}

/* TikTok overlays occupy the upper band and crop a few pixels at both sides.
   Keep essential match information inside a dedicated 9:16 broadcast-safe area. */
@media (orientation: portrait), (max-aspect-ratio: 4 / 5) {
  :root {
    --score-top: max(190px, 19svh);
    --score-block-height: clamp(76px, 8.5vw, 92px);
  }
  .match-header { padding-right: max(26px, 5vw); padding-left: max(26px, 5vw); opacity: .72; }
  .score-hud { width: min(780px, calc(100% - max(44px, 9vw))); border-color: rgba(255,255,255,.2); }
  .support-meter { width: min(660px, calc(100% - max(84px, 16vw))); }
  .player-guide {
    top: max(410px, 41svh);
    left: max(24px, 5vw, env(safe-area-inset-left));
    width: clamp(108px, 15vw, 156px);
  }
  .gift-recognition { top: calc(var(--score-top) + var(--score-block-height) + 68px); }
}