:root{color-scheme:dark;--bg:#081512;--panel:#10231e;--line:#ffffff18;--muted:#94afa4;--lime:#caff5b;--text:#f3f8ef}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:16px}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button:disabled{opacity:.4;cursor:not-allowed}a{color:inherit;text-decoration:none}.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;gap:16px}.brand{font-size:27px;font-weight:900;letter-spacing:-1.5px}.brand span{display:block;font-size:8px;letter-spacing:1.5px;margin-top:3px;color:var(--muted)}.edition{letter-spacing:2px;font-size:12px;font-weight:700}.edition b{color:var(--lime);font-size:18px;margin-left:8px}.icon-btn,.ghost{background:transparent;border:1px solid #ffffff30;border-radius:6px;padding:11px 15px;font-size:12px;font-weight:700;letter-spacing:1px}.icon-btn:hover,.ghost:hover{background:#ffffff10}.shell{max-width:1440px;margin:auto;padding:40px 4vw}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--lime);text-transform:uppercase}.condensed,h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase}h1{font-size:clamp(54px,6.7vw,100px);line-height:.93;letter-spacing:-1px;margin:18px 0 22px}h1 em{color:var(--lime);font-style:normal}h2{font-size:40px;line-height:1;margin:10px 0 18px}h3{font-size:24px;margin:0}.muted{color:var(--muted);line-height:1.7}.select-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px}.intro{position:relative}.stadium-card{height:260px;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line);margin-top:26px}.stadium-card canvas{width:100%;height:100%}.stadium-label{position:absolute;bottom:18px;left:20px;font-size:12px;letter-spacing:2px}.format{display:flex;gap:26px;margin:26px 0}.format strong{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:32px;color:var(--text)}.format span{font-size:11px;letter-spacing:1px;color:var(--muted)}.select-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.select-header h2{font-size:28px;margin:0}.tag{border:1px solid var(--line);color:var(--muted);padding:5px 8px;border-radius:4px;font-size:11px;letter-spacing:1px}#search{width:100%;background:#ffffff05;border:1px solid var(--line);border-radius:6px;padding:13px 16px;color:var(--text);margin-bottom:16px}.teams{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:368px;overflow-y:auto;padding:3px 7px 6px 3px;scrollbar-color:#385647 transparent;scrollbar-width:thin}.team{border:1px solid var(--line);border-radius:7px;background:#10231e;padding:13px 9px;text-align:left;min-height:75px;transition:.16s}.team:hover{border-color:#9bd447;background:#1a3329}.team.selected{background:var(--lime);color:#10200b;border-color:var(--lime)}.flag{font-size:25px;line-height:1}.team .flag{display:block;margin-bottom:8px}.team-name{font-size:12px;font-weight:700}.selected-bar{border-top:1px solid var(--line);margin-top:18px;padding-top:20px;display:flex;align-items:center;gap:14px}.selected-bar .info{flex:1}.selected-bar strong{display:block}.selected-bar small{color:var(--muted);font-size:12px}.primary{background:var(--lime);color:#122008;border:0;border-radius:6px;padding:16px 22px;font-weight:800;font-size:14px;box-shadow:0 4px 24px #baff3420}.primary:hover{background:#deff9b}.note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:16px}.hub-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}.hub-header h1{font-size:56px;margin:8px 0}.hub-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}.panel{padding:26px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.match-card{position:relative;overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(ellipse at 50% 100%,#38624380,transparent 75%),#10231e}.match-teams{display:flex;align-items:center;justify-content:space-around;text-align:center;gap:15px;margin:25px 0}.match-teams .flag{font-size:52px;display:block;margin-bottom:12px}.match-teams strong{font-size:20px}.versus{color:var(--muted);font-family:'Barlow Condensed',Impact,sans-serif;font-size:30px}.match-card .primary{width:100%}table{width:100%;border-collapse:collapse;font-size:13px}th{color:var(--muted);font-size:11px;font-weight:500;letter-spacing:1px;padding:12px 5px;text-align:right}td{padding:13px 5px;text-align:right;border-top:1px solid var(--line)}th:first-child,td:first-child{text-align:left}tr.you{color:var(--lime)}td .flag{font-size:18px;margin-right:8px}.journey{display:flex;gap:4px;margin-top:26px}.journey div{flex:1;min-width:0}.journey i{display:block;height:3px;background:#ffffff20;margin-bottom:9px}.journey .done i,.journey .active i{background:var(--lime)}.journey span{font-size:10px;color:var(--muted)}.journey .active span{color:var(--lime)}.fixtures{margin-top:20px;display:grid;gap:10px}.fixture{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:12px 0;border-top:1px solid var(--line);gap:8px}.fixture b{white-space:nowrap;color:var(--lime)}.details{margin-top:20px}.details summary{cursor:pointer;font-size:13px;color:var(--muted)}.allgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}.allgroups .panel{padding:16px}.game-shell{max-width:1320px;margin:auto;padding:20px 3vw}.match-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.match-top .eyebrow{font-size:11px}.arena{position:relative;border-radius:12px;overflow:hidden;border:1px solid #41614a;background:#0a211c;touch-action:none;user-select:none}.arena canvas{display:block;width:100%;height:auto;aspect-ratio:16/10;touch-action:none}.scoreboard{position:absolute;z-index:2;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;background:#081512ed;border:1px solid #ffffff25;border-radius:8px;padding:12px 20px;gap:18px;min-width:360px;justify-content:center;pointer-events:none}.score-side{text-align:center;min-width:86px;font-weight:700;font-size:12px}.score-side .flag{font-size:22px;margin-right:6px}.score-number{font-family:'Barlow Condensed',Impact,sans-serif;font-size:38px;white-space:nowrap;font-weight:800}.dots{display:flex;gap:5px;justify-content:center;margin-top:9px}.dots i{width:7px;height:7px;border:1px solid #789083;border-radius:50%}.dots i.goal{background:var(--lime);border-color:var(--lime)}.dots i.miss{background:#ff816f;border-color:#ff816f}.game-caption{position:absolute;bottom:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:end;gap:12px;pointer-events:none}.phase-label{font-family:'Barlow Condensed',Impact,sans-serif;font-size:36px;font-weight:800;text-shadow:0 3px 10px #000}.phase-label small{display:block;font-family:Inter,Arial,sans-serif;font-size:11px;letter-spacing:2px;color:var(--lime);margin-bottom:6px}.power-box{width:160px;background:#07170ed9;padding:12px;border-radius:7px}.power-box span{font-size:10px;letter-spacing:1px;display:block;margin-bottom:8px}.power-track{height:5px;background:#ffffff24;overflow:hidden;border-radius:5px}.power-track i{display:block;height:100%;width:0;background:var(--lime)}.controls-row{display:flex;align-items:center;gap:18px;padding:17px 0}.instruction{flex:1}.instruction strong{display:block;font-size:14px;margin-bottom:5px}.instruction span{font-size:12px;color:var(--muted)}.action-button{min-width:230px;touch-action:none;user-select:none}.result-overlay{position:absolute;inset:0;z-index:5;background:#061611d9;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}.result-box{max-width:500px}.result-box h2{font-size:72px;color:var(--lime)}.result-box .big-score{font-family:'Barlow Condensed',Impact,sans-serif;font-size:64px}.result-box p{line-height:1.6;color:#b8cabd}.result-box .primary{margin-top:16px}.toast{position:absolute;left:50%;top:29%;transform:translateX(-50%);z-index:3;text-align:center;pointer-events:none;font-family:'Barlow Condensed',Impact,sans-serif;font-size:62px;font-weight:800;text-shadow:0 3px 25px #000;white-space:nowrap}.toast small{display:block;font:12px Inter,Arial,sans-serif;color:#fff;margin-top:4px}.empty{grid-column:1/-1;padding:30px;text-align:center;color:var(--muted)}.trophy{font-size:75px;margin-bottom:20px}.ending{max-width:800px;margin:20px auto;text-align:center}.ending h1{font-size:100px}.ending .fixtures{text-align:left}.ending .primary{margin:20px 8px}.kbd{border:1px solid var(--line);padding:3px 5px;border-radius:3px;font-size:11px}.resume{margin-bottom:22px;background:#caff5b0d;padding:16px;border:1px solid #caff5b30;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:15px}.resume span{font-size:13px}.finish-note{font-size:11px;color:var(--muted)}
@media(min-width:1500px){.arena canvas{max-height:720px}}@media(max-width:900px){.select-layout{gap:30px}.teams{grid-template-columns:repeat(2,1fr)}.hub-layout{grid-template-columns:1fr}.allgroups{grid-template-columns:repeat(2,1fr)}h1{font-size:70px}.format{gap:15px}.topbar{height:70px}.edition{font-size:10px;letter-spacing:1px}}@media(max-width:640px){.topbar{padding:0 18px;height:64px}.brand{font-size:23px}.brand span{display:none}.edition{font-size:9px;letter-spacing:.5px}.icon-btn{font-size:9px;padding:9px}.shell{padding:26px 18px}.select-layout{grid-template-columns:1fr;gap:24px}.intro h1{font-size:61px;margin:12px 0}.intro>.muted{font-size:13px;margin:0;max-width:330px}.stadium-card{display:none}.format{margin:18px 0 0;gap:24px}.format strong{font-size:26px}.format span{font-size:9px}.teams{grid-template-columns:repeat(3,1fr);max-height:276px}.team{min-height:65px;padding:10px}.team .flag{font-size:22px;margin-bottom:5px}.team-name{font-size:11px}.selected-bar{position:sticky;bottom:0;background:var(--bg);padding:14px 0;margin-top:12px;z-index:3}.selected-bar .primary{padding:15px;font-size:12px}.select-header h2{font-size:25px}.select-header .tag{font-size:9px}.note{font-size:11px}.hub-header{align-items:flex-start}.hub-header h1{font-size:40px}.hub-header .ghost{font-size:10px;padding:9px}.panel{padding:19px}.match-card{min-height:285px}.allgroups{grid-template-columns:1fr}.journey span{font-size:8px}.game-shell{padding:12px 10px}.arena{border-radius:8px}.arena canvas{aspect-ratio:3/4;object-fit:cover}.scoreboard{top:14px;min-width:280px;padding:9px 10px;gap:10px}.score-side{min-width:68px;font-size:10px}.score-number{font-size:31px}.score-side .flag{font-size:18px}.game-caption{bottom:15px;left:14px;right:14px}.phase-label{font-size:29px}.power-box{width:115px;padding:9px}.power-box span{font-size:9px}.controls-row{flex-direction:column;gap:12px;text-align:center;padding:14px 0}.action-button{width:100%;min-height:54px}.instruction span{font-size:11px}.toast{font-size:45px;top:28%}.result-box h2{font-size:52px}.ending h1{font-size:70px}.match-top .eyebrow{font-size:9px}.match-top .ghost{padding:8px;font-size:9px}.result-box .big-score{font-size:48px}}
/* Gameplay-only composition: maximise the pitch without changing menus. */
body:has(.game-shell){overflow:hidden;height:100dvh}
body:has(.game-shell) .topbar{height:44px;padding:0 max(14px,env(safe-area-inset-left));padding-top:env(safe-area-inset-top);box-sizing:content-box}
body:has(.game-shell) .brand{font-size:20px}body:has(.game-shell) .brand span{display:none}
.game-shell{width:min(100%,1440px);height:calc(100dvh - 44px - env(safe-area-inset-top));max-height:900px;padding:0;margin:0 auto;display:flex;flex-direction:column;min-height:0}
.match-top{height:36px;flex:none;margin:0;padding:0 12px}.match-top .ghost{padding:6px 9px;font-size:10px}.match-top .eyebrow{font-size:10px;letter-spacing:1px}
.arena{flex:1;min-height:120px;border:0;border-radius:0}.arena canvas{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:fill}
.scoreboard{top:10px;padding:5px 12px;min-width:220px;gap:12px;border-radius:5px;background:#0c222bcc;backdrop-filter:none}
.score-number{font-size:28px}.score-side{min-width:54px;font-size:11px}.score-side .flag{font-size:18px}.dots{margin-top:4px;gap:4px}.dots i{height:5px;width:5px}
.game-caption{bottom:12px;left:14px;right:14px}.phase-label{font-size:25px}.phase-label small{font-size:9px;margin-bottom:3px;letter-spacing:1px}.power-box{width:130px;padding:8px;background:#122d25b8}.power-box span{font-size:9px}
.controls-row{flex:none;height:68px;padding:8px 14px max(8px,env(safe-area-inset-bottom));flex-direction:row;gap:12px}.instruction strong{font-size:12px;margin:0}.instruction span{display:none}.action-button{min-width:190px;min-height:44px;padding:12px;font-size:12px}.finish-note{display:none}.toast{top:49%;font-size:42px}.toast small{font-size:11px}
@media(max-width:640px){.controls-row{height:70px}.action-button{width:52%;min-width:0;font-size:10px}.instruction{text-align:left}.instruction strong{font-size:11px}.edition{font-size:8px}.game-caption{bottom:9px}.scoreboard{top:8px}.phase-label{font-size:22px}}
@media(max-height:500px) and (orientation:landscape){body:has(.game-shell) .topbar{display:none}.game-shell{height:100dvh}.match-top{height:28px}.controls-row{height:48px}.scoreboard{left:12px;transform:none;min-width:175px}.score-number{font-size:20px}.game-caption{left:auto}.phase-label{display:none}}

.game-shell{max-width:1440px}

.controls-row{height:calc(68px + env(safe-area-inset-bottom));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
@media(max-width:640px){.controls-row{height:calc(70px + env(safe-area-inset-bottom))}}
@media(max-height:500px) and (orientation:landscape){.controls-row{height:calc(48px + env(safe-area-inset-bottom))}}