/* ─────────────────────────────────────────────────────────────
   Iconic! — design tokens
   Dials: variance 6 · motion 7 · density 4
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* paper / ink (light) */
  --paper: #f2ede2;
  --paper-2: #e9e2d3;
  --plate: #e2dac8;
  --ink: #1d1a14;
  --ink-2: #4b453a;
  --ink-3: #8a8272;
  --line: #1d1a1426;
  --line-strong: #1d1a1466;

  --accent: #d4441c;      /* vermilion */
  --accent-ink: #fff8f0;
  --hit: #2f7a4b;         /* moss */
  --hit-soft: #2f7a4b1f;
  --miss: #b23a2a;
  --miss-soft: #b23a2a14;

  /* calendar day states */
  --day-won: #7fc999;
  --day-lost: #c9a03e;      /* musty mustard */
  --day-missed: #b4ac9c;
  --day-replayed: #d9d2c4;  /* a touch less grey */
  --day-ink: #1d1a14;

  /* icon difficulty (deep enough to read on cream) */
  --easy: #2f7a4b;
  --medium: #a37508;
  --hard: #b23a2a;

  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* 4px step scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r: 3px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14120e;
    --paper-2: #1c1914;
    --plate: #221f19;
    --ink: #ede6d6;
    --ink-2: #bdb5a4;
    --ink-3: #7b7466;
    --line: #ede6d624;
    --line-strong: #ede6d659;
    --accent: #ff6b3d;
    --accent-ink: #1a0d06;
    --hit: #6fcf8e;
    --hit-soft: #6fcf8e1f;
    --miss: #ff8a73;
    --miss-soft: #ff8a7314;
    --day-won: #6fcf8e;
    --day-lost: #c39a3f;
    --day-missed: #3b3730;
    --day-replayed: #6a645a;
    --day-ink: #14120e;
    --easy: #6fcf8e;
    --medium: #e8bd4a;
    --hard: #ff8a73;
  }
}
:root[data-theme="dark"] {
  --paper: #14120e; --paper-2: #1c1914; --plate: #221f19;
  --ink: #ede6d6; --ink-2: #bdb5a4; --ink-3: #7b7466;
  --line: #ede6d624; --line-strong: #ede6d659;
  --accent: #ff6b3d; --accent-ink: #1a0d06;
  --hit: #6fcf8e; --hit-soft: #6fcf8e1f; --miss: #ff8a73; --miss-soft: #ff8a7314;
  --day-won: #6fcf8e; --day-lost: #c39a3f; --day-missed: #3b3730; --day-replayed: #6a645a; --day-ink: #14120e;
  --easy: #6fcf8e; --medium: #e8bd4a; --hard: #ff8a73;
}
/* A theme picked with the logo also sets native bits (scrollbars, inputs). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ── base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Reserve the scrollbar's space so the layout never shifts sideways when the
   page becomes scrollable (e.g. while the guess suggestions are open). */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  /* faint paper grain via layered gradients, no image */
  background-image:
    radial-gradient(circle at 18% 12%, color-mix(in oklab, var(--accent) 5%, transparent), transparent 40%),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklab, var(--ink) 3%, transparent) 23px 24px);
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 1; letter-spacing: 0.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
mark { background: none; color: var(--accent); font-weight: 600; }

.shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s6);
  padding-left: max(var(--s4), env(safe-area-inset-left));
  padding-right: max(var(--s4), env(safe-area-inset-right));
}

.section-label {
  display: block;
  margin: 0 0 var(--s2);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* ── masthead ─────────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.masthead::after { /* double rule, offset — newspaper masthead */
  content: '';
  position: absolute; left: 0; right: 22%; bottom: -5px;
  border-bottom: 1px solid var(--line-strong);
}
.wordmark {
  margin: 0;
  font-size: clamp(44px, 9vw, 76px);
  line-height: 0.88;
  font-weight: 800;
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  letter-spacing: -0.035em;
}
.wordmark__bang {
  display: inline-block;
  color: var(--accent);
  transform: rotate(8deg) translateY(-2px);
  margin-left: 2px;
  transition: transform var(--fast) var(--ease-spring);
}
.wordmark:hover .wordmark__bang { transform: rotate(-4deg) translateY(-6px); }
/* The logo is the light/dark switch: a bare button that looks like the title. */
.wordmark__btn {
  padding: 0; margin: 0;
  border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wordmark__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* One full turn when the theme flips (rotating about its centre). */
.wordmark__bang.is-flipping { animation: bang-spin 560ms var(--ease-io); }
@keyframes bang-spin {
  0% { transform: rotate(8deg) translateY(-2px); }
  50% { transform: rotate(188deg) translateY(-2px) scale(1.15); }
  100% { transform: rotate(368deg) translateY(-2px); }
}
/* Colours ease across when the theme flips. */
body, .masthead, .stage__frame, .stage__plate, .slot, .reveal, .free-banner, .archive-banner {
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.masthead__meta {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s3) 0 0 var(--s1);
  font-size: 12px; color: var(--ink-2);
}
.masthead__rule { width: 28px; height: 1px; background: var(--line-strong); }
.masthead__tools { display: flex; gap: var(--s2); }

.tool {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 36px; padding: 0 var(--s3);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--fast) var(--ease-out), border-color var(--fast), transform var(--fast) var(--ease-out);
}
.tool:hover { background: var(--paper-2); border-color: var(--ink); transform: translateY(-1px); }
.tool:active { transform: translateY(0); }
.tool__glyph { font-weight: 700; font-size: 14px; }
.tool__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ── past days button (masthead centre) ───────────────────── */
.masthead__actions { display: contents; }
.masthead__center { display: flex; justify-content: center; gap: var(--s2); flex: 1; padding-bottom: 0; }
.mode-btn { color: inherit; text-decoration: none; }
.mode-btn .pastdays-btn__dot { transform-origin: 10px 10px; }
.pastdays-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 36px; padding: 0 var(--s4) 0 var(--s3);
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform var(--fast) var(--ease-out);
}
.pastdays-btn:hover { border-style: solid; border-color: var(--ink); background: var(--paper-2); transform: translateY(-1px); }
.pastdays-btn:active { transform: none; }
.pastdays-btn__icon { width: 18px; height: 18px; flex: none; }
.pastdays-btn__dot { fill: var(--accent); transition: transform var(--fast) var(--ease-spring); transform-origin: 7px 12px; }
.pastdays-btn:hover .pastdays-btn__dot { transform: scale(1.25); }
.pastdays-btn__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ── archive banner ───────────────────────────────────────── */
.archive-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--day-lost);
  border-radius: var(--r);
  animation: drop 260ms var(--ease-out);
}
.archive-banner__tag {
  padding: 2px var(--s2);
  background: var(--day-lost); color: var(--day-ink);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
}
.archive-banner__text { flex: 1 1 260px; margin: 0; font-size: 15px; color: var(--ink-2); }
/* free play: same banner, accent edge, live run / best scoreboard */
.free-banner { border-left-color: var(--accent); }
.free-banner .archive-banner__tag { background: var(--accent); color: var(--accent-ink); }
.free-score { display: flex; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r); }
.free-score > div { display: grid; justify-items: center; padding: var(--s1) var(--s4); }
.free-score > div + div { border-left: 1px solid var(--line-strong); }
.free-score dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
.free-score__v { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.free-score__v.is-ticking { animation: tick 360ms var(--ease-out); }
.free-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* day stepper: Prev | Next | Today, joined by hairlines */
.stepper { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.stepper__link {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 var(--s3);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  color: var(--ink); text-decoration: none;
  border-left: 1px solid var(--line-strong);
  transition: background var(--fast) var(--ease-out), color var(--fast);
}
.stepper__link:first-child { border-left: 0; }
.stepper__link:hover { background: var(--ink); color: var(--paper); }
.stepper__link[data-dir="next"] { font-weight: 700; }
.stepper__link[data-dir="today"] { color: var(--accent); }
.stepper__link[data-dir="today"]:hover { background: var(--accent); color: var(--accent-ink); }
.stepper__link[data-disabled] { color: var(--ink-3); opacity: 0.5; }
.stepper__link[data-disabled]:empty { display: none; }
.stepper__link:focus-visible { outline-offset: -3px; }

.stepper-cta { text-decoration: none; color: var(--ink); }
.stepper-cta .btn__hint:empty { display: none; }

/* ── calendar ─────────────────────────────────────────────── */
.sheet[data-variant="wide"] { width: min(500px, calc(100vw - 32px)); }
.cal { display: grid; gap: var(--s3); }
.cal__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); }
.cal__head .tool { width: 36px; justify-content: center; padding: 0; }
.cal__head .tool:disabled { opacity: 0.3; cursor: default; transform: none; background: none; border-color: var(--line); }
.cal__month { margin: 0; text-align: center; font-size: 22px; font-weight: 600; font-style: italic; font-variation-settings: 'SOFT' 100, 'opsz' 72; }
.cal__weekdays, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1); }
.cal__weekdays span { text-align: center; font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; padding: var(--s1) 0; }

.day {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  background: transparent;
  color: var(--ink-3);
}
.day[data-state="blank"] { visibility: hidden; }
.day[data-state="out"], .day[data-state="future"] { color: var(--ink-3); opacity: 0.45; }
.day[data-state="future"] { border-color: var(--line); border-style: dashed; }
.day[data-state="today"] { color: var(--ink); border: 1px solid var(--accent); font-weight: 700; }
.day[data-state="today"]::after {
  content: 'TODAY'; position: absolute; bottom: 3px;
  font-size: 7px; letter-spacing: 0.1em; color: var(--accent);
}

button.day {
  cursor: pointer;
  color: var(--day-ink);
  transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), filter var(--fast);
}
button.day:hover { transform: translateY(-2px); box-shadow: 0 2px 0 var(--ink); }
button.day:active { transform: none; box-shadow: none; }
button.day[data-state="won"] { background: var(--day-won); }
button.day[data-state="lost"] { background: var(--day-lost); }
button.day[data-state="missed"] { background: var(--day-missed); color: var(--ink); }
button.day[data-state="replayed"] { background: var(--day-replayed); }
button.day[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
button.day[data-current="true"]::before {
  content: ''; position: absolute; top: 4px; left: 50%; translate: -50% 0;
  width: 4px; height: 4px; border-radius: 50%; background: var(--day-ink);
}
/* non-colour cue in the corner */
.day__mark { position: absolute; right: 4px; bottom: 2px; font-size: 9px; line-height: 1; opacity: 0.7; }
button.day[data-state="won"] .day__mark::after { content: '\2713'; }
button.day[data-state="lost"] .day__mark::after { content: '\2715'; }
button.day[data-state="replayed"] .day__mark::after { content: '\21BA'; }

.cal__detail {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
  min-height: 64px;
  margin-top: var(--s2);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--paper-2);
}
.cal__empty { margin: 0; font-size: 15px; font-style: italic; color: var(--ink-2); }
.cal__pick { display: grid; gap: 2px; }
.cal__pick-date { margin: 0; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); }
.cal__pick-state { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: 17px; font-weight: 600; }
.cal__detail .btn { height: 40px; padding: 0 var(--s4); font-size: 15px; }

/* ── tabs (Past days: Calendar | Month stats) ─────────────── */
.tabs { display: grid; gap: var(--s3); }
.tabs__list {
  position: relative;
  display: grid; grid-template-columns: repeat(var(--tab-count, 2), 1fr);
  border-bottom: 1px solid var(--line-strong);
}
.tabs__tab {
  height: 38px;
  background: none; border: 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--fast) var(--ease-out), background var(--fast);
}
.tabs__tab:hover { color: var(--ink); background: var(--paper-2); }
.tabs__tab[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.tabs__tab:focus-visible { outline-offset: -3px; }
.tabs__ink {
  position: absolute; left: 0; bottom: -1px;
  width: calc(100% / var(--tab-count, 2)); height: 2px;
  background: var(--accent);
  transform: translateX(var(--ink-x, 0));
  transition: transform 280ms var(--ease-out);
}
.cal__panel { display: grid; gap: var(--s3); }
.cal__panel:focus { outline: none; }
.cal__panel.is-entering { animation: panel-in 240ms var(--ease-out); }

/* ── month stats ──────────────────────────────────────────── */
.mstats { display: grid; gap: var(--s4); padding-top: var(--s1); }
.mstats__hero { display: grid; grid-template-columns: 1.25fr 1fr; border: 1px solid var(--line-strong); border-radius: var(--r); }
.mstats__fig { display: grid; gap: var(--s1); padding: var(--s4) var(--s5); }
.mstats__fig + .mstats__fig { border-left: 1px solid var(--line-strong); }
.mstats__num {
  font-size: 56px; line-height: 0.95; font-weight: 700;
  font-variation-settings: 'SOFT' 50, 'opsz' 144;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.mstats__fig[data-variant="unsolved"] .mstats__num { font-size: 40px; color: var(--ink-2); padding-top: 14px; }
.mstats__unit { font-size: 0.45em; margin-left: 2px; color: var(--ink-3); letter-spacing: 0; }
.mstats__fig[data-variant="solved"] .mstats__num { color: var(--hit); }
.mstats__figlabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }

.mstats__bar {
  display: flex; height: 14px; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--paper-2);
}
.mstats__seg { flex: 0 0 var(--w); animation: seg-grow 620ms var(--ease-out) both; }
.mstats__seg + .mstats__seg { box-shadow: inset 1px 0 0 var(--paper); }
.mstats__seg:nth-child(2) { animation-delay: 60ms; }
.mstats__seg:nth-child(3) { animation-delay: 120ms; }
.mstats__seg:nth-child(4) { animation-delay: 180ms; }

[data-key="onDay"].mstats__seg, [data-key="onDay"].mstats__swatch { background: var(--day-won); }
[data-key="later"].mstats__seg, [data-key="later"].mstats__swatch {
  background: repeating-linear-gradient(135deg, var(--day-won) 0 3px, color-mix(in oklab, var(--day-won) 45%, var(--paper)) 3px 6px);
}
[data-key="failed"].mstats__seg, [data-key="failed"].mstats__swatch { background: var(--day-lost); }
[data-key="none"].mstats__seg, [data-key="none"].mstats__swatch { background: var(--day-missed); }

.mstats__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.mstats__row {
  display: grid; grid-template-columns: 14px 1fr 3ch 5ch; align-items: center; gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.mstats__row[data-group="solved"] + .mstats__row[data-group="unsolved"] { border-top: 1px solid var(--line-strong); }
.mstats__swatch { width: 12px; height: 12px; border-radius: 2px; }
.mstats__count { text-align: right; font-size: 13px; font-weight: 700; }
.mstats__pct { text-align: right; font-size: 12px; color: var(--ink-3); }
.mstats__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin: 0; font-size: 11px; color: var(--ink-3); }

@media (max-width: 420px) {
  .mstats__fig { padding: var(--s3) var(--s4); }
  .mstats__num { font-size: 44px; }
  .mstats__fig[data-variant="unsolved"] .mstats__num { font-size: 32px; padding-top: 10px; }
}

.cal__legend { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--s2) var(--s5); margin: var(--s1) 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--ink-2); }
.cal__legend li { display: flex; align-items: center; gap: var(--s2); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: none; }
.swatch[data-state="won"] { background: var(--day-won); }
.swatch[data-state="lost"] { background: var(--day-lost); }
.swatch[data-state="missed"] { background: var(--day-missed); }
.swatch[data-state="replayed"] { background: var(--day-replayed); }

/* ── board layout: asymmetric 7/5 on wide screens ─────────── */
.board {
  display: grid;
  gap: var(--s6);
  margin-top: var(--s6);
}
@media (min-width: 860px) {
  .board { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
  .side { padding-top: var(--s2); }
}
.side { display: grid; gap: var(--s5); }

/* ── stage ────────────────────────────────────────────────── */
.stage { display: grid; gap: var(--s3); justify-items: center; }
.stage__frame {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  padding: var(--s6);
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
}
@media (max-width: 420px) { .stage__frame { padding: var(--s5); } }
.stage__corner { position: absolute; width: 14px; height: 14px; border: 0 solid var(--accent); }
.stage__corner--tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.stage__corner--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.stage__plate {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 22%;
  /* nothing here is draggable or selectable, so the answer can't be lifted out */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.stage__canvas, .stage__full {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* Hard pixel blocks only while guessing; the revealed icon is scaled smoothly
   (nearest-neighbour scaling is what made its edges jagged). */
.stage__canvas { image-rendering: pixelated; }
.stage__full { image-rendering: auto; }
/* hairline keeps near-black / near-paper tiles from melting into the frame */
.stage__canvas, .stage__full { border-radius: 22%; outline: 1px solid var(--line); outline-offset: -1px; }
/* Square app tiles get a firmer edge so white tiles (light theme) and black
   tiles (dark theme) don't melt into the plate. Free-form logos keep the faint one. */
.stage[data-shape="tile"] :is(.stage__canvas, .stage__full) { outline-color: var(--line-strong); }
.stage__full { opacity: 0; filter: drop-shadow(0 1px 0 var(--line)); }
.stage[data-variant="loading"] .stage__canvas,
.stage[data-variant="error"] .stage__canvas { opacity: 0; }
.stage[data-variant="loading"] .stage__plate { background: var(--plate); animation: pulse 1.4s var(--ease-io) infinite; }
.stage[data-variant="won"] .stage__canvas,
.stage[data-variant="lost"] .stage__canvas { opacity: 0; }
.stage[data-variant="won"] .stage__full,
.stage[data-variant="lost"] .stage__full { opacity: 1; }
.stage[data-variant="won"] .stage__frame { border-color: var(--hit); }
.stage[data-variant="won"] .stage__corner { border-color: var(--hit); }

/* after a rescan finishes: a small overshoot "lock-in" */
.stage__plate.is-settling { animation: settle 320ms var(--ease-spring); }
.stage__res.is-ticking { animation: tick 360ms var(--ease-out); }
.stage[data-scanning] .meter__tick[data-state="now"] { animation: blink 160ms steps(2) infinite; }
.stage[data-scanning] .stage__corner { border-color: var(--accent); }
.stage__plate.is-revealing .stage__full { animation: reveal 720ms var(--ease-out) both; }

/* Under the icon: difficulty (left) · RES, centred under the icon · meter (right). */
.stage__readout {
  /* Equal side columns keep RES exactly centred under the icon. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3);
  width: min(100%, 420px);
  font-size: 12px;
}
.stage__resgroup { display: inline-flex; align-items: baseline; gap: var(--s2); justify-self: center; }
.stage__label { color: var(--ink-3); letter-spacing: 0.14em; }
.stage__res { display: inline-block; min-width: 7ch; font-weight: 700; font-variant-numeric: tabular-nums; }
.meter { display: flex; gap: var(--s1); margin: 0; padding: 0; list-style: none; justify-self: end; }

.difficulty {
  --diff: var(--ink-3);
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--s2) 2px 6px;
  border: 1px solid var(--diff);
  border-radius: 999px;
  background: color-mix(in oklab, var(--diff) 12%, transparent);
  color: var(--diff);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  white-space: nowrap;
}
.difficulty.is-new { animation: drop 260ms var(--ease-out); }
.difficulty::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.difficulty[data-level="easy"] { --diff: var(--easy); }
.difficulty[data-level="medium"] { --diff: var(--medium); }
.difficulty[data-level="hard"] { --diff: var(--hard); }
.difficulty[hidden] { display: inline-flex !important; visibility: hidden; } /* keep the grid steady while loading */
.meter__tick {
  width: 22px; height: 6px;
  border: 1px solid var(--line-strong);
  transition: background var(--fast) var(--ease-out), border-color var(--fast);
}
.meter__tick[data-state="done"] { background: var(--ink); border-color: var(--ink); }
.meter__tick[data-state="now"] { background: var(--accent); border-color: var(--accent); }
.stage__status { margin: 0; font-size: 12px; color: var(--miss); text-align: center; max-width: 36ch; }

/* ── guess rail ───────────────────────────────────────────── */
.rail { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.slot {
  display: grid;
  grid-template-columns: 3.4em 1fr auto;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  transition: border-color var(--fast), background var(--fast);
}
.slot__num {
  align-self: stretch; display: grid; place-items: center;
  font-size: 11px; color: var(--ink-3);
  border-right: 1px solid var(--line);
}
.slot__text { padding: 0 var(--s3); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot__mark { padding: 0 var(--s4); font-weight: 700; }

.slot[data-variant="empty"] { border-style: dashed; }
.slot[data-variant="current"] { border-color: var(--ink); }
.slot[data-variant="current"] .slot__num { color: var(--accent); border-right-color: var(--ink); }
.slot[data-variant="current"] .slot__mark { color: var(--accent); animation: blink 1.1s steps(2) infinite; }
.slot[data-variant="miss"] { background: var(--miss-soft); border-color: color-mix(in oklab, var(--miss) 40%, transparent); }
.slot[data-variant="miss"] .slot__text { text-decoration: line-through; text-decoration-color: var(--miss); text-decoration-thickness: 1.5px; color: var(--ink-2); }
.slot[data-variant="miss"] .slot__mark { color: var(--miss); }
.slot[data-variant="skip"] .slot__text { font-style: italic; color: var(--ink-3); }
.slot[data-variant="skip"] .slot__mark { color: var(--ink-3); }
.slot[data-variant="hit"] { background: var(--hit-soft); border-color: var(--hit); }
.slot[data-variant="hit"] .slot__text { font-weight: 600; }
.slot[data-variant="hit"] .slot__mark { color: var(--hit); }
.slot[data-variant="answer"] { margin-top: var(--s2); border-color: var(--ink); background: var(--ink); color: var(--paper); }
.slot[data-variant="answer"] .slot__num { color: var(--paper); border-right-color: color-mix(in oklab, var(--paper) 30%, transparent); }
.slot[data-variant="answer"] .slot__text { font-style: italic; font-weight: 600; }
.slot.is-fresh { animation: slot-in 360ms var(--ease-out); }

/* ── guess form ───────────────────────────────────────────── */
.guess-form { display: grid; gap: var(--s3); }
.guess-form .section-label { margin-bottom: 0; }
.field {
  position: relative;
  display: flex; align-items: center;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  transition: box-shadow var(--fast) var(--ease-out);
}
.field:focus-within { box-shadow: 3px 3px 0 var(--accent); }
.field__prompt { padding-left: var(--s3); color: var(--accent); font-weight: 700; }
.field__input {
  flex: 1; min-width: 0;
  height: 48px; padding: 0 var(--s3) 0 var(--s2);
  border: 0; background: transparent;
  font-size: 18px;
}
.field__input:focus { outline: none; }
.field__input::placeholder { color: var(--ink-3); font-style: italic; }
.field.is-shaking { animation: shake 320ms var(--ease-io); }

.suggest {
  position: absolute; z-index: 10;
  left: -1px; right: -1px; top: calc(100% + var(--s1));
  margin: 0; padding: var(--s1);
  list-style: none;
  /* GuessForm sets max-height to the room left on screen; the list scrolls inside. */
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  animation: drop 160ms var(--ease-out);
}
/* Not enough room below the field: open upwards instead. */
.suggest[data-side="above"] { top: auto; bottom: calc(100% + var(--s1)); }
.suggest__opt {
  padding: var(--s2) var(--s3);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--fast);
}
.suggest__opt:hover { background: var(--paper-2); }
.suggest__opt[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.suggest__opt[aria-selected="true"] mark { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

.guess-form__actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }

/* ── button: single `data-variant` prop ───────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 46px; padding: 0 var(--s5);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  font-size: 17px; font-weight: 600;
  cursor: pointer;
  transition: transform var(--fast) var(--ease-out), background var(--fast), box-shadow var(--fast) var(--ease-out);
}
.btn[data-variant="primary"] { background: var(--ink); color: var(--paper); }
.btn[data-variant="primary"]:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--accent); }
.btn[data-variant="ghost"] { background: transparent; }
.btn[data-variant="ghost"]:hover { background: var(--paper-2); transform: translateY(-1px); }
.btn:active { transform: translate(0, 0) !important; box-shadow: none !important; }
.btn__kbd { font-size: 12px; opacity: 0.6; }
.btn__hint { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 400; }

/* ── reveal ───────────────────────────────────────────────── */
.reveal {
  position: relative;
  padding: var(--s5) var(--s5) var(--s5) var(--s6);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--hit);
  background: var(--paper);
  animation: rise 520ms var(--ease-out) both;
}
.reveal[data-variant="lost"] { border-left-color: var(--miss); }
.reveal__kicker { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--hit); }
.reveal[data-variant="lost"] .reveal__kicker { color: var(--miss); }
.reveal__name {
  margin: var(--s2) 0 0;
  font-size: clamp(36px, 6vw, 52px);
  line-height: 1;
  font-weight: 700;
  font-variation-settings: 'SOFT' 50, 'opsz' 144;
  letter-spacing: -0.02em;
}
.reveal__kind {
  display: inline-block;
  margin: var(--s3) 0 0;
  padding: 2px var(--s2);
  border: 1px solid var(--line-strong);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2);
}
.reveal__desc { margin: var(--s4) 0 0; max-width: 46ch; color: var(--ink-2); font-size: 18px; line-height: 1.55; }
.reveal__grid { display: flex; gap: var(--s1); margin-top: var(--s5); }
.pip { width: 26px; height: 26px; border: 1px solid var(--line-strong); }
.pip[data-state="hit"] { background: var(--hit); border-color: var(--hit); }
.pip[data-state="miss"] { background: var(--miss); border-color: var(--miss); }
.pip[data-state="skip"] { background: var(--ink); border-color: var(--ink); }
.reveal__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s5); }
.reveal__next { display: grid; margin: 0; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; text-align: right; }
.reveal__clock { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* ── dialogs ──────────────────────────────────────────────── */
.sheet {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
}
/* Stay on a compositor layer for the whole time the sheet is open. Without
   this the layer is dropped when sheet-in ends and the (fractionally centred)
   dialog snaps to the pixel grid: a visible 1px jump of everything inside. */
.sheet[open] { animation: sheet-in 260ms var(--ease-out); will-change: transform; }
.sheet::backdrop { background: color-mix(in oklab, var(--paper) 55%, transparent); backdrop-filter: blur(3px); }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-strong);
}
.sheet__title { margin: 0; font-size: 26px; font-style: italic; font-weight: 700; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.sheet__body { padding: var(--s5); display: grid; gap: var(--s4); }
.sheet__body p { margin: 0; }
.help-steps { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.help-steps li { display: grid; grid-template-columns: 2.4em 1fr; gap: var(--s2); }
.help-steps .mono { color: var(--accent); font-size: 12px; padding-top: 4px; }
.help-ranks { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line-strong); font-size: 12px; }
.help-ranks span { display: grid; gap: 2px; padding: var(--s2); text-align: center; border-left: 1px solid var(--line); }
.help-ranks span:first-child { border-left: 0; }
.help-ranks b { color: var(--ink-3); font-weight: 500; font-size: 10px; }
.help-foot { font-size: 11px; color: var(--ink-3); }
.help-legal { font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: var(--s3); }

.stats { display: grid; gap: var(--s6); }
.stats__section { display: grid; gap: var(--s4); }
.stats__section + .stats__section { padding-top: var(--s5); border-top: 1px solid var(--line); }
.stats__section .section-label { margin: 0; }
.stats__title { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); }
.stats__row { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border: 1px solid var(--line-strong); }
.stat { display: flex; flex-direction: column-reverse; align-items: center; padding: var(--s3) var(--s1); border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat__v { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.dist { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.dist__row { display: grid; grid-template-columns: 1.6em 1fr; align-items: center; }
.dist__k { font-size: 12px; color: var(--ink-3); }
.dist__bar {
  display: flex; justify-content: flex-end;
  width: var(--w); min-width: 28px;
  padding: 2px var(--s2);
  background: var(--ink-3); color: var(--paper);
  font-size: 12px;
  animation: grow 625ms var(--ease-out) both; /* 500ms + 25% */
}
.dist__row[data-now="true"] .dist__bar { background: var(--hit); }
.dist__row[data-miss="true"] .dist__bar { background: var(--miss); }
.dist__row[data-miss="true"] .dist__k { color: var(--miss); }

/* ── toast ────────────────────────────────────────────────── */
.toaster { position: fixed; top: var(--s5); left: 50%; translate: -50% 0; display: grid; gap: var(--s2); z-index: 50; pointer-events: none; }
.toast {
  padding: var(--s2) var(--s4);
  background: var(--ink); color: var(--paper);
  border-radius: var(--r);
  font-size: 13px;
  animation: toast-in 220ms var(--ease-spring);
}
.toast.is-leaving { animation: toast-out 200ms var(--ease-io) forwards; }

/* ── colophon ─────────────────────────────────────────────── */
.colophon {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2);
  margin-top: var(--s8); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-3);
}
/* Legal notice: full width under the tagline, readable but quiet. */
.colophon__legal {
  flex-basis: 100%;
  margin: var(--s1) 0 0;
  max-width: 96ch;
  font-size: 11px; line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-3);
}
.colophon__legal a, .colophon__right a { color: var(--ink-2); text-underline-offset: 2px; }

/* ── account + settings ───────────────────────────────────── */
.tool__svg { width: 16px; height: 16px; display: block; }
.account-btn__glyph { display: inline-grid; place-items: center; }
.account-btn__avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; }
.account-btn__avatar--initial, .settings__avatar--initial {
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.account-btn[data-state="signed-in"] { border-color: var(--ink-2); }

.settings { display: grid; gap: var(--s5); }
.settings__section { display: grid; gap: var(--s3); }
.settings__section + .settings__section { padding-top: var(--s5); border-top: 1px solid var(--line); }
.settings__h { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.settings__text { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.settings__fine { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.settings__fine a, .settings__links a { color: var(--ink); text-underline-offset: 2px; }
.settings__links { margin: 0; font-size: 15px; }
.settings__error { margin: 0; color: var(--miss); font-size: 14px; }
.settings__demo { margin: 0; padding: var(--s2) var(--s3); border: 1px dashed var(--line-strong); color: var(--ink-3); font-size: 11px; }
.settings__row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.settings__row .btn { flex: 1 1 auto; }
.settings__user { display: flex; align-items: center; gap: var(--s3); }
.settings__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; font-size: 18px; }
.settings__name { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.2; }
.settings__email { margin: 2px 0 0; color: var(--ink-3); font-size: 12px; word-break: break-all; }
.settings__status { margin: 0; font-size: 11px; color: var(--hit); }
.settings__status[data-sync="error"] { color: var(--miss); }
.settings__status[data-sync="syncing"] { color: var(--ink-3); }
.btn--danger { color: var(--miss); border-color: color-mix(in oklab, var(--miss) 55%, transparent); }
.btn--danger[data-armed] { background: var(--miss); color: var(--paper); border-color: var(--miss); }

/* segmented control (theme) */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.seg__opt { padding: var(--s2) var(--s1); border: 0; border-left: 1px solid var(--line-strong); background: none; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.seg__opt:first-child { border-left: 0; }
.seg__opt[aria-checked="true"] { background: var(--ink); color: var(--paper); font-weight: 700; }
.seg__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Google's sign-in button: white, G mark, "Sign in with Google" (their branding rules). */
.gsi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 var(--s4);
  border: 1px solid #747775; border-radius: 4px;
  background: #fff; color: #1f1f1f;
  font: 500 15px/1 Roboto, 'Segoe UI', Arial, sans-serif;
  cursor: pointer;
  transition: box-shadow var(--fast), background var(--fast);
}
.gsi-btn:hover { box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3); background: #f8f9fa; }
.gsi-btn:disabled { opacity: 0.6; cursor: progress; }
.gsi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gsi-btn__g { width: 20px; height: 20px; flex: none; }

/* one-time privacy notice */
.privacy-notice {
  position: fixed; z-index: 40;
  left: 50%; bottom: var(--s4); transform: translateX(-50%);
  width: min(560px, calc(100vw - 2 * var(--s4)));
  display: grid; gap: var(--s3);
  padding: var(--s4);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--accent);
  animation: rise 360ms var(--ease-out) both;
}
.privacy-notice.is-leaving { animation: toast-out 200ms var(--ease-io) forwards; }
.privacy-notice__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.privacy-notice__text strong { color: var(--ink); }
.privacy-notice__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.privacy-notice__link { font-size: 12px; color: var(--ink); text-underline-offset: 3px; }
.privacy-notice .btn { min-width: 120px; }

/* privacy policy page */
.policy { max-width: 720px; }
.policy__back { margin: 0 0 var(--s6); font-size: 12px; }
.policy__back a, .policy a { color: var(--ink); text-underline-offset: 3px; }
.policy__title { margin: 0; font-size: clamp(36px, 7vw, 56px); line-height: 1; font-weight: 800; font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; letter-spacing: -0.03em; }
.policy__meta { margin: var(--s3) 0 var(--s6); font-size: 12px; color: var(--ink-3); }
.policy__lead { font-size: 20px; line-height: 1.5; color: var(--ink); }
.policy h2 { margin: var(--s7) 0 var(--s3); font-size: 24px; line-height: 1.2; }
.policy p, .policy li { color: var(--ink-2); line-height: 1.6; }
.policy ul { padding-left: 1.2em; }
.policy li + li { margin-top: var(--s2); }

/* ── ads (reserved spaces; see lib/ads.js) ─────────────────────
   Every slot's size is fixed before an ad loads, so nothing jumps.
   With ads off (the default) no slot is rendered at all. */
.ad-slot { display: grid; justify-items: center; gap: var(--s1); }
.ad-slot__label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); line-height: 14px; }
.ad-slot__box { display: grid; place-items: center; overflow: hidden; }
.ad-slot[data-mode="preview"] .ad-slot__box { background: var(--plate); border: 1px dashed var(--line-strong); }
.ad-slot__hint { padding: var(--s2); font-size: 11px; color: var(--ink-3); text-align: center; }
.ad-slot[data-state="empty"] { display: none; } /* blocked or failed: collapse quietly */

/* Bottom banner: 728×90, kept well clear of the buttons above it. */
.ad-slot[data-slot="bottom"] { margin-top: var(--s7); }
.ad-slot[data-slot="bottom"] .ad-slot__box { width: min(728px, 100%); height: 90px; }

/* Side banner: lives inside the board and hangs off its left edge, so its top
   lines up with the icon frame, below the masthead rule, in every mode.
   Only shown where the left margin can hold it with a 24px gap to the game
   (the game column is 1040px wide). */
.board { position: relative; }
.ad-slot[data-slot="side"] { display: none; }
@media (min-width: 1420px) {
  .ad-slot[data-slot="side"] {
    display: grid;
    position: absolute; top: 0;
    right: calc(100% + var(--s5));
  }
  .ad-slot[data-slot="side"] .ad-slot__box { width: 160px; height: 600px; }
}
@media (min-width: 1700px) {
  .ad-slot[data-slot="side"] .ad-slot__box { width: 300px; }
}
.ad-slot[data-slot="side"][data-state="empty"] { display: none; }

/* ── mobile ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  .shell { padding-top: var(--s4); }
  .tool__label, .pastdays-btn__label { display: none; }
  .tool { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .pastdays-btn { width: 38px; height: 38px; padding: 0; justify-content: center; border-style: solid; }
  /* All four buttons stay together as one row (and wrap together if needed). */
  .masthead__actions { display: flex; gap: var(--s2); margin-left: auto; }
  .masthead__center { flex: none; }
  .masthead { gap: var(--s3) var(--s2); flex-wrap: wrap; }
  .masthead__meta { white-space: nowrap; gap: var(--s2); font-size: 11px; }
  .masthead__rule { display: none; }
  .cal__detail { flex-direction: column; align-items: stretch; }
  .board { margin-top: var(--s5); gap: var(--s5); }
  .reveal { padding: var(--s4) var(--s4) var(--s4) var(--s5); }
  .reveal__actions { flex-direction: column; align-items: stretch; }
  .reveal__next { text-align: left; grid-auto-flow: column; justify-content: space-between; align-items: baseline; }
  /* Phone banner instead of the 728×90 one. */
  .ad-slot[data-slot="bottom"] .ad-slot__box { width: 320px; max-width: 100%; height: 100px; }
  /* Slimmer meter so the difficulty · RES · meter row fits with RES centred. */
  .meter__tick { width: 15px; }
  .stage__readout { gap: var(--s2); }
}

@media (max-width: 360px) {
  .wordmark { font-size: 38px; }
  .tool, .pastdays-btn { width: 34px; height: 34px; }
  .stepper__link { padding: 0 var(--s2); }
}

/* ── motion ───────────────────────────────────────────────── */
@keyframes settle { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes tick { 0% { color: var(--accent); transform: translateY(-3px); } 100% { color: inherit; transform: none; } }
@keyframes reveal { 0% { clip-path: inset(50% 50% 50% 50% round 22%); transform: scale(0.9) rotate(-3deg); } 100% { clip-path: inset(0 0 0 0 round 0); transform: none; } }
@keyframes pulse { 50% { opacity: 0.55; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes slot-in { 0% { transform: translateX(-10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes drop { 0% { transform: translateY(-4px); opacity: 0; } }
@keyframes rise { 0% { transform: translateY(14px); opacity: 0; } }
@keyframes sheet-in { 0% { transform: translateY(12px) scale(0.98); opacity: 0; } }
@keyframes grow { 0% { width: 0; } }
@keyframes seg-grow { 0% { flex-basis: 0; } }
@keyframes panel-in { 0% { opacity: 0; transform: translateY(6px); } }
@keyframes toast-in { 0% { transform: translateY(-8px) scale(0.96); opacity: 0; } }
@keyframes toast-out { 100% { transform: translateY(-6px); opacity: 0; } }

/* Motion is part of the game's feedback, so it plays regardless of the OS
   reduced-motion setting (owner's call). Animations are short (≤0.72s), with
   no parallax or large-scale zooms. */