@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600;700;800&display=swap');
html{height:100%;overflow:hidden}body{height:var(--view-height,100dvh);min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#081b16;font-family:Barlow,Arial,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1460px;margin:0 auto;flex:none;padding:10px 18px}.brand.bfc-brand{background:none}.header-right{display:flex;align-items:center}main{position:relative;width:100%;max-width:1384px;flex:1;min-height:0;height:auto;margin:0 auto;padding:0 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.match-top{width:100%;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}.match-label{font-size:12px;color:#96afa0;letter-spacing:2px}.board{background:transparent;border:0;border-radius:0;box-shadow:none;padding:6px 0;gap:18px;margin:0!important}.team{font-size:13px;gap:6px}.score{font:800 38px/1 'Barlow Condensed',Impact,sans-serif}.clock{background:#163a2b;border:1px solid #416347;border-radius:8px;padding:8px;min-width:58px;font:800 20px/1 Barlow,Arial,sans-serif;color:#beef43}.venue{flex:none;min-height:0;aspect-ratio:1792/1194;border-radius:16px;border:1px solid #365541;max-width:100%;margin:auto;background:#09271d}.stadium-scene{background-size:100% 100%!important}.arena{left:24.6%!important;top:23.3%!important;width:50.8%!important;height:46.5%!important;transform:none!important;border-radius:12px}.controls{position:static;inset:auto;width:100%;height:auto;flex:none;padding:8px 0;z-index:auto}.desktop-keys{justify-content:center;margin:0!important;font-size:12px}.desktop-keys kbd{background:#193326;border-color:#3c5845;border-bottom-width:1px;color:#d1ded0}.mobile{position:static;inset:auto;display:none;flex:none;width:100%;min-height:0;padding:8px 4px 12px;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.hint{display:none!important}.round-tag{font-size:10px;top:8px;left:8px}main[data-phase=ready] .match-top,main[data-phase=ready] .controls,main[data-phase=ready] .mobile,main[data-phase=between] .mobile,main[data-phase=end] .mobile,main[data-phase=pause] .mobile{display:none!important}#musicToggle,#fullscreen{display:inline-flex!important}#pause{display:inline-flex!important;width:40px;height:40px;min-height:40px;padding:9px}#pause .button-label{display:none}
.overlay,.ready-screen,.pause-screen,.between-screen,.final-screen{position:fixed!important;inset:var(--menu-top,78px) 0 env(safe-area-inset-bottom)!important;z-index:20;max-width:none!important;max-height:none!important;display:grid;place-items:center;padding:12px!important;overflow:hidden!important;background:#041b18d9;backdrop-filter:blur(3px);align-items:center;justify-content:center}.screen-content{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none;width:500px;max-width:calc(100vw - 24px);transform-origin:center;min-height:0}.overlay .panel{position:static;width:100%!important;max-width:none!important;max-height:none!important;overflow:visible!important;padding:22px!important;flex:none;background:linear-gradient(155deg,#0b2d20fa,#09271dfa);border:1px solid #497349;border-radius:16px;box-shadow:0 12px 60px #0005;text-align:center}.overlay .panel h1{font:900 44px/.95 'Barlow Condensed',Impact,sans-serif!important;letter-spacing:-1px;margin:12px 0!important;color:#fff;text-shadow:0 4px #052b16}.overlay .panel .eyebrow{font-size:11px;letter-spacing:2px;color:#beef43}.overlay .panel p{font-size:15px;line-height:1.45;margin:12px auto;color:#b8d0bd}.overlay .panel .bfc-button{display:flex;width:100%;min-height:44px;padding:11px 16px;font-size:14px;margin:10px 0 0!important;position:static;box-shadow:inset 0 1px 0 #ffffff60,0 3px 0 var(--button-shadow),0 5px 12px #0002}.overlay .panel .bfc-button[hidden]{display:none!important}#restartMatch,#backMenu{display:none}.pause-screen #restartMatch,.pause-screen #backMenu,.between-screen #backMenu,.final-screen #backMenu{display:flex}#stageExtra:empty{display:none}.between-screen #stageExtra,.final-screen #stageExtra{width:100%!important;max-width:none;flex:none;background:#0b2d20fa;border:1px solid #497349;border-radius:16px;padding:16px!important;box-shadow:0 12px 60px #0005}.group-table{font-size:12px;margin:10px 0 6px}.group-table th,.group-table td{padding:7px 4px}.group-note{font-size:11px!important;margin:6px 0 0!important}.rules-dialog{font-family:Barlow,Arial,sans-serif;max-height:calc(var(--view-height,100dvh) - 24px);background:#0b2d20fa;border-color:#497349}.rules-head .bfc-button{width:36px;min-height:36px;height:36px;padding:7px}.rules-head .button-label{display:none}.rules-dialog .rules-note{font-size:12px}.rules-dialog #doneRules{width:100%}.immersive{position:fixed;inset:0;width:100%;z-index:100}.joystick{position:relative;display:grid;place-items:center;width:108px;height:108px;flex:none;border:3px solid #667f73;border-radius:50%;background:radial-gradient(circle at 42% 38%,#284637 0,#142d22 58%,#071b13 60%,#355343 69%,#152e22 74%);box-shadow:inset 0 2px 3px #d4ead544,inset 0 -3px 6px #0008,0 4px 0 #06160f,0 7px 12px #0005;touch-action:none}.joystick::after{font-size:10px;bottom:6px}.joystick-guide{position:absolute;text-align:center;line-height:1.25;color:#d8efd2;font-weight:800;font-size:17px;pointer-events:none}.stick{width:50px;height:50px;border:3px solid #d8f992;border-radius:50%;background:radial-gradient(circle at 35% 25%,#edffb8,#bcef43 50%,#779b23);box-shadow:inset 0 2px 3px #fff8,inset 0 -4px 5px #4b691b77,0 4px 0 #486318,0 7px 10px #0008;z-index:1}.mobile-actions{display:flex!important;gap:10px;flex:none}.mobile .mobile-actions button{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:70px;height:70px;min-height:70px;border:2px solid #79958a;border-radius:50%;padding:6px;background:linear-gradient(145deg,#557565,#264b3a 55%,#193c2e);box-shadow:inset 0 2px 2px #ffffff40,inset 0 -3px 5px #0005,0 5px 0 #0b2119,0 8px 12px #0006;color:#fff;font:800 12px Barlow,Arial,sans-serif;touch-action:none;user-select:none}.mobile .mobile-actions .kick{width:84px;height:84px;min-height:84px;background:linear-gradient(145deg,#e4ff9c,#bcef43 50%,#8fba29);border-color:#d7f994;color:#17341c;box-shadow:inset 0 2px 2px #fff9,inset 0 -3px 5px #64861277,0 5px 0 #526c1c,0 8px 12px #0006;font-size:15px}.mobile .mobile-actions .power{background:linear-gradient(145deg,#ffc77c,#b67a32 55%,#674724);border-color:#ffd597;color:#281d0c}.mobile .mobile-actions .dash{border-color:#9fdcf5;color:#d8f6ff}.mobile-actions .button-icon{width:28px;height:28px}.mobile-actions .kick .button-icon{width:34px;height:34px}.mobile .mobile-actions button.active{transform:translateY(4px);box-shadow:inset 0 3px 6px #0005,0 1px 0 #102819,0 3px 5px #0005}.dash::after,.power::after{right:-3px;top:-7px;z-index:2}.dash.cooling,.power.cooling{opacity:.4!important}.kit-shirt{height:70px}
@media(any-pointer:coarse){.mobile{display:flex}.controls{display:none}}@media(max-width:600px){header{padding:8px}.match-label{display:none}.match-top{min-height:52px;gap:6px}.board{gap:7px;flex:1;justify-content:center}.team{font-size:10px;gap:2px}.team-crest{width:20px;height:20px;margin:0}.score{font-size:30px}.clock{font-size:16px;min-width:44px;padding:7px 5px}.screen-content{width:440px}.overlay .panel{padding:18px!important}.overlay .panel h1{font-size:38px!important}.overlay .panel p{font-size:14px}.mobile-actions{gap:7px}.mobile .mobile-actions button{width:62px;height:62px;min-height:62px;font-size:11px}.mobile .mobile-actions .kick{width:72px;height:72px;min-height:72px}.joystick{width:96px;height:96px}.stick{width:46px;height:46px}.mobile-actions .button-icon{width:24px;height:24px}.desktop-keys{gap:6px}.venue{border-radius:10px}}
@media(max-width:360px){.mobile-actions{gap:5px}.mobile .mobile-actions button{width:54px;height:54px;min-height:54px}.mobile .mobile-actions .kick{width:64px;height:64px;min-height:64px}.joystick{width:90px;height:90px}.team{font-size:9px}.board{gap:5px}.score{font-size:26px}}
@media(orientation:landscape) and (max-height:550px){header{padding:4px 12px}.match-top{min-height:38px}.match-label{display:none}.board{justify-content:center;flex:1;padding:3px;gap:12px}.score{font-size:28px}.clock{font-size:16px;padding:5px}.team-crest{width:20px;height:20px}.controls{padding:3px}.screen-content{width:440px}.between-screen .screen-content,.final-screen .screen-content{width:920px;max-width:calc(100vw - 24px);flex-direction:row;align-items:center}.between-screen .screen-content>.panel,.between-screen .screen-content>#stageExtra,.final-screen .screen-content>.panel,.final-screen .screen-content>#stageExtra{width:calc(50% - 6px)!important}.overlay .panel{padding:16px!important}.overlay .panel h1{font-size:34px!important}.overlay .panel p{font-size:13px}.overlay .panel .bfc-button{min-height:36px;padding:8px 12px;font-size:13px}.group-table th,.group-table td{padding:5px 3px}.group-table{font-size:11px}.mobile{padding:4px 8px 10px}.joystick{width:76px;height:76px}.stick{width:38px;height:38px}.joystick-guide{font-size:13px}.joystick::after{font-size:8px;bottom:4px}.mobile .mobile-actions button{width:58px;height:58px;min-height:58px}.mobile .mobile-actions .kick{width:68px;height:68px;min-height:68px}}
@media(any-pointer:coarse) and (orientation:landscape){.mobile{position:absolute;bottom:6px;left:4px;right:4px;width:auto;max-width:none;z-index:4;pointer-events:none}.mobile>*{pointer-events:auto}}
/* Opening screen leaves the stadium visible behind its menu card. */
.overlay.ready-screen{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Only the opening menu uses the stadium as a full-screen backdrop. */
body:has(main[data-phase="ready"]){background:#081b16 url("timsah-arena-metro-v2.png") center / cover no-repeat}
main[data-phase="ready"] .venue{visibility:hidden}
body:has(main[data-phase="ready"]) header{background:linear-gradient(180deg,#041b18d9,#041b1866);border-radius:0 0 12px 12px}
.ready-screen .panel{width:min(420px,100%)!important;padding:18px!important}
.ready-screen .panel .bfc-button{width:auto;min-width:190px;max-width:100%;min-height:38px;padding:9px 15px;font-size:12px;gap:7px;margin:9px auto 0!important}
.ready-screen .panel .button-icon{width:17px;height:17px}
.ready-screen #rulesButton{min-width:130px;min-height:34px;padding:7px 13px;font-size:11px}
@media(orientation:landscape) and (max-height:550px){.ready-screen .panel{padding:12px 18px!important}.ready-screen .panel .bfc-button{min-height:34px;padding:7px 13px;margin-top:7px!important}}
/* Mobile fullscreen keeps the score and all actions in a single toolbar. */
@media(any-pointer:coarse){
 .immersive header.compact-match-header{flex-wrap:nowrap;gap:8px;padding:4px 10px;min-height:42px}
 .compact-match-header .bfc-brand{width:110px;height:34px;max-width:18vw;padding:3px}
 .compact-match-header .match-top{flex:1;width:auto;min-width:0;min-height:0;height:34px;gap:6px}
 .compact-match-header .match-label{display:none}
 .compact-match-header .board{flex:1;min-width:0;justify-content:center;gap:7px;padding:0}
 .compact-match-header .team{font-size:10px;gap:2px}
 .compact-match-header .team-crest{width:18px;height:18px;margin:0}
 .compact-match-header .score{font-size:25px}
 .compact-match-header .clock{font-size:14px;min-width:39px;padding:5px 4px}
 .compact-match-header #pause{width:34px;height:34px;min-height:34px;padding:7px}
 .compact-match-header .header-right{flex:none;gap:6px}
 .compact-match-header .header-right .bfc-button{width:34px;height:34px;min-height:34px;padding:7px}
 .compact-match-header .header-right .button-label{display:none}
 .compact-match-header .header-right .button-icon{width:19px;height:19px}
}
@media(any-pointer:coarse) and (max-width:600px){.compact-match-header .bfc-brand{display:none}.immersive header.compact-match-header{padding:4px 6px;gap:5px}.compact-match-header .board{gap:5px}.compact-match-header .team{font-size:9px}.compact-match-header .header-right{gap:4px}.compact-match-header .team-crest{width:16px;height:16px}.compact-match-header .match-top{gap:4px}}
@media(any-pointer:coarse) and (max-width:360px){.compact-match-header .team{font-size:8px}.compact-match-header .board{gap:4px}.compact-match-header .score{font-size:22px}.compact-match-header .clock{font-size:12px;min-width:34px}.compact-match-header .header-right .bfc-button,.compact-match-header #pause{width:30px;height:32px;min-height:32px;padding:6px}}
/* Place the opening card inside the visible pitch of the cover-sized image. */
.overlay.ready-screen{inset:var(--opening-top,25vh) auto auto var(--opening-left,12px)!important;width:var(--opening-width,calc(100vw - 24px));height:var(--opening-height,45vh);padding:12px!important}
.ready-screen .screen-content{width:min(420px,calc(var(--opening-width,100vw) - 32px));max-width:100%}
.ready-screen .panel{width:100%!important}
@media(orientation:portrait){.ready-screen .screen-content{width:min(330px,calc(var(--opening-width,100vw) - 32px))}.ready-screen .panel{padding:14px!important}.ready-screen .panel h1{font-size:32px!important}.ready-screen .panel .eyebrow{font-size:10px;letter-spacing:1px}.ready-screen .panel p{font-size:12px;line-height:1.35;margin:10px auto}.ready-screen .panel .bfc-button{min-width:175px}}
/* Mobile movement control enlarged by 30%, including its thumb. */
@media(any-pointer:coarse){.mobile .joystick{width:140.4px;height:140.4px}.mobile .stick{width:65px;height:65px}}
@media(any-pointer:coarse) and (max-width:600px){.mobile .joystick{width:124.8px;height:124.8px}.mobile .stick{width:59.8px;height:59.8px}}
@media(any-pointer:coarse) and (max-width:360px){.mobile .joystick{width:117px;height:117px}}
@media(any-pointer:coarse) and (orientation:landscape) and (max-height:550px){.mobile .joystick{width:98.8px;height:98.8px}.mobile .stick{width:49.4px;height:49.4px}}
@media(any-pointer:coarse) and (max-width:360px) and (orientation:portrait){.mobile{padding-left:0;padding-right:0;gap:4px}.mobile-actions{gap:4px}}

/* Shared tournament leaderboard sits below the opening pitch menu. */
.leaderboard{display:none;position:fixed;z-index:21;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(480px,calc(100vw - 24px));height:min(180px,26vh);padding:9px 12px;border:1px solid #497349;border-radius:12px;background:#09271df5;color:#dcead9;box-shadow:0 5px 24px #0006;font-size:11px;flex-direction:column;text-align:left}
body:has(main[data-phase="ready"]) .leaderboard{display:flex}
.leaderboard-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#beef43;font-size:12px;flex:none}.leaderboard-heading button{background:#204532;color:white;border:1px solid #497349;border-radius:6px;font-size:17px;width:25px;height:24px;padding:0;cursor:pointer}.score-help{font-size:10px;line-height:1.25;margin:4px 0;flex:none;color:#b8d0bd}.ranking-scroll{overflow:auto;min-height:0;flex:1}.leaderboard table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.leaderboard th{position:sticky;top:0;background:#123b29;color:#a6c796}.leaderboard td,.leaderboard th{padding:4px 5px;text-align:right;border-bottom:1px solid #ffffff13}.leaderboard td:nth-child(2),.leaderboard th:nth-child(2){text-align:left;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard td:last-child{font-weight:800;color:#beef43}.leaderboard #rankStatus{font-size:9px;color:#a6c796;margin:4px 0 0;flex:none}
#saveScore[hidden]{display:none}#saveScore{margin:12px 0 0;padding:10px;border-radius:10px;background:#153e2b}#tournamentScore{color:#beef43;font-size:16px}.score-entry{display:flex;gap:6px;margin-top:8px}.score-entry input{min-width:0;flex:1;border:1px solid #729b62;border-radius:7px;padding:8px;color:white;background:#09271d;font:inherit;font-size:14px}.score-entry button{padding:8px 12px;border:0;border-radius:7px;background:#beef43;color:#143322;font-weight:800}.score-entry button:disabled{opacity:.6}.overlay .panel #saveStatus{font-size:11px;margin:6px 0 0;line-height:1.3}
@media(max-height:550px){.leaderboard{height:25vh;padding:5px 9px;bottom:4px}.leaderboard-heading{font-size:10px}.score-help{font-size:8px;margin:2px 0}.leaderboard td,.leaderboard th{padding:2px 4px;font-size:9px}.leaderboard #rankStatus{display:none}}

.club-player{display:none}.ready-screen .panel .club-player{display:block;font-size:11px;line-height:1.3;color:#beef43;margin:8px 0 0}.score-entry a{display:block;margin:auto;color:#beef43;font-size:12px}.score-entry [hidden]{display:none!important}

/* Keep the opening card within the visible pitch at every viewport size. */
.overlay.ready-screen{right:auto!important;bottom:auto!important;padding:0!important;border-radius:14px;overflow:hidden!important}
.ready-screen .screen-content{width:100%!important;max-width:100%!important;height:100%;min-height:0;display:grid;place-items:center;transform:none!important}
.overlay.ready-screen .panel{width:100%!important;height:100%;max-height:100%!important;min-height:0;overflow:auto!important;overscroll-behavior:contain;padding:clamp(10px,2vh,20px)!important;display:flex;flex-direction:column;align-items:center;justify-content:safe center;border-radius:14px}
.overlay.ready-screen .panel>*{flex-shrink:0}
.overlay.ready-screen .panel h1{font-size:clamp(24px,4.5vh,40px)!important;margin:5px 0!important}
.overlay.ready-screen .panel p{margin:6px auto;font-size:clamp(11px,1.8vh,14px);line-height:1.3}
.overlay.ready-screen .panel .eyebrow{font-size:clamp(8px,1.5vh,11px);letter-spacing:1px}
.overlay.ready-screen .panel .bfc-button{flex-shrink:0;min-width:0;width:auto;max-width:100%;min-height:32px;padding:7px 12px;margin:6px auto 0!important;font-size:11px}

/* Embedded game: the host supplies branding and navigation. */
body>header{display:none!important}
#musicToggle{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:45;width:36px;height:36px;min-width:36px;min-height:36px;padding:8px;border-radius:10px;opacity:.85}
#musicToggle .button-label{display:none}
#musicToggle .button-icon{width:20px;height:20px}
.match-top{padding-right:44px}
/* Both opening sections share pitch bounds; neither floats over the other. */
.overlay.ready-screen{display:grid!important;grid-template-rows:minmax(0,1fr) minmax(92px,32%);gap:8px;align-items:stretch;justify-content:stretch;background:transparent}
.overlay.ready-screen .screen-content{grid-row:1;width:100%!important;height:100%;min-height:0;overflow:hidden}
.overlay.ready-screen .panel{justify-content:safe center;padding:10px!important}
.overlay.ready-screen .leaderboard{position:relative;inset:auto;left:auto;bottom:auto;transform:none;width:100%;max-width:100%;height:100%;min-height:0;margin:0;padding:7px 10px;grid-row:2;box-shadow:none;overflow:hidden}
.overlay.ready-screen .leaderboard-heading{font-size:11px}
.overlay.ready-screen .score-help{font-size:9px;margin:3px 0}
.overlay.ready-screen .leaderboard td,.overlay.ready-screen .leaderboard th{padding:3px;font-size:10px}
.overlay.ready-screen #rankStatus{font-size:8px;margin:2px 0 0}
.overlay.ready-screen .panel #message{max-width:54ch}
@media(orientation:portrait){.overlay.ready-screen{grid-template-rows:minmax(0,1fr) minmax(92px,30%);gap:6px}.overlay.ready-screen .panel h1{font-size:26px!important}.overlay.ready-screen .panel .eyebrow{font-size:8px}.overlay.ready-screen .panel p{font-size:11px;margin:4px auto}.overlay.ready-screen .panel .bfc-button{margin-top:5px!important;min-height:30px;padding:6px 10px;font-size:11px}}
@media(max-height:450px){.overlay.ready-screen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.overlay.ready-screen .leaderboard{grid-column:2;grid-row:1}.overlay.ready-screen .panel h1{font-size:22px!important}.overlay.ready-screen .panel p{font-size:10px}.overlay.ready-screen .panel .eyebrow{font-size:8px}.overlay.ready-screen .panel .bfc-button{min-height:26px;padding:4px 8px;margin-top:4px!important}}