/* Scout: the plum floodlight world (loaded after /assets/theme.css: tokens, fonts, shared components).
   Scout-only pieces: the split-flap board, the clue stack, the shortlist cards, the stamp, the player file and
   career strip, Extra time, the form guide, the result and the sheets.
   Motion: transform + opacity only, custom ease-out curves, UI moves under 300 ms; the stamp, the flap board and
   the strip are the three set pieces. Everything falls back to a plain state under reduced motion. */
[data-game="scout"]{--g:var(--plum);--g-deep:var(--plum-deep);--g-tint:var(--plum-tint);--g-ink:var(--plum-ink)}
:root{
  --good:#2F8A5E; --bad:var(--red-tint); --good-ink:#1F6A47; --bad-ink:#C2412A;
  --pl-line:rgba(248,242,228,.16); --pl-mute:rgba(248,242,228,.74); --pl-soft:rgba(248,242,228,.56);
  --flap:#2A2052; --flap-lo:#221A45; --panel:#EFE6D3; --warm:#EADFC8;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-in:cubic-bezier(.55,0,1,.45);
}
:root.cb{--good:#9AD2EE; --bad:#F5A04A; --good-ink:#225E85; --bad-ink:#B85A00}
body.mo-lock{overflow:hidden}
.app{max-width:540px;margin:0 auto;padding:max(8px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* cream surfaces keep light-theme ink in both themes (the card itself never flips) */
.clue,.card,.file,.nextgame,.dk-nextgame,.xopts button{--ink:#1E1A14;--mute:#6B6153;--paper:#F4EDE0;--line:rgba(30,26,20,.13);--plum-ink:#45377F}

/* ---------- head: the question and the split-flap board ---------- */
.rounds.hud{display:flex;align-items:center;gap:10px;margin:8px 2px 0}
.rounds .segs{flex:1;display:flex;gap:4px}
.rounds .segs i{flex:1;height:6px;border-radius:3px;background:rgba(248,242,228,.18)}
.rounds .segs i.cur{background:var(--cream)}
.rounds .segs i.early{background:var(--good)}
.rounds .segs i.late{background:var(--gold)}
.rounds .segs i.no{background:var(--red-tint)}
.cb .rounds .segs i.no{background:repeating-linear-gradient(135deg,var(--bad) 0 3px,transparent 3px 5px)} /* taste-skill-ignore: colour-blind hatching */
.rounds .rnd{font-size:14px;font-weight:700;color:var(--pl-mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.rounds .tot{font-size:14px;font-weight:600;color:var(--pl-mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.rounds .tot b{color:var(--gold);font-weight:900;font-size:16px}
.head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 2px 0}
.head h1{margin:0;font-size:clamp(28px,7.6vw,38px);line-height:.98}
.board{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px}
.digits{display:flex;gap:4px}
.fd{position:relative;width:36px;height:50px;perspective:220px;font-weight:900;font-size:38px;color:var(--cream);font-variant-numeric:tabular-nums}
.fd .h{position:absolute;left:0;right:0;height:calc(50% - .5px);overflow:hidden;background:var(--flap);backface-visibility:hidden}
.fd .t,.fd .ft{top:0;border-radius:8px 8px 0 0;transform-origin:50% 100%}
.fd .b,.fd .fb{bottom:0;border-radius:0 0 8px 8px;transform-origin:50% 0;background:var(--flap-lo)}
.fd .h i{position:absolute;left:0;right:0;height:50px;line-height:50px;text-align:center;font-style:normal}
.fd .t i,.fd .ft i{top:0}
.fd .b i,.fd .fb i{bottom:0}
.fd .ft,.fd .fb{visibility:hidden}
.board{gap:3px}
.board .bl{font-size:13px;font-weight:700;color:var(--pl-mute);white-space:nowrap}
.board.one .fd{color:var(--gold)}

/* ---------- clue stack ---------- */
.clues{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;min-height:76px}
.clue{position:relative;background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:10px 14px 12px;transform-origin:50% 100%}
.clue .lab{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--plum-ink);line-height:1.2}
.clue .lab .ft{margin-left:auto;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.clue .lab .ft b{color:var(--ink);font-weight:900}
.clue .tx{display:block;margin-top:4px;font-size:18px;font-weight:800;line-height:1.24;letter-spacing:-.015em;text-wrap:pretty}
.clue .shirts{display:flex;gap:6px;margin-top:8px}
.clue .shirts svg{width:30px;height:30px}
.clue.old{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1px 10px;padding:7px 12px 8px;border-radius:14px}
.clue.old .lab{display:contents}
.clue.old .lab>span:first-child{display:none}
.clue.old .lab .ft{grid-column:2;grid-row:1;font-size:13px}
.clue.old .tx{grid-column:1;grid-row:1;font-size:14.5px;font-weight:700;margin-top:0;color:#3A332A}
.clue.old .shirts{display:none}
.clue.dr{background:var(--warm)}
.clue.dr .peg{position:absolute;right:10px;top:-10px;width:34px;height:34px}
.clue.dr .lab{padding-right:30px}
.clue.dr.old{padding-right:44px}
.clue.dr.old .peg{width:26px;height:26px;top:-7px}
.clue.after{background:var(--panel)}
.clue.after .tx{color:#3A332A}
.clues .wait{display:flex;align-items:center;justify-content:center;min-height:76px;border-radius:var(--radius);background:rgba(0,0,0,.12);color:var(--pl-mute);font-size:15px;font-weight:600}
.clue.in{animation:clueIn .26s var(--ease-out) both}
.clue.dr.in{animation:drIn .42s var(--ease-out) both}
@keyframes clueIn{from{opacity:0;transform:translateX(28px)}}
@keyframes drIn{0%{opacity:0;transform:translateY(26px) rotate(2deg)}70%{opacity:1;transform:translateY(-2px) rotate(-.4deg)}100%{transform:none}}

/* ---------- the shortlist: four identical shirts ---------- */
.shortlist{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
/* crossed out: a memo. Shirt fades to grey, a line draws through the name (transform + opacity only) */
.card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.card .kit svg{transition:opacity .18s var(--ease-out)}
.card.x .kit svg{opacity:.32;filter:grayscale(1)}
.card .nm{position:relative}
.card .nt{transition:opacity .18s var(--ease-out)}
.card.x .nt{opacity:.55}
.card .xl{position:absolute;left:8%;right:8%;top:50%;height:2.5px;margin-top:-1px;border-radius:2px;background:var(--bad-ink);transform:scaleX(.2);transform-origin:0 50%;opacity:0;transition:transform .2s var(--ease-out),opacity .12s var(--ease-out)}
.card.x .xl{transform:scaleX(1);opacity:1}
.xhint{margin:8px 2px 0;font-size:14px;font-weight:600;color:var(--pl-mute);text-align:center}
.xhint[hidden]{display:none}
.card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;padding:6px 6px 8px;background:var(--cream);color:var(--ink);border-radius:var(--radius);
  transition:transform .2s var(--ease-out),opacity .25s var(--ease-out)}
.card::after{/* taste-skill-ignore: a 2-3px ring (selection/state), not a shadow */content:"";position:absolute;inset:-5px;border-radius:calc(var(--radius) + 5px);box-shadow:0 0 0 3px var(--gold);opacity:0;transition:opacity .16s var(--ease-out);pointer-events:none}
.card .kit{position:relative;display:block;width:100%;aspect-ratio:2/1;border-radius:10px;background:var(--panel)}
.card .kit svg{position:absolute;left:50%;top:7%;height:86%;width:auto;aspect-ratio:1;translate:-50% 0}
.card .nm{margin-top:5px;font-size:14.5px;font-weight:800;line-height:1.12;letter-spacing:-.015em;min-height:2.24em;display:flex;align-items:center;justify-content:center;text-wrap:balance}
.card .ps{font-size:13px;font-weight:600;color:var(--mute);line-height:1.2}
.card .pk{font-size:13px;font-weight:800;color:var(--plum-ink);font-variant-numeric:tabular-nums}
.card .pk:empty{display:none}
.shortlist.armed .card{cursor:pointer}
@media (hover:hover) and (pointer:fine){.shortlist.armed .card:not([aria-pressed="true"]):hover{transform:translateY(-2px)}}
.shortlist.armed .card:active{transform:scale(.97);transition-duration:.12s}
.card[aria-pressed="true"]{transform:translateY(-4px)}
.card[aria-pressed="true"]::after{opacity:1}
.card.ans::after{/* taste-skill-ignore: a 2-3px ring (selection/state), not a shadow */opacity:1;box-shadow:0 0 0 3px var(--good)}
.card.dim{opacity:.5}
.card .stamp{position:absolute;left:50%;top:40%;width:118%;max-width:170px;mix-blend-mode:multiply;transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none;opacity:0;z-index:3;color:var(--good)}
.card .stamp svg{display:block;width:100%;height:auto}
.card .stamp.no{color:var(--bad-ink)}
.card .stamp.on{opacity:1}
.cb .card .stamp.no svg rect:first-child{stroke-dasharray:7 5}
.phase-reveal .shortlist,.phase-done .shortlist{pointer-events:none}
.shortlist.small{margin:0 0 6px;gap:8px}
.shortlist.small .card{padding:8px 6px 10px}
.shortlist.small .card .nm{font-size:15px;margin-top:6px}
.shortlist.small .card .ps{display:none}
.shortlist.small .card .stamp{width:96%}

/* ---------- actions ---------- */
.actions{margin-top:12px;display:grid;gap:8px}
#sign{width:100%;min-height:52px;border-radius:16px;font-size:17px;white-space:normal;line-height:1.15;padding:8px 20px;text-wrap:balance}
#sign:disabled{opacity:1;background:rgba(0,0,0,.16);color:var(--pl-mute);box-shadow:none}
#sign small,.nextc small{font-weight:700;font-size:14px;opacity:.72;margin-left:6px}
.nextc{width:100%;min-height:46px;border-radius:16px;background:var(--plum-deep);color:var(--cream);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform .12s var(--ease-out),opacity .2s}
.nextc:active:not(:disabled){transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.nextc:hover:not(:disabled){background:#271E4C}}
.phase-reveal .actions{visibility:hidden}
#table[hidden],.roundfile[hidden]{display:none}

/* ---------- day nav + archive (below the game) ---------- */
.dk-center.scout{display:flex;flex-direction:column}
.dk-center.scout>#game,.dk-center.scout>#result{order:1}
.dk-center.scout>.daynav{order:2}
.dk-center.scout>.dk-archwrap{order:3}
.dk-center.scout>#arch{order:4}
.dk-center.scout>.dk-keys{order:5}
.daynav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:30px 0 0;padding-top:18px;border-top:1.5px solid var(--pl-line)}
.daynav button{background:rgba(0,0,0,.14);color:var(--cream);border:0;border-radius:var(--radius-s);min-height:42px;padding:0 12px;font-size:14px;font-weight:800}
.daynav button:hover:not(:disabled){background:rgba(0,0,0,.24)}
.daynav #prev{justify-self:start}.daynav #next{justify-self:end}
.daynav button:disabled{opacity:.3}
#dayl{text-align:center;line-height:1.2;min-width:0}
#dayl .pn{display:block;font-weight:800;font-size:15px}
#dayl .pd{display:block;font-weight:500;font-size:13px;color:var(--pl-mute)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-left:6px;vertical-align:middle}
.dk-archwrap{text-align:center}
.linkbtn{background:none;border:0;min-height:44px;padding:0 8px;color:var(--cream);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(248,242,228,.4);margin:2px auto;display:flex}
.linkbtn[hidden]{display:none}
#arch{margin:4px 0 10px;background:var(--g-deep);border-radius:var(--radius);padding:4px 14px}
#arch[hidden]{display:none}
#arch ol{list-style:none;margin:0;padding:0}
#arch li{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:8px;padding:8px 0;font-size:14px}
#arch li+li{border-top:1px solid var(--pl-line)}
#arch li.cur .an{color:var(--gold)}
#arch .an{font-weight:800;font-variant-numeric:tabular-nums}
#arch .ad{line-height:1.25;font-weight:700}
#arch .as{display:block;color:var(--pl-mute);font-size:13px;font-weight:500}
#arch .st{color:var(--gold);font-weight:700}
#arch button{min-height:38px;font-size:14px;padding:0 14px;background:var(--cream);color:var(--g-deep);border:0;border-radius:var(--radius-pill)}

/* ---------- result ---------- */
#result{padding-top:10px}
#result[hidden]{display:none}
.rsub{margin:6px 2px 0;font-size:16px;font-weight:700;color:var(--gold)}
#rt{margin:6px 2px 0;font-size:clamp(32px,8.6vw,44px);text-wrap:balance}
#rt.no{color:var(--cream)}
#rt .not{display:block;font-size:.5em;letter-spacing:-.02em;color:var(--red-tint);margin-top:6px}
/* the player file: flips in, career strip draws itself */
.file{margin:16px 0 0;background:var(--cream);color:var(--ink);border-radius:var(--radius-l);padding:16px 16px 18px;transform-origin:50% 0}
.file-h{display:flex;align-items:center;gap:12px}
.flagtile{flex:none;width:44px;height:33px;object-fit:cover;border-radius:6px;background:var(--panel)}
.file-h{display:flex;align-items:center;gap:12px}
.file-h b{display:block;font-size:19px;font-weight:900;letter-spacing:-.025em;line-height:1.1}
.file-h span{display:block;font-size:14px;font-weight:600;color:var(--mute);margin-top:2px}
.strip{list-style:none;margin:14px -4px 0;padding:12px 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px 4px;background:var(--panel);border-radius:14px}
.strip li{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.strip li svg{width:40px;height:40px}
.strip li b{font-size:12px;font-weight:800;line-height:1.15;max-width:100%;text-wrap:balance}
.strip li span{font-size:12px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
/* a loan spell reads "2026 loan" (FD.t in stripHTML) */
.strip li.link b{color:var(--plum-ink)}
.rline{margin:14px 0 0;font-size:clamp(20px,5.6vw,24px);font-weight:900;letter-spacing:-.025em;line-height:1.18;text-wrap:balance}
/* the round file, between rounds */
.roundfile{margin-top:12px}
.rf-res{margin:10px 0 0;font-size:15.5px;font-weight:700;color:#3A332A}
.rf-res b{color:var(--good-ink);font-weight:900}
.rf-res.no{color:var(--bad-ink)}
.roundfile .strip{margin-top:10px}
#nextr{width:100%;min-height:52px;margin-top:12px;border-radius:16px;font-size:17px}
/* score */
.scorehead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 2px 0}
.clean{flex:none;width:150px;color:var(--gold);transform:rotate(-10deg)}
.clean svg{display:block;width:100%;height:auto}
.clean[hidden]{display:none}
#result .stars{margin:10px 2px 0}
.stars{display:flex;gap:6px;color:var(--gold)}
.stars span{display:block;width:40px;height:40px}
.stars span svg{width:100%;height:100%;display:block}
.stars span.off{color:rgba(0,0,0,.22)}
.stars span.pop{animation:starIn .34s var(--ease-out) backwards}
@keyframes starIn{from{opacity:0;transform:scale(.6) rotate(-14deg)}}
.score{display:flex;align-items:baseline;gap:8px;font-size:68px;font-weight:900;line-height:1;letter-spacing:-.045em;color:var(--gold);font-variant-numeric:tabular-nums}
.score small{font-size:15px;color:var(--pl-mute);font-weight:700;letter-spacing:0}
.score.zero{color:var(--cream)}
#verdict{margin:8px 2px 0;font-size:17px;color:var(--pl-mute);font-weight:500;line-height:1.4;text-wrap:balance}
/* form guide */
.form{display:flex;align-items:center;gap:12px;margin:16px 2px 0}
.pills{display:flex;gap:5px}
.pills i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:900;background:rgba(0,0,0,.2);color:var(--pl-soft)}
.pills i.W{background:var(--good);color:var(--cream)}
.pills i.D{background:var(--gold);color:#1E1A14}
.pills i.L{background:var(--red);color:var(--cream)}
.pills i.now{/* taste-skill-ignore: a 2-3px ring (selection/state), not a shadow */box-shadow:0 0 0 2px var(--plum),0 0 0 4px var(--cream)}
#formt{font-size:15px;font-weight:700;color:var(--pl-mute)}
#formt b{color:var(--cream);font-weight:900}
#gstats{margin:10px 0}
.rhead{margin:30px 2px 10px;font-size:19px;font-weight:900;letter-spacing:-.02em}
.recap{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rr{background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:12px 12px 12px;--ink:#1E1A14;--mute:#6B6153;--plum-ink:#45377F}
.rr-h{display:flex;align-items:center;gap:10px}
.rr-h>div{flex:1;min-width:0}
.rr-h b{display:block;font-size:16.5px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.rr-h div span{display:block;font-size:13px;font-weight:600;color:var(--mute)}
.rr .flagtile{width:36px;height:27px;border-radius:4px}
.rr-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:900;background:var(--panel);color:var(--plum-ink);font-variant-numeric:tabular-nums}
.rr.early .rr-n{background:var(--good);color:var(--cream)}
.rr.late .rr-n{background:var(--gold);color:#1E1A14}
.rr-p{flex:none;font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--good-ink);font-variant-numeric:tabular-nums}
.rr.no .rr-p{color:var(--mute)}
.rr-res{margin:8px 0 0;font-size:14px;font-weight:600;color:#3A332A;line-height:1.35}
.strip.mini{margin:8px 0 0;padding:8px 2px;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px 2px}
.strip.mini li svg{width:28px;height:28px}
.strip.mini li b{font-size:11px}
.strip.mini li span{font-size:11px}
.sharebox{display:flex;justify-content:flex-start;align-items:center;gap:6px;margin:16px 2px 4px}
.sharebox i{width:30px;height:30px;border-radius:8px;background:rgba(0,0,0,.24)}
.sharebox i.early{background:var(--good)}
.sharebox i.late{background:var(--gold)}
.sharebox i.no{background:rgba(0,0,0,.34)}
.cb .sharebox i.late{background:#9AD2EE}
.rbtn{display:flex;gap:10px;margin-top:10px}
.rbtn>*{flex:1}
#share{min-height:56px;border-radius:16px;font-size:17px}
#archb2{min-height:48px;color:var(--cream);border:0;background:rgba(0,0,0,.14)}
#result .nextp{margin:20px 0 12px;text-align:center;font-size:14px;color:var(--pl-mute)}
#result .nextp b{display:block;margin-top:2px;font-size:22px;font-weight:900;color:var(--cream);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.nextgame{display:flex;align-items:center;gap:14px;text-align:left;text-decoration:none;color:var(--ink);background:var(--cream);border-radius:var(--radius);padding:12px 16px 12px 12px;margin-top:6px;transition:transform .12s var(--ease-out)}
.nextgame:active{transform:scale(.98)}
.nextgame .ng{width:48px;height:48px;flex:none;border-radius:13px}
.nextgame div{flex:1;min-width:0}
.nextgame small{display:block;font-size:13px;font-weight:700;color:var(--green-deep)}
.nextgame b{display:block;font-size:18px;font-weight:900;letter-spacing:-.02em}
.nextgame span{display:block;font-size:13.5px;color:#6B6153}
.nextgame .go{width:20px;height:20px;color:var(--green);flex:none}

/* ---------- sheets (paper; these flip in dark mode) ---------- */
.mo-bd{position:absolute;inset:0}
.mo .sheet{position:relative;padding-top:12px}
.mo-sheet:focus{outline:none}
.mo .sheet-h{position:sticky;top:-12px;z-index:1;background:var(--paper);padding:4px 0 6px;margin:0 0 6px}
.mo .sheet-h .ib{background:var(--card-2);color:var(--ink)}
.mo-b{padding:0 0 4px}
.steps{list-style:none;margin:4px 0 16px;padding:0;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:center;font-size:15px;line-height:1.4;color:var(--mute)}
.steps li b{color:var(--ink)}
.steps .pic{flex:none;width:84px;height:72px;border-radius:12px;overflow:hidden}
.steps .pic svg{display:block;width:100%;height:100%}
.steps .n{display:block;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:1px}
.modal-go{display:flex;width:100%;min-height:52px}
.league{width:100%;border-collapse:collapse;margin:4px 0 6px;text-align:center;font-variant-numeric:tabular-nums}
.league th{font-size:13px;font-weight:700;color:var(--mute);padding:0 0 4px}
.league td{font-size:28px;font-weight:900;letter-spacing:-.03em;padding:2px 0 4px;background:var(--card-2)}
.league td:first-child{border-radius:12px 0 0 12px}.league td:last-child{border-radius:0 12px 12px 0;color:var(--plum-ink)}
.dh{margin:6px 0 8px;font-size:15px;font-weight:800}
.lgnote{margin:4px 0 14px;font-size:13.5px;color:var(--mute);line-height:1.4}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 14px;text-align:center}
.sgrid b{display:block;font-size:28px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.sgrid span{display:block;font-size:13px;color:var(--mute);line-height:1.2}
.sgrid.two{grid-template-columns:1fr 1fr}
.dist{display:grid;gap:8px;margin:6px 0 16px}
.dist .dr{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font-size:14px;font-weight:800}
.dist .bar{height:26px;background:var(--card-2);border-radius:8px;overflow:hidden}
.dist .fill{height:100%;min-width:30px;width:var(--w);background:var(--plum);color:var(--cream);border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding:0 9px;font-weight:800;font-variant-numeric:tabular-nums;transform-origin:left;animation:grow .3s var(--ease-out) backwards}
.dist .fill.z{background:var(--line-strong);color:var(--ink)}
@keyframes grow{from{transform:scaleX(.3);opacity:.4}}
.mo .nextp{text-align:center;font-size:14px;color:var(--mute);margin:0}
.mo .nextp b{display:block;font-size:22px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-size:16px;font-weight:700}
.row+.row{border-top:1px solid var(--line)}
.row.stack{display:block;padding:10px 0 12px;min-height:0}
.row.stack>span{display:block;margin-bottom:8px}
.row small{display:block;font-weight:500;font-size:13.5px;color:var(--mute);margin-top:1px}
.sw{position:relative;width:54px;min-width:54px;height:44px;min-height:44px;border-radius:16px}
.sw::before{content:"";position:absolute;left:0;top:6px;width:54px;height:32px;border-radius:16px;background:var(--card-2);box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:background .2s}
.sw::after{content:"";position:absolute;left:4px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--mute);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s var(--ease-out)} /* taste-skill-ignore: the shared settings switch knob */
.sw[aria-checked="true"]::before{background:var(--plum);box-shadow:none}
.sw[aria-checked="true"]::after{transform:translateX(22px);background:#F8F2E4}
.seg{display:flex;background:var(--card-2);border-radius:var(--radius-s);padding:3px;gap:3px}
.seg button{flex:1;border:0;border-radius:9px;min-height:40px;padding:0 6px;background:none;font-size:14px;font-weight:700;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.fine{font-size:13.5px;color:var(--mute);margin:12px 0 0;text-align:center}
.toast[hidden]{display:none}
.toast:not([hidden]){opacity:1;transform:translate(-50%,0)}

/* ---------- below the fold on plum ---------- */
.fd-seo{color:rgba(248,242,228,.8);border-top:1.5px solid var(--pl-line)}
.fd-seo h2,.fd-seo h3{color:var(--cream);font-weight:900;letter-spacing:-.02em}
.fd-seo h3{font-weight:800;letter-spacing:0}
.fd-seo a,.credit a{color:var(--cream);text-underline-offset:3px}
.fd-seo .fd-more a{font-weight:700}
.credit{margin:18px 0 0;font-size:13.5px;color:var(--pl-soft);line-height:1.5}
.fd-seo .credit{text-align:left}

/* ---------- sizes ---------- */
@media (max-width:360px){
  .head h1{font-size:26px}.fd{width:32px;height:44px;font-size:33px}.fd .h i{height:44px;line-height:44px}
  .clue .tx{font-size:16.5px}.card .nm{font-size:13px}.shortlist{gap:6px}.clean{width:120px}
  .score{font-size:50px}.stars span{width:34px;height:34px}.pills i{width:27px;height:27px}
}
@media (min-width:600px){
  .head{margin-top:22px}
  .card .kit{aspect-ratio:3/1}
  .clue .tx{font-size:21px}
  .clue.old .tx{font-size:16.5px}
  .shortlist{grid-template-columns:repeat(3,1fr);gap:10px}
  .card .nm{font-size:16px}
  .fd{width:40px;height:56px;font-size:42px}.fd .h i{height:56px;line-height:56px}
  .strip{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
  .strip li svg{width:46px;height:46px}
}

/* ---------- polish pass (25 Oct): cross-out button, knock-outs, keyboard focus, tips, streak ---------- */
/* a slot holds the card and its cross-out button; the button's hit area is 44px, the drawn disc 26px */
.slot{position:relative;display:flex;min-width:0}
.slot>.card{flex:1;min-width:0}
.xb{position:absolute;top:3px;right:3px;z-index:4;width:26px;height:26px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(30,26,20,.10);color:#6B6153;cursor:pointer;transition:background .16s var(--ease-out),color .16s var(--ease-out),transform .16s var(--ease-out),opacity .16s var(--ease-out)}
.xb::before{content:"";position:absolute;inset:-9px}
.xb svg{width:12px;height:12px}
.xb[aria-pressed="true"]{background:var(--bad-ink);color:#fff}
.xb:active{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){.xb:hover{background:rgba(30,26,20,.2);color:#1E1A14}.xb[aria-pressed="true"]:hover{background:var(--bad-ink);color:#fff}}
.xb:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
#game:not(.phase-play) .xb{opacity:0;pointer-events:none}
/* keyboard focus on a card: a cream outline outside the gold pick ring, so focus and pick never look the same */
.card:focus-visible{outline:3px solid var(--cream);outline-offset:8px}
/* ruled out: dimmed, desaturated, and a chip naming the clue (a cross shape plus text, never colour alone) */
.card .ob{position:absolute;left:6px;top:6px;z-index:2;display:none;align-items:center;gap:3px;padding:2px 7px 2px 5px;border-radius:999px;font-size:11.5px;font-weight:800;line-height:16px;white-space:nowrap;background:#3A332A;color:#F8F2E4}
.card .ob svg{width:11px;height:11px;flex:none}
.card.out .ob,.card.ans .ob{display:inline-flex}
.card.out{opacity:.55}
.card.out .kit svg{filter:grayscale(1);opacity:.45}
.card.ans .ob{background:var(--good-ink);color:#fff}
.card.ans .nt{color:var(--good-ink)}
/* round strip pips: shape as well as colour (solid = early, half = late, hatched = wrong) */
.rounds .segs i.late{background:linear-gradient(90deg,var(--gold) 0 55%,rgba(240,184,64,.35) 55%)}
.rounds .segs i.no{background:repeating-linear-gradient(135deg,var(--bad) 0 3px,rgba(248,242,228,.12) 3px 6px)} /* taste-skill-ignore: hatching marks a miss */
/* share squares carry the clue number or a cross */
.sharebox{flex-wrap:wrap}
.sharebox i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;font-style:normal}
.sharebox i b{font-size:17px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.sharebox i.late b{color:#1E1A14}
.sharebox i svg{width:16px;height:16px;color:rgba(248,242,228,.8)}
.sharebox .shk{flex-basis:100%;font-size:13px;font-weight:600;color:var(--pl-soft);margin-top:2px}
/* the day streak, as on Stakes */
.streak{display:inline-flex;align-items:center;gap:8px;margin:12px 2px 0;padding:6px 14px 6px 10px;border-radius:var(--radius-pill);background:var(--plum-deep);font-size:14px;font-weight:600;color:var(--pl-mute)}
.streak b{color:var(--cream);font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}
.streak svg{width:22px;height:22px;transform-origin:50% 90%;animation:flame 2.4s ease-in-out infinite}
@keyframes flame{0%,100%{transform:rotate(-3deg) scaleY(1)}50%{transform:rotate(3deg) scaleY(1.06)}}
/* the result sets its mood: a gold glow on a win, the score settles cream on a bad day */
#result.lost .score{color:var(--cream)}
/* 44px targets: the header icons and the day buttons */
.gtop .ib{width:44px;height:44px}
.daynav .btn{min-height:44px}
/* tips */
.tipbox{position:fixed;z-index:60;max-width:260px;padding:9px 12px;border-radius:12px;background:#1E1A14;color:#F8F2E4;font-size:13.5px;font-weight:600;line-height:1.35;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.tipbox[hidden]{display:none}
[data-tip]{cursor:help}
[data-tip]:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
/* the stats sheet now has six tiles */
.sgrid.six{grid-template-columns:repeat(3,1fr);row-gap:12px}
/* the first-time hint names the button */
.xhint b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(248,242,228,.16);color:var(--cream);font-size:12px;vertical-align:1px}
.xhint kbd{font:700 12px/18px var(--font);padding:0 5px;border-radius:5px;background:rgba(248,242,228,.16);color:var(--cream)}
/* the Dressing-room card lands: it swings in on its peg and stays a warmer paper with a cream frame */
.clue.dr{box-shadow:inset 0 0 0 2px rgba(240,184,64,.55)} /* taste-skill-ignore: a 2px frame, not a shadow */
.clue.dr .lab>span:first-child{color:#8A4B12}
.clue.dr.in .peg{animation:pegIn .5s var(--ease-out) both}
@keyframes pegIn{0%{opacity:0;transform:translateY(-10px) scale(1.4)}60%{opacity:1;transform:translateY(1px) scale(.95)}100%{transform:none}}

/* ---------- reduced motion: no travel, no flips; colour and opacity changes stay ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
:root[data-reduced="1"] *,:root[data-reduced="1"] *::before,:root[data-reduced="1"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

/* graduation: the how-to list in the SEO block */
.fd-seo .fd-howto{margin-top:22px}.fd-seo .fd-howto ol{margin:0 0 6px;padding-left:22px}.fd-seo .fd-howto li{margin:0 0 8px}
.mo .row[hidden],.fine[hidden]{display:none}