@font-face{font-family:'VT323 Fallback';src:local('Courier New'),local('Menlo'),local('Roboto Mono'),local('DejaVu Sans Mono');size-adjust:66.7%;ascent-override:120%;descent-override:30%;line-gap-override:0%}
:root{font-family:'VT323','VT323 Fallback',monospace;color:#e1e5e8;background:#111418;color-scheme:dark;--accent:#f29b53;--green:#92c96b;--col:344px;--amber:#ffa43a;--foot-gap:14px}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:#111418;overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #f2b56c;outline-offset:3px}
html[data-kbd="off"] :focus-visible{outline:none!important}
[hidden]{display:none!important}

#header-container{width:var(--col);max-width:calc(100% - 24px);height:62px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #555b63}
#header-container button{padding:0;background:none;border:0;font-size:46px;line-height:1;width:44px;height:48px;display:flex;align-items:center;justify-content:center}
#how-button{justify-content:flex-start!important}
#stats-button{justify-content:flex-end!important}
#title{font-weight:400;font-size:35px;line-height:60px;margin:0;letter-spacing:-.5px;color:#ef8f49;white-space:nowrap}
#title span{color:#85abc7}
#stats-button svg{width:32px;height:32px;fill:#d6dde3}

/* Replay label under the header */
#replay-bar{width:var(--col);max-width:calc(100% - 24px);margin:0 auto;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:22px;color:var(--amber);border-bottom:2px solid #3f474f}
#replay-bar a{color:#96bbd3;font-size:20px;display:flex;align-items:center;min-height:44px}
#game-container{display:flex;align-items:center;flex-direction:column;flex:1;padding-bottom:var(--foot-gap)}
#game-container>section{width:var(--col);max-width:calc(100vw - 24px);display:flex;flex-direction:column;align-items:stretch}

/* Scoreboard card: sport scene, pixel scoreboard with the sport's icon top left, position, hidden answer and unit */
#scoreboard{position:relative;width:100%;aspect-ratio:344/190;margin-top:14px;border-radius:10px;overflow:hidden;border:2px solid #555b63;background:#1c2229;box-shadow:0 1px 9px #000a}
#sb-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
#scoreboard::after{content:'';position:absolute;inset:0;background:linear-gradient(#0000 40%,#0007)}
#sb-board{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:72%;padding:5px 10px 6px;text-align:center;background:#0b0f13;border:3px solid #3b454f;box-shadow:0 0 0 2px #04070a,0 0 0 5px #1b2229,0 10px 16px #000a;transition:box-shadow .3s}
#sb-board.flash{box-shadow:0 0 0 2px #04070a,0 0 0 5px #ffd089,0 0 26px #ffb347aa,0 10px 16px #000a}
#sb-top{display:flex;justify-content:space-between;align-items:center;font-size:22px;line-height:1;color:var(--accent);border-bottom:2px solid #232b33;padding-bottom:3px}
#sb-icon{height:30px;width:auto;max-width:48px;object-fit:contain;image-rendering:pixelated}
#sb-answer{text-transform:uppercase;font-size:66px;line-height:.95;margin:6px 0 2px;color:var(--amber);text-shadow:0 0 10px #ff8a0066;letter-spacing:2px;transform-origin:50% 50%;perspective:300px;min-height:60px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
#sb-board.revealed #sb-answer{color:#8be06b;text-shadow:0 0 10px #4fbf3a66}
#sb-unit{font-size:17px;line-height:1;color:#7f8c97;letter-spacing:1px;min-height:17px}

#end-line{margin:12px 0 0;text-align:center;font-size:30px;line-height:1.05;font-weight:700;color:#fff6e6;text-shadow:0 2px 0 #000a,0 0 14px #ffa43a55}
/* Sport strips (the games picker) */
.strip{list-style:none;display:flex;gap:6px;margin:10px 0 0;padding:0;width:100%}
.strip li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:54px;border:2px solid #3f474f;border-radius:8px;background:#1b2128;font-size:18px;white-space:nowrap;overflow:hidden;line-height:1;color:#8b96a1}
.strip .sport-icon{width:24px;height:24px;image-rendering:pixelated}
.strip .pending .sport-icon{filter:grayscale(1) brightness(.65)}
.strip .missed .sport-icon{filter:grayscale(.55) brightness(.85)}
.strip .queued{border-color:#5d6872;color:#e1e5e8}
.strip .current{border-color:var(--accent);background:#272e36;color:#f1f1ec}
.strip .solved{border-color:#6fa05a;background:#26372a;color:#c8ecb2}
.strip .missed{border-color:#a45f5f;background:#382628;color:#f0bcbc}

/* Question */
#question-card{text-align:center;margin-top:14px}
#question{font-size:23px;line-height:1.08;margin:0;color:#f1f1ec}
#guess-count.missed{color:#f08a8a}
#guess-count{font-size:24px;line-height:28px;margin:12px 0 8px;text-align:center}
#guesses-container{width:100%}
#game-container>#question-view{flex:1 0 auto}
#guesses{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.guess-row{min-height:38px;border-radius:8px;border:1px solid #57606a;background:#353c44;box-shadow:inset 0 1px 4px #0007,0 1px 2px #0006;display:flex;align-items:center;justify-content:space-between;padding:3px 12px;font-size:24px}
.guess-row:not(:has(.guess-number)){background:#2c3238;border-color:#454c54}
.guess-row.close-guess{background:#695c34;color:#ffe598;border-color:#a58c45}
.guess-row.correct{background:#44613a;color:#e7ffd4;border-color:#84b86a}
.guess-row.far{background:#444b54}
.guess-row .direction{font-size:29px}
.guess-number{overflow-wrap:anywhere;font-size:24px}
#guess-form{display:flex;gap:5px;height:48px;scroll-margin-bottom:12px}
.input-box{display:flex;align-items:center;flex:2;border:2px solid #818b93;border-radius:8px;overflow:hidden;background:#282f37}
.input-box label{font-size:27px;line-height:44px;padding:0 8px;background:#89949e;color:#11151a}
.input-box input{border:0;background:none;padding:2px 8px;width:100%;min-width:0;height:100%;color:#eff3f5;font-size:24px;outline:none}
.input-box:focus-within{border-color:#f2b56c}
.input-box input::placeholder{color:#bdc5cc}
#guess-form>button{border:0;border-radius:7px;background:#3d454e;color:#f5a169;font-size:24px;flex:1;min-width:84px;padding:0 7px}
#guess-form>button:hover{background:#515b66}
#feedback{font-size:18px;text-align:center;min-height:26px;line-height:1.18;margin:10px 0 0;color:#b2bdc7}
#feedback:not(.error):has(#feedback-banter:empty){min-height:0;margin:0}
#feedback-status,#feedback-banter{display:block}
#feedback-status{color:#dce6ed;font-size:18px}
#feedback-banter{color:#c6ab82;font-size:19px;margin-top:4px}
#feedback-banter:empty{margin:0}
#feedback.error #feedback-status{color:#f5a498}
#feedback:not(.error) #feedback-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#save-notice{font-size:17px;line-height:1.2;text-align:center;color:#a6b9c9;margin:5px 0}
#save-notice:empty{display:none}
#save-notice{color:#f5b19a}

/* Reveal */
#answer-reveal{padding:12px;margin-top:10px;background:#222b25;border:1px solid #4f6d45;border-radius:8px;text-align:left}
#answer-reveal.missed{background:#2b2424;border-color:#7b5555}
#answer-reveal p{margin:0}
.reveal-answer{font-size:23px;line-height:1.1;color:#e7ffd4;margin-bottom:6px!important}
#answer-reveal.missed .reveal-answer{color:#ffd6d6}
.reveal-story{font-size:20px;line-height:1.18;color:#e4e9ec}
.reveal-stat{font-size:19px;color:#a8d789;margin-top:8px!important}
.reveal-sources{font-size:16px;margin-top:8px!important}
.reveal-sources a{display:inline-block;color:#9abdcc;margin-right:12px;padding:6px 0}
#next-button,.primary{width:100%;min-height:50px;border:0;background:var(--accent);color:#14181c;border-radius:8px;font-size:25px;letter-spacing:.5px}
#next-button{margin-top:10px}
.primary:hover,#next-button:hover{filter:brightness(1.08)}
.secondary{width:100%;min-height:46px;border:1px solid #687782;background:#303a43;border-radius:8px;color:#e3e9ed;font-size:22px}
.link-button{align-self:center;background:none;border:0;color:#8fa0af;text-decoration:underline;font-size:17px;min-height:44px;padding:0 12px;margin-top:6px}

/* Loading and error */
#status-view{align-items:center;text-align:center;margin-top:80px;min-height:140px}
#status-text{font-size:24px;color:#9ab6ca;margin:0 0 16px}
#status-view .secondary{width:auto;min-width:140px;padding:0 24px}

/* Games (after the results) */
#games-view h2,#results-view h2{font-weight:400;font-size:36px;line-height:1;text-align:center;margin:18px 0 0;color:var(--accent)}
#games-picker li{padding:0}
#games-picker button{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border:0;background:none;font-size:18px;line-height:1;color:inherit}
#games-picker .sport-icon{width:34px;height:34px;image-rendering:pixelated}
#games-stage{margin-top:6px;min-height:200px}
#games-stage .mini-game{margin:0 0 8px}
#games-stage .mini-game__heading{border-top:0;padding-top:2px}
.games-loading{text-align:center;color:#9ab6ca;font-size:21px;margin-top:40px}
#games-back{margin-top:10px}
#play-games{margin-top:10px}
#play-games,#share-button{min-height:60px;font-size:34px;padding:1px 6px;white-space:nowrap}

/* Results */
#results-date{text-align:center;color:#8d99a4;font-size:19px;margin:16px 0 0}
#results-view h2{margin-top:2px}
#results-score{text-align:center;font-size:92px;line-height:1;color:#f1f1ec;margin-top:4px}
#results-score small{font-size:40px;color:#8d99a4}
#results-verdict{text-align:center;font-size:21px;line-height:1.1;color:#c6ab82;margin:6px 0 0}
#results-verdict:empty{display:none}
#results-compare{text-align:center;font-size:21px;line-height:1.1;color:#a8d789;margin:6px 0 0}
#results-rows{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:5px}
.result-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:8px;border:1px solid #4a535c;background:#262d34;font-size:22px}
.sport-icon{width:24px;height:24px;flex:none;image-rendering:pixelated}
.rr-points{margin-left:auto;color:#d6dde3;font-size:24px}
.squares{display:inline-flex;gap:4px;flex-wrap:wrap}
.sq{display:block;width:18px;height:18px;border-radius:3px}
.sq-win{background:#62b04b}
.sq-close{background:#e0b83e}
.sq-far{background:#5a626b}
#share-button{margin-top:14px}
#share-save{align-self:center;font-size:19px;display:inline-flex;align-items:center;margin-top:0;color:#9abdcc}
#share-status{text-align:center;font-size:19px;min-height:24px;line-height:24px;color:#9cc280;margin-top:4px}
#results-countdown{text-align:center;font-size:21px;color:#9aa7b1;margin:6px 0 0}
#results-countdown strong{font-weight:400;color:#f1f1ec}
#results-detail{margin-top:22px;border-top:2px solid #3d444b}
.detail{padding:14px 0;border-bottom:1px solid #3a4148}
.detail header{display:flex;align-items:center;gap:10px;font-size:22px}
.detail header .squares{margin-left:auto}
.detail p{margin:7px 0 0}
.detail-prompt{font-size:20px;line-height:1.1;color:#f1f1ec}
.detail-answer{font-size:21px;color:#a8d789}
.detail-answer strong{font-weight:400}
.detail-story{font-size:19px;line-height:1.18;color:#cfd6db}
.detail .reveal-sources{margin-top:4px}

/* The space above the footer line equals the space between the line and the links: (44px link row - 16px text) / 2 = --foot-gap */
footer{border-top:2px solid #4a5158;margin-top:auto;font-size:16px;color:#7f8d98}
#legal{display:flex;justify-content:center;align-items:center;gap:0 22px;min-height:44px;padding:0 12px}
#legal a{position:relative;color:#7f8d98;text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}
#legal a+a::before{content:"·";position:absolute;left:-13px;top:50%;transform:translateY(-52%);color:#59636c;text-decoration:none}

/* Contact dialog: the labels, boxes and Send button are the guess box and the big orange button, in the dialog's column */
.contact-form label{display:block;font-size:22px;line-height:1.1;color:#85abc7;margin:14px 0 4px}
.contact-form label:first-child{margin-top:0}
.contact-form input[type=email],.contact-form textarea{display:block;width:100%;font-size:24px;line-height:1.1;background:#282f37;color:#eff3f5;border:2px solid #818b93;border-radius:8px;padding:2px 10px;height:48px}
.contact-form textarea{height:auto;min-height:130px;padding:8px 10px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:#f2b56c;outline:none}
.contact-form .primary{display:block;margin-top:14px}
.contact-form .primary:disabled{opacity:.7;cursor:default}
.contact-error{margin:10px 0 0;font-size:19px;color:#f5a498}.contact-error:empty{margin:0}
.contact-sent{font-size:24px;text-align:center;color:#fff6e6;margin:20px 0 8px}
.contact-direct{margin:16px 0 0;font-size:17px;color:#8d99a4;text-align:center;overflow-wrap:anywhere}

/* Dialogs */
dialog{font-family:'VT323','VT323 Fallback',monospace;width:min(420px,calc(100vw - 32px));max-height:85svh;overflow:auto;background:#252c33;color:#e4e8e9;border:2px solid #6e7881;border-radius:9px;padding:28px;font-size:22px}
dialog::backdrop{background:#000b}
dialog:focus{outline:none}
dialog h2{font-weight:400;font-size:32px;text-align:center;margin:3px 0 19px}
dialog p,dialog li{line-height:1.2}
dialog ul{padding-left:20px}
.about-fine{font-size:17px;color:#8d99a4}
.about-owner{margin-top:-6px;color:#6f7c86}
dialog li{margin-bottom:8px}
dialog a{color:#96bbd3}
.close{position:absolute;right:4px;top:2px;width:44px;height:44px;font-size:34px;background:none;border:0}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:10px}
.stat-grid strong{display:block;font-size:38px;color:#a3c986;font-weight:400}
.stat-grid span{font-size:18px}
#share-text{display:block;width:100%;height:220px;font:19px 'VT323',monospace;background:#14191f;color:white;border:1px solid #74818a;padding:10px}
.share-preview{display:block;width:100%;height:auto;border-radius:6px;margin:0 0 12px}
.dialog-action,#reset-today{display:block;text-align:center;text-decoration:none;width:100%;min-height:44px;padding:8px;margin-top:12px;border:1px solid #687782;background:#303a43;color:#e3e9ed;font-size:20px}
.past-list{list-style:none;margin:0;padding:0}
.past-list li{margin:0 0 6px}
.past-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:6px 12px;border:1px solid #57606a;border-radius:8px;background:#303a43;color:#e3e9ed;text-decoration:none}
.past-list a[aria-current]{border-color:var(--amber)}
.past-list strong{font-weight:400;font-size:20px;color:#8f9ba5;white-space:nowrap}
.past-list strong.done{color:#a3c986}
.past-list strong.progress{color:var(--amber)}
/* Outside a dialog the box is a fixed spot on the page; inside one (a [data-turnstile-slot]) it is part of the dialog's layout, above Send. */
#turnstile-box{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:50}
[data-turnstile-slot] #turnstile-box{position:static;transform:none;display:flex;justify-content:center;z-index:auto}
[data-turnstile-slot] #turnstile-box.showing{margin-top:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.report-done{font-size:24px;text-align:center;margin:20px 0 8px}
#results-detail .report-this{display:block;margin:4px auto 0}
/* The last thing on the results page sits --foot-gap above the footer line: no closing divider or padding, and its 44px tap box overlaps the quiet space so the visible text, not the box, is what is measured. */
#results-view:has(#past-button-results[hidden]) .detail:last-child{border-bottom:0;padding-bottom:0}
#results-view:has(#past-button-results[hidden]) #results-detail .detail:last-child .report-this,#results-view #past-button-results:not([hidden]){margin-bottom:-13px}
.report-question{background:#14191f;border:1px solid #4a545c;border-radius:8px;padding:10px 12px;margin:0 0 12px}
.rq-head{display:flex;align-items:center;gap:8px;font-size:17px;color:#8d99a4}
.rq-prompt{font-size:21px;line-height:1.1;margin:6px 0 0;color:#f1f1ec}
.rq-answer{font-size:19px;margin:6px 0 0;color:#a8d789}
.rq-answer strong{font-weight:400}
#report-status{min-height:24px;margin:8px 0 0;color:#c6ab82}
.small-note{font-size:17px;color:#adbac3}
.commentary-setting{display:flex;align-items:center;gap:10px;min-height:44px}
.commentary-setting input{width:22px;height:22px}
#report-reason,#report-which,#report-note,#report-copy{display:block;width:100%;font:20px VT323,monospace;background:#151b20;color:#e3edf3;border:1px solid #75838e;padding:8px;margin:10px 0;min-height:44px}
#report-note,#report-copy{min-height:100px}

/* Until the day loads, hold the question's height so the guess rows do not jump when the question text arrives */
body:not([data-stage]) #question-card{min-height:97px}
@media(max-width:400px){#title{font-size:32px}
#sb-answer{font-size:60px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}#sb-board{transition:none}}