/* ==========================================================================
   Scrawl.gg — visual system
   White page, one black card, oversized lowercase display type, circular
   controls. Everything the player needs lives inside the card; the page
   around it stays empty on purpose.
   ========================================================================== */

:root{
  --page:#ffffff;
  --ink:#0a0a0a;
  --ink-dim:#9a9a9a;
  --card:#0a0a0a;
  --card-ink:#ffffff;
  --card-dim:#8d8d8d;
  --card-line:rgba(255,255,255,.14);
  --chip:#ffffff;
  --chip-ink:#0a0a0a;
  --accent:#ff6a3d;
  --good:#3ddc84;
  --bad:#ff4d5e;
  --radius:26px;
  --card-w:min(94vw, 486px);
  --card-h:min(76vh, 636px);
  --shadow:0 24px 60px -18px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.06);
  --ff: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  /* One easing curve for the whole site. Three slightly different guesses at
     "snappy" is how an interface ends up feeling assembled rather than made.
     The difficulty knob keeps its own overshoot curve — that one is a physical
     joke about a switch, not a transition. */
  --ease:cubic-bezier(.2,.9,.3,1);
}
html[data-theme="dark"]{
  --page:#0c0c0d;
  --ink:#f4f4f5;
  --ink-dim:#6b6b70;
  --card:#171719;
  --card-line:rgba(255,255,255,.1);
  --chip:#f4f4f5;
  --chip-ink:#0a0a0a;
  --shadow:0 24px 60px -18px rgba(0,0,0,.7);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* `hidden` means hidden.

   The browser's own stylesheet says [hidden]{display:none}, but that lives in
   the user-agent origin, and *any* author rule setting `display` beats it no
   matter how weak its selector looks. So the moment a component gets
   `display:flex` of its own, every `el.hidden = true` in the JavaScript
   silently stops doing anything, and the element sits there in plain sight.

   That is exactly what happened to the language menu: it shipped, and it was
   open on every page load, on every page, because .langmenu{display:flex} was
   quietly outranking the browser. Nothing in the code looked wrong — the
   property was being set, and reading el.hidden back said true.

   One line, at the top, so it can never happen to the next component either. */
[hidden]{display:none !important}

/* Keyboard focus has to be visible on both grounds: the page is white, the
   card is black, and controls live on each. */
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:10px}
.card :focus-visible{outline-color:#fff}
#s-draw :focus-visible{outline-color:#0a0a0a}

/* The countdowns are driven by absolute deadlines in JS, so suppressing the
   decorative transitions here changes nothing about how the game plays. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

html,body{height:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--ff); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
input{background:none;border:0;outline:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:26px;
  padding:18px 26px; flex-wrap:wrap;
}
.brand{
  font-weight:800; font-size:23px; letter-spacing:-.035em;
  text-decoration:none; color:inherit;
}
.brand span{opacity:.42}
/* Reads as a subtitle to the wordmark, not as a slogan competing with it.
   First thing dropped when the bar gets tight — the games matter more. */
.strapline{
  margin:0 0 0 -14px; align-self:center;
  font-size:12.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-dim);
  white-space:nowrap;
}
@media (max-width:900px){ .strapline{display:none} }
.modes{display:flex; align-items:flex-end; gap:22px}
.mode{
  font-size:19px; font-weight:700; letter-spacing:-.03em;
  color:var(--ink-dim); position:relative; padding-bottom:1px;
  transition:color .15s;
}
.mode:hover{color:var(--ink)}
.mode.active{color:var(--ink)}
.mode sup{font-size:.6em;font-weight:700;top:-.55em;position:relative}
.mode.soon{cursor:not-allowed;opacity:.55}
.mode.soon:hover{color:var(--ink-dim)}
.tag{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  font-size:9px; font-style:normal; font-weight:700; letter-spacing:.02em;
  background:#ff2d8a; color:#fff; padding:2px 7px; border-radius:99px;
  line-height:1.35; white-space:nowrap;
}
/* position:absolute beats the hidden attribute's display:none, so say it. */
.tag[hidden]{display:none}
/* beta is a warning, not an invitation, so it drops the pink and reads as a
   label rather than a badge. */
.mode .tag.beta{background:#e9e9e9; color:#4a4a4a}
[data-theme="dark"] .mode .tag.beta{background:#2c2c30; color:#c9c9cf}
.util{margin-left:auto; display:flex; align-items:center; gap:14px}
.txtbtn{font-size:12px;color:var(--ink-dim)}
.txtbtn:hover{color:var(--ink)}
.iconbtn{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:var(--ink-dim);
}
.iconbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.iconbtn svg{width:17px;height:17px}

/* ── stage + card ────────────────────────────────────────────────────── */
#stage{
  flex:1; display:grid; place-items:center; padding:8px 14px 34px;
  position:relative;
}
.card{
  width:var(--card-w); height:var(--card-h);
  background:var(--card); color:var(--card-ink);
  border-radius:var(--radius); box-shadow:var(--shadow);
  position:absolute; overflow:hidden;
  display:none; isolation:isolate;
}
html[data-theme="dark"] .card{border:1px solid var(--card-line)}
.card.is-active{display:block; animation:pop .34s var(--ease)}
.card.tall{--card-h:min(84vh, 760px)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

.card-pad{
  position:absolute; inset:0; padding:30px 32px 28px;
  display:flex; flex-direction:column;
}
.card-pad.scroll{overflow-y:auto; overscroll-behavior:contain}
.card-pad.center-all{align-items:center; justify-content:center; text-align:center}
.card.flush .card-pad{padding:0}
.spacer{flex:1; min-height:12px}

.display{
  font-size:clamp(52px, 13vw, 74px); font-weight:800; letter-spacing:-.055em;
  line-height:.92; margin:2px 0 20px;
}
.display.sm{font-size:clamp(38px,9vw,52px); margin-bottom:14px}
.lede{
  color:var(--card-dim); font-size:16.5px; line-height:1.42;
  margin:0 0 15px; max-width:34ch; font-weight:500;
}
.lede.center{max-width:30ch}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 12px}
.kicker.mt{margin-top:18px}
.hint{font-size:11.5px;color:var(--card-dim);margin:12px 0 0;min-height:14px}
/* The daily run. Quiet by default — it only takes any colour on the day it is
   about to be lost, which is the one day the number is worth reading. */
.streak{font-size:11.5px;font-weight:700;color:var(--card-dim);margin:0 0 11px;letter-spacing:-.01em}
.streak.at-risk{color:var(--card-ink)}
#resStreak{margin:-6px 0 18px}

/* A player who hasn't finished has no score, and saying 0.00 would be a lie
   about them. Three pips, and what they are actually doing. */
.board li.waiting{opacity:.72}
.board li.waiting .sc.pending{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:var(--card-dim); white-space:nowrap;
}
.pips{display:inline-flex; gap:3px}
.pips b{
  width:4px;height:4px;border-radius:50%;background:currentColor;
  animation:pip 1.1s ease-in-out infinite;
}
.pips b:nth-child(2){animation-delay:.15s}
.pips b:nth-child(3){animation-delay:.3s}
@keyframes pip{0%,100%{opacity:.25}50%{opacity:1}}

/* The day draining away. Tabular figures so the seconds tick in place instead
   of shuffling the whole line left and right once a second. */
.countdown{
  font-size:12.5px; font-weight:700; color:var(--card-dim);
  margin:0 0 14px; font-variant-numeric:tabular-nums;
}
.err{font-size:12.5px;color:var(--bad);margin:12px 0 0;min-height:16px}
.dim{color:var(--card-dim);font-weight:500}
.sub{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
     color:var(--card-dim);margin:26px 0 10px}

.corner-btn{
  position:absolute; top:26px; right:28px; width:34px;height:34px;
  display:grid;place-items:center;color:var(--card-dim);border-radius:10px;z-index:3;
}
.corner-btn:hover{color:var(--card-ink);background:rgba(255,255,255,.09)}
.corner-btn svg{width:20px;height:20px}

/* ── launch row ──────────────────────────────────────────────────────── */
.launch{display:flex; align-items:center; gap:11px}
.circle{
  width:54px;height:54px;border-radius:50%;background:var(--chip);color:var(--chip-ink);
  display:grid;place-items:center; position:relative; flex:none;
  transition:transform .22s var(--ease);
}
/* Only on devices that actually hover — on a touchscreen the hover state
   sticks after a tap and the button looks stuck up in the air. The lift is
   smaller and slower than it was: a 5% jump in 160ms reads as a flinch. */
@media (hover: hover) and (pointer: fine){
  .circle:hover{transform:translateY(-2px) scale(1.03)}
  .circle:not(.daily):hover::after{opacity:1}
}
.circle:active{transform:translateY(0) scale(.97); transition-duration:.08s}
/* The shadow lives on a pseudo-element and fades, rather than being animated
   on the button itself, which is what made the movement feel heavy. */
/* Not on the daily button: that one already owns both its pseudo-elements for
   the rainbow ring, and borrowing one would erase it. */
.circle:not(.daily)::after{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:-1;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  opacity:0; transition:opacity .22s ease;
}
/* display:block matters more than it looks: an inline svg sits on the text
   baseline, so the icon was riding two or three pixels low inside a container
   that was centring it perfectly. */
.circle svg{width:23px;height:23px;display:block}
.circle em{
  position:absolute; bottom:-17px; left:50%; transform:translateX(-50%);
  font-style:normal; font-size:9.5px; font-weight:700; color:var(--card-dim);
  white-space:nowrap; letter-spacing:.01em;
}
/* (the online button carried a beta tag until 19 August 2026; the styling for
   a tag on a circle button goes with it) */
.circle.daily{margin-left:auto; box-shadow:0 0 0 3px var(--card), 0 0 0 6px transparent}
.circle.daily::before{
  content:""; position:absolute; inset:-6px; border-radius:50%; z-index:-1;
  background:conic-gradient(#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#007aff,#af52de,#ff2d55,#ff3b30);
}
.circle.daily::after{
  content:""; position:absolute; inset:-3px; border-radius:50%; background:var(--card); z-index:-1;
}
/* Today's daily, already played: the ring loses its colour. Nothing is added
   to the card — the one live thing on it simply stops competing for the eye. */
.circle.daily:not(.undone)::before{filter:grayscale(1); opacity:.4}

/* The three stops used to be hardcoded pixel values that didn't come from the
   track's width, so the knob sat past its dot on Hard and hung off the end of
   the pill entirely on Brutal. Track and knob are variables now and the two
   moved positions are derived from them, which also means one line changes
   the whole control on small screens instead of three that can disagree. */
.difftoggle{
  --track:44px;               /* the pill */
  --knob:18px;                /* the circle that slides along it */
  --inset:2px;                /* breathing room at each end */
  display:flex; align-items:center; gap:9px; flex:none;
  padding:0; margin-left:4px; position:relative;
}
.difftoggle .dots{
  width:var(--track);height:22px;border-radius:99px;background:#e9e9ea;
  display:flex;align-items:center;justify-content:space-around;padding:0 6px;position:relative;
}
.difftoggle .dots i{width:3px;height:3px;border-radius:50%;background:#a8a8ad}
.difftoggle .knob{
  position:absolute; width:var(--knob);height:var(--knob);border-radius:50%;background:#0a0a0a;
  transform:translateX(0); transition:transform .2s cubic-bezier(.3,1.4,.5,1), background .2s;
  margin-left:var(--inset); z-index:2; pointer-events:none;
}
/* Centre of the track, then hard against the far end — both measured from the
   track rather than guessed. */
.difftoggle[data-d="hard"] .knob{
  transform:translateX(calc((var(--track) - var(--knob)) / 2 - var(--inset)));
  background:#ff9f0a;
}
.difftoggle[data-d="brutal"] .knob{
  transform:translateX(calc(var(--track) - var(--knob) - var(--inset) * 2));
  background:#ff375f;
}
.difftoggle b{font-size:13.5px;font-weight:700;letter-spacing:-.01em}

/* ── generic controls ────────────────────────────────────────────────── */
.btn{
  background:rgba(255,255,255,.1); color:var(--card-ink);
  padding:11px 17px; border-radius:13px; font-size:14px; font-weight:700;
  letter-spacing:-.01em; transition:background .15s, transform .12s;
}
.btn:hover{background:rgba(255,255,255,.18)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--chip);color:var(--chip-ink)}
.btn.primary:hover{background:#e6e6e6}
.btn.ghost{background:transparent;color:var(--card-dim);padding:11px 12px}
.btn.ghost:hover{color:var(--card-ink)}
.btn.wide{width:100%;text-align:center}
.btn[disabled]{opacity:.4;pointer-events:none}
.row{display:flex;align-items:center}
.row.gap{gap:9px}
.row.wrap{flex-wrap:wrap}
.row.between{justify-content:space-between}
.mini{font-size:11.5px;font-weight:700;color:rgba(0,0,0,.4);padding:6px 9px;border-radius:9px}
.mini:hover{color:rgba(0,0,0,.75);background:rgba(0,0,0,.06)}

.field{display:block;margin:0 0 14px}
.field span{display:block;font-size:11.5px;font-weight:700;color:var(--card-dim);margin-bottom:6px}
.field input,.roomcode,.initials,#inpGuess{
  width:100%; background:rgba(255,255,255,.08); border-radius:13px;
  padding:12px 15px; font-size:15px; font-weight:600; color:var(--card-ink);
}
.field input::placeholder,.roomcode::placeholder,.initials::placeholder,#inpGuess::placeholder{color:rgba(255,255,255,.28)}
.roomcode{text-transform:uppercase;letter-spacing:.35em;font-weight:800;text-align:center;flex:1}
.initials{text-transform:uppercase;letter-spacing:.3em;font-weight:800;text-align:center;width:110px;flex:none}
.divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--card-dim);font-size:11px}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--card-line)}
.bigcode{
  font-size:52px;font-weight:800;letter-spacing:.16em;line-height:1;margin:0 0 16px;
  font-variant-numeric:tabular-nums;
}
.players{display:flex;flex-direction:column;gap:7px;max-height:150px;overflow:auto}
.players li{
  display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.06);padding:8px 12px;border-radius:11px;
}
.players li .pip{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.players li .badge{margin-left:auto;font-size:10.5px;color:var(--card-dim);font-weight:700}

/* ── draw screen ─────────────────────────────────────────────────────── */
#s-draw{background:#fafaf8}
html[data-theme="dark"] #s-draw{background:#f2f2ef}
#canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}
.hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;padding:20px 22px}
.hud-top{display:flex;align-items:flex-start;justify-content:space-between}
.counter{font-size:13px;font-weight:700;color:rgba(0,0,0,.32);font-variant-numeric:tabular-nums}
.counter b{color:rgba(0,0,0,.72)}
.clock{
  font-size:34px;font-weight:800;letter-spacing:-.04em;color:rgba(0,0,0,.75);
  font-variant-numeric:tabular-nums;line-height:1;
}
.clock.warn{color:var(--bad)}
.prompt-wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding-bottom:40px;
}
.prompt{
  font-size:clamp(34px,8.5vw,50px);font-weight:800;letter-spacing:-.045em;
  color:rgba(0,0,0,.19); text-align:center; user-select:none;
}
/* blind: the canvas is paper-white and stays that way. The stroke count is the
   only thing the player gets back, so it has to register as feedback without
   describing anything about the drawing. */
.blindmeter{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(0,0,0,.28);user-select:none;
}
.blindmeter[hidden]{display:none}
.blindmeter.pulse{animation:inkpulse .45s ease-out}
@keyframes inkpulse{
  0%{color:rgba(0,0,0,.62);transform:scale(1.06)}
  100%{color:rgba(0,0,0,.28);transform:scale(1)}
}
#s-draw.blindfold .prompt{color:rgba(0,0,0,.26)}
#s-draw.blindfold #canvas{cursor:none}

.hud-bottom{display:flex;align-items:center;gap:12px;pointer-events:auto}
.timebar{flex:1;height:5px;border-radius:99px;background:rgba(0,0,0,.09);overflow:hidden}
.timebar i{display:block;height:100%;width:100%;background:#0a0a0a;transform-origin:left;border-radius:99px}
.timebar.flat{position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:0;background:rgba(255,255,255,.1)}
.timebar.flat i{background:var(--card-ink);border-radius:0}

.veil{
  position:absolute;inset:0;display:grid;place-items:center;z-index:5;
  background:var(--card); color:var(--card-ink);
  transition:opacity .25s ease; pointer-events:none;
}
#s-draw .veil{background:#0a0a0a;color:#fff}
.veil[hidden]{display:none}
.veil.fade{opacity:0}
.veil-inner{text-align:center}
.veil-inner span{display:block;font-size:clamp(56px,15vw,88px);font-weight:800;letter-spacing:-.06em;line-height:1}
.veil-inner small{display:block;margin-top:10px;font-size:14px;color:var(--card-dim);font-weight:600}

/* ── recall screen ───────────────────────────────────────────────────── */
#s-recall{display:none;flex-direction:column}
#s-recall.is-active{display:flex}
.recall-top{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 4px}
.clock.dark{color:var(--card-ink);font-size:26px}
.recall-top .counter{color:var(--card-dim)}
.recall-top .counter b{color:var(--card-ink)}
.recall-art{flex:1;margin:8px 22px 4px;background:#fff;border-radius:18px;position:relative;overflow:hidden}
.recall-art canvas{position:absolute;inset:0;width:100%;height:100%}

/* ── copy²: the reference above, your attempt below ──────────────────── */
#s-copy{display:none;flex-direction:column}
#s-copy.is-active{display:flex}
.copy-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 6px}
.copy-top .counter{color:var(--card-dim)}
.copy-top .counter b{color:var(--card-ink)}
.copy-panel{
  flex:1;margin:0 20px 8px;background:#fff;border-radius:16px;
  position:relative;overflow:hidden;min-height:0;
}
.copy-panel canvas{position:absolute;inset:0;width:100%;height:100%}
.copy-panel #copyCanvas{touch-action:none;cursor:crosshair}
.copy-panel i{
  position:absolute;left:11px;top:8px;font-style:normal;
  font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(0,0,0,.24);pointer-events:none;
}
.copy-panel.mine{box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.copy-foot{display:flex;align-items:center;gap:12px;padding:2px 22px 20px}
.copy-foot .mini{color:rgba(255,255,255,.42)}
.copy-foot .mini:hover{color:var(--card-ink);background:rgba(255,255,255,.1)}
.copy-foot .timebar{background:rgba(255,255,255,.12)}
.copy-foot .timebar i{background:var(--card-ink)}

/* copy² results: original first, then everyone's attempt */
.copyrow{margin-bottom:16px}
.copyrow-head{display:flex;align-items:baseline;gap:9px;margin:0 2px 7px}
.copyrow-head b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.copyrow-head .pts{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;margin-left:auto}
.copyrow-rail{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px}
.copy-cell{flex:none;width:90px;cursor:zoom-in}
.copy-cell canvas{width:90px;height:90px;background:#fff;border-radius:10px;display:block}
.copy-cell.ref canvas{box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.copy-cell b{
  display:block;font-size:10.5px;font-weight:800;margin-top:5px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--card-dim);
}
.copy-cell.hit b{color:var(--good)}
.copy-cell.miss b{color:var(--bad)}

/* ── peek (chain): one look at the link before yours ─────────────────── */
#s-peek{display:none;flex-direction:column}
#s-peek.is-active{display:flex}
.peek-hint{
  margin:0;padding:13px 22px 26px;text-align:center;
  font-size:13.5px;font-weight:600;color:var(--card-dim);
}

/* ── chain results: the filmstrip ─────────────────────────────────────── */
.chains{display:flex;flex-direction:column;gap:18px;margin:16px 0}
.strip{background:rgba(255,255,255,.05);border-radius:16px;padding:12px 12px 11px}
.strip-head{display:flex;align-items:baseline;gap:8px;margin:0 2px 9px}
.strip-head b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.strip-head small{font-size:11px;color:var(--card-dim);font-weight:600}
.strip-rail{display:flex;align-items:flex-start;gap:6px;overflow-x:auto;padding-bottom:6px}
.strip-arrow{
  flex:none;align-self:flex-start;color:var(--card-dim);
  font-size:15px;line-height:1;padding-top:36px;
}
.strip-cell{flex:none;width:86px;cursor:zoom-in}
.strip-cell canvas{width:86px;height:86px;background:#fff;border-radius:10px;display:block}
.strip-cell b{
  display:block;font-size:11px;font-weight:800;margin-top:5px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.strip-cell i{
  display:block;font-style:normal;font-size:9.5px;color:var(--card-dim);
  text-align:center;font-weight:700;
}
.strip-cell.hit b{color:var(--good)}
.strip-cell.miss b{color:var(--bad)}
.strip-cell.quiet b{color:var(--card-dim);font-weight:700}
.strip-foot{margin:8px 2px 0;font-size:12px;font-weight:600;color:var(--card-dim)}
.recall-form{padding:14px 22px 26px;display:flex;gap:8px;align-items:center}
.recall-form input{flex:1}
.recall-form .btn{flex:none}

/* ── results ─────────────────────────────────────────────────────────── */
.score{display:flex;align-items:baseline;gap:9px;margin:2px 0 4px}
.score b{font-size:clamp(52px,13vw,72px);font-weight:800;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.score span{font-size:19px;font-weight:700;color:var(--card-dim)}
.verdict{margin:0 0 18px;font-size:15px;font-weight:600;color:var(--card-dim)}
.items{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.items li{
  display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.055);
  border-radius:14px;padding:9px 13px 9px 9px;
}
.items .thumb{width:52px;height:52px;border-radius:10px;background:#fff;flex:none;overflow:hidden;cursor:zoom-in}
.items .thumb canvas{width:100%;height:100%;display:block}
.items .meta{flex:1;min-width:0}
.items .truth{font-size:15px;font-weight:800;letter-spacing:-.02em;display:block}
.items .said{font-size:12px;color:var(--card-dim);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.items .pts{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.items .pts.ok{color:var(--good)}
.items .pts.no{color:var(--bad)}
.items li.ok{box-shadow:inset 2px 0 0 var(--good)}
.items li.no{box-shadow:inset 2px 0 0 var(--bad)}
.submitrow{display:flex;gap:9px;align-items:center;margin:6px 0 14px}
.submitrow .btn{flex:1}

.board{margin:18px 0 0}
.board h4{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--card-dim);margin:0 0 8px}
.board ol{display:flex;flex-direction:column;gap:5px}
.board li{display:flex;gap:10px;font-size:13.5px;font-weight:600;padding:6px 11px;border-radius:10px;background:rgba(255,255,255,.05)}
.board li.me{background:rgba(255,255,255,.16)}
.board li .rk{color:var(--card-dim);width:22px;font-variant-numeric:tabular-nums}
.board li .nm{flex:1;letter-spacing:.08em;font-weight:800}
.board li .sc{font-variant-numeric:tabular-nums;font-weight:800}
.board li .dt{color:var(--card-dim);font-size:11px;align-self:center}

.gallery{margin:16px 0}
.gallery .g-row{margin-bottom:16px}
.gallery .g-word{font-size:14px;font-weight:800;letter-spacing:-.02em;margin-bottom:7px;display:flex;gap:8px;align-items:baseline}
.gallery .g-word small{font-weight:600;color:var(--card-dim);font-size:11px}
.gallery .g-strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px}
.gallery .g-cell{flex:none;width:84px}
.gallery .g-cell canvas{width:84px;height:84px;background:#fff;border-radius:10px;display:block}
.gallery .g-cell b{display:block;font-size:10.5px;font-weight:700;margin-top:4px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gallery .g-cell.hit b{color:var(--good)}
.gallery .g-cell.miss b{color:var(--bad)}

.steps{display:flex;flex-direction:column;gap:14px;margin:6px 0 4px;counter-reset:s}
.steps li{position:relative;padding-left:34px;color:var(--card-dim);font-size:15px;font-weight:500;line-height:1.4}
.steps li b{color:var(--card-ink);font-weight:800}
.steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;
  background:rgba(255,255,255,.12);display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--card-ink);
}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--card-line)}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--card-dim);font-weight:800}
.tbl td:first-child{font-weight:800}
.defs dt{font-weight:800;font-size:14.5px;margin-top:12px}
.defs dd{color:var(--card-dim);font-size:14px;font-weight:500;margin-top:2px}

/* ── footer, toast, ads ──────────────────────────────────────────────── */
.footer{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:0 20px 22px; font-size:11.5px; color:var(--ink-dim); flex-wrap:wrap;
}
.footer .dot{opacity:.4}
.linkish{font-size:11.5px;color:var(--ink-dim)}
.linkish:hover{color:var(--ink);text-decoration:underline}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--ink);color:var(--page);padding:11px 18px;border-radius:13px;
  font-size:13.5px;font-weight:700;opacity:0;pointer-events:none;transition:.22s;z-index:99;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Ad slots collapse to nothing until the ad layer is switched on
   (see ads.js). They never reserve space in the default build. */
.slot{display:none}
.slot.live{display:block;margin:12px 0}
.slot.live.tall{min-height:250px}
.slot.sticky.live{
  position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;
  display:flex;justify-content:center;background:var(--page);
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
}
.slot-ph{
  border:1px dashed color-mix(in srgb, currentColor 30%, transparent);
  border-radius:12px; display:grid; place-items:center; min-height:90px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--card-dim); font-weight:800; text-align:center; padding:8px;
}
.slot.tall .slot-ph{min-height:250px}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:640px){
  :root{--card-w:calc(100vw - 20px);--card-h:calc(100dvh - 168px);--radius:22px}
  .topbar{gap:14px;padding:13px 16px}
  .modes{gap:15px}
  .mode{font-size:16px}
  .txtbtn{display:none}
  .card-pad{padding:24px 22px 22px}
  .launch{gap:8px}
  .circle{width:48px;height:48px}
  .circle svg{width:20px;height:20px}
  .difftoggle b{font-size:12px}
  .lede{font-size:15px}
  .card.tall{--card-h:calc(100dvh - 168px)}
}
@media (max-width:400px){
  .circle em{font-size:8.5px}
  .difftoggle{margin-left:0}
}
/* Small phones: the launch row is the tightest thing on the page — five
   controls that must stay on one line inside a card with no horizontal
   scroll. Everything in it shrinks together. */
@media (max-width:385px){
  .card-pad{padding:20px 16px 18px}
  .circle{width:44px;height:44px}
  .circle svg{width:18px;height:18px}
  .launch{gap:5px}
  /* A narrower pill needs a smaller circle, or it hangs off both ends. Both
     stops follow from these two numbers, so there is nothing else to change. */
  .difftoggle{gap:4px; --track:32px; --knob:14px}
  .difftoggle b{font-size:11px}
  .display{font-size:46px}
  .lede{font-size:14.5px}
  .recall-form{padding:12px 14px 20px;gap:6px}
  .recall-art{margin:6px 14px 2px}
  .recall-top{padding:16px 16px 2px}
  .btn{padding:10px 13px;font-size:13px}
  .btn.ghost{padding:10px 6px;font-size:12px}
  .hud{padding:16px 16px}
}

/* ── language ─────────────────────────────────────────────────────────────
   Two small things, and the second one matters more than it looks.

   The switcher is footer furniture: the same size and colour as the links
   beside it, with the language you are already reading set in the page's own
   ink so it reads as a state rather than as another link to press.

   The font stacks are the fix for a bug you only see if you speak the
   language. Inter has no CJK glyphs at all, so a Japanese page falls straight
   through to whatever the system offers — and because Han unification gives
   Chinese and Japanese the same codepoints for thousands of characters, what
   the system offers is very often a Chinese face. The text is correct and the
   letterforms are foreign, which to a Japanese reader looks like a website
   that could not be bothered. Naming the system's own face first costs one
   line per script and is the whole difference. */
.langs{display:inline-flex;gap:7px;align-items:baseline}
.langs .lang-on{font-size:11.5px;font-weight:700;color:var(--ink)}
.langs a{white-space:nowrap}

html[lang^="ja"]{
  --ff:"Inter",ui-sans-serif,system-ui,"Hiragino Sans","Hiragino Kaku Gothic ProN",
       "Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif;
}
html[lang^="ko"]{
  --ff:"Inter",ui-sans-serif,system-ui,"Apple SD Gothic Neo","Malgun Gothic",
       "Noto Sans KR",sans-serif;
}
html[lang="zh-Hans"],html[lang^="zh-CN"],html[lang="zh"]{
  --ff:"Inter",ui-sans-serif,system-ui,"PingFang SC","Microsoft YaHei",
       "Noto Sans SC",sans-serif;
}
html[lang="zh-Hant"],html[lang^="zh-TW"],html[lang^="zh-HK"]{
  --ff:"Inter",ui-sans-serif,system-ui,"PingFang TC","Microsoft JhengHei",
       "Noto Sans TC",sans-serif;
}

/* The prompt is the one word on screen a player has three seconds to read, and
   in a language that writes without spaces it can be long enough to wrap into
   something unreadable at full size. Shrinking to fit beats wrapping. */
.prompt{text-wrap:balance}

/* ── the language control ─────────────────────────────────────────────────
   Sits in the util row with sound and theme, and is the same 30px square, so
   the three of them read as one group of settings. It carries the current
   language's tag rather than an icon: a flag is a country, a globe is already
   the online room, and the tag is the only mark that answers "which language
   am I in" without being opened. */
.langpick{position:relative;display:flex}
.tagbtn b{
  font-size:11px; font-weight:800; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.tagbtn[aria-expanded="true"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}

.langmenu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  min-width:172px; padding:6px;
  background:var(--page); color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:1px;
}
.langrow{
  display:flex; align-items:baseline; gap:8px; width:100%;
  padding:7px 9px; border-radius:9px; text-align:left;
  font-size:13px; color:var(--ink-dim);
}
.langrow:hover{background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--ink)}
.langrow.on{color:var(--ink); font-weight:700}
.langrow .nm{flex:1}
/* The tag is the same mark as the button, so pressing a row and watching the
   button change reads as one movement rather than two facts. */
.langrow .tg{font-size:10.5px; font-weight:700; letter-spacing:.06em; opacity:.5}
.langrow .dr{
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:5px; padding:0 4px;
}
.langrule{
  height:1px; margin:5px 4px;
  background:color-mix(in srgb,var(--ink) 12%,transparent);
}