/* OneLiner design system
   Reference: figma (awesome-design-md): a black-and-white frame, pill buttons, and pastel
   "sticky note" color blocks. Borrowed as a system only, nothing copied.
   Substitutions: Bricolage Grotesque + Geist Mono (OFL), our own pastels, one cobalt accent.

   Shape rule (used everywhere):
     buttons, chips, tabs, badges = full pill
     cards, color blocks, sheets  = 20px
     inputs                       = 14px
     small icon tiles             = 12px
   Color rule: ink + canvas carry the UI. One accent (cobalt) marks "you", focus and highs.
   Each game owns one pastel block; text on blocks is always --block-ink. */

@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage.woff2") format("woff2-variations"), url("/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2-variations"), url("/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root, [data-look="fresh"] {
  color-scheme: light dark;
  --canvas: #FAFAF7;
  --surface: #F1F1EC;
  --surface-2: #E9E9E2;
  --line: #E2E2DB;
  --line-strong: #C9C9C0;
  --ink: #141413;
  --ink-2: #5A5A54;
  --on-ink: #FAFAF7;
  --accent: #2F4BFF;
  --accent-soft: rgb(47 75 255 / .12);
  --on-accent: #FAFAF7;
  --danger: #C8321F;
  --scrim: rgb(20 20 19 / .45);

  --b-lime: #D8EFA0;
  --b-lilac: #CDBBF5;
  --b-coral: #F7C3AC;
  --b-pink: #F3CEDA;
  --b-mint: #BCE5CC;
  --b-cream: #EFE6CC;
  --block-ink: #141413;
  --block-ink-2: rgb(20 20 19 / .68);

  --font: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);   /* settle: strong ease-out, no overshoot */
  --pop: cubic-bezier(.3, 1.4, .5, 1);   /* one soft overshoot: rare, happy moments only */
  --spring: var(--pop);

  /* Theme knobs. Retro (bottom of this file) turns these, so components and previews follow. */
  --display: var(--font);
  --wm-font: var(--font);
  --wm-weight: 800;
  --wm-track: -0.045em;
  --wm-stretch: 88%;
  --r-pill: 999px;
  --r-card: 20px;
  --r-input: 14px;
  --r-tile: 12px;
  --edge: none;
  --lift: none;
  --btn-lift: none;
}

@media (prefers-color-scheme: dark) {
  :root, [data-look="fresh"] {
    --canvas: #0E0E10;
    --surface: #18181B;
    --surface-2: #222226;
    --line: #2A2A2F;
    --line-strong: #3C3C43;
    --ink: #F3F2EE;
    --ink-2: #A6A59E;
    --on-ink: #0E0E10;
    --accent: #8C9DFF;
    --accent-soft: rgb(140 157 255 / .16);
    --on-accent: #0E0E10;
    --danger: #FF7A66;
    --scrim: rgb(0 0 0 / .6);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--canvas); color: var(--ink); }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.5; font-weight: 420;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { display: inline-block; flex: none; fill: currentColor; vertical-align: middle; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }

.app {
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 18px 20px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- header */
.top { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.wordmark { font-family: var(--wm-font); font-size: 25px; font-weight: var(--wm-weight); letter-spacing: var(--wm-track); margin: 0; font-stretch: var(--wm-stretch); }
.wordmark a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
/* The app icon beside the name: the same tile as the home-screen icon and the splash. */
.logo-mark { flex: none; display: block; --lm-tile: #141413; --lm-short: #FAFAF7; --lm-long: #D8EFA0; }
.logo-mark .lm-tile { fill: var(--lm-tile); }
.logo-mark .lm-short, .logo-mark .lm-long { fill: none; stroke-width: 6; stroke-linecap: round; }
.logo-mark .lm-short { stroke: var(--lm-short); }
.logo-mark .lm-long { stroke: var(--lm-long); }
@media (prefers-color-scheme: dark) { .logo-mark { --lm-tile: #26262C; } }
.logo-pop { animation: logo-pop .45s var(--pop); }
@keyframes logo-pop { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (hover: hover) { .wordmark a:hover .lm-long { animation: lm-swipe .5s var(--ease); } }
@keyframes lm-swipe { 0% { stroke-dasharray: 0 40; } 100% { stroke-dasharray: 40 0; } }
.wordmark a:active { opacity: .6; }
.top-right { display: flex; gap: 8px; align-items: center; }
.meta { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.meta b { color: var(--ink); font-weight: 650; font-family: var(--mono); font-size: 12.5px; }
#puzzle-no { font-family: var(--mono); font-size: 12.5px; }
.streak {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface); font-size: 13px; font-weight: 650; color: var(--ink);
}
.streak .i { color: var(--accent); }

/* ---------- layout */
.screen { display: flex; flex-direction: column; gap: 24px; flex: 1; }
.center-screen { align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.stack-xs { display: flex; flex-direction: column; gap: 8px; }
.push-down { margin-top: auto; }
.center { text-align: center; }
.muted { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.muted-lg { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.white { color: var(--ink); }
/* Labels are sentence case on purpose: no tiny uppercase tracking above every block. */
.eyebrow { font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: -0.005em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card { background: var(--surface); border-radius: var(--r-card); padding: 22px 20px; }

/* ---------- play */
.prompt-card { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 22px; background: var(--block, var(--surface)); color: var(--block-ink); }
.prompt-card .meta-line, .prompt-card .muted, .prompt-card .eyebrow { color: var(--block-ink-2); }
.prompt-card .meta-line b { color: var(--block-ink); }
.prompt-text { font-size: 31px; font-weight: 760; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.meta-line { font-size: 14px; color: var(--ink-2); }
.meta-line b { color: var(--ink); font-weight: 650; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field input, .field textarea, .inline-form input {
  width: 100%;
  padding: 16px;
  border-radius: var(--r-input);
  border: 1.5px solid var(--line-strong);
  background: var(--canvas);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 132px; resize: none; }
.field input::placeholder, .field textarea::placeholder, .inline-form input::placeholder { color: var(--ink-2); opacity: .85; }
.field input:focus, .field textarea:focus, .inline-form input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.field-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field-foot > span:first-child { font-family: var(--mono); font-size: 12.5px; }
.field-foot .over { color: var(--danger); }

.judge { display: flex; flex-direction: column; gap: 8px; }
/* How you're scored sits in the prompt card, so players see it before they write. */
.judge-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--block-ink-2); }
.judge-chips .chip { padding: 4px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / .55); color: var(--block-ink); font-weight: 700; }
.judge-note { text-align: center; font-size: 13.5px; }

/* ---------- buttons (pills) */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 22px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-size: 17px; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .14s var(--ease), background-color .15s ease, border-color .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98) translateY(1px); }
.btn.primary { background: var(--ink); color: var(--on-ink); }
.btn.primary:hover { opacity: .9; }
.btn.secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn.secondary:hover { border-color: var(--ink); }
.btn.lime { background: var(--accent); color: var(--on-accent); gap: 8px; }
.btn.lime:hover { opacity: .92; }
.btn.small { width: auto; min-height: 48px; font-size: 15px; padding: 0 18px; flex: none; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.link-btn { background: none; border: 0; color: var(--ink-2); font-size: 14px; font-weight: 550; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; cursor: pointer; }
.link-btn:hover { color: var(--ink); }
.retry-quiet { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 550; cursor: pointer; }
.retry-quiet b { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 650; }
.retry-quiet .i { width: 16px; height: 16px; }

.error { color: var(--danger); font-size: 14px; font-weight: 600; }

/* ---------- verdict */
.your-line { font-size: 25px; font-weight: 740; line-height: 1.18; letter-spacing: -0.03em; margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.your-line::before { content: "\201C"; }
.your-line::after { content: "\201D"; }
.flag-note { background: var(--surface); border-left: 3px solid var(--danger); border-radius: var(--r-input); padding: 12px 14px; font-size: 15px; }
.verdict-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; }
.verdict-head .eyebrow { white-space: nowrap; }
.reaction { font-size: 12.5px; font-weight: 650; padding: 5px 11px; border-radius: var(--r-pill); background: var(--block, var(--surface-2)); color: var(--block-ink); }

/* Score bars: no background track. The number carries the value, the bar shows the shape. */
.bar-row { display: flex; flex-direction: column; gap: 6px; }
.bar-head { display: flex; justify-content: space-between; font-size: 16px; }
.bar-head b { font-weight: 700; font-family: var(--mono); font-size: 15px; }
.bar-head b.high { color: var(--accent); }
.bar { height: 6px; }
.bar i {
  display: block; height: 100%; max-width: 100%; border-radius: var(--r-pill); background: var(--ink);
  min-width: 6px;
}

.score-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.big-score { position: relative; transform-origin: left bottom; font-size: 60px; font-weight: 800; letter-spacing: -0.055em; line-height: .95; font-variant-numeric: tabular-nums; }
.big-score small { font-size: 20px; font-weight: 550; color: var(--ink-2); letter-spacing: -0.01em; }
.rank-tag { font-size: 15px; font-weight: 700; color: var(--accent); padding-bottom: 6px; text-align: right; }
/* Result: the judge's verdict is the hero, the number backs it up, the axes come later. */
.result-stage { height: 168px; }
.verdict-hero {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px;
  border-radius: var(--r-card); background: var(--block, var(--surface)); color: var(--block-ink);
}
/* A speech tail pointing up at the judge. */
.verdict-hero::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; margin-left: -8px;
  background: inherit; border-radius: 3px; transform: rotate(45deg);
}
.verdict-hero .eyebrow { color: var(--block-ink-2); }
.verdict-quote { font-family: var(--display); font-size: 27px; font-weight: 780; line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; margin: 0; }
.verdict-hero .big-score small { color: var(--block-ink-2); }
.verdict-hero .score-row { flex-wrap: nowrap; }
.verdict-hero .big-score { white-space: nowrap; }
.verdict-hero .rank-tag {
  white-space: nowrap; align-self: flex-end; margin-bottom: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--block-ink); color: var(--block); font-size: 14px; font-family: var(--mono); letter-spacing: .02em; text-transform: uppercase;
}
.verdict-hero .rank-tag.down { background: transparent; color: var(--block-ink-2); text-transform: none; font-family: inherit; }
.beat-line { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.r-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.r-secondary .btn { width: 100%; }
.board-teaser { display: flex; flex-direction: column; gap: 12px; }
.teaser-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.teaser-list li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-input); font-size: 15px; }
.teaser-list li .pos { font-family: var(--mono); color: var(--ink-2); font-size: 14px; }
.teaser-list li .who { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teaser-list li b { font-family: var(--mono); }
.teaser-list li.me { background: var(--accent-soft); }
.teaser-list li.me .who { color: var(--accent); }
.board-teaser .btn { align-self: flex-start; }


.burst { position: absolute; left: 36px; top: 26px; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; width: 7px; height: 7px; border-radius: 50%; opacity: 0; }
.burst.go i { animation: pop .7s ease-out forwards; }
@keyframes pop {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); }
}

/* ---------- board */
.subhead { display: flex; align-items: center; gap: 6px; }
.subhead h2 { font-size: 24px; font-weight: 780; letter-spacing: -0.035em; margin: 0; }
.icon-btn { width: 44px; height: 44px; margin-left: -10px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: var(--r-pill); }
.icon-btn:hover { background: var(--surface); }

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); overflow-x: auto; }
.tab { flex: 1; min-height: 42px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }

.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.entry { display: flex; gap: 14px; align-items: flex-start; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.entry.me { margin: 4px 0; padding: 16px 14px; border: 0; border-radius: var(--r-card); background: var(--accent-soft); }
.entry .pos { font-family: var(--mono); font-size: 15px; font-weight: 600; min-width: 22px; padding-top: 2px; color: var(--ink-2); }
.entry.first .pos { color: var(--ink); }
.entry.first .pos::before { content: "#"; }
.entry .body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.entry .line { font-size: 16.5px; font-weight: 520; line-height: 1.35; overflow-wrap: anywhere; }
.entry.first .line { font-size: 18px; font-weight: 680; letter-spacing: -0.015em; }
.entry .who { font-size: 13px; color: var(--ink-2); }
.entry.me .who { color: var(--accent); font-weight: 650; }
.entry .pts { font-family: var(--mono); font-size: 15px; font-weight: 650; padding-top: 2px; }
.locked { text-align: center; padding: 32px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 6px; }
.locked b { font-size: 17px; }

.league-box { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r-card); background: var(--b-lilac); color: var(--block-ink); margin-top: auto; }
.league-box .muted { color: var(--block-ink-2); }
.league-title { font-size: 18px; font-weight: 720; letter-spacing: -0.02em; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { padding: 12px 16px; font-size: 15px; min-width: 0; background: var(--canvas); border-color: transparent; border-radius: var(--r-pill); }
.league-box .btn.secondary { border-color: var(--block-ink); color: var(--block-ink); }
.league-box .btn.primary { background: var(--block-ink); color: #FAFAF7; }
.invite { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.invite code { font-family: var(--mono); font-size: 13px; background: var(--canvas); color: var(--ink); padding: 10px 12px; border-radius: var(--r-tile); overflow-wrap: anywhere; }

/* ---------- share */
.share-card { display: flex; flex-direction: column; gap: 18px; padding: 24px 22px; background: var(--block, var(--surface)); color: var(--block-ink); }
.share-top, .share-bottom { display: flex; justify-content: space-between; align-items: baseline; }
.share-top b { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; }
.share-top span { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.share-prompt { font-size: 21px; font-weight: 720; line-height: 1.18; letter-spacing: -0.025em; }
.share-bars { font-family: var(--mono); font-size: 15px; line-height: 2; margin: 0; white-space: pre; overflow-x: auto; }
.share-bars .on { color: var(--block-ink); }
.share-bars .off { color: rgb(20 20 19 / .22); }
.share-bottom { border-top: 1px solid rgb(20 20 19 / .16); padding-top: 16px; }
.share-bottom b { font-size: 36px; font-weight: 800; letter-spacing: -0.05em; }
.share-bottom b small { font-size: 16px; font-weight: 550; color: var(--block-ink-2); letter-spacing: 0; }
.share-bottom span { font-size: 15px; font-weight: 700; }
.toast { min-height: 20px; text-align: center; font-size: 14px; font-weight: 600; color: var(--accent); }

/* ---------- viral hooks */
.challenge-banner { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-card); background: var(--ink); color: var(--on-ink); }
.challenge-banner .muted { color: var(--on-ink); opacity: .72; }
.challenge-who { font-size: 16px; font-weight: 700; }
.challenge-who .lime { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.proof { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
/* A live count of players: the one dot that means something. */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.unlock-card { display: flex; flex-direction: column; gap: 12px; border: 1.5px solid transparent; transition: border-color .5s ease; }
.unlock-card.won { border-color: var(--accent); }
.unlock-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.uc-lock { color: var(--ink); flex: none; transition: color .3s ease, opacity .3s ease .5s; }
.uc-lock.shake { animation: shake .24s ease-in-out; }
.uc-lock.open { color: var(--accent); opacity: 0; }
.unlock-body { position: relative; min-height: 52px; }
.redact { font-size: 20px; line-height: 1.3; color: var(--line-strong); user-select: none; transition: opacity .35s ease, filter .35s ease; }
.redact.gone { opacity: 0; filter: blur(10px); }
.unlock-body .unlock-line { position: absolute; inset: 0; opacity: 0; filter: blur(8px); transition: opacity .7s ease, filter .7s ease; }
.unlock-body .unlock-line.in { opacity: 1; filter: none; }
.unlock-who { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.unlock-line { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
.unlock-line::before { content: "\201C"; }
.unlock-line::after { content: "\201D"; }
.versus { font-size: 15px; font-weight: 700; color: var(--accent); }

/* Challenge: the friend's score is the target. */
.vs-banner { justify-content: space-between; padding: 18px 20px; }
.vs-banner .i { opacity: .55; flex: none; }
.vs-kicker { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--b-lime); }
.vs-target { font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.vs-target b { color: var(--b-lime); font-variant-numeric: tabular-nums; }
/* Dark mode flips --ink to near-white, which made the lime text vanish. Keep these banners dark there. */
@media (prefers-color-scheme: dark) {
  .challenge-banner { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .challenge-banner .muted { color: var(--ink-2); opacity: 1; }
}
/* Head-to-head after you answer. */
.versus-card { gap: 14px; }
.versus-card[data-outcome="win"] { border-color: var(--accent); }
.vs-headline { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.versus-card[data-outcome="win"] .vs-headline { color: var(--accent); }
.vs-totals { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.vs-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-side:last-child { text-align: right; }
.vs-side span { font-size: 14px; font-weight: 650; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-side b { font-family: var(--display); font-size: 44px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vs-side.lead b { color: var(--ink); }
.vs-x { font-family: var(--mono); font-size: 13px; color: var(--ink-2); padding-bottom: 8px; }
.vs-axes { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.vs-axes li { display: grid; grid-template-columns: 1fr 36px 22px 36px; align-items: baseline; gap: 6px; font-size: 15px; }
.vs-axes b { font-family: var(--mono); font-weight: 500; text-align: right; color: var(--ink-2); }
.vs-axes b:last-child { text-align: left; }
.vs-axes b.lead { font-weight: 800; color: var(--ink); }
.vs-mini { font-family: var(--mono); font-size: 11px; color: var(--ink-2); text-align: center; }

/* ---------- install card */
.install-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 44px 14px 14px; border-radius: var(--r-card); background: var(--surface); }
.install-card img { border-radius: var(--r-tile); flex: none; }
.install-text { flex: 1; min-width: 0; gap: 2px; }
.install-title { font-size: 15px; font-weight: 700; }
.install-card .muted { font-size: 13px; }
.install-close { position: absolute; top: 4px; right: 4px; margin: 0; color: var(--ink-2); }

/* ---------- motion: lock it */
.answer-wrap { position: relative; }
#submit-btn:disabled { opacity: 1; cursor: default; } /* locked, not broken */
.seal-lock { position: absolute; top: 14px; right: 14px; color: var(--ink); animation: lockpop .34s var(--spring) both; }
.field textarea.sealed { border-color: var(--ink); color: var(--ink-2); padding-right: 48px; animation: stamp .32s ease-out; }
.prompt-card { transition: opacity .35s ease; }
.prompt-card.dim { opacity: .45; }
.judging { display: flex; flex-direction: column; gap: 14px; animation: fadeup .35s ease-out both; }
.sweep-row { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.sweep-track { position: relative; overflow: hidden; height: 6px; border-radius: var(--r-pill); }
.sweep-track i { position: absolute; top: 0; left: 0; height: 100%; width: 34%; border-radius: var(--r-pill); background: var(--ink); animation: sweep 1.1s ease-in-out infinite; }
.sweep-row:nth-child(3) i { animation-delay: .15s; }
.sweep-row:nth-child(4) i { animation-delay: .3s; }
.cook-dots span { display: inline-block; animation: blink 1s infinite; }
.cook-dots span:nth-child(2) { animation-delay: .2s; }
.cook-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes stamp { 0% { transform: scale(1); } 40% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes lockpop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeup { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* ---------- motion: score reveal (classes added by motion.js) */
.rv { opacity: 0; transform: translateY(10px); }
.rv.in { opacity: 1; transform: none; transition: opacity .35s ease, transform .4s var(--ease); }
.slide { opacity: 0; transform: translateX(24px); }
.slide.in { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s var(--ease); }
.pill { opacity: 0; transform: scale(.6); }
.pill.in { animation: pillpop .42s var(--spring) both; }
.scorepop { animation: scorepop .38s var(--spring); }
@keyframes pillpop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes scorepop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

/* ---------- motion extras */
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes flick { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-1px); } }
@keyframes flash { 0% { opacity: .14; } 100% { opacity: 0; } }
.streak.pulse { animation: pulse 1.4s ease-in-out 2; }
.flame { animation: flick .9s ease-in-out infinite; transform-origin: 50% 90%; }
.flash { position: fixed; inset: 0; background: var(--accent); pointer-events: none; animation: flash .45s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  .burst.go i, .streak.pulse, .flame, .flash, .seal-lock, .field textarea.sealed, .judging,
  .sweep-track i, .cook-dots span, .pill.in, .scorepop, .uc-lock.shake { animation: none; }
  .rv, .slide, .pill { opacity: 1; transform: none; }
  .prompt-card, .uc-lock, .redact, .unlock-body .unlock-line, .unlock-card, .rv.in, .slide.in { transition: none; }
  .flash { display: none; }
  .btn:active { transform: none; }
}

/* ---------- games hub: a wall of sticky notes (one pastel per game) */
[data-game="oneliner"], [data-tint="oneliner"], .g-oneliner, [data-game="day"] { --block: var(--b-lime); } /* day: the Full House card */
[data-game="finish"], [data-tint="finish"], .g-finish { --block: var(--b-lilac); }
[data-game="rant"], [data-tint="rant"], .g-rant { --block: var(--b-coral); }
[data-game="roast"], [data-tint="roast"], .g-roast { --block: var(--b-pink); }
[data-game="hottake"], [data-tint="hottake"], .g-hottake { --block: var(--b-mint); }
[data-game="caption"], [data-tint="caption"], .g-caption { --block: var(--b-cream); }

.hub-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.hub-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hub-head .meta { white-space: nowrap; padding-bottom: 2px; }
.hero-card, .tile {
  display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%;
  background: var(--block, var(--surface)); color: var(--block-ink); border: 0; cursor: pointer;
  font: inherit; transition: transform .16s var(--ease); -webkit-tap-highlight-color: transparent;
}
.hero-card { padding: 22px 22px 20px; border-radius: var(--r-card); gap: 14px; min-height: 196px; }
.hero-card:active, .tile:active { transform: scale(.98); }
@media (hover: hover) { .hero-card:hover, .tile:not([aria-disabled="true"]):hover { transform: translateY(-2px) rotate(-.4deg); } }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hero-kicker { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hero-prompt { font-size: 27px; font-weight: 780; line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; }
.hero-card .muted { color: var(--block-ink-2); margin-top: auto; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--block-ink); }
.status:not(.done):not(.soon) { padding: 6px 13px; border-radius: var(--r-pill); background: var(--block-ink); color: #FAFAF7; }
.status.done { padding: 5px 11px; border-radius: var(--r-pill); background: rgb(250 250 247 / .7); }
.status.soon { color: var(--block-ink-2); font-weight: 600; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; }
.tile { padding: 18px 16px 16px; border-radius: var(--r-card); min-height: 176px; }
.tile.wide { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; column-gap: 14px; }
.tile.wide .game-icon, .tile.wide .tile-name, .tile.wide .tile-sub, .tile.wide .status { grid-column: 1; }
.tile.wide .status { justify-self: start; }
.tile-emoji { grid-column: 2; grid-row: 1 / 5; align-self: center; font-size: 64px; line-height: 1; transform: rotate(-8deg); }
.tile .game-icon { color: var(--block-ink); }
.tile .tile-name { font-size: 18px; font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; }
.tile .tile-sub { font-size: 13.5px; color: var(--block-ink-2); line-height: 1.35; }
.tile .status { margin-top: auto; align-self: flex-start; }
.tile[aria-disabled="true"] { cursor: default; background: transparent; color: var(--ink-2); border: 1.5px dashed var(--line-strong); }
.tile[aria-disabled="true"] .game-icon, .tile[aria-disabled="true"] .tile-sub, .tile[aria-disabled="true"] .status.soon { color: var(--ink-2); }
.tile[aria-disabled="true"]:active { transform: none; }
.soon-line { display: flex; align-items: center; gap: 8px; margin: -6px 2px 0; font-size: 14px; color: var(--ink-2); }
.soon-line .i { flex: none; }
.progress-box { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 0; }
.progress-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.progress-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.progress-box.done .progress-title { color: var(--accent); }
.progress-dots { display: flex; gap: 5px; }
.progress-dots span { width: 18px; height: 6px; border-radius: var(--r-pill); background: var(--line-strong); }
.progress-dots span.on { background: var(--ink); }
.progress-box.done .progress-dots span.on { background: var(--accent); }

/* ---------- per-game play screen */
.game-bar h2 { flex: 1; }
.prompt-image { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--r-input); background: var(--surface); }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.side {
  min-height: 56px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink);
  font-size: 17px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.side:active { transform: scale(.97); }
.side[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.side:disabled { cursor: default; }
.answer-wrap.finish { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: var(--r-card); background: var(--block, var(--surface)); color: var(--block-ink); border: 2px solid transparent; transition: border-color .15s ease; }
.answer-wrap.finish:focus-within { border-color: var(--block-ink); }
.finish-opener { font-size: 26px; font-weight: 760; line-height: 1.15; letter-spacing: -0.035em; }
.answer-wrap.finish textarea { min-height: 88px; padding: 0; border: 0; background: transparent; color: var(--block-ink); font-size: 26px; font-weight: 450; font-style: italic; line-height: 1.2; letter-spacing: -0.02em; padding-bottom: 4px; box-shadow: none; }
.answer-wrap.finish textarea::placeholder { color: var(--block-ink-2); }
.answer-wrap.finish textarea:focus { border: 0; box-shadow: none; }
.answer-wrap.finish textarea.sealed { animation: none; padding-right: 36px; color: var(--block-ink-2); }
.answer-wrap.finish .seal-lock { color: var(--block-ink); }
.two-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.two-words input {
  height: 76px; padding: 0 12px; border-radius: var(--r-input); border: 2px solid transparent; background: var(--block, var(--surface)); color: var(--block-ink);
  font-size: 23px; font-weight: 760; letter-spacing: -0.03em; text-align: center; min-width: 0; transition: border-color .15s ease;
}
.two-words input::placeholder { color: var(--block-ink-2); font-weight: 450; font-size: 16px; letter-spacing: 0; }
.two-words input:focus { outline: none; border-color: var(--block-ink); }
.two-words input.sealed { color: var(--block-ink-2); animation: stamp .32s ease-out; }
.side-pill { display: inline-block; align-self: flex-start; padding: 4px 11px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: 12.5px; font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .hero-card, .tile, .side, .two-words input { transition: none; } .two-words input.sealed { animation: none; } }

/* ---------- the judge: a space cat in a UFO (mascot.js) */
.mascot svg { display: block; width: 100%; height: auto; overflow: visible; }
.mascot [data-e], .mascot [data-m] { display: none; }
.mascot[data-mood="neutral"] [data-e="normal"], .mascot[data-mood="neutral"] [data-m="w"],
.mascot[data-mood="cooked"] [data-e="sparkle"], .mascot[data-mood="cooked"] [data-m="open"],
.mascot[data-mood="mid"] [data-e="content"], .mascot[data-mood="mid"] [data-m="smirk"],
.mascot[data-mood="low"] [data-e="flat"], .mascot[data-mood="low"] [data-m="flat"],
.mascot[data-mood="stern"] [data-e="stern"], .mascot[data-mood="stern"] [data-m="frown"] { display: inline; }
.mascot { --la: var(--accent); --lb: var(--b-lime); }
.mascot[data-mood="cooked"] { --la: var(--b-lime); --lb: var(--b-lime); }
.mascot[data-mood="low"] { --lb: #55554F; }
.mascot[data-mood="stern"] { --lb: var(--danger); }
/* Lights: the orbiting saucer lights and the antenna tip glow in the mood's colours. */
.mascot .mascot-sa { stop-color: var(--la); }
.mascot .mascot-sb { stop-color: var(--lb); }
.mascot .mascot-thrust { fill: var(--la); }
.mascot .mascot-whisker { stroke: #FFFFFF; stroke-width: 1.2; opacity: .75; stroke-linecap: round; }

/* 2.5D motion. Each layer moves by its depth: the face most, the head less, the ears and the
   glass glare the other way. Together they read as the judge turning his head inside the helmet. */
.mascot .mascot-face { animation: mascot-turn-face 6s ease-in-out infinite; }
.mascot .mascot-head { animation: mascot-turn-head 6s ease-in-out infinite; }
.mascot .mascot-ears { animation: mascot-turn-ears 6s ease-in-out infinite; }
.mascot .mascot-glare { animation: mascot-turn-glare 6s ease-in-out infinite; }
.mascot .mascot-sheen { animation: mascot-sheen 6s ease-in-out infinite; }
@keyframes mascot-turn-face { 0%, 100% { transform: translateX(-3.2px); } 50% { transform: translateX(3.2px); } }
@keyframes mascot-turn-head { 0%, 100% { transform: translateX(-1.2px); } 50% { transform: translateX(1.2px); } }
@keyframes mascot-turn-ears { 0%, 100% { transform: translateX(1px); } 50% { transform: translateX(-1px); } }
@keyframes mascot-turn-glare { 0%, 100% { transform: translateX(1.6px); } 50% { transform: translateX(-1.6px); } }
@keyframes mascot-sheen { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(16px); } }
.mascot .mascot-lids { animation: mascot-lids 4.2s infinite; transform-origin: 100px 64px; }
@keyframes mascot-lids { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.mascot .mascot-tip { animation: mascot-tip 1.2s ease-in-out infinite; transform-origin: 100px 10px; }
@keyframes mascot-tip { 50% { transform: scale(.72); opacity: .6; } }
/* The whole craft banks gently while it hovers. */
.mascot-float .mascot-bank { animation: mascot-bank 6s ease-in-out infinite; transform-origin: 100px 118px; }
@keyframes mascot-bank { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.mascot-float { animation: mascot-float 3s cubic-bezier(.45,0,.55,1) infinite; transform-origin: 50% 85%; }
@keyframes mascot-float { 0%, 100% { transform: translateY(0) scale(1.015, .985); } 50% { transform: translateY(-9px) scale(.99, 1.01); } }
/* A soft ground shadow that shrinks as the saucer rises: it gives the judge weight and height. */
.mascot-ufo::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: 96%; height: 14px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / .3), transparent); animation: mascot-ground 3s cubic-bezier(.45,0,.55,1) infinite;
}
@media (prefers-color-scheme: dark) { .mascot-ufo::after { background: radial-gradient(closest-side, rgb(140 157 255 / .22), transparent); } }
@keyframes mascot-ground { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .55; } }
.mascot-ufo.mascot-pre::after, .mascot-ufo.mascot-enter::after { opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .mascot .mascot-face, .mascot .mascot-head, .mascot .mascot-ears, .mascot .mascot-glare, .mascot .mascot-sheen,
  .mascot .mascot-lids, .mascot .mascot-tip, .mascot-float .mascot-bank, .mascot-float, .mascot-ufo::after { animation: none; }
}

.mascot-stage { position: relative; height: 210px; flex: none; }
.mascot-stage.small { height: 150px; }
.mascot-stars { position: absolute; inset: 0; pointer-events: none; }
.mascot-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--ink); opacity: .22; }
.mascot-ufo { position: absolute; left: 50%; top: 4px; width: 180px; margin-left: -90px; }
.mascot-stage.small .mascot-ufo { width: 130px; margin-left: -65px; }
.mascot-beam {
  position: absolute; left: 50%; top: 122px; width: 200px; margin-left: -100px; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0; transform: scaleY(0); opacity: 0; transition: transform .35s ease, opacity .35s ease;
}
.mascot-beam.on { transform: scaleY(1); opacity: 1; }
.mascot-stage.small .mascot-beam { top: 92px; width: 150px; margin-left: -75px; height: 110px; }
.mascot-beam.sweep { animation: mascot-sweep 2.4s ease-in-out infinite; }
@keyframes mascot-sweep { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
#judging .mascot-pupils { animation: mascot-look 2.4s ease-in-out infinite; }
@keyframes mascot-look { 0%, 100% { transform: translateX(-2.4px); } 50% { transform: translateX(2.4px); } }
.mascot-status { text-align: center; font-size: 16px; font-weight: 700; min-height: 24px; }

.mascot-bubble {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: max-content; max-width: 100%;
  padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); border: 0;
  font-size: 15px; font-weight: 700; text-align: center;
}
.mascot-bubble::before {
  content: ""; position: absolute; left: 50%; top: -5px; width: 12px; height: 12px; margin-left: -6px;
  background: inherit; border-radius: 2px; transform: rotate(45deg);
}
.mascot-bubble[data-mood="cooked"] { background: var(--b-lime); color: var(--block-ink); }
.mascot-bubble[data-mood="low"], .mascot-bubble[data-mood="stern"] { background: var(--surface-2); color: var(--ink); }

/* Entry and reactions (classes set by mascot.js) */
.mascot-pre { opacity: 0; }
.mascot-enter { animation: mascot-enter .8s var(--pop) both; }
@keyframes mascot-enter { 0% { opacity: 0; transform: translate(170px, -200px) rotate(24deg) scale(.6); } 100% { opacity: 1; transform: none; } }
.mascot-loop { animation: mascot-loop .95s cubic-bezier(.45,0,.3,1) both; transform-origin: 50% 190%; }
@keyframes mascot-loop { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }
.mascot-nod { animation: mascot-nod 1.1s ease-in-out both; transform-origin: 50% 80%; }
@keyframes mascot-nod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(7deg); } 55% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
.mascot-sputter { animation: mascot-sputter 1.2s ease-in-out both; transform-origin: 50% 60%; }
@keyframes mascot-sputter {
  0% { transform: none; } 15% { transform: translate(-5px, 2px) rotate(-6deg); } 30% { transform: translate(5px, 6px) rotate(7deg); }
  45% { transform: translate(-4px, 14px) rotate(-5deg); } 65% { transform: translate(3px, 26px) rotate(10deg); } 100% { transform: translate(0, 18px) rotate(9deg); }
}
.mascot-limp { transform: translate(0, 18px) rotate(9deg); transform-origin: 50% 60%; }
.mascot-confetti { position: absolute; left: 50%; top: 100px; width: 0; height: 0; pointer-events: none; }
.mascot-confetti i { position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: 0; }
.mascot-confetti.go i { animation: mascot-burst .8s ease-out forwards; }
@keyframes mascot-burst { 0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5) rotate(160deg); } }
.mascot-smoke { position: absolute; left: calc(50% + 70px); top: 100px; width: 0; height: 0; pointer-events: none; }
.mascot-smoke i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--line-strong); opacity: 0; }
.mascot-smoke.go i { animation: mascot-puff 1.4s ease-out forwards; }
@keyframes mascot-puff { 0% { opacity: .8; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(var(--dx), -50px) scale(1.8); } }
#your-line { position: relative; z-index: 2; }
.mascot-abduct { animation: mascot-abduct 1.3s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes mascot-abduct { 0% { transform: none; opacity: 1; } 15% { transform: translateY(6px) rotate(-2deg); } 100% { transform: translateY(-250px) rotate(8deg) scale(.12); opacity: 0; } }
.your-line.beamed { color: var(--ink-2); font-style: italic; font-size: 18px; animation: fadeup .35s ease-out both; }

.mascot-mini { display: inline-block; width: 36px; height: 36px; flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.mascot-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mascot-mini.poke { animation: judge-poke .45s var(--pop); transform-origin: 50% 100%; }
@keyframes judge-poke { 0% { transform: none; } 30% { transform: scale(1.18, .86) translateY(1px); } 60% { transform: scale(.92, 1.1) translateY(-4px); } 100% { transform: none; } }

/* The judge's thought bubble (judgetalk.js): two puffs rise from his helmet, the cloud blooms,
   he "types" for a beat, then the words fade in. Same ink as his signup bubble. */
.hub-head { position: relative; }
.think { position: absolute; left: 4px; top: calc(100% + 2px); z-index: 30; width: min(290px, calc(100vw - 48px)); pointer-events: none; }
.think-puff { position: absolute; border-radius: 50%; background: var(--ink); opacity: 0; }
.think-puff.p1 { left: 12px; top: 0; width: 7px; height: 7px; }
.think-puff.p2 { left: 20px; top: 9px; width: 12px; height: 12px; }
.think-cloud {
  position: relative; margin: 22px 0 0 8px; padding: 11px 15px 12px; border-radius: 22px;
  background: var(--ink); color: var(--on-ink); pointer-events: auto; cursor: pointer;
  box-shadow: 0 10px 28px -14px rgb(0 0 0 / .45); opacity: 0; transform-origin: 18px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.think.mood .think-cloud { width: max-content; max-width: 100%; }
.think-label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: 0; color: color-mix(in srgb, var(--on-ink) 62%, transparent); }
.think-label:empty { display: none; }
.think-text { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.32; text-wrap: pretty; opacity: 0; }
.think-typing { position: absolute; left: 15px; top: 50%; display: flex; gap: 5px; margin-top: -3px; }
.think-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--on-ink); opacity: .35; animation: think-dot 1s ease-in-out infinite; }
.think-typing i:nth-child(2) { animation-delay: .15s; } .think-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes think-dot { 0%, 100% { opacity: .3; transform: none; } 40% { opacity: .9; transform: translateY(-3px); } }

.think.in .p1 { animation: think-puff .32s var(--pop) both; }
.think.in .p2 { animation: think-puff .32s var(--pop) .12s both; }
.think.in .think-cloud { animation: think-bloom .5s var(--pop) .22s both; }
.think.said .think-typing { opacity: 0; transition: opacity .18s; }
.think.said .think-label, .think.said .think-text { animation: think-words .45s var(--ease) both; }
.think.said .think-text { animation-delay: .06s; }
.think.out { animation: think-out .26s ease-in both; }
@keyframes think-puff { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes think-bloom { from { opacity: 0; transform: scale(.25) translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes think-words { from { opacity: 0; filter: blur(5px); transform: translateY(3px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes think-out { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
html[data-theme="retro"] .think-cloud { border-radius: 18px; box-shadow: 3px 3px 0 var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .mascot-mini.poke, .think-typing i { animation: none; }
  .think.in .think-puff, .think.in .think-cloud { animation: none; opacity: 1; }
  .think.said .think-label, .think.said .think-text { animation: none; opacity: 1; }
  .think-typing { display: none; }
  .think.out { animation: none; opacity: 0; }
}
/* After signup the judge flies in from the look screen and lands here (onboard.js). */
.fly-judge { position: fixed; left: 0; top: 0; width: 170px; z-index: 900; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.judge-flying #mascot-mini { visibility: hidden; }
.mascot-landed { animation: mascot-land .5s var(--pop); transform-origin: 50% 100%; }
@keyframes mascot-land { 0% { transform: scale(1.25, .7); } 45% { transform: scale(.9, 1.12); } 100% { transform: none; } }
.mascot-mini svg { overflow: hidden; animation: mascot-float 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .mascot-blink, .mascot-blink2, .mascot-float, .mascot-beam.sweep, #judging .mascot-pupils, .mascot-enter, .mascot-loop, .mascot-nod,
  .mascot-sputter, .mascot-abduct, .mascot-confetti.go i, .mascot-smoke.go i, .mascot-mini svg, .your-line.beamed { animation: none; }
  .mascot-beam { transition: none; }
  .mascot-pre { opacity: 1; }
}

/* ---------- credits, retries, profile */
.coin { color: var(--accent); }
.credits-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 0; color: var(--ink); font: inherit; font-family: var(--mono); font-size: 13px; font-weight: 650; cursor: pointer;
  transition: transform .14s var(--ease), background-color .15s ease; -webkit-tap-highlight-color: transparent;
}
/* With an avatar the chip is one control: coins, then you. 44px tall total keeps it an easy tap. */
.credits-pill.has-avatar { min-height: 40px; padding: 0 4px 0 12px; gap: 6px; }
.credits-pill:hover { background: var(--surface-2); }
.credits-pill:active { transform: scale(.96); }
.me-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; margin-left: 2px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); font-family: var(--display); font-size: 15px; font-weight: 800; line-height: 1;
}
/* Retro uses its serif here, not the blackletter: a single blackletter capital is hard to read. */
html[data-theme="retro"] .me-avatar { font-size: 16px; font-weight: 900; }
.retry-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent-soft);
  color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.r-eyebrow { display: flex; align-items: center; gap: 10px; }
.retry-compare { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r-input); background: var(--surface); font-size: 14px; }
.retry-compare span { color: var(--ink-2); }
#retry-btn { gap: 8px; }

.profile-id { display: flex; align-items: center; gap: 14px; }
.mascot-avatar { display: inline-block; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--b-lilac); overflow: hidden; }
.mascot-avatar svg { overflow: hidden; }
.profile-handle { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; }
/* Stats: one strip with dividers instead of three equal boxes. */
.stat-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; padding: 16px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--ink-2); }
.stat-row-2 { margin-top: -25px; border-top: 0; }
.persona-line { font-family: var(--display); font-size: 18px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; margin-top: 4px; }
.badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.badge {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: var(--r-tile);
  background: var(--canvas); border: 1.5px dashed var(--line-strong); color: var(--ink-2); text-align: center;
}
.badge.earned { border: 1.5px solid var(--ink); color: var(--ink); background: var(--b-lime); }
.badge-emoji { font-size: 26px; line-height: 1; }
.badge:not(.earned) .badge-emoji { font-family: var(--mono); font-size: 20px; opacity: .5; }
.badge-title { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.badge.earned .badge-title { color: #141413; }

/* Reactions under board answers: three emoji, counts beside them. */
.reactions { display: flex; gap: 6px; margin-top: 8px; }
.react {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--canvas); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
  transition: transform .12s var(--spring), border-color .15s ease, background-color .15s ease; -webkit-tap-highlight-color: transparent;
}
.react span { font-size: 15px; line-height: 1; }
.react b { font-family: var(--mono); font-weight: 650; min-width: 0; }
.react b:empty { display: none; }
.react.on { border-color: var(--ink); background: var(--accent-soft); }
.react:active:not(:disabled) { transform: scale(.9); }
.react:disabled { cursor: default; opacity: .75; }

/* The milestone / personal best moment. */
.moment-sheet { align-items: stretch; text-align: center; overflow: visible; }
.moment-confetti { left: 50%; top: 70px; }
.moment-best { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.moment-best .vs-kicker { color: var(--accent); }
.moment-number { font-family: var(--display); font-size: 88px; font-weight: 800; letter-spacing: -0.06em; line-height: .95; font-variant-numeric: tabular-nums; }
.moment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.moment-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-input); background: var(--surface); }
.moment-badge { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--b-lime); font-size: 26px; }
.moment-title { font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
@media (prefers-reduced-motion: reduce) { .react { transition: none; } }

.coral { color: var(--accent); }
.lime { color: var(--accent); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.credits-card { background: var(--b-lime); color: var(--block-ink); }
.credits-card .muted, .credits-card .meta, .credits-card .eyebrow { color: var(--block-ink-2); }
.credits-card .coin { color: var(--block-ink); }
.credits-card .btn.lime { background: var(--block-ink); color: #FAFAF7; }
.credit-balance { position: relative; display: flex; align-items: center; gap: 10px; }
.credit-balance b { font-size: 48px; font-weight: 800; letter-spacing: -0.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.plus-one { font-size: 18px; font-weight: 800; opacity: 0; }
.plus-one.go { animation: plusone 1s ease-out both; }
@keyframes plusone { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } }
#pf-toast { text-align: left; min-height: 0; }
.shop-row { display: flex; align-items: center; gap: 14px; }
.shop-icon { width: 42px; height: 42px; flex: none; border-radius: var(--r-tile); background: var(--surface-2); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.shop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-name { font-size: 16px; font-weight: 700; }
.price-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); flex: none;
  border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font: inherit; font-family: var(--mono); font-size: 14px; font-weight: 650; cursor: pointer;
}
.price-btn:hover { border-color: var(--ink); }
.price-btn:disabled { opacity: .45; cursor: default; }
.price-btn:disabled:hover { border-color: var(--line-strong); }
.shop-row.soon { opacity: .55; }
.soon-tag { font-size: 13px; font-weight: 650; color: var(--ink-2); padding: 0 6px; }

/* Bottom sheets (native <dialog>: focus stays inside, Esc closes) */
dialog.sheet {
  width: min(440px, 100%); max-width: 100%; margin: auto auto 0; padding: 14px 22px calc(28px + env(safe-area-inset-bottom));
  border: 0; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--canvas); color: var(--ink);
  flex-direction: column; gap: 16px;
}
dialog.sheet[open] { display: flex; animation: sheetup .4s var(--ease) both; }
dialog.sheet::backdrop { background: var(--scrim); }
@keyframes sheetup { 0% { transform: translateY(100%); } 100% { transform: none; } }
.sheet-grip { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line-strong); align-self: center; }
.sheet-head { display: flex; align-items: center; gap: 14px; }
.sheet-head .mascot-avatar { width: 52px; height: 52px; }
.sheet-title { font-size: 22px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-2); line-height: 1.4; }
.check-list li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 7px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg); }
.check-list b { color: var(--ink); }
.credit-math { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: var(--r-input); background: var(--surface); font-size: 15px; }
.credit-math > span:last-child { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); }

/* Stand-in ad (local testing only) */
.demo-ad { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: 16px; padding: calc(20px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); background: #0E0E10; color: #F3F2EE; }
.demo-ad[hidden] { display: none; }
.ad-label { padding: 4px 8px; border-radius: 6px; background: #F3F2EE; color: #0E0E10; font-size: 12px; font-weight: 800; }
.skip-btn { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid #3C3C43; background: transparent; color: #F3F2EE; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.demo-ad-body { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; border-radius: var(--r-card); border: 1.5px dashed #3C3C43; color: #A6A59E; font-size: 15px; line-height: 1.5; }
.demo-ad-left { font-size: 15px; font-weight: 700; font-family: var(--mono); }
.demo-track { height: 6px; border-radius: var(--r-pill); background: #2A2A2F; overflow: hidden; }
.demo-track i { display: block; height: 100%; width: 0; background: #8C9DFF; transition: width 1s linear; }

@media (prefers-reduced-motion: reduce) {
  dialog.sheet[open], .plus-one.go { animation: none; }
  .demo-track i { transition: none; }
}
.rank-tag.down { color: var(--ink-2); }
.retry-badge.small { padding: 1px 7px; font-size: 10.5px; vertical-align: 1px; }

/* ---------- how to play (i) */
.info-btn { color: var(--ink-2); }
.info-btn:hover { color: var(--ink); }
.info-btn.small { width: 36px; height: 36px; margin: -8px -8px -8px 0; }
dialog.sheet.howto { max-height: 92dvh; overflow-y: auto; }
.howto-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.howto-steps li { counter-increment: step; display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.4; }
.howto-steps li::before {
  content: counter(step); flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--on-ink); font-family: var(--mono); font-size: 13px; font-weight: 700; transform: translateY(2px);
}
.howto-example { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--r-card); background: var(--block, var(--surface)); color: var(--block-ink); }
.howto-example .muted, .howto-example .eyebrow { color: var(--block-ink-2); }
.howto-answer { font-size: 18px; font-weight: 720; letter-spacing: -0.02em; }
.howto-axes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.howto-axes li { font-size: 15px; color: var(--ink-2); }
.howto-axes b { color: var(--ink); margin-right: 4px; }
.howto-tip { font-size: 15px; font-weight: 700; color: var(--ink); padding-left: 12px; border-left: 3px solid var(--accent); }
.howto-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }

/* ---------- Rant: today's object */
.prompt-emoji { font-size: 88px; line-height: 1; text-align: center; padding: 8px 0 4px; }

/* ---------- rant topics */
.pinned-card {
  display: flex; gap: 16px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  padding: 18px 20px; border-radius: var(--r-card); background: var(--b-coral); color: var(--block-ink); border: 0;
  transition: transform .16s var(--ease); -webkit-tap-highlight-color: transparent;
}
.pinned-card:active { transform: scale(.98); }
.pinned-card .muted { color: var(--block-ink-2); }
.pinned-emoji { font-size: 44px; line-height: 1; flex: none; transform: rotate(-8deg); }
.pinned-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pinned-kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pinned-name { font-size: 21px; font-weight: 780; letter-spacing: -0.035em; overflow-wrap: anywhere; }

.quota-box { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-input); background: var(--surface); }
.quota-title { font-size: 14px; font-weight: 600; }
.quota-dots { display: flex; gap: 6px; flex: none; }
.quota-dots span { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.quota-dots span.on { background: var(--ink); }

.topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.topic-row { display: flex; gap: 12px; align-items: center; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.topic-row:last-child { border-bottom: 0; }
.topic-pos { font-family: var(--mono); font-size: 14px; font-weight: 600; min-width: 20px; color: var(--ink-2); }
.topic-pos.first { color: var(--ink); }
.topic-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.topic-name { font-size: 17px; font-weight: 720; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; }
.topic-meta { font-size: 13px; color: var(--ink-2); }
.hot { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 700; }
.topic-go, .topic-done { flex: none; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--ink); }
.topic-go { background: var(--ink); color: var(--on-ink); }
.topic-done { background: transparent; color: var(--ink); border-color: var(--line-strong); }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; }
.chip.small { padding: 3px 10px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); border-width: 1px; }
.prompt-card .chip.small, .card.g-rant .chip.small { color: var(--block-ink-2); border-color: rgb(20 20 19 / .25); }
.chip.pick { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip.pick.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip.pick:disabled { opacity: .35; cursor: not-allowed; }
.group-title { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.pick-count { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pick-count.some { color: var(--accent); }
.summary-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.summary-text { font-size: 16px; font-weight: 700; }
.topic-title { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; overflow-wrap: anywhere; }
.create-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; background: transparent; border: 1.5px dashed var(--line-strong); color: var(--ink); }
.create-btn:hover { border-color: var(--ink); }
.score-top { align-items: flex-end; }
.score-top .big-score { white-space: nowrap; }
.score-top .rank-tag { text-align: right; }
#rp-use:disabled { opacity: .45; cursor: not-allowed; }
.stat .coral, .stat .lime { color: var(--ink); }
.league-box .inline-form input { background: #FAFAF7; color: #141413; }
.league-box .inline-form input::placeholder { color: rgb(20 20 19 / .6); }

/* ---------- animated game icons (hub)
   Each loop is mostly still, then one short move, so the grid never feels busy.
   Every game keeps its motion, played or not. Tiles are staggered (--gi-delay). */
.gi { display: block; flex: none; fill: currentColor; color: var(--block-ink); overflow: visible; }
.gi * { transform-box: view-box; animation-delay: var(--gi-delay, 0s); animation-iteration-count: infinite; animation-timing-function: var(--ease); }

/* Finish the Sentence: lines write themselves in, left to right */
.gi-finish rect { transform-origin: 28px 0; animation-name: gi-write; animation-duration: 4s; }
.gi-finish .gi-l1 { animation-delay: calc(var(--gi-delay, 0s) + 0s); }
.gi-finish .gi-l2 { animation-delay: calc(var(--gi-delay, 0s) + .18s); }
.gi-finish .gi-l3 { animation-delay: calc(var(--gi-delay, 0s) + .36s); }
.gi-finish .gi-l4 { animation-delay: calc(var(--gi-delay, 0s) + .54s); }
@keyframes gi-write {
  0% { transform: scaleX(0); opacity: 1; }
  14%, 78% { transform: scaleX(1); opacity: 1; }
  88% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* Two-Word Roast: the flame flickers, the core glows, embers rise */
.gi-roast .gi-flame { transform-origin: 128px 236px; animation-name: gi-flicker; animation-duration: 1.6s; animation-timing-function: ease-in-out; }
.gi-roast .gi-core { animation-name: gi-glow; animation-duration: 1.6s; animation-timing-function: ease-in-out; }
.gi-roast .gi-ember { opacity: 0; animation-name: gi-ember; animation-duration: 2.4s; animation-timing-function: ease-out; }
.gi-roast .gi-e2 { animation-delay: calc(var(--gi-delay, 0s) + 1.1s); }
@keyframes gi-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  25% { transform: scale(.95, 1.06) skewX(-3deg); }
  50% { transform: scale(1.03, .97) skewX(2deg); }
  75% { transform: scale(.97, 1.04) skewX(-1deg); }
}
@keyframes gi-glow { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes gi-ember {
  0% { opacity: 0; transform: translateY(40px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-36px); }
}

/* Rant: the megaphone shouts, sound waves blast out */
.gi-rant .gi-horn { transform-origin: 70px 128px; animation-name: gi-shout; animation-duration: 3.2s; }
.gi-rant .gi-wave { opacity: 0; animation-name: gi-wave; animation-duration: 3.2s; }
.gi-rant .gi-w2 { animation-delay: calc(var(--gi-delay, 0s) + .12s); }
@keyframes gi-shout {
  0%, 52%, 100% { transform: rotate(0); }
  58% { transform: rotate(-9deg) scale(1.04); }
  64% { transform: rotate(5deg); }
  70% { transform: rotate(-5deg) scale(1.02); }
  78% { transform: rotate(0); }
}
@keyframes gi-wave {
  0%, 54% { opacity: 0; transform: translateX(-14px); }
  62% { opacity: 1; transform: none; }
  80% { opacity: 1; transform: translateX(8px); }
  92%, 100% { opacity: 0; transform: translateX(14px); }
}

/* Hot Take Arena: the scales tip one way, then the other. Pans keep hanging straight. */
.gi-hottake .gi-beam { transform-origin: 128px 70px; animation-name: gi-tip; animation-duration: 3.6s; animation-timing-function: ease-in-out; }
.gi-hottake .gi-pl { transform-origin: 36px 70px; animation-name: gi-tip-back; animation-duration: 3.6s; animation-timing-function: ease-in-out; }
.gi-hottake .gi-pr { transform-origin: 220px 70px; animation-name: gi-tip-back; animation-duration: 3.6s; animation-timing-function: ease-in-out; }
@keyframes gi-tip { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(10deg); } 60% { transform: rotate(-10deg); } 85% { transform: rotate(0); } }
@keyframes gi-tip-back { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 60% { transform: rotate(10deg); } 85% { transform: rotate(0); } }

/* Caption This (coming soon): the sun drifts, slowly. Quiet on purpose, it isn't playable yet. */
.gi-caption .gi-sun { transform-origin: 160px 96px; animation-name: gi-sun; animation-duration: 5s; animation-timing-function: ease-in-out; }
@keyframes gi-sun { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, -8px) scale(1.15); } }
.tile[aria-disabled="true"] .gi { color: var(--ink-2); }


/* OneLiner: the hero prompt types itself out. A hidden copy holds the height, so nothing jumps. */
.hero-prompt { position: relative; display: block; }
.type-ghost { visibility: hidden; }
.type-live { position: absolute; inset: 0; }
.type-caret {
  display: inline-block; width: .09em; height: .95em; margin-left: .06em; vertical-align: -0.1em;
  background: currentColor; border-radius: 2px; animation: caret-blink 1.05s steps(1) infinite;
}
.hero-prompt.is-typing .type-caret { animation: none; }
.hero-prompt.is-played .type-caret { display: none; }
@keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .gi * { animation: none !important; }
  .gi-ember, .gi-wave { opacity: 0; }
  .type-caret { animation: none; }
}

}

/* ---------- a topic's archive: best rants of past days (rant.js loadHistory) */
.history { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; border-top: 1px solid var(--line); }
.history-title { margin: 0; font-size: 20px; font-weight: 780; letter-spacing: -0.03em; }
.history-days { display: flex; flex-direction: column; gap: 18px; }
.history-day { display: flex; flex-direction: column; gap: 2px; }
.history-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px; }
.history-head b { font-size: 15px; font-weight: 700; }
.history-head span { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.history .entry .line { font-size: 15.5px; }
.history .entry.first .line { font-size: 16.5px; }

/* ---------- Friendly League (friendly.js): "Play with friends" to players */
.fn-step { display: flex; flex-direction: column; gap: 12px; }
.step-label { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 19px; font-weight: 780; letter-spacing: -0.02em; }
.step-label label { cursor: inherit; }
.step-n { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-family: var(--mono); font-size: 13px; font-weight: 700; }
.step-switch { align-self: flex-start; min-height: 32px; }
.fn-input { width: 100%; padding: 16px; border-radius: var(--r-input); border: 1.5px solid var(--line-strong); background: var(--canvas); color: var(--ink); font-size: 17px; }
.fn-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.fl-last { padding: 12px 14px; border-radius: var(--r-input); background: var(--surface); font-size: 15px; font-weight: 650; }
.fl-last::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #E3B341; vertical-align: 0; }
/* Medals for the top three on a group board. */
.board.medals .entry.medal-1 .pos, .board.medals .entry.medal-2 .pos, .board.medals .entry.medal-3 .pos {
  display: grid; place-items: center; width: 26px; height: 26px; min-width: 26px; border-radius: 50%; padding: 0; font-size: 13px; color: #141413;
}
.board.medals .entry.first .pos::before { content: none; }
.board.medals .entry.medal-1 .pos { background: #F2C94C; }
.board.medals .entry.medal-2 .pos { background: #CFD4DA; }
.board.medals .entry.medal-3 .pos { background: #E0A57A; }
.alltime { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.alltime li { display: grid; grid-template-columns: 24px 1fr auto 44px; gap: 10px; align-items: baseline; font-size: 15px; }
.alltime .pos { font-family: var(--mono); color: var(--ink-2); font-size: 13px; }
.alltime .who { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alltime b { font-weight: 700; }
.alltime .avg { font-family: var(--mono); color: var(--ink-2); text-align: right; }
html[data-theme="retro"] .step-n { border-radius: 4px; }
/* Hub tile: an ink outline on the page colour. It reads as "make your own" next to the daily pastels,
   without outshining today's main game (the hero card). */
.fl-tile {
  display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; cursor: pointer; border: 2px solid var(--ink);
  padding: 18px 20px 18px; border-radius: var(--r-card); background: var(--canvas); color: var(--ink); font: inherit;
  transition: transform .16s var(--ease); -webkit-tap-highlight-color: transparent;
}
.fl-tile:active { transform: scale(.98); }
@media (hover: hover) { .fl-tile:hover { transform: translateY(-2px) rotate(-.3deg); } }
.fl-tile-top { display: flex; justify-content: space-between; align-items: center; }
.fl-tile-new { padding: 3px 10px; border-radius: var(--r-pill); background: var(--b-lime); color: var(--block-ink); font-size: 12px; font-weight: 700; }
.fl-tile-name { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.fl-tile-sub { font-size: 14.5px; line-height: 1.4; opacity: .78; }
.fl-tile-cta {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px;
  padding: 8px 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 700;
}
.fl-tile-icon { animation: fl-wave 4s var(--ease) infinite; transform-origin: 50% 80%; }
@keyframes fl-wave { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-10deg); } 82% { transform: rotate(8deg); } 88% { transform: rotate(-4deg); } }

.fl-intro { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; border-radius: var(--r-card); background: var(--b-lilac); color: var(--block-ink); }
.fl-intro-title { font-size: 22px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
.fl-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.fl-steps li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.4; }
.fl-steps li::before {
  content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--block-ink); color: #FAFAF7; font-family: var(--mono); font-size: 12.5px; font-weight: 700; transform: translateY(1px);
}
.fl-intro .btn.primary { background: var(--block-ink); color: #FAFAF7; }
.fl-h3 { margin: 0; font-size: 19px; font-weight: 780; letter-spacing: -0.03em; }

.fl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fl-list > li { border-bottom: 1px solid var(--line); }
.fl-list > li:last-child { border-bottom: 0; }
.fl-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 2px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.fl-row-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fl-row-name { font-size: 16.5px; font-weight: 720; letter-spacing: -0.02em; }
.fl-row-q { font-size: 14.5px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.fl-row-meta { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.fl-row-tag { flex: none; padding: 6px 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 700; }
.fl-row-tag.done { background: transparent; color: var(--ink-2); border: 1.5px solid var(--line-strong); }
.fl-past { display: flex; flex-direction: column; gap: 4px; padding: 14px 2px; }

.fl-share { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r-card); background: var(--surface); }
.fl-share-title { font-size: 17px; font-weight: 750; letter-spacing: -0.02em; }
.fl-share-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.fl-share .toast { min-height: 0; }
#screen-friendly .prompt-text { font-size: 27px; }

@media (prefers-reduced-motion: reduce) { .fl-tile-icon { animation: none; } .fl-tile { transition: none; } }
#screen-friendly.share-first > .subhead { order: -3; }
#screen-friendly.share-first > #fl-card { order: -2; }
#screen-friendly.share-first > .fl-share { order: -1; }

/* ---------- first visit: claim a name, pick a look */
body.onboarding .top-right { visibility: hidden; }
.ob { gap: 26px; }
.ob-head { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.ob-mascot { width: 72px; height: 72px; }
/* The judge talks you through signing up. His bubble rotates a few lines at random (onboard.js). */
.ob-judge { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; min-height: 88px; } /* room for the longest line, so the page never jumps */
.ob-bubble {
  position: relative; flex: 1; max-width: 270px; min-height: 48px; display: flex; align-items: center;
  padding: 10px 14px; border-radius: var(--r-card); background: var(--ink); color: var(--on-ink);
  font-size: 15px; font-weight: 650; line-height: 1.3; text-wrap: pretty;
}
.ob-bubble::before {
  content: ""; position: absolute; left: -5px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: inherit; border-radius: 2px; transform: rotate(45deg);
}
.ob-bubble.swap { animation: ob-swap .42s var(--ease); }
@keyframes ob-swap { 0% { opacity: 0; transform: translateY(6px) scale(.97); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-bubble.swap { animation: none; } }
.ob-kicker { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.ob-kicker b { color: var(--ink); }
.ob-title { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; }
.ob-input { position: relative; }
.ob-input span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--ink-2); pointer-events: none; }
.field .ob-input input { padding-left: 38px; font-size: 19px; font-weight: 600; }
.ob-status { min-height: 22px; font-size: 14.5px; font-weight: 550; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.ob-status.ok { color: #1E7A45; }
@media (prefers-color-scheme: dark) { .ob-status.ok { color: #6BD394; } }
.ob-status.no { color: var(--danger); }
.ob-status.ok::before { content: "✓"; font-weight: 800; }
.ob-status.no::before { content: "✕"; font-weight: 800; }

@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-ideas { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-idea {
  min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 600; cursor: pointer;
}
.ob-idea:hover { border-color: var(--ink); }

.look-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.look {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 14px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 2px solid transparent; border-radius: var(--r-card); font: inherit;
  transition: border-color .15s ease, transform .15s var(--ease); -webkit-tap-highlight-color: transparent;
}
.look:active { transform: scale(.98); }
.look[aria-checked="true"] { border-color: var(--ink); box-shadow: var(--lift); }
.look-name { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.look[aria-checked="true"] .look-name::after { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 13px; }
.look-sub { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }

/* A tiny phone in each look, drawn only with that look's tokens. */
.look-preview {
  display: flex; flex-direction: column; gap: 6px; padding: 9px; aspect-ratio: 3 / 3.6; overflow: hidden;
  border-radius: calc(var(--r-card) * .7); background: var(--paper, none), var(--canvas); color: var(--ink);
  font-family: var(--font); box-shadow: inset 0 0 0 1px var(--line);
}
.lp-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4px; border-bottom: var(--edge); }
.lp-wm { font-family: var(--wm-font); font-weight: var(--wm-weight); letter-spacing: var(--wm-track); font-stretch: var(--wm-stretch); font-size: 15px; line-height: 1.1; }
.lp-pill { width: 22px; height: 10px; border-radius: var(--r-pill); background: var(--surface-2); }
.lp-hero {
  display: flex; flex-direction: column; gap: 4px; padding: 8px; flex: 1; background: var(--b-lime); color: var(--block-ink);
  border-radius: calc(var(--r-card) * .6); border: var(--edge); box-shadow: var(--lift);
}
.lp-kick { font-family: var(--mono); font-size: 7.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.lp-prompt { font-family: var(--display); font-size: 12px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.lp-btn { margin-top: auto; align-self: flex-start; padding: 2px 8px; border-radius: var(--r-pill); background: var(--block-ink); color: var(--b-lime); font-size: 8.5px; font-weight: 700; }
.lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 26%; }
.lp-tile { border-radius: calc(var(--r-card) * .5); border: var(--edge); }
.lp-a { background: var(--b-lilac); }
.lp-b { background: var(--b-pink); }

/* Profile: switch looks any time. */
.look-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.look-opt {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; cursor: pointer; font: inherit; font-size: 17px; font-weight: 650;
  background: var(--canvas); color: var(--ink); border: 2px solid var(--line); border-radius: var(--r-input);
  -webkit-tap-highlight-color: transparent;
}
.look-opt[aria-checked="true"] { border-color: var(--ink); }
.look-swatch {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-tile);
  background: var(--b-lime); color: var(--block-ink); border: var(--edge); font-family: var(--display); font-size: 18px; font-weight: 800;
}
.look-opt[data-theme-pick="retro"] .look-swatch { font-family: var(--wm-font); font-weight: 400; font-size: 21px; }

/* ======================================================================
   Retro theme: "the morning paper".
   Newsprint, serif type, a blackletter masthead, inked rules and a red
   headline accent. Bigger, calmer text and no bouncy motion.
   Turned on by <html data-theme="retro">. [data-look="retro"] scopes the
   same tokens to a preview box (the theme picker shows both looks live).
   ====================================================================== */
@font-face { font-family: "Playfair"; src: url("/fonts/playfair.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Source Serif"; src: url("/fonts/source-serif.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/courier-prime.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/courier-prime-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Unifraktur"; src: url("/fonts/unifraktur.woff2") format("woff2"); font-weight: 400; font-display: block; }

:root[data-theme="retro"], [data-look="retro"] {
  --canvas: #F3ECDD;
  --surface: #EAE1CD;
  --surface-2: #E0D5BD;
  --line: #D3C6AA;
  --line-strong: #9C8D71;
  --ink: #1F1A15;
  --ink-2: #574C40;
  --on-ink: #F7F1E3;
  --accent: #A8261B;
  --accent-soft: rgb(168 38 27 / .1);
  --on-accent: #FBF6EA;
  --danger: #A5221A;
  --scrim: rgb(31 26 21 / .5);

  --b-lime: #ECD893;
  --b-lilac: #D2CAE0;
  --b-coral: #EBC0A3;
  --b-pink: #EACDC6;
  --b-mint: #C9D5B5;
  --b-cream: #E9DEC3;
  --block-ink: #1F1A15;
  --block-ink-2: rgb(31 26 21 / .74);

  --font: "Source Serif", Georgia, "Times New Roman", serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --display: "Playfair", Georgia, serif;
  --wm-font: "Unifraktur", "Old English Text MT", Georgia, serif;
  --wm-weight: 400;
  --wm-track: 0;
  --wm-stretch: normal;
  --ease: var(--ease);
  --spring: var(--ease);
  --r-pill: 4px;
  --r-card: 6px;
  --r-input: 4px;
  --r-tile: 4px;
  --edge: 1.5px solid var(--ink);
  --lift: 3px 3px 0 var(--ink);
  --btn-lift: 3px 3px 0 var(--accent);
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="retro"], [data-look="retro"] {
    --canvas: #17140F;
    --surface: #221D17;
    --surface-2: #2C261E;
    --line: #3B3328;
    --line-strong: #6B5D49;
    --ink: #EFE6D3;
    --ink-2: #B9AC93;
    --on-ink: #17140F;
    --accent: #E7735F;
    --accent-soft: rgb(231 115 95 / .15);
    --on-accent: #17140F;
    --danger: #F08070;
    --scrim: rgb(0 0 0 / .6);
    --lift: 3px 3px 0 rgb(0 0 0 / .55);
    --btn-lift: 3px 3px 0 var(--accent);
  }
}

/* Page and type */
html[data-theme="retro"] body { background: var(--paper), var(--canvas); font-size: 17px; line-height: 1.55; font-weight: 400; }
html[data-theme="retro"] .app { gap: 26px; }
html[data-theme="retro"] .muted { font-size: 15.5px; }
html[data-theme="retro"] .muted-lg { font-size: 17.5px; }
html[data-theme="retro"] .meta { font-size: 14px; }
html[data-theme="retro"] .eyebrow { font-size: 15px; font-weight: 600; font-variant: small-caps; letter-spacing: .05em; }
html[data-theme="retro"] .error { font-size: 15.5px; }
html[data-theme="retro"] :is(.prompt-text, .your-line, .subhead h2, .share-top b, .share-prompt, .share-bottom b, .unlock-line,
  .hub-head h2, .hero-prompt, .finish-opener, .profile-handle, .stat b, .credit-balance b, .sheet-title, .pinned-name,
  .topic-title, .history-title, .fl-tile-name, .fl-intro-title, .tile .tile-name, .big-score, .progress-title, .ob-title) {
  font-family: var(--display); letter-spacing: -0.012em; font-stretch: normal;
}
html[data-theme="retro"] .verdict-hero { border: var(--edge); box-shadow: var(--lift); }
html[data-theme="retro"] .verdict-hero::before { border-left: var(--edge); border-top: var(--edge); }
html[data-theme="retro"] .verdict-quote { font-style: normal; letter-spacing: -0.01em; }
html[data-theme="retro"] .hub-head h2 { font-weight: 900; }
html[data-theme="retro"] .tile .tile-name { font-size: 20px; font-weight: 800; }
html[data-theme="retro"] .tile .tile-sub { font-size: 15px; }
html[data-theme="retro"] .hero-kicker { letter-spacing: .08em; font-size: 13px; font-weight: 700; }

/* Masthead: blackletter title over a double rule, like a front page. */
html[data-theme="retro"] .top { border-bottom: 3px double var(--ink); padding-bottom: 6px; }
html[data-theme="retro"] .wordmark { font-size: 33px; line-height: 1; }
html[data-theme="retro"] .wordmark a { padding: 4px 0 2px; }
/* Retro: ink tile, newsprint and red lines, square printed corners. */
html[data-theme="retro"] .logo-mark { --lm-tile: #1F1A15; --lm-short: #F3ECDD; --lm-long: #D0503F; }
html[data-theme="retro"] .logo-mark .lm-tile { rx: 6px; }
@media (prefers-color-scheme: dark) { html[data-theme="retro"] .logo-mark { --lm-tile: #2E271E; } }

/* Cards are printed boxes: an inked frame and a hard offset shadow. */
html[data-theme="retro"] :is(.card, .tile, .prompt-card, .answer-wrap.finish, .entry.me, .share-card, .fl-tile) {
  border: var(--edge); box-shadow: var(--lift);
}
html[data-theme="retro"] .hero-card { border: var(--edge); box-shadow: var(--lift); outline: 1px solid var(--ink); outline-offset: 3px; }
html[data-theme="retro"] .tile[aria-disabled="true"] { box-shadow: none; border: 1.5px dashed var(--line-strong); }
@media (hover: hover) {
  html[data-theme="retro"] :is(.hero-card, .tile:not([aria-disabled="true"])):hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
}
html[data-theme="retro"] :is(.hero-card, .tile):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Buttons press down into the page. */
html[data-theme="retro"] .btn { font-size: 18px; font-weight: 600; letter-spacing: .005em; }
html[data-theme="retro"] .btn.primary { border-color: var(--ink); box-shadow: var(--btn-lift); }
html[data-theme="retro"] .btn.lime { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
html[data-theme="retro"] .btn.secondary { border-color: var(--ink); }
html[data-theme="retro"] :is(.btn.primary, .btn.lime):active { transform: translate(3px, 3px); box-shadow: none; }
html[data-theme="retro"] .status:not(.done):not(.soon) { font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; font-size: 12.5px; }
html[data-theme="retro"] .side { border-color: var(--ink); }

/* Fields look like a form you fill in with a pen. */
html[data-theme="retro"] :is(.field input, .field textarea) { background: rgb(255 253 246 / .55); border-color: var(--line-strong); font-size: 18px; }
@media (prefers-color-scheme: dark) {
  html[data-theme="retro"] :is(.field input, .field textarea) { background: rgb(0 0 0 / .18); }
}
html[data-theme="retro"] :is(.field input, .field textarea):focus { border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent-soft); }
/* The two-word boxes take Retro's paper background above, so their text must follow the page ink
   too (the pastel-card ink is always dark, which vanished on a dark phone). */
html[data-theme="retro"] .two-words input { color: var(--ink); font-size: 22px; }
html[data-theme="retro"] .two-words input::placeholder { color: var(--ink-2); font-size: 16px; }
html[data-theme="retro"] .two-words input.sealed { color: var(--ink-2); }

/* Theme switches: one circle of the new look grows from the tap. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
html.theme-fade, html.theme-fade * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }


/* ---------- hub, slim: one big card (today's game), then everything else as calm one-line rows */
.hub-label { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.hub-section { margin-top: 6px; margin-bottom: -12px; }
.progress-box.hub-section { padding: 0 2px; gap: 0; }
.progress-box.done .hub-label { color: var(--accent); }
.game-list { display: flex; flex-direction: column; gap: 8px; }
.tile.row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 0;
  min-height: 0; padding: 12px 14px 12px 12px; border-radius: var(--r-card);
  background: var(--surface); color: var(--ink);
}
.tile.row .game-icon {
  grid-column: 1; grid-row: 1; width: 44px; height: 44px; padding: 9px; border-radius: var(--r-tile);
  background: var(--block, var(--surface-2)); color: var(--block-ink); box-sizing: border-box;
}
.tile.row .row-text { grid-column: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile.row .tile-name { font-size: 16.5px; font-weight: 720; letter-spacing: -0.02em; line-height: 1.2; }
.tile.row .tile-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.row .status { grid-column: 3; margin: 0; align-self: center; }
.tile.row .status.done { background: var(--canvas); color: var(--ink); }
.tile.row .status:not(.done):not(.soon) { background: var(--ink); color: var(--on-ink); }
/* The day's verdict screen (app.js renderDay). */
.day-stage { display: grid; place-items: center; height: 150px; margin-bottom: -6px; }
.day-cat { width: 150px; }
#day-best:empty { display: none; }
/* Done today: finished games, quieter, with their score (app.js doneRow). */
.done-box { display: flex; flex-direction: column; gap: 20px; margin-top: 4px; }
.tile.row.done-row { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.done-row .done-icon { grid-column: 1; position: relative; width: 44px; height: 44px; }
.done-row .done-icon .game-icon { width: 44px; height: 44px; padding: 9px; border-radius: var(--r-tile); background: var(--block, var(--surface-2)); color: var(--block-ink); box-sizing: border-box; display: block; opacity: .8; }
.done-row .done-check { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 2px var(--canvas); }
.done-row .tile-sub b { color: var(--ink); font-family: var(--mono); font-weight: 650; }
.done-go { grid-column: 3; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
/* The fold (animateHub): a stand-in gets stamped DONE, then folds to a row. */
.hub-moving { pointer-events: none; }
/* While things move, the sinking done row passes behind the rows, and the big card stays on top. */
#game-grid > .tile, #progress-box, #rant-slot > .tile { position: relative; z-index: 1; }
.done-row { position: relative; z-index: 0; }
#hero-card { position: relative; z-index: 2; }
.hero-top .status { white-space: nowrap; }
.fold-ghost { position: relative; overflow: hidden; }
.done-stamp {
  position: absolute; right: 16px; bottom: 16px; padding: 3px 11px 2px; border: 3px solid var(--block-ink, var(--ink)); border-radius: 10px;
  font-family: var(--mono); font-weight: 800; font-size: 19px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--block-ink, var(--ink)); transform: rotate(-8deg); pointer-events: none;
}
.tile.row .done-stamp { right: 84px; bottom: 50%; margin-bottom: -15px; font-size: 14px; border-width: 2.5px; }
.hero-card.all-done .hero-kicker { color: var(--block-ink); }
html[data-theme="retro"] .done-stamp { border-radius: 2px; font-family: var(--display); }
@media (hover: hover) { .tile.row:not([aria-disabled="true"]):hover { transform: translateY(-1px); } }
.friends-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; width: 100%;
  padding: 12px 14px 12px 12px; border-radius: var(--r-card); border: 1.5px dashed var(--line-strong);
  background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease), border-color .15s ease;
}
.friends-row:active { transform: scale(.98); }
@media (hover: hover) { .friends-row:hover { border-color: var(--ink); } }
.friends-row .row-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-tile); background: var(--ink); color: var(--on-ink); }
.friends-row .row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.friends-row .row-name { font-size: 16.5px; font-weight: 720; letter-spacing: -0.02em; }
.friends-row .row-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.3; }
.friends-row .row-go { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; }
html[data-theme="retro"] .tile.row { box-shadow: none; }
html[data-theme="retro"] .friends-row { border: 1.5px dashed var(--ink); }
html[data-theme="retro"] .hub-label { font-family: var(--mono); }


/* ---------- loading spinner (spinner.js): five dots chasing round a circle, cobalt, fading tail */
.spinner { --d: 6px; position: relative; display: inline-block; flex: none; width: 34px; height: 34px; color: var(--accent); }
.spinner.lg { --d: 8px; width: 46px; height: 46px; }
.spinner.sm { --d: 3px; width: 16px; height: 16px; color: currentColor; vertical-align: -3px; }
.spin-dot { position: absolute; inset: 0; opacity: 0; animation: spin-chase 2.6s infinite; }
.spin-dot i { position: absolute; left: 50%; top: 0; width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2); border-radius: 50%; background: currentColor; }
.spin-dot:nth-child(2) { animation-delay: .14s; } .spin-dot:nth-child(2) i { opacity: .8; }
.spin-dot:nth-child(3) { animation-delay: .28s; } .spin-dot:nth-child(3) i { opacity: .6; }
.spin-dot:nth-child(4) { animation-delay: .42s; } .spin-dot:nth-child(4) i { opacity: .45; }
.spin-dot:nth-child(5) { animation-delay: .56s; } .spin-dot:nth-child(5) i { opacity: .3; }
@keyframes spin-chase {
  0% { transform: rotate(180deg); opacity: 0; animation-timing-function: ease-out; }
  7% { opacity: 1; transform: rotate(300deg); animation-timing-function: linear; }
  30% { transform: rotate(410deg); animation-timing-function: ease-in-out; }
  39% { transform: rotate(645deg); animation-timing-function: linear; }
  70% { transform: rotate(770deg); opacity: 1; animation-timing-function: ease-out; }
  75% { transform: rotate(900deg); opacity: 1; }
  76%, 100% { opacity: 0; transform: rotate(900deg); }
}
/* Ghost skeletons: soft bars with a slow sheen, in the theme's own ink. */
:root { --sk-1: color-mix(in srgb, var(--ink) 7%, transparent); --sk-2: color-mix(in srgb, var(--ink) 13%, transparent); }
.sk, .sk-text {
  background: linear-gradient(100deg, var(--sk-1) 30%, var(--sk-2) 50%, var(--sk-1) 70%) 0 0 / 300% 100%;
  animation: sk-sheen 1.5s ease-in-out infinite;
  border-radius: min(6px, var(--r-pill));
}
.sk { display: block; flex: none; max-width: 100%; }
.sk.sk-pill { border-radius: var(--r-pill); }
.sk-gap { margin-top: 4px; }
.sk-pos { margin-top: 3px; }
.sk-row { pointer-events: none; }
.sk-row .body, .sk-row .fl-row-text, .sk-row .topic-body { gap: 7px; }
.teaser-list li.sk-row { padding: 11px 10px; }
.sk-chips { display: flex; gap: 6px; margin-top: 4px; }
.sk-list { list-style: none; margin: 0; padding: 0; }
.topic-list.sk-list, .fl-list.sk-list { display: flex; flex-direction: column; }
.history-days.sk-list { display: flex; flex-direction: column; gap: 18px; }
.sk-text { color: transparent !important; display: inline-block; align-self: flex-start; max-width: var(--skw, 60px); min-width: var(--skw, 60px); min-height: .95em; vertical-align: middle; }
@keyframes sk-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk, .sk-text { animation: none; } }
.loading-overlay { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; background: color-mix(in srgb, var(--canvas) 55%, transparent); animation: loading-in .2s ease both; }
@keyframes loading-in { from { opacity: 0; } }
.btn .spinner.sm, .ob-status .spinner.sm { margin-right: 2px; }
@media (prefers-reduced-motion: reduce) {
  .spin-dot { animation: none; opacity: 1; }
  .spin-dot:nth-child(1) { transform: rotate(0deg); } .spin-dot:nth-child(2) { transform: rotate(-28deg); }
  .spin-dot:nth-child(3) { transform: rotate(-56deg); } .spin-dot:nth-child(4) { transform: rotate(-84deg); }
  .spin-dot:nth-child(5) { transform: rotate(-112deg); }
}

/* ---------- UX sweep fixes (v42) */
/* Empty loader slots and empty boxes don't leave gaps in the stack. */
#rh-loading:empty, #fh-loading:empty, #board-me:empty { display: none; }
/* Rant topic rows: the whole row opens the topic. */
.topic-row.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.topic-row.tappable:active { opacity: .7; }
/* Counters never split over two lines. */
.pick-count, #tn-count { white-space: nowrap; flex: none; }
/* Small phones: the header number gives the logo room, and the home countdown stacks
   ("New in" over the time) instead of running off the edge. */
@media (max-width: 389px) {
  #puzzle-no { display: none; }
  .hub-head h2 { gap: 8px; }
  .hub-head .meta { white-space: normal; text-align: right; line-height: 1.25; max-width: 5.6em; }
  .hub-head .meta b { white-space: nowrap; }
}
html[data-theme="retro"] #puzzle-no { margin-left: 6px; }

/* ---------- Profile, calm (v43): header + three numbers, then one tab at a time */
.pf-glance { margin-top: 2px; }
.pf-tabs {
  display: flex; gap: 2px; padding: 4px;
  border-radius: var(--r-pill); background: var(--surface); position: sticky; top: 8px; z-index: 5;
}
/* Five tabs: each takes the room its label needs, so "Settings" never squeezes. */
.pf-tabs [role=tab] {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; -webkit-tap-highlight-color: transparent;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.pf-tabs [role=tab][aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
.pf-tabs [role=tab]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-tab-n { font-family: var(--mono); font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 14%, transparent); }
.pf-panel { animation: pf-in .28s var(--ease) both; }
@keyframes pf-in { from { opacity: 0; transform: translateY(6px); } }
.pf-panel .stat-row-2 { margin-top: 0; border-top: 1px solid var(--line); }
.pf-empty { text-align: center; padding: 18px 8px; }
.small-note { font-size: 12.5px; }
#pf-toast:empty { display: none; }
.pf-tabs [role=tab][hidden] { display: none; }
/* New-notification count: a small coral dot-number that stays even on small phones. */
.pf-tab-new { background: #C93A28; color: #fff; font-weight: 750; padding: 1px 5px; min-width: 16px; text-align: center; }
@media (max-width: 389px) { .pf-tabs [role=tab] { font-size: 12.5px; padding: 0 5px; gap: 3px; } .pf-tab-n:not(.pf-tab-new) { display: none; } }
html[data-theme="retro"] .pf-tabs { border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
html[data-theme="retro"] .pf-tabs [role=tab] { border-radius: 2px; font-family: var(--display); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .pf-panel { animation: none; } }

/* ---------- Streak freeze (v44): ice, not fire. Same ice in every look, it reads instantly. */
:root { --ice-1: #EEF8FF; --ice-2: #CDE7FC; --ice-3: #A8D3F6; --ice-ink: #0B3A63; --ice-ink-2: #2E6797; --ice-glow: #6FB4EC; }
.streak { position: relative; }
.streak.frozen {
  color: var(--ice-ink); overflow: hidden;
  background: linear-gradient(135deg, var(--ice-1), var(--ice-2) 55%, var(--ice-1));
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .9), 0 0 0 1px var(--ice-3), 0 0 14px -4px var(--ice-glow);
}
.streak.frozen .i { color: var(--ice-glow); animation: ice-spin 6s linear infinite; }
.streak.frozen::after, .frost-banner::after, .stat.frozen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .75) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat;
  animation: ice-glint 4.5s ease-in-out infinite;
}
/* Owns a freeze: a tiny snowflake sits on the flame pill. */
.streak.armed::before {
  content: "❄"; position: absolute; top: -5px; right: -4px; width: 16px; height: 16px; display: grid; place-items: center;
  font-size: 9px; line-height: 1; border-radius: 50%; color: var(--ice-ink);
  background: var(--ice-2); box-shadow: 0 0 0 2px var(--canvas);
}
.frost-banner {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 15px 16px;
  border-radius: var(--r-card); color: var(--ice-ink);
  background:
    radial-gradient(circle at 88% 18%, rgb(255 255 255 / .95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 74% 70%, rgb(255 255 255 / .9) 0 1px, transparent 2px),
    radial-gradient(circle at 95% 62%, rgb(255 255 255 / .8) 0 1.5px, transparent 2.5px),
    radial-gradient(120% 140% at 100% 0%, var(--ice-1), transparent 60%),
    linear-gradient(135deg, var(--ice-1), var(--ice-2) 60%, var(--ice-1));
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .85), 0 10px 26px -18px var(--ice-glow);
  animation: frost-in .6s var(--ease) both;
}
.frost-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .7); color: var(--ice-glow); box-shadow: inset 0 0 0 1.5px var(--ice-3); }
.frost-icon .i { animation: ice-spin 8s linear infinite; }
.frost-title { font-weight: 780; font-size: 16px; letter-spacing: -0.02em; margin: 0; }
.frost-sub { font-size: 13.5px; line-height: 1.35; color: var(--ice-ink-2); margin: 0; }
/* Profile: the streak stat frosts over while a freeze holds it. */
.stat.frozen {
  position: relative; overflow: hidden; border-left: 0; border-radius: 14px; margin: -6px 6px -6px 0; padding: 6px 12px;
  background: linear-gradient(135deg, var(--ice-1), var(--ice-2)); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .9), 0 0 0 1px var(--ice-3);
}
.stat.frozen b, .stat.frozen b.coral { color: var(--ice-ink); }
.stat.frozen span { color: var(--ice-ink-2); }
.freeze-chip {
  align-self: flex-start; margin-top: 4px; padding: 2px 8px 2px 6px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700;
  color: var(--ice-ink); background: var(--ice-2); box-shadow: inset 0 0 0 1px var(--ice-3); white-space: nowrap;
}
.freeze-chip::before { content: "❄ "; }
.freeze-chip.frost-in { animation: frost-in .7s var(--pop) both; }
#streak-line.frost-line { color: color-mix(in srgb, var(--ice-glow) 72%, var(--ink)); font-weight: 650; } /* icy blue that reads on light and dark */
@keyframes ice-glint { 0%, 60% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes ice-spin { to { transform: rotate(360deg); } }
@keyframes frost-in { from { opacity: 0; transform: scale(.94); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
html[data-theme="retro"] .frost-banner, html[data-theme="retro"] .stat.frozen { border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .streak.frozen .i, .frost-icon .i, .streak.frozen::after, .frost-banner::after, .stat.frozen::after, .frost-banner, .freeze-chip.frost-in { animation: none; }
}

/* ---------- Play again (v44): the 2nd-try card on a played game, and its tag on done rows */
.retry-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icon text" "go go"; align-items: center;
  column-gap: 12px; row-gap: 12px; padding: 14px; border-radius: var(--r-card); background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.retry-icon { grid-area: icon; }
.retry-text { grid-area: text; }
.retry-card > .btn { grid-area: go; width: 100%; }
.retry-card:not(.used) { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); animation: frost-in .5s var(--ease) both; }
.retry-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--canvas); color: var(--accent); }
.retry-card.used .retry-icon { color: var(--ink-2); }
.retry-title { margin: 0; font-weight: 760; font-size: 16px; letter-spacing: -0.02em; }
.retry-sub { margin: 2px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.retry-go { background: var(--ink); color: var(--on-ink); gap: 6px; white-space: nowrap; }
.retry-go .coin { width: 15px; height: 15px; }
#toggle-try { white-space: nowrap; }
.done-go.can-retry { color: var(--accent); }
html[data-theme="retro"] .retry-card { border-radius: 2px; }
html[data-theme="retro"] .retry-icon { border-radius: 2px; }

/* ---------- Alerts (v45): the cat asks to tap your window, and the switches in Settings */
.alert-card {
  position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 16px 14px 12px; border-radius: var(--r-card); overflow: hidden;
  background: linear-gradient(135deg, #1E2A6B, #3B4DB8 70%, #5566D6); color: #F4F6FF;
  box-shadow: 0 14px 30px -20px #1E2A6B; animation: frost-in .5s var(--ease) both;
}
.alert-card::before { /* a couple of stars outside his window */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 92% 18%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 80% 78%, #fff 0 1px, transparent 2px), radial-gradient(circle at 60% 12%, #fff 0 1px, transparent 2px);
  opacity: .8;
}
.ac-window img { display: block; width: 76px; height: 76px; transform-origin: 50% 85%; animation: cat-tap 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .25)); }
.ac-body { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-title { margin: 0; font-weight: 780; font-size: 16.5px; letter-spacing: -0.02em; line-height: 1.2; }
.ac-sub { margin: 0; font-size: 13.5px; line-height: 1.35; color: rgb(244 246 255 / .82); }
.ac-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.alert-card #ac-on { background: #D8EFA0; color: #141413; }
.alert-card .link-btn { color: rgb(244 246 255 / .85); }
.alert-card.done { background: linear-gradient(135deg, #2D6B3A, #4C9A55); }
.alert-card.install { background: linear-gradient(135deg, #3B2A6B, #6A4DB8); }
/* "tap tap" on the glass every few seconds */
@keyframes cat-tap { 0%, 70%, 100% { transform: none; } 74% { transform: rotate(-6deg) translateY(-2px); } 78% { transform: rotate(3deg); } 82% { transform: rotate(-5deg) translateY(-1px); } 86% { transform: none; } }

.switch {
  flex: none; position: relative; width: 50px; height: 30px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--line-strong); transition: background .2s var(--ease); -webkit-tap-highlight-color: transparent;
}
.switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .22s var(--pop); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(20px); }
.switch:disabled { opacity: .45; cursor: default; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.al-headline { margin: 0; font-weight: 720; font-size: 16px; letter-spacing: -0.02em; }
.al-note { font-size: 13.5px; line-height: 1.4; }
.al-list { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 6px; }
.al-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.al-row + .al-row { border-top: 1px solid var(--line); }
.al-name { margin: 0; font-weight: 680; font-size: 15px; }
.al-row .muted { font-size: 12.5px; margin: 2px 0 0; }
#al-test { align-self: flex-start; margin-top: 6px; }
html[data-theme="retro"] .alert-card { border-radius: 2px; }
html[data-theme="retro"] .switch, html[data-theme="retro"] .switch span { border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .ac-window img, .alert-card { animation: none; } .switch span { transition: none; } }
.ac-actions .btn, .ac-actions .link-btn { white-space: nowrap; }
html[data-theme="retro"] .ac-actions #ac-on { padding-inline: 14px; }

/* ---------- Recovery code (v47) */
.rc-code {
  display: block; padding: 12px 14px; border-radius: var(--r-input); background: var(--canvas);
  box-shadow: inset 0 0 0 1.5px var(--line-strong); font-family: var(--mono); font-size: 15px; letter-spacing: .06em;
  text-align: center; color: var(--ink-2); user-select: all; word-break: normal; overflow-wrap: normal;
}
@media (max-width: 400px) { .rc-code { font-size: 13.5px; letter-spacing: .02em; padding-inline: 10px; } }
.rc-code.shown { color: var(--ink); font-weight: 600; }
.rc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-actions .btn { width: 100%; }
.rc-input { width: 100%; font-family: var(--mono); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.restore-link { display: block; margin: 14px auto 0; }
html[data-theme="retro"] .rc-code { border-radius: 2px; }

/* ---------- Notifications inbox (v48) */
.credits-pill { position: relative; }
.credits-pill.has-dot::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%;
  background: #FF4D3D; box-shadow: 0 0 0 2.5px var(--canvas); animation: note-dot 2.4s ease-in-out infinite;
}
@keyframes note-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.note-box { display: flex; flex-direction: column; gap: 8px; animation: frost-in .45s var(--ease) both; }
.note-head { align-items: center; }
.note-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #FF4D3D; color: #fff; font-size: 11px; letter-spacing: 0; }
.note-count:empty { display: none; }
.note-list { display: flex; flex-direction: column; gap: 6px; }
.note-row {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-card); background: var(--surface); color: var(--ink);
  font: inherit; text-align: left; -webkit-tap-highlight-color: transparent;
}
button.note-row { cursor: pointer; }
button.note-row:active { transform: scale(.99); }
.note-row.unread { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #FF4D3D 55%, transparent); background: color-mix(in srgb, #FF4D3D 6%, var(--surface)); }
.note-row.unread::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #FF4D3D; }
.note-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; background: var(--b-lilac); color: #141413; }
.note-row.lost .note-av { background: var(--b-coral); }
.note-row.held .note-av { background: var(--b-lime); }
.note-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.note-title { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.note-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--ink-2); }
.note-tag { font-size: 11.5px; font-weight: 700; white-space: nowrap; padding: 2px 8px; border-radius: var(--r-pill); background: var(--canvas); color: var(--ink); }
.note-row.lost .note-tag { color: #C2410C; }
.pf-notes .note-row { background: var(--canvas); }
.pf-notes-empty { font-size: 13.5px; }
html[data-theme="retro"] .note-row, html[data-theme="retro"] .note-av, html[data-theme="retro"] .note-tag { border-radius: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="retro"]) .note-row.lost .note-tag { color: #FF9A6B; } }
@media (prefers-reduced-motion: reduce) { .credits-pill.has-dot::after, .note-box { animation: none; } }

/* ---------- Ranting now: a swipe strip of rant topics under the big card (app.js drawRantStrip).
   Rant never closes, so it reads as a live feed, not as one more game to finish. */
.rant-strip { display: flex; flex-direction: column; gap: 10px; }
.rs-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 2px; }
.rs-head .hub-label { display: flex; align-items: center; gap: 8px; color: var(--ink); white-space: nowrap; }
.rs-tag { font-weight: 600; color: var(--ink-2); letter-spacing: .03em; }
.rs-tag::before { content: "· "; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #F0432B; flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: live-ping 1.8s ease-out infinite; }
@keyframes live-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
.rs-all {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 2px 0 10px;
  background: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.rs-all .i { transition: transform .16s var(--ease); }
.rs-all:active .i { transform: translateX(3px); }
/* The track bleeds to the screen edges so the next card peeks in: a hint to swipe. */
.rs-track {
  display: flex; gap: 10px; margin: 0 -20px; padding: 2px 20px 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rs-track::-webkit-scrollbar { display: none; }
.rs-card {
  flex: 0 0 132px; min-height: 132px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px; padding: 13px 13px 12px; text-align: left;
  border-radius: var(--r-tile); border: 0; cursor: pointer; font: inherit;
  background: var(--b-coral); color: var(--block-ink); -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease);
}
.rs-card:active { transform: scale(.96); }
.rs-card.pick { flex-basis: 156px; }
.rs-art { font-size: 26px; line-height: 1; height: 28px; display: flex; align-items: center; }
.rs-art .i { color: var(--block-ink); }
.rs-card.hot .rs-art .i { animation: flick .9s ease-in-out infinite; transform-origin: 50% 90%; }
.rs-name {
  font-size: 15px; font-weight: 720; letter-spacing: -0.015em; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.rs-meta { margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--block-ink-2); }
/* Older topics and the "start one" card are quieter than the live ones. */
.rs-card.calm { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.rs-card.calm .rs-art .i, .rs-card.calm .rs-meta { color: var(--ink-2); }
.rs-card.make { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong, var(--line)); border: 0; color: var(--ink); justify-content: center; align-items: center; text-align: center; gap: 8px; }
.rs-card.make .rs-plus { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); }
.rs-card.make .rs-name { font-size: 14px; -webkit-line-clamp: 2; }
.rs-card.make .rs-meta { margin-top: 0; color: var(--ink-2); }
@media (hover: hover) { .rs-card:hover { transform: translateY(-2px) rotate(-.6deg); } .rs-card:nth-child(even):hover { transform: translateY(-2px) rotate(.6deg); } }
html[data-theme="retro"] .rs-card { border: var(--edge); box-shadow: 2px 2px 0 var(--ink); border-radius: 4px; }
html[data-theme="retro"] .rs-card.make { border-style: dashed; box-shadow: none; }
html[data-theme="retro"] .rs-card:active { transform: translate(2px, 2px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .rs-card.hot .rs-art .i { animation: none; }
  .rs-track { scroll-behavior: auto; }
}

/* ---------- Medals: the unlock moment and the shelf on your profile (app.js showMoments, renderProfile). */
dialog.medal-moment {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0;
  padding: calc(18px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  background: rgb(12 12 14 / .93); color: #FAFAF7; overflow: hidden; text-align: center;
}
dialog.medal-moment[open] { display: flex; flex-direction: column; animation: mm-in .3s ease both; }
dialog.medal-moment::backdrop { background: rgb(12 12 14 / .5); backdrop-filter: blur(6px); }
@keyframes mm-in { from { opacity: 0; } }
.mm-rays {
  position: absolute; left: 50%; top: 190px; width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--mm-glow, rgb(216 239 160 / .17)) 0 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: mm-spin 22s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }
.mm-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.mm-medal { position: relative; width: 190px; height: 250px; flex: none; transform-origin: 50% 0; }
.mm-medal.go { animation: mm-drop .95s var(--pop) both; }
@keyframes mm-drop { 0% { transform: translateY(-115vh) rotate(-14deg); } 70% { transform: translateY(0) rotate(5deg); } 86% { transform: rotate(-2.5deg); } 100% { transform: none; } }
.mm-ribbon { position: absolute; top: -40px; width: 60px; height: 140px; background: repeating-linear-gradient(90deg, var(--r1, #2F4BFF) 0 15px, var(--r2, #F7C3AC) 15px 30px); }
.mm-ribbon.l { left: 40px; transform: skewX(14deg); }
.mm-ribbon.r { right: 40px; transform: skewX(-14deg); }
.mm-disc {
  position: absolute; left: 8px; top: 74px; width: 174px; height: 174px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #FFF4C2, #F2C94C 40%, #C8932A 75%, #9C6B12);
  box-shadow: inset 0 0 0 9px rgb(255 255 255 / .25), inset 0 0 0 12px rgb(120 80 10 / .35), 0 16px 30px rgb(0 0 0 / .5);
}
.mm-disc::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .7) 50%, transparent 60%); animation: mm-shine 2.8s ease-in-out 1.1s infinite; }
@keyframes mm-shine { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }
.mm-mark { position: relative; z-index: 1; font-family: var(--display); font-size: 70px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: #8A5A0B; text-shadow: 0 2px 0 #FFF1B8, 0 -1px 0 rgb(90 55 0 / .5); }
.mm-mark.long { font-size: 56px; }
/* A new personal best is silver: not a medal you collect, a number you beat. */
.mm-medal.silver .mm-disc { background: radial-gradient(circle at 35% 30%, #FFFFFF, #D9DDE3 42%, #A3AAB5 76%, #6E7683); }
.mm-medal.silver .mm-mark { color: #4B525D; text-shadow: 0 2px 0 #FFFFFF, 0 -1px 0 rgb(30 35 45 / .4); }
.mm-confetti { top: 190px; }
.mm-kick { margin-top: 20px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(250 250 247 / .65); }
.mm-title { margin: 6px 0 6px; font-family: var(--display); font-size: clamp(38px, 11vw, 48px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: #FAFAF7; text-wrap: balance; }
.mm-desc { margin: 0; font-size: 16px; line-height: 1.35; color: rgb(250 250 247 / .78); max-width: 30ch; }
.mm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.mm-chips span { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 6px 10px; border-radius: 999px; background: rgb(250 250 247 / .1); color: rgb(250 250 247 / .85); white-space: nowrap; }
.mm-say { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgb(250 250 247 / .1); font-size: 14.5px; font-weight: 600; text-align: left; }
.mm-say img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.mm-btns { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mm-flex { background: #FAFAF7; color: #141413; border: 0; }
.mm-next { background: transparent; color: #FAFAF7; border: 1.5px solid rgb(250 250 247 / .32); }
@media (max-height: 700px) {
  .mm-medal { transform: scale(.82); margin: -22px 0 -40px; }
  .mm-medal.go { animation-name: mm-drop-small; }
  .mm-say { display: none; }
}
@keyframes mm-drop-small { 0% { transform: translateY(-115vh) scale(.82) rotate(-14deg); } 70% { transform: scale(.82) rotate(5deg); } 100% { transform: scale(.82); } }
html[data-theme="retro"] .mm-flex, html[data-theme="retro"] .mm-next { border-radius: 4px; }
html[data-theme="retro"] .mm-flex { box-shadow: 3px 3px 0 var(--accent); }

/* The shelf on your profile: earned medals in gold with a ribbon stub, the rest waiting in grey. */
.medal-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; padding: 6px 2px 2px; }
.shelf-medal { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); }
.sm-art { position: relative; width: 62px; height: 78px; }
.sm-art .sm-rib { position: absolute; top: 0; width: 18px; height: 34px; background: repeating-linear-gradient(90deg, var(--r1) 0 6px, var(--r2) 6px 12px); }
.sm-art .sm-rib.l { left: 15px; transform: skewX(12deg); }
.sm-art .sm-rib.r { right: 15px; transform: skewX(-12deg); }
.sm-art .sm-disc {
  position: absolute; left: 3px; bottom: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFF4C2, #F2C94C 42%, #B88420); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .3), 0 4px 10px rgb(0 0 0 / .18);
  font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.05em; color: #8A5A0B;
}
.shelf-medal.locked .sm-rib { display: none; }
.shelf-medal.locked .sm-disc { background: var(--surface-2, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-2); font-family: var(--mono); font-size: 18px; }
.sm-title { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.sm-when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); margin-top: -4px; }
.shelf-medal.locked .sm-title { color: var(--ink-2); font-weight: 600; }
.shelf-line { height: 4px; border-radius: 2px; background: var(--line); margin: -2px 0 2px; }
@media (prefers-reduced-motion: reduce) {
  .mm-rays, .mm-disc::after, .mm-medal.go { animation: none; }
}

/* ---------- Friends: added by username (friends.js). Home row, challenge cards, the Friends screen,
   and the "Challenge your friends" chips under a verdict. Every tap target is 44px or more. */
.pal-av { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #141413; font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1; box-shadow: 0 0 0 2px var(--canvas); }
.pal-av.sm { width: 30px; height: 30px; font-size: 13px; }
.pal-av.xs { width: 26px; height: 26px; font-size: 12px; box-shadow: none; }

/* Home: the Friends row (solid, unlike the dashed "Play with friends" row below it). */
.pals-row { border-style: solid; border-color: var(--line); background: var(--surface); }
.pals-stack { display: flex; align-items: center; width: 44px; }
.pals-stack.faces { width: auto; min-width: 44px; padding-left: 4px; }
.pals-stack.faces .pal-av + .pal-av { margin-left: -7px; }
/* The faces column grows with the faces, so it never runs under the name. */
.friends-row .pals-stack { min-width: 44px; }
.pals-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: #C93A28; color: #fff; font-size: 11.5px; font-weight: 800; vertical-align: 2px; }
.pals-row .row-name { font-weight: 760; }

/* Home: a friend challenged you. Their game's pastel, a sword, one tap to play. */
.pal-challenges { display: flex; flex-direction: column; gap: 8px; }
.pal-challenge {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px;
  padding: 10px 12px 10px 14px; border: 0; border-radius: var(--r-card); background: var(--block, var(--b-coral)); color: var(--block-ink);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s var(--ease);
  box-shadow: inset 0 0 0 1.5px rgb(20 20 19 / .12); animation: pal-in .5s var(--ease) both;
}
.pal-challenge:active { transform: scale(.98); }
@keyframes pal-in { from { opacity: 0; transform: translateY(-8px); } }
.pc-icon { font-size: 26px; text-align: center; }
.pc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-top { font-size: 15.5px; font-weight: 600; }
.pc-top b { font-weight: 800; }
.pc-sub { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--block-ink-2); }
.pc-go { display: grid; place-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--block-ink); color: #FAFAF7; font-size: 14px; font-weight: 750; }

/* The Friends screen. */
.pals-search { position: relative; display: flex; align-items: center; }
.pals-at { position: absolute; left: 16px; font-family: var(--mono); font-weight: 700; color: var(--ink-2); pointer-events: none; }
.pals-search input {
  width: 100%; min-height: 52px; padding: 0 16px 0 38px; border-radius: var(--r-input); border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; /* 16px: iPhone doesn't zoom */
}
.pals-search input:focus { outline: none; border-color: var(--ink); }
.pals-results, .pals-plain, .pals-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pals-results { margin-top: -8px; }
.pal-line { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border-radius: var(--r-card); background: var(--surface); min-height: 60px; }
.pal-line .pal-name { flex: 1; min-width: 0; }
.pal-line .btn.small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.pal-btns { display: flex; gap: 6px; flex: none; }
.pal-wait { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.pal-none { padding: 6px 4px; }
.pal-name { font-weight: 750; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pals-block { display: flex; flex-direction: column; gap: 10px; }
.pal-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 8px; padding: 12px; border-radius: var(--r-card); background: var(--surface); }
.pal-head { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pal-who { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-width: 0; }
.pal-streak { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--accent); }
.pal-sub { flex-basis: 100%; font-size: 13px; color: var(--ink-2); }
.pal-action .btn.small { min-height: 44px; padding: 0 14px; font-size: 14px; }
.pal-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.pal-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); font-size: 12.5px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pal-chip b { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.pal-chip.on { background: var(--block); color: #141413; box-shadow: none; }
.pal-chip.on b { color: #141413; }
.pal-pick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pal-pick-label { font-size: 13px; color: var(--ink-2); margin-right: 2px; }
.pal-pick-chip { min-height: 44px; cursor: pointer; font-family: var(--mono); font-size: 13px; }
.pal-more { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.pal-answer { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pal-answer-game { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.pal-quote { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.pal-answer .link-btn { align-self: flex-start; min-height: 36px; }
.pal-remove { align-self: flex-start; color: var(--ink-2); }
.pal-remove.sure { color: #D93A2B; font-weight: 700; }
.pals-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 10px; }
.pals-empty img { border-radius: 50%; }
.pals-empty-title { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.pals-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; margin: 0;
  max-width: min(92vw, 400px); padding: 11px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink);
  font-size: 14.5px; font-weight: 650; text-align: center; box-shadow: 0 8px 24px rgb(0 0 0 / .25); pointer-events: none; }
.pals-toast:empty { display: none; }

/* Under a verdict: challenge friends who haven't played this yet. */
.pals-send { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pals-send-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.pals-send-row::-webkit-scrollbar { display: none; }
.pal-send-chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 12px 0 8px; border-radius: var(--r-pill);
  border: 1.5px solid var(--ink); background: var(--canvas); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.pal-send-chip:active { transform: scale(.96); }
.pal-send-chip.played { border-color: var(--line-strong); color: var(--ink-2); cursor: default; }
.pal-send-chip.played b { font-family: var(--mono); font-weight: 700; }
.pal-send-chip.sent { background: var(--b-lime); border-color: var(--b-lime); color: #141413; }
.pal-send-chip:disabled { opacity: 1; }

/* The inbox: friend kinds get a lilac face. */
.note-row.social .note-av { background: var(--b-lilac); }

html[data-theme="retro"] .pal-challenge, html[data-theme="retro"] .pal-card, html[data-theme="retro"] .pal-line { border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink); }
html[data-theme="retro"] .pc-go, html[data-theme="retro"] .pal-send-chip, html[data-theme="retro"] .pals-badge { border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .pal-challenge { animation: none; } }
.pal-send-played { font-size: 12px; font-weight: 600; }
.pc-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Friends screen tabs: same look as the profile tabs, with a red count for things waiting. */
.pals-tabs [role=tab] { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pals-tab-badge { min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill); background: #C93A28; color: #fff; font-family: var(--mono); font-size: 11.5px; font-weight: 800; }
.pals-panel { gap: 18px; }
#pp-groups .fl-intro { margin-top: 4px; }
.pals-tabs { position: static; }
.pals-tabs [role=tab] { flex: 1 1 0; }

/* Three looks: three columns. In the profile the swatch sits above the name. */
.look-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.look-grid .look { padding: 8px 8px 12px; }
.look-grid .look-name { font-size: 17px; }
.look-grid .look-sub { font-size: 12.5px; }
.look-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.look-opt { flex-direction: column; justify-content: center; gap: 6px; min-height: 92px; font-size: 15px; }
/* Tabs (profile, friends): 44px tall, the minimum comfortable tap. */
.pf-tabs [role=tab] { min-height: 44px; }

/* Profile inbox: one quiet button opens the rest. */

/* ---------- Live notes (live.js). Toasts stack bottom right; a challenge on Home drops in from the top. */
.live-toasts { position: fixed; right: 12px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; max-width: min(340px, calc(100vw - 24px)); }
body.has-navpill .live-toasts { bottom: calc(104px + env(safe-area-inset-bottom)); }
.live-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 14px 9px 10px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--canvas); color: var(--ink); text-align: left;
  font: inherit; font-size: 14px; line-height: 1.3; box-shadow: 0 10px 28px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .08);
  opacity: 0; transform: translateX(24px) scale(.96); touch-action: pan-y;
  transition: opacity .28s ease, transform .42s var(--pop); }
.live-toast.in { opacity: 1; transform: none; }
.live-toast.out { opacity: 0; transform: translateX(30px) scale(.96); transition-duration: .28s; }
.live-toast.flick { transform: translateX(110%); }
.live-toast b { font-weight: 750; }
.lt-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); font-size: 18px; }
.live-toast.in .lt-icon { animation: lt-pop .55s .12s var(--pop) both; }
@keyframes lt-pop { 0% { transform: scale(.4) rotate(-20deg); } 100% { transform: none; } }

.live-drop { position: fixed; z-index: 75; left: 50%; top: calc(10px + env(safe-area-inset-top)); width: min(440px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--canvas); color: var(--ink);
  box-shadow: 0 16px 40px rgb(0 0 0 / .22), 0 2px 8px rgb(0 0 0 / .08);
  transform: translate(-50%, -140%); opacity: 0; }
.live-drop.in { animation: ld-in .7s var(--pop) forwards; }
.live-drop.out { animation: ld-out .38s ease-in forwards; }
@keyframes ld-in { 0% { transform: translate(-50%, -140%) scale(.96); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes ld-out { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -140%); opacity: 0; } }
.ld-av { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--b-lilac, #CDBBF5); color: #141413; font-weight: 800; font-size: 18px; }
/* A soft ring that breathes out from the avatar, twice. */
.ld-av::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--b-lilac, #CDBBF5); opacity: 0; }
.live-drop.in .ld-av::after { animation: ld-ring 1.6s .45s ease-out 2; }
@keyframes ld-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.ld-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-title { font-size: 15px; line-height: 1.3; }
.ld-title b { font-weight: 800; }
.ld-sub { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.ld-acts { flex: none; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.ld-play { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font: inherit; font-weight: 750; font-size: 14px; }
.ld-later { min-height: 28px; padding: 0 10px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 650; }
/* Thumb-size targets without making them look big. */
.ld-play, .ld-later { position: relative; }
.ld-later::before { content: ""; position: absolute; inset: -8px -4px; }
@media (prefers-reduced-motion: reduce) {
  .live-toast, .live-toast.out { transform: none; transition: opacity .2s; }
  .live-toast.in .lt-icon, .live-drop.in .ld-av::after { animation: none; }
  .live-drop.in { animation: none; transform: translate(-50%, 0); opacity: 1; }
  .live-drop.out { animation: none; opacity: 0; }
}
/* Retro's big score sits close under the quote: keep a gap so a long verdict never touches it. */
html[data-theme="retro"] .verdict-quote { margin-bottom: 12px; }
/* The freeze chip keeps its ice ink: the stat label grey (.stat span) was winning over it. */
.stat .freeze-chip { color: var(--ice-ink); }

/* ---------- OneLiner so far (archive.js) */
.sofar-card { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 10px; padding: 16px; text-align: left; font: inherit;
  color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .16s var(--ease); }
.sofar-card:active { transform: scale(.985); }
.sf-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sf-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.sf-go { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 720; color: var(--accent); white-space: nowrap; }
.sf-line { font-family: var(--display); font-size: 19px; font-weight: 750; line-height: 1.25; letter-spacing: -0.02em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-who { font-size: 13px; color: var(--ink-2); font-weight: 600; }
html[data-theme="retro"] .sofar-card { border: 1.5px solid var(--ink); border-radius: 4px; }

.cal { padding: 12px 12px 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-month { margin: 0; font-weight: 750; font-size: 16px; }
.cal-next svg { transform: rotate(180deg); }
.cal-head .icon-btn:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-2); padding: 4px 0; }
.cal-day { aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.cal-day:not(:disabled) { background: var(--surface-2, var(--surface)); }
.cal-day:not(:disabled):active { transform: scale(.94); }
.cal-day:disabled { color: var(--ink-2); opacity: .45; cursor: default; }
.cal-day.today { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.cal-day.today::after { content: "🔒"; position: absolute; right: 3px; top: 1px; font-size: 9px; }
.cal-day[aria-current="date"] { background: var(--ink); color: var(--on-ink); }
.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arc-day { margin: 18px 0 8px; }
.arc-tabs { margin-bottom: 12px; }
.arc-tabs .tab { padding: 0 12px; font-size: 14px; }
.arc-head { margin-bottom: 6px; }
.arc-prompt { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 750; line-height: 1.25; letter-spacing: -0.02em; }
.arc-list .entry .pos { font-size: 20px; }
.arc-reacts { display: flex; gap: 10px; margin: 6px 0 0; font-size: 13px; color: var(--ink-2); font-weight: 650; }
.arc-list .entry:first-child .line { font-size: 1.08em; }
@media (max-width: 359px) { .arc-tabs .tab { padding: 0 8px; font-size: 13px; } }

/* The rotating best answers: a soft crossfade with a little lift, and dots for where you are. */
.sf-body { display: flex; flex-direction: column; gap: 6px; min-height: 5.6em; transition: opacity .32s ease, transform .32s ease; }
.sf-body.sf-out { opacity: 0; transform: translateY(-6px); }
.sofar-card.sf-empty .sf-body { min-height: 0; }
.sofar-card.sf-empty .sf-meta, .sofar-card.sf-empty .sf-dots { display: none; }
.sf-meta { display: flex; align-items: center; gap: 6px; }
.sf-rank { font-size: 15px; }
.sf-dots { display: flex; gap: 5px; margin-top: 2px; }
.sf-dots i { width: 6px; height: 6px; border-radius: 6px; background: var(--line-strong); transition: width .3s var(--ease), background .3s; }
.sf-dots i.on { width: 16px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .sf-body { transition: none; } }

/* ---------- The big card's stack: yesterday's card waits behind it (archive.js). */
.hero-stack { display: grid; position: relative;
  /* Reach the screen edges (past the page gutter) and cut off there: a card sliding away must never
     widen the page, or phones wobble the whole view sideways. Room on top for the tilt. */
  margin: -10px -20px 0; padding: 10px 20px 0; overflow-x: clip; }
@supports not (overflow-x: clip) { .hero-stack { overflow: hidden; } }
.hero-stack > .hero-card { grid-area: 1 / 1; }
.hero-stack.stacked { padding-bottom: 14px; touch-action: pan-y; }
body { overflow-x: clip; } /* belt and braces: nothing sideways ever scrolls the page */
#screen-hub #hero-stack .behind { transform: translateY(14px) scale(.93); z-index: 1; pointer-events: none;
  /* A shade off its own colour (toward the ink), so the edge reads as a second card. */
  background: color-mix(in srgb, var(--block, var(--surface)) 80%, var(--ink)); box-shadow: none; }
#screen-hub #hero-stack .behind > * { visibility: hidden; } /* only its edge shows */
#screen-hub #hero-stack .behind::before, #screen-hub #hero-stack .behind::after { visibility: hidden; }
#screen-hub #hero-stack .front { z-index: 2; }
/* Once tucked away, only the strip under the front card is drawn: see-through (glass) fronts stay clean. */
#screen-hub #hero-stack .behind.tucked { clip-path: inset(calc(100% - 34px) 0 0 0 round 0 0 var(--r-card) var(--r-card)); }
#screen-hub #hero-stack.dragging .front { transition: none; }
.hero-back { background: color-mix(in srgb, var(--block, var(--surface)) 62%, var(--canvas)); position: relative; overflow: hidden; }
.hero-back::before { content: "YESTERDAY"; position: absolute; right: 20px; bottom: 19px; font-family: var(--mono); font-size: 11px;
  font-weight: 800; letter-spacing: .11em; color: var(--block-ink-2); }
.hero-back::after { content: "SEE ALL  →"; align-self: flex-start; margin-top: auto; padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 760; line-height: 1; }
.hb-prompt { font-family: var(--display); font-size: 20px; font-weight: 750; line-height: 1.15; letter-spacing: -0.03em; color: var(--block-ink-2); text-wrap: balance; }
.hb-body { display: flex; flex-direction: column; gap: 6px; transition: opacity .3s ease, transform .3s ease; }
.hb-body.hb-out { opacity: 0; transform: translateY(-6px); }
.hb-line { font-family: var(--display); font-size: 25px; font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; color: var(--block-ink); text-wrap: balance; }
.hb-who { display: flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 650; color: var(--block-ink-2); }
.hs-dots { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.hs-dots button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 0; background: none;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.hs-dots i { width: 18px; height: 7px; border-radius: 7px; background: var(--line-strong); transform: scaleX(.39); transition: transform .3s var(--ease), background .3s; }
.hs-dots [aria-selected="true"] { color: var(--ink); }
.hs-dots [aria-selected="true"] i { transform: none; background: var(--ink); }
@media (max-width: 370px) { .hb-line { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .hb-body { transition: none; } }
html[data-theme="retro"] .hero-back::after { border-radius: 3px; }

/* The one-time peek: the back card is drawn whole (with its words) while the front slides aside. */
#screen-hub #hero-stack.peeking .behind.tucked { clip-path: none; }
/* In the slice that shows, one clear label (the card's own words would be cut off mid-line). */
.hb-peek { display: none; }
#screen-hub #hero-stack.peeking .behind > .hb-peek {
  visibility: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  position: absolute; right: 0; top: 0; bottom: 0; width: 34%; padding: 0 8px; text-align: center;
  font-family: var(--display); font-size: 15px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #141413; }
.hb-peek b { font-size: 26px; }
.hb-peek i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgb(20 20 19 / .72); }

/* ---------- Folding settings cards (Alerts, Recovery code): one tidy row until tapped. */
details.fold { padding: 0; }
.fold-head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent; }
.fold-head::-webkit-details-marker { display: none; }
.fold-title { flex: 1; min-width: 0; font-weight: 750; font-size: 16px; white-space: nowrap; }
.fold-state { white-space: nowrap; }
.fold-state { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.fold-state.on { color: var(--ink); }
.fold-head::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
details.fold[open] > .fold-head::after { transform: translateY(2px) rotate(225deg); }
.fold-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-card); }
.fold-body { padding: 0 18px 18px; animation: pf-in .25s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .fold-body { animation: none; } .fold-head::after { transition: none; } }
@media (max-width: 389px) { #pf-account .fold-state { display: none; } }

/* ---------- The streak chip is a button; tapping it grows this pill out of it. */
button.streak { border: 0; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 44px; }
button.streak:active { transform: scale(.94); }
button.streak:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.top { position: relative; }
.streak-pill { position: absolute; z-index: 40; display: flex; align-items: flex-start; gap: 10px;
  width: min(408px, calc(100vw - 32px)); padding: 11px 16px 12px 12px; border-radius: 22px;
  background: var(--ink); color: var(--on-ink); box-shadow: 0 14px 34px rgb(0 0 0 / .22); cursor: pointer;
  transform-origin: top right; }
.streak-pill.open { animation: spill-grow .42s var(--pop) both; }
.streak-pill.closing { animation: spill-shrink .26s ease-in both; }
/* Grow from the chip's own box: the clip starts as the chip (top right) and opens to the full pill. */
@keyframes spill-grow {
  from { clip-path: inset(0 var(--chip-r) calc(100% - var(--chip-h)) var(--chip-l) round 999px); }
  to { clip-path: inset(0 0 0 0 round 22px); }
}
@keyframes spill-shrink {
  from { clip-path: inset(0 0 0 0 round 22px); opacity: 1; }
  to { clip-path: inset(0 var(--chip-r) calc(100% - var(--chip-h)) var(--chip-l) round 999px); opacity: .4; }
}
.spill-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 17px;
  background: rgb(255 255 255 / .12); }
.spill-text { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.spill-text b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.spill-text span { font-size: 13.5px; line-height: 1.35; opacity: .86; }
.streak-pill.open .spill-text { animation: pf-in .3s .12s var(--ease) both; }
.streak-pill[data-kind="frozen"] { color: var(--ice-ink);
  background: linear-gradient(135deg, var(--ice-1), var(--ice-2) 55%, var(--ice-1));
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .9), 0 0 0 1px var(--ice-3), 0 14px 34px rgb(11 58 99 / .22); }
.streak-pill[data-kind="frozen"] .spill-ico { background: rgb(255 255 255 / .7); }
.streak-pill[data-kind="frozen"] .spill-text span { opacity: 1; color: var(--ice-ink-2); }
html[data-theme="retro"] .streak-pill { border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .streak-pill.open, .streak-pill.closing, .streak-pill.open .spill-text { animation: none; } }

/* All games done: the card behind the Full House card is "OneLiner so far". */
.hero-back[data-mode="sofar"]::before { content: "SO FAR"; }
.hero-back[data-mode="sofar"]::after { content: "OPEN CALENDAR  →"; }
#sofar-card.in-stack { display: none; } /* it's in the stack already */
[data-tint="sofar"] { --block: var(--b-lilac); }

/* Tantrums read like moods (short, snug bubble). The rare note can be tapped: its email opens a new mail. */
.think.tantrum .think-cloud { width: max-content; max-width: 100%; }
.think.note { pointer-events: auto; }
.think-mail { display: inline-block; margin-top: 4px; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px;
  word-break: break-all; padding: 6px 0; }

/* No double-tap zoom anywhere (taps also feel instant). */
html { touch-action: manipulation; }
/* iPhones zoom into any text box smaller than 16px when you tap it. Keep them all at 16px or more. */
.inline-form input { font-size: 16px; }
#rr-code { font-size: 16px; } /* the restore-code box: 16px so iPhones don't zoom on tap */

/* ======================================================================
   Plot Twist (story.js, story3d.js). Always a dark world, whatever the theme, so the paper glows.
   ====================================================================== */
.story-row .story-ico { grid-column: 1; grid-row: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-tile);
  background: #1B1830; color: #F3E9C6; }
.story-row.done .story-ico { opacity: .85; }
.story-new { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: var(--r-pill); background: #1B1830; color: #F3E9C6;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.story-row.done .story-new { display: none; }

body.story-mode { background: #0d0c14; }
body.story-mode .top, body.story-mode .navpill { display: none !important; }
#screen-story { --st-ink: #F5F2EA; --st-ink-2: rgba(245, 242, 234, .68); --st-glass: rgba(18, 16, 30, .78); color: var(--st-ink);
  position: relative; min-height: calc(100dvh - 40px); gap: 0; }
.st-stage { position: fixed; inset: 0; z-index: 0; background: #0d0c14; }
.st-stage canvas { width: 100% !important; height: 100% !important; display: block; touch-action: pan-y; }
.st-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding-top: env(safe-area-inset-top); }
.st-top::before { content: ""; position: absolute; inset: -80px -16px -26px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, #0d0816 72%, rgba(13, 8, 22, 0)); }
.st-top .icon-btn { color: var(--st-ink); background: rgba(255, 255, 255, .08); border-radius: 50%; }
.st-head { flex: 1; min-width: 0; }
.st-kicker { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-ink-2); }
.st-title { margin: 2px 0 0; font-size: 18px; font-weight: 780; letter-spacing: -0.02em; color: var(--st-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pips { display: flex; gap: 6px; }
.st-pips i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px;
  border: 1.5px solid rgba(255, 255, 255, .22); color: var(--st-ink); transition: background .3s, border-color .3s, transform .3s; }
.st-pips i.now { border-color: #F3E9C6; transform: scale(1.08); box-shadow: 0 0 0 4px rgba(243, 233, 198, .12); }
.st-pips i.done { border-color: transparent; background: rgba(255, 255, 255, .12); }

/* The sheet you write in: frosted, pinned to the bottom, above the paper. */
.st-sheet { position: fixed; left: 50%; bottom: 0; z-index: 3; transform: translateX(-50%); width: min(440px, 100vw); box-sizing: border-box;
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
  background: var(--st-glass); border: 1px solid rgba(255, 255, 255, .1); border-bottom: 0;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .35); transition: transform .45s var(--ease); }
.st-sheet[data-phase="off"] { transform: translate(-50%, 110%); }
.st-sheet[data-phase="off"]:has(.st-off-note:not([hidden])) { transform: translateX(-50%); }
.st-label { margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--st-ink-2); }
.st-field { position: relative; }
#st-input { width: 100%; box-sizing: border-box; padding: 15px 64px 15px 16px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06); color: var(--st-ink); font: inherit; font-size: 17px; font-weight: 600; }
#st-input::placeholder { color: rgba(245, 242, 234, .5); }
#st-input:focus { outline: none; border-color: #F3E9C6; box-shadow: 0 0 0 4px rgba(243, 233, 198, .14); }
.st-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 12px; color: var(--st-ink-2); }
.st-error { min-height: 1.2em; margin: 6px 2px; font-size: 13px; color: #FFB4A8; }
.st-error:empty { min-height: 0; margin: 4px 0; }
.st-go { width: 100%; background: #F3E9C6 !important; color: #141413 !important; border: 0; }
.st-scorehead { display: flex; justify-content: space-between; align-items: baseline; }
.st-chap-total { font-family: var(--mono); font-size: 15px; color: var(--st-ink); }
.st-bars { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.st-bar { display: grid; grid-template-columns: 76px 1fr 34px; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 650; }
.st-bar b { text-align: right; font-family: var(--mono); }
.st-bar-track { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.st-bar-track i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: #F3E9C6; animation: st-grow .8s var(--ease) both; }
@keyframes st-grow { from { width: 0; } }
.st-twist { margin: 0 0 14px; font-size: 14.5px; line-height: 1.4; color: var(--st-ink-2); }
.st-tw { color: var(--st-ink); white-space: nowrap; }
.st-tw.b-c { color: #FFC83D; } .st-tw.b-d { color: #9FB2FF; } .st-tw.b-x { color: #FF7AC4; }
.st-end-top { display: flex; align-items: center; gap: 12px; }
.st-end-emoji { font-size: 40px; line-height: 1; }
.st-end-top .stack-xs { flex: 1; min-width: 0; }
.st-end-label { margin: 0; font-size: clamp(17px, 5.4vw, 20px); white-space: nowrap; font-weight: 800; letter-spacing: -0.02em; }
.st-end-path { margin: 0; font-size: 13px; color: var(--st-ink-2); }
.st-end-total { font-family: var(--mono); font-size: 18px; }
.st-end-crowd { margin: 10px 0 6px; font-size: 13px; color: var(--st-ink-2); }
.st-board { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 24vh; overflow-y: auto; }
.st-row { display: grid; grid-template-columns: 20px 1fr auto 44px; gap: 8px; align-items: center; padding: 6px 2px; font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.st-row-n { font-family: var(--mono); color: var(--st-ink-2); }
.st-row-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.st-row b { text-align: right; font-family: var(--mono); }
.st-end-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.st-end-actions .btn { min-height: 48px; font-size: 14.5px; min-width: 0; padding-inline: 10px; white-space: normal; line-height: 1.15; }
.st-end-actions .secondary { background: rgba(255, 255, 255, .08) !important; color: var(--st-ink) !important; border: 1px solid rgba(255, 255, 255, .16) !important; }
#st-share { background: #F3E9C6 !important; color: #141413 !important; border: 0; }
.st-end-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--st-ink-2); }
.st-off-note { margin: 0; text-align: center; color: var(--st-ink-2); }

/* The flat version (no WebGL, or reduced motion): paper cards that fold down. */
.st-flat { position: absolute; inset: 120px 20px 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; perspective: 900px; }
.st-card { padding: 16px 18px; border-radius: 6px; background: #FBFAF5; color: #141413; box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  transform-origin: top center; transform: rotateX(-88deg); opacity: 0; transition: transform .7s var(--pop), opacity .3s; }
.st-card.in { transform: none; opacity: 1; }
.st-card-k { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 20, 19, .55); }
.st-card-t { margin: 0; font-size: 19px; font-weight: 750; line-height: 1.3; letter-spacing: -0.015em; }
.st-hi { background: rgba(255, 214, 102, .55); color: inherit; padding: 0 2px; }
.st-hi.b-c { background: rgba(255, 200, 61, .55); } .st-hi.b-d { background: rgba(140, 165, 255, .5); } .st-hi.b-x { background: rgba(255, 62, 165, .42); }
.st-gap { color: rgba(20, 20, 19, .45); }
.st-card-end { background: #F3E9C6; }
.st-flatmap { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.st-flatmap-row .st-card-k { color: var(--st-ink-2); }
.st-alt { margin: 4px 0; font-size: 14px; color: var(--st-ink-2); }
.st-alt.taken { color: var(--st-ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .st-card { transition: opacity .2s; transform: none; } .st-sheet { transition: none; } .st-bar-track i { animation: none; } }

/* ---------------------------------------------------------------- the small footer on Home */
.site-foot { margin: 36px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2, var(--muted)); text-align: center; }
.site-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.site-foot a { color: inherit; display: inline-block; padding: 12px 2px; min-height: 44px; text-underline-offset: 3px; }
.site-foot p a { padding: 0; min-height: 0; line-height: 44px; }
.site-foot p { margin: 4px 0 0; }
.ob-more { margin-top: 28px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card, 20px); text-align: left; }
.ob-more h3 { margin: 0 0 6px; font-size: 17px; }
.ob-more p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ob-more-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-top: 1px solid var(--line);
  color: var(--ink); font-weight: 650; text-decoration: none; }
html[data-theme="retro"] .ob-more { border-radius: 4px; border: 1.5px solid var(--ink); }
.pf-restore { padding: 0; min-height: 44px; text-align: left; }