@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Inter:wght@400;600&display=swap');
:root{color-scheme:dark;--lime:#c4ef64;--muted:#99aaa2;--line:#ffffff20}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 5%,#244c30,transparent 65%) #0b1913;color:#f4f7f1;font:14px Inter,Arial,sans-serif}em{color:var(--lime);font-style:normal}button{font:inherit;cursor:pointer;border:1px solid var(--line);color:inherit;background:#ffffff08;border-radius:9px;padding:11px 15px}button:hover{background:#ffffff20}button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}header{max-width:1000px;margin:auto;padding:22px;border-bottom:1px solid var(--line);font:800 26px 'Barlow Condensed',sans-serif;letter-spacing:1px}header button{float:right;font:12px Arial}main{max-width:870px;margin:auto;padding:35px 24px}small{color:var(--lime);font-size:10px;letter-spacing:3px}h1{font:800 clamp(42px,6vw,65px)/1 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:18px 0}p{color:var(--muted);line-height:1.8}.matchup{display:flex;align-items:center;justify-content:center;gap:45px;padding:20px;margin-top:-130px;margin-left:50%;min-height:160px}.matchup>div{text-align:center;min-width:80px}.matchup img{width:75px;height:75px;object-fit:contain;filter:drop-shadow(0 8px 12px #0006)}strong{display:block}.matchup strong{margin-top:12px;font-size:12px}.matchup b{color:#7b9284}.label{display:flex;align-items:center;justify-content:space-between;margin:38px 0 17px}h2{font:700 24px 'Barlow Condensed',sans-serif;letter-spacing:1px;margin:0}.label span{font-size:9px;color:var(--muted)}#teams{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.team{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:10px;min-height:103px;font-size:11px}.team img{width:43px;height:43px;object-fit:contain}.team.selected{border-color:var(--lime);background:#c4ef6415;color:var(--lime)}.startrow{display:flex;justify-content:space-between;align-items:center;margin:24px 0;gap:14px}.startrow p{font-size:12px}.startrow span{font-size:11px}.primary{background:var(--lime);color:#102014;border:0;font:800 23px 'Barlow Condensed',sans-serif;padding:16px 38px}.primary:hover{background:#d6ff7a}details{color:var(--muted);font-size:12px;line-height:1.8}summary{cursor:pointer}footer{border-top:1px solid var(--line);margin-top:25px;padding:20px 0;font-size:10px;letter-spacing:2px;color:var(--muted)}[hidden]{display:none!important}#game{max-width:460px;margin:auto}.toolbar{display:flex;gap:7px;align-items:center;margin-bottom:12px}.toolbar button{font-size:11px;padding:9px}.toolbar span{flex:1;color:var(--lime);font-size:9px}.arena{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 20px 80px #0006;border:1px solid #ffffff25;background:#153f26}.scoreboard{height:95px;background:#11291d;display:flex;align-items:center;justify-content:space-around;text-align:center;padding:10px;gap:8px}.scoreboard img{width:38px;height:38px;object-fit:contain}.scoreboard strong{font:700 39px 'Barlow Condensed',sans-serif;letter-spacing:3px;white-space:nowrap}.scoreboard span{display:block;color:var(--lime);font-size:12px;margin-top:3px}.scoreboard .clubname{color:#d8e2db;font-size:10px}.scoreboard>div{flex:1}canvas{display:block;width:100%;height:auto}.overlay{position:absolute;inset:95px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0b1a14ef;text-align:center;padding:20px}.overlay h2{font-size:38px}.overlay p{font-size:28px;margin:0;color:white}.overlay button{width:210px}#events{text-align:center;min-height:40px;padding:17px 5px;color:var(--lime);font-size:12px}.hint{text-align:center;color:var(--muted);font-size:10px}@media(max-width:650px){header{padding:17px;font-size:23px}main{padding:28px 16px 15px}h1{font-size:45px}.matchup{margin:15px 0 0;min-height:135px;gap:35px}.matchup img{width:60px;height:60px}.label{margin-top:25px}.label span{font-size:8px}#teams{grid-template-columns:repeat(3,1fr)}.team{min-height:95px}.startrow{align-items:stretch;flex-direction:column}.startrow p{margin:0}.primary{width:100%}.scoreboard{height:82px}.overlay{top:82px}}
/* One viewport for selection and match; retain the pitch's original proportions. */
html,body{height:100%;overflow:hidden}body{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}header{width:min(100%,1000px);flex:none;padding:12px 20px;height:60px}header button{padding:8px 12px}main{position:relative;flex:1;min-height:0;width:100%;max-width:1000px;padding:0;margin:8px auto;overflow:hidden}main>section{position:absolute;top:0;left:50%;width:calc(100% - 32px);transform:translateX(-50%) scale(var(--fit,1));transform-origin:top center;margin:0!important}#menu{max-width:850px;display:grid;grid-template-columns:1.1fr 1fr;column-gap:25px;row-gap:12px}.intro{align-self:center}.intro h1{font-size:44px;margin:10px 0;line-height:1}.intro small{letter-spacing:1px;font-size:11px}.intro p{font-size:11px;margin:8px 0}.matchup{position:relative;margin:0;min-height:155px;padding:34px 12px 15px;gap:20px;align-self:stretch;border:3px solid #435347;border-radius:14px;box-shadow:inset 0 0 0 4px #0a100d,inset 0 0 30px #000,0 8px 25px #0004;background:radial-gradient(circle,#c4ef6426 1px,transparent 1.5px) 0 0/5px 5px,linear-gradient(#10231a,#050c08)}.matchup:after{content:'';position:absolute;inset:6px;pointer-events:none;border:1px solid #c4ef6425;border-radius:7px}.board-label{position:absolute;top:12px;left:0;width:100%;text-align:center;font-size:8px;color:#acc18b;letter-spacing:2px}.matchup>div{min-width:0;flex:1}.matchup img{width:65px;height:65px}.matchup strong{font-size:11px;margin-top:9px}.matchup b{font:700 27px 'Barlow Condensed',monospace;color:var(--lime);text-shadow:0 0 12px #c4ef6460}.matchup b span{display:block;font:10px monospace;white-space:nowrap;letter-spacing:1px;margin-top:9px;color:#a7c483}.label,#teams,.startrow,details,footer{grid-column:1/-1}.label{margin:4px 0 0}#teams{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.team{min-height:72px;padding:6px 3px;gap:5px;font-size:10px}.team img{width:38px;height:38px}.team strong{font-weight:600;max-width:100%}.startrow{margin:0;flex-direction:row;align-items:center}.startrow p{margin:0;line-height:1.6}.primary{font-size:21px;padding:12px 30px;width:auto}details{position:relative;font-size:10px}details[open]{border:1px solid var(--line);border-radius:8px;padding:8px}details p{margin:5px 0}footer{margin:0;padding:8px 0;font-size:13px;text-align:center;letter-spacing:1px}#game{max-width:460px}.toolbar{margin-bottom:8px}.scoreboard{height:82px}.overlay{top:82px}#events{min-height:30px;padding:10px 0;font-size:11px}.hint{margin:3px 0 0;font-size:10px}#game:fullscreen{position:fixed;inset:0;width:100%;height:100%;max-width:none;background:#0b1913;transform:none;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}#game:fullscreen .toolbar{width:min(100%,460px);flex:none}#game:fullscreen .arena{width:min(460px,calc((100dvh - 115px)*420/632));flex:none}#game:fullscreen #events{flex:none}#game:fullscreen .overlay h2{font-size:clamp(19px,5vh,38px)}
@media(max-width:650px){header{height:51px;padding:9px 14px;font-size:22px}main{margin:6px auto}main>section{width:calc(100% - 20px)}#menu{column-gap:10px;row-gap:9px;grid-template-columns:1fr}.intro h1{font-size:31px;margin:7px 0}.intro small{font-size:10px;letter-spacing:.3px}.intro p{font-size:10px;margin:4px 0}.matchup{min-height:99px;padding:25px 12px 8px;gap:25px}.board-label{top:8px;font-size:7px}.matchup img{width:45px;height:45px}.matchup strong{font-size:10px;margin-top:3px}.matchup b{font-size:23px}.matchup b span{margin-top:2px;font-size:9px}.label h2{font-size:20px}.label span{font-size:8px}#teams{gap:5px}.team{min-height:66px;padding:5px 2px;font-size:8px;gap:4px;border-radius:7px}.team img{width:32px;height:32px}.team strong{line-height:1.15}.startrow{gap:8px}.startrow p{font-size:9px}.startrow span{font-size:8px}.startrow .primary{font-size:18px;padding:11px 15px;white-space:nowrap}footer{font-size:12px;padding:6px 0}details{font-size:9px}}
@media(max-height:480px) and (min-width:550px){#menu{max-width:850px;grid-template-columns:1.1fr 1fr}.intro h1{font-size:35px}.matchup{min-height:115px}.team{min-height:64px}.team img{width:30px;height:30px}}
.visit-counter{grid-column:1/-1;font-size:10px;color:var(--muted);text-align:center;letter-spacing:1px}.visit-counter strong{display:inline;color:var(--lime);font-size:17px}.recent{grid-column:1/-1;border:1px solid var(--line);border-radius:8px;padding:9px 12px}.recent-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.recent-heading h2{font-size:18px}.recent-heading>span{font-size:9px;color:var(--muted)}.recent-results{max-height:115px;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:1fr 1fr;gap:0 18px;scrollbar-width:thin}.recent-results p{grid-column:1/-1;margin:6px 0;font-size:11px}.recent-item{padding:7px 0;min-width:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:2px 6px;font-size:9px}.recent-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--lime);font-size:10px}.recent-item span{grid-column:1/-1;grid-row:2;color:#e6ede7}.recent-item time{font-size:8px;color:var(--muted)}.overlay{gap:11px;padding:15px}.overlay h2{font-size:29px}.overlay>p{font-size:27px}#result-form{width:min(100%,330px);text-align:left}#result-form label{display:block;font-size:12px;margin-bottom:5px;color:white}.name-row{display:flex;gap:6px}.name-row input{flex:1;min-width:0;border:1px solid #c4ef6444;border-radius:7px;background:#ffffff0a;color:white;padding:10px;font:12px Arial}.overlay .name-row button{width:auto;font-size:11px;padding:8px 12px}#result-form small{display:block;margin-top:5px;font-size:9px;letter-spacing:0;color:var(--muted)}#save-status{font-size:10px;min-height:13px;color:var(--lime)}.share-box{border-top:1px solid var(--line);padding-top:9px;width:100%;max-width:330px}.share-box>span{font-size:9px;letter-spacing:2px;color:var(--muted)}.share-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}.overlay .share-buttons button{width:100%;font-size:11px;padding:9px 6px}.share-box small{display:block;letter-spacing:0;line-height:1.4;font-size:9px;color:var(--muted)}.overlay>#again{font-size:19px;padding:10px}.overlay>#choose{padding:8px;font-size:11px}button:disabled{opacity:.55;cursor:default}@media(max-width:650px){#menu{row-gap:6px}.intro h1{font-size:28px}.matchup{min-height:88px}.matchup img{width:38px;height:38px}.team{min-height:58px}.team img{width:28px;height:28px}.recent{padding:6px 8px}.recent-results{max-height:95px;gap:0 10px}.recent-item{font-size:8px}.recent-item strong{font-size:9px}.recent-item time{font-size:7px}.recent-heading h2{font-size:16px}.visit-counter strong{font-size:15px}.overlay{gap:9px}}
.overlay{gap:7px}.overlay h2{font-size:26px}.overlay>p{line-height:1.3}.share-box{padding-top:6px}.share-buttons{margin:6px 0;gap:5px}.overlay .share-buttons button{padding:8px 5px}.overlay>#again{padding:9px}.overlay small{letter-spacing:1px}.overlay #result-form small,.overlay #share-status{letter-spacing:0}
.board-stack{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:6px;min-width:0}.board-stack .matchup{flex:1}.board-stack .visit-counter{flex:none;margin:0;padding:7px 12px;border:3px solid #435347;border-radius:9px;box-shadow:inset 0 0 0 2px #0a100d,inset 0 0 16px #000,0 5px 14px #0003;background:radial-gradient(circle,#c4ef6426 1px,transparent 1.5px) 0 0/5px 5px,#08150d;text-align:center;color:#c2d0bb;font-size:10px;letter-spacing:.5px}.board-stack .visit-counter strong{font:700 17px monospace;text-shadow:0 0 8px #c4ef6450}.toolbar .status-pill{flex:1;display:flex;justify-content:center;align-items:center;gap:6px;min-height:33px;padding:7px 8px;border:1px solid #70cd7050;border-radius:8px;background:#183b2690;color:#bcec98;font-size:8px;letter-spacing:.3px;white-space:nowrap}.status-pill:before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:#79ec67;box-shadow:0 0 7px #79ec6790;animation:statusBlink 1.2s ease-in-out infinite}.toolbar .status-pill[data-state=paused],.toolbar .status-pill[data-state=ended]{border-color:#f1cc6350;color:#f1cc63;background:#55441660}.status-pill[data-state=paused]:before,.status-pill[data-state=ended]:before{background:#f1cc63;box-shadow:0 0 7px #f1cc6380}@keyframes statusBlink{0%,100%{opacity:1}50%{opacity:.3}}@media(prefers-reduced-motion:reduce){.status-pill:before{animation:none}}.goal-history{border-top:1px solid var(--line);padding:6px 0}.goal-history>span{font-size:9px;letter-spacing:2px;color:var(--muted)}#goal-log{list-style:none;padding:0;margin:5px 0 0;max-height:76px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}#goal-log li{font-size:11px;padding:5px 8px;border-bottom:1px solid #ffffff0a;text-align:left}.home-goal{color:var(--lime)}.away-goal{color:#f1cc93}.empty-goals{color:var(--muted)}#game:fullscreen .arena{width:min(460px,calc((100dvh - 210px)*420/632))}#game:fullscreen .goal-history{width:min(100%,460px);flex:none}#game:fullscreen #goal-log{max-height:60px}@media(max-width:650px){.board-stack{grid-column:1;grid-row:auto;gap:4px}.board-stack .visit-counter{padding:5px 8px;font-size:9px}.board-stack .visit-counter strong{font-size:15px}.toolbar{gap:5px}.toolbar button{padding:9px 7px}.toolbar .status-pill{font-size:7px;padding:7px 5px;gap:4px}.hint{font-size:9px}}
body[data-view=game] main{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}#game{transform:translateX(-50%);padding-bottom:12px}#goal-log,#game:fullscreen #goal-log{max-height:none;overflow:visible}#goal-log li{white-space:normal}#game:fullscreen{display:block;overflow-x:hidden;overflow-y:auto;padding:10px}#game:fullscreen .toolbar,#game:fullscreen #events,#game:fullscreen .goal-history,#game:fullscreen .hint{width:min(100%,460px);margin-left:auto;margin-right:auto}#game:fullscreen .arena{width:min(460px,calc((100dvh - 125px)*420/634));margin:0 auto}#fixture-note{line-height:1.5}
#game:fullscreen{width:100%!important}
.match-layer{position:absolute;inset:82px 0 0;display:flex;align-items:center;justify-content:center;padding:18px;z-index:3;background:radial-gradient(ellipse at center,#0c32218f,#06130de8);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.goal-layer{pointer-events:none}.highlight-card{--accent:#c4ef64;width:100%;padding:19px 16px 22px;text-align:center;border:1px solid #c4ef6445;border-radius:20px;background:radial-gradient(ellipse at 50% 0%,#91e77c20,transparent 65%),linear-gradient(155deg,#1b3527ed,#09170ff5);box-shadow:0 20px 65px #0008,inset 0 1px #ffffff12;position:relative;overflow:hidden;animation:highlightEnter .28s ease-out}.highlight-card:before{content:'';position:absolute;inset:0;opacity:.15;background:repeating-linear-gradient(135deg,transparent 0 22px,#c4ef6422 23px 24px);pointer-events:none}.highlight-top{position:relative;display:flex;justify-content:space-between;gap:5px;color:var(--accent);font:600 8px Inter,Arial,sans-serif;letter-spacing:1.5px}.live-mark{color:#a9bdae;font-size:7px;letter-spacing:.5px}.goal-emblem{position:relative;display:grid;place-items:center;width:56px;height:56px;border:1px solid #c4ef6435;border-radius:50%;margin:20px auto 10px;font-size:30px;background:#c4ef6412;box-shadow:0 0 35px #c4ef6418}.highlight-card h2{position:relative;margin:5px 0 13px;color:var(--accent);font:800 clamp(32px,8vw,60px)/1.02 Inter,Arial,sans-serif;letter-spacing:-2px;font-style:italic;text-shadow:0 0 30px #c4ef6420}.highlight-card p{position:relative;color:#f7faf3;font:600 14px/1.6 Inter,Arial,sans-serif;margin:0;overflow-wrap:anywhere}.highlight-score{position:relative;display:inline-block;border:1px solid #ffffff20;border-radius:9px;background:#ffffff08;padding:7px 18px;margin-top:17px;color:white;font:700 25px/1 monospace;letter-spacing:5px}.highlight-line{height:2px;width:60px;background:var(--accent);box-shadow:0 0 16px var(--accent);margin:19px auto 0}.goal-layer[data-side=away] .highlight-card{--accent:#f4cf84;border-color:#f4cf8440;background:radial-gradient(ellipse at 50% 0%,#f4cf8418,transparent 65%),linear-gradient(155deg,#332c20ed,#14140ef5)}.goal-layer[data-side=away] h2{font-size:clamp(23px,5.5vw,34px);letter-spacing:-1px;line-height:1.15}.pause-layer{z-index:4;background:radial-gradient(ellipse at top,#49675055,#07130eeb)}.pause-card{text-align:center;width:100%;padding:30px 16px;border:1px solid #ffffff20;border-radius:22px;background:linear-gradient(145deg,#23382dd9,#0a1710f0);box-shadow:0 20px 65px #0007}.pause-emblem{display:grid;place-items:center;width:70px;height:70px;border:1px solid #c4ef6440;border-radius:22px;background:#c4ef6410;color:var(--lime);margin:0 auto 20px;box-shadow:0 0 40px #c4ef6410}.pause-card small{font:600 8px Inter,Arial,sans-serif;letter-spacing:2px;color:var(--lime)}.pause-card h2{font:700 32px/1.15 Inter,Arial,sans-serif;letter-spacing:-1px;margin:11px 0}.pause-card p{font-size:12px;line-height:1.7;margin:0 0 22px;color:#b5c8b8}.pause-card button{font:700 11px Inter,Arial,sans-serif;letter-spacing:.7px;padding:14px 20px;border-radius:10px}.arena>.overlay{z-index:5}#events{position:relative;margin:9px 0 8px;padding:11px 10px 11px 28px;text-align:left;border:1px solid #c4ef6422;border-radius:9px;background:linear-gradient(100deg,#c4ef640c,transparent);color:#d6e3d5;font:500 10px/1.6 Inter,Arial,sans-serif;min-height:48px}#events:before{content:'';position:absolute;left:12px;top:19px;width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px #c4ef6460}@keyframes highlightEnter{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.highlight-card{animation:none}}@media(max-width:400px){.match-layer{padding:12px}.highlight-card{padding:14px 10px}.highlight-top{font-size:7px;letter-spacing:1px}.live-mark{font-size:6px}.highlight-card p{font-size:12px}.goal-emblem{margin-top:15px}.pause-card h2{font-size:27px}}