/* Wordplay: the Fateshaper ink-and-brass look (fateshaper/adventure.css on the redesign branch), trimmed to what this game uses. */
:root{--bg:#090a0c;--panel:#101114;--well:#0b0c0f;--line:#2d2d31;--line-bright:#49443d;--ink:#e3ddcf;--muted:#a59f94;--faint:#716f6b;--purple:#b5a7c8;--gold:#c2aa7b;--green:#b3c1ad;--warn:#c89d7d;--question:#b6cfff;--serif:"Crimson Pro","Iowan Old Style",Palatino,"Book Antiqua",Georgia,serif;--mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace}
*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg)}
body{margin:0;color:var(--ink);font:16px/1.5 var(--serif);-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 72% 0%,#342c281c,transparent 48%),radial-gradient(ellipse at 14% 35%,#2a26371a,transparent 48%)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#c5b6a004 1px,transparent 1px),linear-gradient(90deg,#c5b6a004 1px,transparent 1px);background-size:38px 38px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 130px #00000028}
main{width:min(820px,100% - 64px);margin:32px auto 64px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:24px}
.brand{font:400 18px/1.15 var(--serif);letter-spacing:normal;color:#fff;white-space:nowrap;flex-shrink:0;text-decoration:none}.brand .brand-that{font:800 .875em/1 var(--mono);letter-spacing:normal;color:var(--gold)}
.top-actions{display:flex;gap:24px;align-items:center}.date-label{font:10px/1.6 var(--mono);color:var(--faint);letter-spacing:.08em}
button{font-family:var(--mono);cursor:pointer;border-radius:0}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
.text-button{font:10px/1.6 var(--mono);padding:5px 0;background:none;color:var(--muted);border:0;border-bottom:1px solid transparent}.text-button:hover:not(:disabled){color:var(--ink);border-bottom-color:var(--gold)}.text-button.armed{color:var(--warn);border-bottom-color:var(--warn)}
h1,h2,h3,p{margin-top:0}h1{font-weight:400;font-size:39px;line-height:1.08;letter-spacing:-.025em;margin-bottom:15px}h2{font-weight:400;font-size:32px;line-height:1.12;letter-spacing:-.015em;margin-bottom:22px}
.eyebrow{font:10px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.panel{position:relative;border:1px solid var(--line);background:linear-gradient(130deg,#141517,#101114);padding:33px 35px}
.primary,.secondary{display:block;width:100%;min-height:45px;padding:12px 16px;font:500 11px/1.5 var(--mono);letter-spacing:.025em;border:1px solid #9c8862}
.primary{background:#bdab86;color:#171817}.primary:hover:not(:disabled){background:#d0c0a0;border-color:#d0c0a0}
.secondary{background:#c2aa7b06;color:#d2c09c;border-color:#74674e}.secondary:hover:not(:disabled){background:#c2aa7b0d;border-color:#bba57d}
.continue{max-width:350px}.helper{font:9px/1.75 var(--mono);color:var(--muted);margin:12px 0 0}
.error{border:1px solid #785741;background:#211b16;color:#d9b69b;padding:14px 17px;font:11px/1.8 var(--mono);margin-bottom:20px}.error p{margin:0}.error button{color:#d9b69b;margin-top:8px}
.loading{padding:75px 25px;text-align:center;color:var(--muted)}
.resource-label{display:block;font:9px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}.resource-number{font:25px/1.2 var(--mono);color:var(--ink)}.resource-number.gold{color:var(--gold)}.resource-limit{font:11px var(--mono);color:var(--faint)}
footer{margin-top:29px;color:var(--faint);text-align:center;font:9px/1.8 var(--mono)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}.legend span{white-space:nowrap}.swatch{display:inline-block;width:14px;height:6px;margin-right:7px;vertical-align:1px}.swatch.fit{background:var(--gold)}.swatch.wit{background:#a894d6}.swatch.name{background:var(--green)}.swatch.surprise{background:#8fbccb}
/* The score scale under the game: one centred line, the numbers in brass, matching the legend below it (2026-09-25). */
.score-scale{padding:20px 3px 0}.score-scale p{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;font:10px/1.8 var(--mono);letter-spacing:.06em;color:var(--muted);margin:0 0 8px}.score-scale span{white-space:nowrap}.score-scale b{font-weight:500;color:var(--gold);font-variant-numeric:tabular-nums}

/* Intro */
.intro-panel h1{max-width:640px}.intro-copy{color:var(--muted);font-size:17px;line-height:1.5;max-width:600px;margin:0 0 26px}

/* The question and its clock */
.question-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.timer{font:500 14px/1.4 var(--mono);color:var(--gold);margin:0 0 14px;font-variant-numeric:tabular-nums}.timer.low{color:var(--warn)}
.timer-track{height:3px;background:var(--line);margin:0 0 26px}.timer-fill{height:100%;width:100%;background:var(--gold)}.timer.low+.timer-track .timer-fill{background:var(--warn)}
.timer{transform-origin:right center}.timer.flash{animation:timer-number-flash .65s ease-out}.timer-track.flash{animation:timer-track-flash .65s ease-out}.timer-track.flash .timer-fill{animation:timer-fill-flash .65s ease-out}
@keyframes timer-number-flash{0%,18%{color:#fff3d6;transform:scale(1.22);background:#a9653040;box-shadow:0 0 0 6px #a9653040;text-shadow:0 0 12px #ffd79c}100%{color:var(--warn);transform:scale(1);background:transparent;box-shadow:0 0 0 0 transparent;text-shadow:none}}
@keyframes timer-track-flash{0%,18%{transform:scaleY(2.3);background:#625644;box-shadow:0 0 12px #f0bc6955}100%{transform:scaleY(1);background:var(--line);box-shadow:none}}
@keyframes timer-fill-flash{0%,18%{background:#fff1ce;box-shadow:0 0 12px #ffd799}100%{background:var(--gold);box-shadow:none}}
.question{color:var(--question);font-size:31px;line-height:1.15;margin-bottom:26px}
.answer-label{display:block;font:10px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
:is(input[type=text],input[type=password]){display:block;width:100%;border:1px solid #3c393c;border-radius:0;color:var(--ink);background:var(--well);font:22px/1.4 var(--serif);padding:14px 17px;caret-color:var(--gold)}
:is(input[type=text],input[type=password])::placeholder{color:#817c73;font-size:18px}:is(input[type=text],input[type=password]):focus{outline:1px solid #b5a7c838;outline-offset:3px;border-color:#8c7f96}:is(input[type=text],input[type=password]):disabled{opacity:.6}
.input-note{display:flex;justify-content:space-between;gap:18px;font:9px/1.6 var(--mono);color:var(--faint);margin:10px 0 20px}
/* A refused answer: the box shakes, buzzes, clears, and the question stays open. */
.try-again{font:11px/1.7 var(--mono);color:var(--warn);margin:-8px 0 20px}.try-again strong{font-weight:500;letter-spacing:.08em;text-transform:uppercase}
:is(input[type=text],input[type=password]).buzz{border-color:var(--warn)!important;animation:buzz .32s linear}
@keyframes buzz{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}35%{transform:translateX(6px)}55%{transform:translateX(-4px)}75%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){:is(input[type=text],input[type=password]).buzz{animation:none}}

/* The answer and its reveal */
.result-question{font:11px/1.6 var(--mono);color:var(--muted);margin:0 0 10px}
.result-answer{font-size:30px;line-height:1.2;margin-bottom:26px;overflow-wrap:anywhere}.result-answer.empty{color:var(--faint);font-size:22px}
.reveal{border-top:1px solid var(--line);padding-top:24px;margin:0 0 26px;cursor:default}
.reveal-track{position:relative;height:10px;border:1px solid var(--line-bright);background:var(--well);margin:8px 0 52px}
.reveal-fill{position:absolute;top:0;bottom:0;left:0;width:0}
.reveal-fill.fit{background:linear-gradient(90deg,#8a7650,var(--gold))}
.reveal-fill.name{background:linear-gradient(90deg,#6f7f68,var(--green));box-shadow:inset 2px 0 0 var(--bg)}
.reveal-fill.wit{background:linear-gradient(90deg,#6f5f9a,#a894d6);box-shadow:inset 2px 0 0 var(--bg)}
/* Surprise (v11, 2026-09-25): a fourth leg after wit, in a cool teal that sits between the violet and the question blue. */
.reveal-fill.surprise{background:linear-gradient(90deg,#5b8592,#8fbccb);box-shadow:inset 2px 0 0 var(--bg)}
.reveal-marks{position:absolute;inset:0;pointer-events:none}
.reveal-mark{position:absolute;top:-7px;width:1px;height:24px;background:var(--line-bright);transform:translateX(-50%);transition:background .25s,box-shadow .25s}
.reveal-mark b,.reveal-mark small{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-weight:400;color:var(--faint);transition:color .25s}
.reveal-mark b{top:28px;font-size:9px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase}.reveal-mark small{top:42px;font-size:9px;line-height:1.4}
/* Plain sits at the bar's left edge, so its label hangs right; every other label, Brilliant included, is centred on its mark (Jason, 2026-09-26). */
.reveal-mark:first-child b,.reveal-mark:first-child small{transform:none}
.reveal-mark.lit{background:var(--gold);box-shadow:0 0 12px #c2aa7b99}.reveal-mark.lit b{color:var(--gold)}.reveal-mark.lit small{color:var(--muted)}
/* A mark flashes as the bar reaches it (Jason, 2026-09-24): the tick and label blaze white-gold, then settle to lit. */
.reveal-mark.flash{animation:mark-flash .9s ease-out}.reveal-mark.flash b{animation:mark-flash-label .9s ease-out}
@keyframes mark-flash{0%{background:#fff6dd;box-shadow:0 0 22px #ffe9b8,0 0 44px #c2aa7b99;transform:translateX(-50%) scaleY(1.35)}35%{background:#fff0cc;box-shadow:0 0 18px #f5dfae,0 0 36px #c2aa7b88;transform:translateX(-50%) scaleY(1.2)}100%{background:var(--gold);box-shadow:0 0 12px #c2aa7b99;transform:translateX(-50%) scaleY(1)}}
@keyframes mark-flash-label{0%{color:#fff6dd;text-shadow:0 0 10px #ffe9b8}40%{color:#f5dfae;text-shadow:0 0 8px #e8cf9c}100%{color:var(--gold);text-shadow:none}}
.reveal-caption{font:10px/1.8 var(--mono);letter-spacing:.06em;color:var(--muted);margin:0 0 12px}
.reveal-caption{display:grid;grid-template-columns:max-content max-content 1fr;column-gap:8px;row-gap:1px;align-items:baseline}
.reveal-caption-line{display:contents}.reveal-caption-line b{font-weight:500;color:var(--gold)}.cap-points{text-align:right;font-variant-numeric:tabular-nums}.cap-text{color:var(--muted)}
/* Each leg's name in the card takes its bar colour (Jason, 2026-09-25). */
.reveal-caption-line b.cap-fit{color:var(--gold)}.reveal-caption-line b.cap-wit{color:#a894d6}.reveal-caption-line b.cap-lit{color:#8fbccb}
.reveal-card{border:1px solid transparent;background:#c2aa7b08;padding:0 20px;max-height:0;overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity .8s ease-out,transform .8s ease-out,max-height .8s ease-out,padding .8s ease-out,border-color .8s}
.reveal-card.shown{border-color:var(--line-bright);padding:18px 20px;max-height:480px;opacity:1;transform:none}
.reveal-tier{font:500 15px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.reveal-score{display:flex;align-items:baseline;gap:7px;font:11px/1.7 var(--mono);color:var(--muted);margin:10px 0 0}.reveal-score strong{font-size:32px;line-height:1.1;font-weight:500;color:var(--gold);font-variant-numeric:tabular-nums}
.score-parts{font:9px/1.7 var(--mono);color:var(--muted);margin:2px 0 0}
.score-best{display:grid;grid-template-columns:max-content max-content 1fr;gap:0 12px;align-items:baseline;margin:14px 0 0;padding:9px 12px;border-left:2px solid var(--gold);background:#c2aa7b12}.score-best:empty{display:none}.score-best.current{border-left-color:var(--ink)}
.best-label{font:600 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}.best-score{font:700 13px/1.6 var(--mono);color:var(--gold)}.best-answer{font:400 16px/1.4 var(--serif);color:var(--ink);overflow-wrap:anywhere}
.reveal-skip{font:9px/1.7 var(--mono);color:var(--faint);margin:12px 0 0}
/* Notes for later (Jason, 2026-09-24): two lines under the reveal, one on the pairing and one on the scoring, saved with the answer. */
.notes{margin:20px 0 22px;padding-top:16px;border-top:1px solid var(--line)}
.notes-label{font:10px/1.5 var(--mono);letter-spacing:.06em;color:var(--question);margin:0 0 10px}
.notes-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.notes-field span{display:block;font:9px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.notes-field :is(input[type=text],input[type=password]){font-size:15px;padding:9px 12px}
.notes-status{font:9px/1.6 var(--mono);color:var(--faint);margin:8px 0 0;min-height:1.6em}
@media(max-width:720px){.notes-row{grid-template-columns:1fr}}

/* The five together */
.summary-total{display:flex;align-items:baseline;gap:8px;margin:-6px 0 24px}.summary-total strong{font:400 44px/1.1 var(--mono);color:var(--gold)}.summary-total span{font:12px var(--mono);color:var(--faint)}
.summary-list{list-style:none;margin:0 0 28px;padding:0}.summary-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
/* The summary shows each answer's bar, the reveal's two legs at rest. */
.summary-bar{grid-column:1 / -1;position:relative;height:8px;border:1px solid var(--line-bright);background:var(--well);margin:2px 0 0}.summary-bar .reveal-fill.wit{box-shadow:inset 2px 0 0 var(--bg)}.summary-bar .summary-tick{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--line-bright);opacity:.6}
.summary-question{font:10px/1.6 var(--mono);color:var(--muted);margin:0 0 4px}.summary-answer{font-size:20px;line-height:1.25;margin:0;overflow-wrap:anywhere}.summary-answer.empty{color:var(--faint);font-size:16px}
.summary-score{text-align:right;font:11px/1.6 var(--mono);color:var(--muted);white-space:nowrap}.summary-score strong{display:block;font:400 22px/1.2 var(--mono);color:var(--gold)}
.share{border-top:1px solid var(--line);padding-top:22px;margin-top:8px}.share textarea{display:block;width:100%;resize:none;border:1px solid #3c393c;color:var(--ink);background:var(--well);font:13px/1.6 var(--mono);padding:12px 14px;margin-bottom:12px}.share .secondary{max-width:200px}

/* Crimson Pro (the original Maged serif, Jason 2026-09-22) carries its own fit; no tightening needed. */
h1,h2,.intro-copy,.result-answer,.reveal-tier,.summary-answer,.loading,:is(input[type=text],input[type=password]),.question{font-kerning:normal}

@media(max-width:720px){main{width:calc(100% - 28px);margin-top:22px}.panel{padding:24px}h1{font-size:32px}h2{font-size:28px}.question{font-size:25px}:is(input[type=text],input[type=password]){font-size:20px}.result-answer{font-size:26px}.reveal-track{margin-bottom:78px}.reveal-mark b{font-size:8px;letter-spacing:.06em}.reveal-mark small{font-size:8px}.reveal-mark:nth-child(even) b{top:50px}.reveal-mark:nth-child(even) small{top:64px}.reveal-mark:nth-child(even){height:46px}.reveal-tier{font-size:13px}.reveal-card.shown{padding:14px 15px}.summary-item{grid-template-columns:1fr}.summary-score{text-align:left}}
@media(max-width:420px){.top-actions{gap:13px}.text-button{font-size:9px}h1{font-size:29px}h2{font-size:25px}.question{font-size:22px}}
@media(prefers-reduced-motion:no-preference){.primary,.secondary{transition:background-color .15s,border-color .15s}:is(input[type=text],input[type=password]){transition:color .12s,border-color .12s}.timer-fill{transition:width .1s linear}}
@media(prefers-reduced-motion:reduce){.reveal-card,.reveal-mark,.reveal-caption,.timer-fill{transition:none}.reveal-mark.flash,.reveal-mark.flash b,.timer.flash,.timer-track.flash,.timer-track.flash .timer-fill{animation:none}}

/* That Game: two boxes and the word between them; each types itself out, then locks. */
.mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mode-card{display:flex;flex-direction:column;border:1px solid var(--line);background:#0b0c0f80;padding:20px 20px 22px}
.mode-name{font:500 10px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.mode-note{font:10px/1.6 var(--mono);color:var(--muted);margin:0 0 14px}
.mode-example{flex:1;font-size:19px;line-height:1.3;color:var(--question);margin:0 0 18px}.mode-example span{font-style:italic;color:var(--gold)}
.summary-next{margin-top:26px}
@media(max-width:620px){.mode-choice{grid-template-columns:1fr}}
/* That Game: two clue boxes with THAT between, in the question's own serif and colour, each box drawn like the answer box, a thin grey line on the dark well that warms to a muted brass once its clue is complete (the earlier bold brass outline and glow did not mesh with the rest of the page). The words arrive uppercase from the content file and the page sets them as a sentence. The full text is held invisibly in each box from the start (data-full) so the box takes its final height before the first letter; the typed text is drawn over it. */
.that-board{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;margin:4px 0 30px}
.that-box{position:relative;display:flex;align-items:center;justify-content:center;min-height:88px;padding:16px 18px;border:1px solid #3c393c;background:var(--well);font:400 15px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--muted);overflow-wrap:anywhere;transition:color .2s,border-color .2s}
.result-question .that-inline,.summary-question .that-inline{font-weight:700;color:var(--gold)}
.that-box::before{content:attr(data-full);visibility:hidden}
.that-box .typed{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px 18px}
.that-box.typing{color:var(--ink)}.that-box.typing .typed::after{content:"";display:inline-block;width:2px;height:.85em;margin-left:3px;background:var(--gold);vertical-align:-.08em;animation:that-cursor .7s steps(1) infinite}
.that-box.typing{border-color:var(--line-bright)}.that-box.locked{color:var(--question);border-color:#74674e}
@keyframes that-cursor{50%{opacity:0}}
.that-word{font:800 17px/1 var(--mono);letter-spacing:-.5px;color:var(--gold)}
@media(max-width:720px){.that-board{grid-template-columns:1fr;gap:10px;justify-items:center}.that-box{width:100%;min-height:70px;font-size:13px}.that-word{font-size:15px}}
@media(prefers-reduced-motion:reduce){.that-box{transition:none}}

/* The start screen (Jason, 2026-09-25): THAT GAME, one line, the two boxes as they look in play, Play, and How to play folding open under it. */
.intro-title{font:500 12px/1.4 var(--mono);letter-spacing:.4em;color:var(--gold);margin:0 0 14px}
.intro-panel .intro-copy{margin:0 0 24px}.intro-board{margin:0 0 28px}.intro-panel .primary{max-width:280px}
.intro-how{margin:22px 0 0}
.howto{margin:14px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}.howto-title{font-size:20px;line-height:1.3;margin:0 0 12px}
.howto-list{margin:0;padding-left:26px;font-size:17px;line-height:1.5;max-width:560px}.howto-list li{padding-left:6px;margin:0 0 8px}.howto-list li::marker{font:500 11px var(--mono);color:var(--gold)}
.howto-example{display:block;margin:4px 0 0 14px}
.howto-list b{font-weight:600}.howto-list .cap-fit{color:var(--gold)}.howto-list .cap-wit{color:#a894d6}.howto-list .cap-lit{color:#8fbccb}
@media(max-width:720px){.howto-list{font-size:15px}}

/* A small invitation gate, using the game's existing type and colours. */
.signin-panel{max-width:520px;margin:48px auto}.signin-panel form{max-width:360px}.signin-panel input{margin-bottom:22px}.signin-panel .helper{max-width:360px}.tester-label{font:10px/1.6 var(--mono);color:var(--gold);max-width:150px;overflow-wrap:anywhere}.top-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px 20px}
@media(max-width:600px){.signin-panel{margin:24px auto}.topbar{gap:14px}.top-actions{gap:4px 14px}.tester-label{max-width:100px}}

.general-thoughts{margin-bottom:0}.general-thoughts .notes-label{display:block}.general-thoughts textarea{display:block;width:100%;min-height:110px;resize:vertical;border:1px solid #3c393c;border-radius:0;color:var(--ink);background:var(--well);font:17px/1.5 var(--serif);padding:12px 14px;caret-color:var(--gold)}.general-thoughts textarea::placeholder{color:var(--faint)}.general-thoughts .secondary{max-width:200px;margin-top:14px}

/* Keep the full title together when the owner controls need another line. */
.topbar .brand{white-space:nowrap}
@media(max-width:540px){.topbar{flex-wrap:wrap;row-gap:12px}.top-actions{margin-left:auto}}

.signin-choices{display:flex;gap:24px;margin:6px 0 26px;flex-wrap:wrap}.signin-choices button{color:var(--muted)}.signin-choices button[aria-pressed=true]{color:var(--gold);text-decoration:underline;text-underline-offset:7px}.signin-panel #pin-recovery{margin-top:10px}.signin-panel input[inputmode=numeric]{letter-spacing:.2em}