:root{color-scheme:dark;--bg:#090d11;--panel:#131a20;--text:#f4f7f6;--muted:#97a6af;--line:#28333c;--lime:#c9ff3d;--red:#ff8190}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#1a2930 0,transparent 65%),var(--bg);color:var(--text);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--lime);outline-offset:4px}[hidden]{display:none!important}.shell{max-width:1100px;margin:auto;padding:0 32px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 0;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;letter-spacing:-.6px;text-decoration:none}.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:2.3px;color:var(--muted);margin-top:2px}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--lime);color:var(--bg);letter-spacing:0;font-size:23px}.scores{display:flex;gap:28px;text-align:center}.scores span{display:block;font-size:12px;color:var(--muted)}.scores strong{font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}.intro{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:26px 0 20px}.intro h1{font-size:25px;letter-spacing:-.8px;margin:0;font-weight:750}.intro p{margin:0;color:var(--muted);font-size:14px}.matchup{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px}.player-card{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:18px;overflow:hidden;transition:border-color .2s,transform .3s}.portrait{height:340px;position:relative;overflow:hidden;background:linear-gradient(140deg,#26343c,#141d24)}.portrait img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 22%;opacity:0;transition:opacity .3s}.portrait img.ready{opacity:.88}.portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0003,transparent 20%,#0c111830 40%,#0c1118f5 100%)}.initials{position:absolute;inset:0;display:grid;place-items:center;font-size:100px;font-weight:800;color:#879ba233;letter-spacing:-6px}.card-label{position:absolute;z-index:1;top:16px;left:16px;background:#0b1118b8;padding:6px 10px;border-radius:6px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#d9e4e6}.challenger .card-label{color:var(--lime)}.player-info{position:absolute;left:24px;right:24px;bottom:20px;z-index:1}.player-info h2{font-size:clamp(25px,4vw,42px);line-height:1.05;letter-spacing:-1px;margin:0 0 8px;text-wrap:balance}.player-info p{font-size:13px;margin:0;color:#b3c2c9}.goal-stat{display:flex;justify-content:center;align-items:baseline;gap:10px;padding:14px 12px 20px;border-top:1px solid var(--line)}.goal-stat strong{font-size:68px;font-weight:800;line-height:1.1;letter-spacing:-3px;font-variant-numeric:tabular-nums}.goal-stat span{font-size:13px;color:var(--muted)}.challenger .goal-stat strong{color:var(--lime)}.versus{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3;border:1px solid var(--line);border-radius:50%;background:var(--bg);width:46px;height:46px;display:grid;place-items:center;font-size:13px;font-style:italic}.photo-credit{display:block;text-align:center;font-size:11px;color:var(--muted);padding:0 8px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.decision{max-width:650px;margin:22px auto 0;text-align:center}.decision p{font-size:16px;margin:0 0 14px}.choices{display:flex;gap:12px}.choice{position:relative;width:50%;min-height:56px;padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;border:1px solid #536747;background:#18241c;color:var(--text);font-weight:700;font-size:17px;transition:background .15s,transform .15s}.choice>span:first-child{font-size:24px;line-height:1;color:var(--lime)}.choice:hover:not(:disabled){background:#2b3d27;border-color:var(--lime)}.choice:active:not(:disabled){transform:scale(.98)}.choice:disabled{cursor:default;opacity:.55}.key-hint{position:absolute;right:14px;font-size:11px;border:1px solid #475744;border-radius:4px;padding:0 4px;color:var(--muted)}.round-status{min-height:28px;margin-top:12px;font-size:14px;color:var(--muted)}.round-status.good{color:var(--lime)}.round-status.bad{color:var(--red)}.player-card.correct{border-color:var(--lime)}.player-card.incorrect{border-color:var(--red)}.player-card.incorrect .goal-stat strong{color:var(--red)}footer{margin-top:26px;padding:20px 0 max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:12px}.text-button{border:0;padding:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:4px;font-size:12px}.load-state{text-align:center;margin:70px 0;color:var(--muted)}dialog{max-width:460px;width:calc(100% - 32px);max-height:90dvh;border:1px solid #38434c;border-radius:22px;padding:0;background:#141b22;color:var(--text);box-shadow:0 32px 90px #0009}dialog::backdrop{background:#03080bd9;backdrop-filter:blur(10px)}.dialog-inner{padding:30px;text-align:center;position:relative}.dialog-inner h2{margin:0;font-size:30px;line-height:1.1;letter-spacing:-1px}.eyebrow{text-transform:uppercase;letter-spacing:2px;color:var(--lime);font-size:12px;margin:0 0 10px}.result-number{font-size:100px;font-weight:850;letter-spacing:-5px;line-height:1.15;color:var(--lime);margin-top:12px}.dialog-inner>p:not(.eyebrow){color:#b5c2c9}.answer{border-block:1px solid var(--line);padding:18px 0;margin:20px 0;font-size:15px}.primary,.secondary{width:100%;min-height:50px;border-radius:11px;padding:12px 18px;font-weight:750}.primary{border:0;background:var(--lime);color:#14200c}.primary span{float:right}.secondary{margin-top:10px;background:transparent;border:1px solid var(--line);color:var(--text)}.quiet{font-size:12px;min-height:18px}.close{position:absolute;right:14px;top:10px;width:38px;height:38px;border:0;background:none;color:var(--muted);font-size:28px}.info{text-align:left}.info h3{font-size:17px;margin:26px 0 8px}.info p{font-size:14px}.info a{color:var(--lime);font-size:14px}
@media(max-width:680px){.shell{padding:0 16px}header{padding:18px 0}.brand{font-size:16px;gap:9px}.brand small{font-size:8px;letter-spacing:1.5px}.brand-icon{width:34px;height:34px;border-radius:9px;font-size:20px}.scores{gap:16px}.scores strong{font-size:22px}.scores span{font-size:11px}.intro{display:block;margin:21px 0 16px}.intro h1{font-size:23px}.intro p{font-size:13px;margin-top:3px}.matchup{gap:10px}.player-card{border-radius:13px}.portrait{height:260px}.initials{font-size:60px;letter-spacing:-3px}.player-info{left:12px;right:10px;bottom:14px}.player-info h2{font-size:clamp(20px,5.6vw,28px);letter-spacing:-.6px;line-height:1.08}.player-info p{font-size:12px}.card-label{font-size:9px;letter-spacing:.8px;left:10px;top:10px;padding:4px 7px}.goal-stat{padding:10px 5px 12px;gap:7px}.goal-stat strong{font-size:50px;letter-spacing:-2px}.goal-stat span{font-size:11px}.versus{width:32px;height:32px;font-size:11px;top:42%}.photo-credit{font-size:12px;padding-bottom:7px}.decision{margin-top:18px}.decision p{font-size:14px;line-height:1.4}.choice{min-height:54px;font-size:16px}.key-hint{display:none}.round-status{font-size:12px}.choices{gap:10px}footer{margin-top:16px;font-size:11px;padding-top:15px}.text-button{font-size:11px}.dialog-inner{padding:26px}}
@media(max-width:360px){.brand small{letter-spacing:.9px}.brand-icon{display:none}.portrait{height:235px}.player-info h2{font-size:20px}.player-info p{font-size:12px}.scores{gap:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Reserve credit space so a late photograph does not move the controls. */
.player-card{padding-bottom:24px}.photo-credit{position:absolute;left:0;right:0;bottom:5px;padding:0 8px;font-size:12px;line-height:16px}
.photo-credit{position:absolute;right:9px;left:auto;bottom:7px;width:24px;height:24px;padding:0;border:1px solid #ffffff38;border-radius:50%;background:#0b111899;color:#d9e4e6;font-size:14px;line-height:22px;text-align:center;text-decoration:none;opacity:.7;z-index:3}.photo-credit:hover,.photo-credit:focus-visible{opacity:1;color:var(--lime);border-color:var(--lime)}

/* One local, clearly generic illustration stays behind real photographs. */
.portrait{background-image:url("/photos/generic-footballer.png");background-size:cover;background-position:50% 22%;background-repeat:no-repeat}.portrait img.ready{opacity:1}.initials{display:none}.fallback-note{position:absolute;z-index:1;top:54px;left:16px;font-size:12px;line-height:1.3;color:#c2cdd3;background:#0b1118b8;padding:4px 7px;border-radius:4px}@media(max-width:680px){.fallback-note{top:42px;left:10px;font-size:12px;max-width:calc(100% - 20px)}}

/* One compact clock keeps timed play visible without shifting the cards. */
.round-clock{display:flex;align-items:center;justify-content:center;gap:5px;margin:-2px auto 14px;color:var(--lime);font-variant-numeric:tabular-nums;font-weight:750}.round-clock #timeLeft{font-size:21px;line-height:1}.clock-unit{font-size:13px;color:var(--muted);font-weight:500}.clock-track{height:5px;width:min(42%,180px);margin-left:12px;border-radius:99px;background:#354148;overflow:hidden}.clock-fill{height:100%;width:100%;border-radius:inherit;background:var(--lime);transition:width .1s linear}.round-clock.urgent{color:var(--red)}.round-clock.urgent .clock-fill{background:var(--red)}.round-clock.waiting{color:var(--muted)}.round-clock.waiting .clock-fill{background:#64757d}
