/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 * Hallmark · genre: playful · macrostructure: Workbench · theme: Hum
 * tone: utilitarian · audience: casual phone players · use: ink a numbered plate
 * enrichment: E5 press-bed CSS · nav: N7 via hub bar · footer: none
 */
@import url("../css/tokens.css");

:root {
  --press-navy: oklch(28% 0.12 320);
  --press-navy-2: oklch(24% 0.1 320);
  --press-cream: oklch(98% 0.03 95);
  --press-red: oklch(62% 0.28 12);
  --press-gold: oklch(86% 0.22 95);
  --press-gold-ink: oklch(36% 0.08 80);
  --plate-ink: oklch(62% 0.28 12);
  --plate-ink-2: oklch(72% 0.26 12);
  --plate-wash: oklch(92% 0.1 12);
  --plate-steel: oklch(92% 0.08 95);
  --plate-well: oklch(100% 0.02 95);
  --cell: clamp(1.7rem, 8.2vw, 2.75rem);
}

html, body { overflow-x: clip; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--color-paper);
  background-image:
    radial-gradient(ellipse 90% 60% at 0% 0%, var(--color-blob-1) 0 36%, transparent 58%),
    radial-gradient(ellipse 80% 55% at 100% 8%, var(--color-blob-2) 0 34%, transparent 56%),
    radial-gradient(ellipse 70% 50% at 85% 100%, var(--color-blob-3) 0 32%, transparent 54%),
    radial-gradient(ellipse 60% 45% at 5% 95%, var(--color-blob-4) 0 30%, transparent 52%);
  background-attachment: fixed;
  color: var(--press-navy-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 14% 22%, oklch(78% 0.28 12) 0 1.1rem, transparent 1.15rem),
    radial-gradient(circle at 78% 16%, oklch(86% 0.24 95) 0 1.4rem, transparent 1.45rem),
    radial-gradient(circle at 92% 48%, oklch(72% 0.24 250) 0 1rem, transparent 1.05rem),
    radial-gradient(circle at 8% 72%, oklch(80% 0.22 150) 0 1.25rem, transparent 1.3rem),
    radial-gradient(circle at 62% 86%, oklch(74% 0.24 320) 0 0.9rem, transparent 0.95rem);
  opacity: 0.9;
}
body > * { position: relative; z-index: 1; }
h1, h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  min-width: 0;
}

.hub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--page-gutter);
  background: var(--press-red);
  color: var(--press-cream);
}
.hub-bar a {
  color: var(--press-gold);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.hub-bar a:hover { text-decoration: underline; }
.hub-bar a:focus-visible { outline: 3px solid var(--press-gold); outline-offset: 3px; }
.hub-bar span { font-size: var(--text-sm); opacity: 0.75; }

.playyard-ad { padding: var(--space-sm) var(--page-gutter) 0; }
body[data-screen="play"] .playyard-ad { background: transparent; }
.ad-well {
  min-height: 4.5rem;
  display: grid;
  place-items: center;
  background: var(--color-well);
  border-radius: var(--radius-card);
  padding: var(--space-sm);
}
.ad-well[data-ad-state="empty"] { border: var(--rule-hair) dashed var(--color-rule); }
.ad-empty {
  margin: 0;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}

#title, #how, #levels, #play { display: none; }
body[data-screen="title"] #title,
body[data-screen="how"] #how,
body[data-screen="levels"] #levels,
body[data-screen="play"] #play { display: block; }

#title, #how, #levels {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
}
.shop {
  background: var(--press-cream);
  border: 4px solid var(--press-navy);
  box-shadow: 10px 12px 0 var(--press-red);
  padding: 0 var(--space-lg) var(--space-lg);
  animation: shop-in 420ms var(--ease-out);
}
.shop-rail {
  height: 18px;
  margin: 0 calc(-1 * var(--space-lg));
  background: repeating-linear-gradient(
    90deg,
    var(--press-red) 0 14px,
    var(--press-cream) 14px 28px,
    var(--press-navy) 28px 42px,
    var(--press-cream) 42px 56px
  );
}
#title h1 {
  font-size: clamp(2.4rem, 10vw, 4rem);
  margin: var(--space-2xs) 0 var(--space-sm);
  color: var(--press-red);
}
.lede { color: var(--press-navy); max-width: 36ch; margin: 0; }
.lede b { color: var(--press-red); font-weight: 800; }
.kicker {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--press-red);
  margin: var(--space-md) 0 0;
}

.demo-card {
  margin: var(--space-lg) 0 0;
  padding: var(--space-md);
  background: oklch(98% 0.01 90);
  border: 2px dashed var(--press-navy);
}
.demo-clues {
  display: grid;
  grid-template-columns: repeat(5, 1.7rem);
  justify-content: center;
  gap: 3px;
  margin-bottom: 6px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--press-navy);
}
.demo-clues .is-hot {
  color: var(--press-cream);
  background: var(--press-red);
}
.demo { --cols: 5; --rows: 5; }
.mini-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1.7rem);
  grid-template-rows: repeat(var(--rows), 1.7rem);
  gap: 3px;
  justify-content: center;
}
.mini-grid i {
  display: block;
  background: oklch(92% 0.02 90);
  box-shadow: inset 0 0 0 1px oklch(28% 0.06 260 / 0.2);
}
.mini-grid i.is-on {
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 3px, oklch(100% 0 0 / 0.22) 3px, oklch(100% 0 0 / 0.22) 4px),
    var(--press-red);
  animation: ink-drop 280ms var(--ease-out);
}
.demo-cap {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  color: var(--press-navy);
  max-width: 36ch;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.btn {
  --btn-face: var(--press-red);
  --btn-ink: var(--press-cream);
  --btn-edge: oklch(42% 0.18 18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.25rem;
  font: 700 var(--text-sm) / 1 var(--font-body);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--btn-ink);
  background: var(--btn-face);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 0 0 var(--btn-edge);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--btn-edge); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn--soft {
  --btn-face: var(--press-cream);
  --btn-ink: var(--press-navy);
  --btn-edge: oklch(70% 0.04 85);
  box-shadow: 0 4px 0 0 var(--btn-edge), inset 0 0 0 2px var(--press-navy);
}
.btn--mode {
  --btn-face: oklch(92% 0.02 90);
  --btn-ink: var(--press-navy);
  --btn-edge: oklch(70% 0.03 85);
  min-width: 5.2rem;
  gap: 0.45rem;
}
.btn--mode[aria-pressed="true"] {
  --btn-face: var(--plate-ink);
  --btn-ink: var(--press-cream);
  --btn-edge: color-mix(in oklch, var(--plate-ink) 70%, black);
}
body[data-mode="mark"] .btn--mode[data-mode="mark"][aria-pressed="true"] {
  --btn-face: var(--press-navy);
}
.mode-swatch {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  border-radius: 22%;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.mode-swatch--ink {
  background: var(--plate-ink);
  box-shadow: inset 0 0 0 1.5px oklch(20% 0.04 20 / 0.5);
}
.btn--mode[aria-pressed="true"] .mode-swatch--ink {
  background: var(--press-cream);
  box-shadow: inset 0 0 0 1.5px oklch(20% 0.04 20 / 0.35);
}
.mode-swatch--mark {
  background:
    linear-gradient(45deg, transparent 40%, var(--press-navy) 40%, var(--press-navy) 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--press-navy) 40%, var(--press-navy) 60%, transparent 60%);
  background-color: var(--press-cream);
}
.btn--mode[aria-pressed="true"] .mode-swatch--mark {
  background:
    linear-gradient(45deg, transparent 40%, var(--press-cream) 40%, var(--press-cream) 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--press-cream) 40%, var(--press-cream) 60%, transparent 60%);
  background-color: var(--press-navy);
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.facts li {
  padding: var(--space-sm);
  background: oklch(98% 0.01 90);
  border: 2px solid var(--press-navy);
}
.facts b {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--press-red);
  font-weight: 500;
}

.how-copy { display: grid; gap: var(--space-md); color: var(--press-navy); }
.how-copy > p { max-width: 48ch; }
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
}
.steps li {
  padding: var(--space-md);
  background: var(--press-cream);
  border-left: 6px solid var(--press-red);
  border: 2px solid var(--press-navy);
  border-left-width: 8px;
  border-left-color: var(--press-red);
}
.steps b { display: block; margin-bottom: 0.3rem; }
.steps i { font-style: normal; font-weight: 800; color: var(--press-red); }

.level-tray {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.lvl {
  appearance: none;
  min-height: 84px;
  padding: var(--space-sm);
  border: 2px solid var(--press-navy);
  background: var(--press-cream);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
  position: relative;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease;
}
.lvl:not(.is-lock):hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.22);
}
.lvl:not(.is-lock):active {
  transform: translateY(1px) scale(0.98);
}
.lvl-swatch {
  width: 100%;
  height: 8px;
  background: var(--plate-ink);
}
.lvl span { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; }
.lvl b { font-size: var(--text-sm); }
.lvl em { font-style: normal; font-size: 11px; color: var(--color-muted); }
.lvl.is-done { box-shadow: inset 0 0 0 3px var(--press-gold); }
.lvl.is-lock { opacity: 0.4; cursor: not-allowed; }
.lvl:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.play-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 19rem);
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-lg) var(--page-gutter) 0;
  max-width: var(--shell);
  margin-inline: auto;
}
.play-ad { position: sticky; top: var(--space-md); }
.play-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.play-head p { margin: 0; color: var(--press-navy); }
#level-label { font-weight: 800; }
#status {
  color: var(--press-navy);
  font-size: var(--text-sm);
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--press-gold);
  border-left: 6px solid var(--press-red);
}
.modes { display: flex; gap: 4px; }

.press-wrap { overflow-x: auto; padding: 0 0 var(--space-xl); }
.press {
  --cols: 5;
  --rows: 5;
  display: grid;
  grid-template-columns: auto auto;
  width: max-content;
  margin: 0 auto;
  padding: 16px 16px 22px;
  background: var(--press-gold);
  border: 4px solid var(--press-navy);
  box-shadow:
    0 0 0 6px var(--plate-ink),
    12px 14px 0 var(--press-navy);
  border-radius: 18px;
  animation: press-in 360ms var(--ease-out);
  position: relative;
}
body[data-mode="ink"] .press {
  box-shadow:
    0 0 0 6px var(--plate-ink),
    12px 14px 0 var(--press-navy);
}
body[data-mode="mark"] .press {
  box-shadow:
    0 0 0 6px var(--press-navy),
    12px 14px 0 var(--press-navy);
}
.press.is-big { --cell: 3rem; }
.press.is-clear { animation: press-proof 720ms var(--ease-out); }
.press-corner { min-width: 3.2rem; }
.press-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
}
.clue-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  padding-bottom: 6px;
  font-family: var(--font-label);
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--press-navy);
}
.press-rows {
  display: grid;
  grid-template-rows: repeat(var(--rows), var(--cell));
}
.clue-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.32rem;
  padding-right: 8px;
  font-family: var(--font-label);
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 800;
  min-width: 3.2rem;
  color: var(--press-navy);
}
.clue-row span,
.clue-col span {
  min-width: 1.15em;
  padding: 0.08em 0.18em;
  border-radius: 4px;
  background: oklch(100% 0.02 95 / 0.72);
  text-align: center;
}
.clue-row.is-done,
.clue-col.is-done {
  color: var(--press-gold-ink);
  background: var(--press-gold);
}
.clue-row.is-hint,
.clue-col.is-hint {
  outline: 3px solid var(--press-red);
  animation: hint-pulse 1s var(--ease-in-out) infinite;
}
.clue-row.is-pop,
.clue-col.is-pop { animation: clue-pop 320ms var(--ease-out); }

.press-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
  background: var(--press-navy);
  gap: 2px;
  border: 2px solid var(--press-navy);
  touch-action: none;
}
.cell {
  appearance: none;
  width: var(--cell);
  height: var(--cell);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22%;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.7), transparent 42%),
    var(--plate-well);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.press:not(.is-big) .cell { min-width: 0; min-height: 0; }
.cell.is-hint { box-shadow: inset 0 0 0 2px var(--press-red); }
.cell.is-ink {
  background-color: var(--plate-ink);
  background-image: var(--hatch);
}
.cell.is-mark::after {
  content: "";
  position: absolute;
  inset: 12%;
  background:
    linear-gradient(45deg, transparent 38%, var(--press-navy) 38%, var(--press-navy) 62%, transparent 62%),
    linear-gradient(-45deg, transparent 38%, var(--press-navy) 38%, var(--press-navy) 62%, transparent 62%);
}
body[data-mode="mark"] .cell:not(.is-ink):not(.is-mark)::before {
  content: "";
  position: absolute;
  inset: 28%;
  opacity: 0.22;
  background:
    linear-gradient(45deg, transparent 42%, var(--press-navy) 42%, var(--press-navy) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--press-navy) 42%, var(--press-navy) 58%, transparent 58%);
  pointer-events: none;
}
.cell.is-wrong-ink {
  box-shadow: inset 0 0 0 3px oklch(48% 0.24 18);
  outline: 3px solid oklch(48% 0.24 18);
  outline-offset: -3px;
  z-index: 1;
}
.cell.is-wrong-ink::before {
  content: "!";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 0.85rem/1 var(--font-label);
  color: oklch(98% 0.03 95);
  text-shadow: 0 0 3px oklch(20% 0.1 18);
  pointer-events: none;
  z-index: 2;
}
.cell.is-wrong-mark {
  box-shadow: inset 0 0 0 3px var(--press-navy);
  outline: 3px dashed var(--press-navy);
  outline-offset: -3px;
  z-index: 1;
}
.cell.is-wrong-mark::before {
  content: "X";
  position: absolute;
  inset: auto 2px 2px auto;
  font: 800 0.65rem/1 var(--font-label);
  color: var(--press-navy);
  pointer-events: none;
  z-index: 2;
}
.cell.is-stamp { animation: stamp 180ms var(--ease-out); }
.cell.is-cross { animation: cross 180ms var(--ease-out); }
.cell.is-wipe { animation: wipe 140ms var(--ease-out); }
.cell:focus-visible { outline: 3px solid var(--press-gold); outline-offset: 2px; z-index: 1; }

body[data-ink="crimson"], .press[data-ink="crimson"] { --plate-ink: oklch(62% 0.28 12); --plate-ink-2: oklch(72% 0.26 12); }
body[data-ink="navy"], .press[data-ink="navy"] { --plate-ink: oklch(58% 0.24 255); --plate-ink-2: oklch(70% 0.2 250); }
body[data-ink="gold"], .press[data-ink="gold"] { --plate-ink: oklch(84% 0.22 95); --plate-ink-2: oklch(90% 0.18 95); }
body[data-ink="rose"], .press[data-ink="rose"] { --plate-ink: oklch(66% 0.26 340); --plate-ink-2: oklch(76% 0.22 340); }
body[data-ink="pine"], .press[data-ink="pine"] { --plate-ink: oklch(64% 0.24 150); --plate-ink-2: oklch(76% 0.2 150); }
body[data-ink="copper"], .press[data-ink="copper"] { --plate-ink: oklch(70% 0.22 45); --plate-ink-2: oklch(80% 0.18 50); }
.press[data-hatch="slash"] { --hatch: repeating-linear-gradient(-45deg, transparent, transparent 3px, oklch(100% 0 0 / 0.22) 3px, oklch(100% 0 0 / 0.22) 4px); }
.press[data-hatch="dots"] { --hatch: radial-gradient(oklch(100% 0 0 / 0.28) 1.1px, transparent 1.2px); background-size: auto; }
.press[data-hatch="dots"] .cell.is-ink { background-size: 6px 6px; }
.press[data-hatch="bars"] { --hatch: repeating-linear-gradient(90deg, transparent, transparent 4px, oklch(20% 0.02 80 / 0.22) 4px, oklch(20% 0.02 80 / 0.22) 5px); }
.press[data-hatch="weave"] { --hatch: repeating-linear-gradient(0deg, transparent, transparent 5px, oklch(100% 0 0 / 0.18) 5px, oklch(100% 0 0 / 0.18) 6px); }
.press[data-hatch="cross"] { --hatch: repeating-linear-gradient(45deg, transparent, transparent 4px, oklch(100% 0 0 / 0.18) 4px, oklch(100% 0 0 / 0.18) 5px), repeating-linear-gradient(-45deg, transparent, transparent 4px, oklch(20% 0.02 80 / 0.16) 4px, oklch(20% 0.02 80 / 0.16) 5px); }

.lvl.ink-crimson { --plate-ink: oklch(62% 0.28 12); }
.lvl.ink-navy { --plate-ink: oklch(58% 0.24 255); }
.lvl.ink-gold { --plate-ink: oklch(84% 0.22 95); }
.lvl.ink-rose { --plate-ink: oklch(66% 0.26 340); }
.lvl.ink-pine { --plate-ink: oklch(64% 0.24 150); }
.lvl.ink-copper { --plate-ink: oklch(70% 0.22 45); }

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--page-gutter);
  background: oklch(18% 0.04 260 / 0.62);
  z-index: 30;
}
.overlay[hidden] { display: none; }
.sheet {
  width: min(28rem, 100%);
  padding: var(--space-xl);
  background: var(--press-cream);
  border: 3px solid var(--press-navy);
  box-shadow: 8px 10px 0 var(--press-red);
  animation: shop-in 280ms var(--ease-out);
}
.sheet h2 { margin: 0 0 var(--space-sm); font-size: var(--text-xl); }
.sheet p { margin: 0 0 var(--space-lg); color: var(--press-navy); }
.sheet .kicker { margin-top: 0; }
.proof-sheet {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm);
  background: oklch(98% 0.01 90);
  border: 2px solid var(--press-navy);
  text-align: center;
}
.proof-art[hidden] { display: none; }
.proof-art:not([hidden]) {
  display: grid;
  place-items: center;
}
.proof-art svg {
  width: min(100%, 12rem);
  height: auto;
}
.proof-name {
  margin: var(--space-xs) 0 0;
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--press-navy);
}
.proof-flourish {
  position: absolute;
  inset: -8%;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.press.is-proof .proof-flourish {
  animation: flourish-in 640ms var(--ease-out) forwards;
}
.proof-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  margin: 0;
  text-align: center;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--press-navy);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}
.press.is-proof .proof-caption { animation: caption-in 400ms 200ms var(--ease-out) forwards; }
.press.is-proof .cell.is-mark::after {
  animation: mark-lift 420ms var(--ease-out) forwards;
}
.press.is-proof .cell.is-ink {
  animation: print-settle 520ms var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 22ms);
}

.below {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
}
body[data-screen="play"] .below,
body[data-screen="play"] .below h2,
body[data-screen="play"] .below p { color: var(--press-navy); }
.below h2 { font-size: var(--text-xl); margin: 0 0 var(--space-sm); }
.below p { max-width: 62ch; }
.below a { color: var(--press-gold); }

@keyframes shop-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes press-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes press-proof {
  0% { filter: brightness(1); transform: none; }
  35% { filter: brightness(1.22); transform: scale(1.02); }
  100% { filter: brightness(1); transform: none; }
}
@keyframes stamp {
  0% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes cross {
  0% { transform: rotate(-12deg) scale(1.1); }
  100% { transform: none; }
}
@keyframes wipe {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}
@keyframes ink-drop {
  from { transform: scale(0.4); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
@keyframes clue-pop {
  0% { transform: scale(1.08); }
  100% { transform: none; }
}
@keyframes hint-pulse {
  50% { outline-color: var(--press-gold); }
}
@keyframes mark-lift {
  to { opacity: 0; transform: scale(1.4); }
}
@keyframes print-settle {
  0% { transform: scale(0.86); filter: brightness(1.35); }
  100% { transform: none; filter: none; }
}
@keyframes flourish-in {
  0% { opacity: 0; transform: scale(0.72) rotate(-8deg); }
  55% { opacity: 0.9; transform: scale(1.06) rotate(2deg); }
  100% { opacity: 0.55; transform: none; }
}
@keyframes caption-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 56rem) {
  .play-rail { grid-template-columns: minmax(0, 1fr); }
  .play-ad { position: static; }
}
@media (max-width: 40rem) {
  .hub-bar span { display: none; }
  .level-tray { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active, .shop, .press, .sheet, .mini-grid i.is-on,
  .cell.is-stamp, .cell.is-cross, .cell.is-wipe, .clue-row.is-pop, .clue-col.is-pop,
  .clue-row.is-hint, .clue-col.is-hint, .press.is-proof .proof-flourish,
  .press.is-proof .proof-caption, .press.is-proof .cell.is-mark::after,
  .press.is-proof .cell.is-ink { transform: none; animation: none; }
  .press.is-proof .proof-flourish { opacity: 0.45; }
  .press.is-proof .proof-caption { opacity: 1; }
  .press.is-proof .cell.is-mark::after { opacity: 0; }
}

/* ---- 2026-09-28 ultracode: modes, stars, clock, hints, crosshair, juice ---- */
.press-row { display: contents; }
.btn--daily {
  --btn-face: var(--press-navy);
  --btn-ink: var(--press-gold);
  --btn-edge: var(--press-navy-2);
}
.title-stats {
  margin: var(--space-md) 0 0;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--press-navy);
}
.title-stats[hidden] { display: none; }
.tray-head { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--text-lg, 1.2rem); color: var(--press-navy); }
.level-tray--quick { margin-top: var(--space-sm); }
.lvl--quick { --plate-ink: var(--press-navy); }
.lvl-stars { font-size: 13px; letter-spacing: 0.06em; color: var(--press-gold-ink); line-height: 1; }
.lvl.is-done .lvl-stars { color: oklch(52% 0.16 70); }
.clock {
  margin: 0;
  min-width: 3.6rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-label);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--press-cream) !important;
  background: var(--press-navy);
  border-radius: var(--radius-pill);
  text-align: center;
}
.btn--back { padding-inline: 0.9rem; }
#btn-autox[aria-pressed="false"] { opacity: 0.78; }
@media (max-width: 40rem) {
  .play-head { gap: 6px; }
  .play-head .btn { min-height: 44px; padding: 0.55rem 0.8rem; }
  .play-head .btn--mode { min-width: 4.4rem; }
}

/* crosshair on the clues for the aimed square */
.clue-row.is-aim span,
.clue-col.is-aim span { background: var(--press-cream); box-shadow: 0 0 0 2px var(--plate-ink); }
.clue-row.is-aim.is-done span,
.clue-col.is-aim.is-done span { box-shadow: 0 0 0 2px var(--press-gold-ink); }

/* finished-line ripple and hint flash */
.cell.is-ripple { animation: line-ripple 420ms var(--ease-out) calc(var(--k, 0) * 28ms) both; }
.cell.is-hinted { animation: hinted 700ms var(--ease-out); }
@keyframes line-ripple {
  0% { filter: none; transform: none; }
  40% { filter: brightness(1.25) saturate(1.2); transform: scale(0.9); }
  100% { filter: none; transform: none; }
}
@keyframes hinted {
  0% { box-shadow: inset 0 0 0 4px var(--press-gold); transform: scale(1.12); }
  100% { box-shadow: inset 0 0 0 0 transparent; transform: none; }
}

/* win confetti: ink chips from the plate centre */
.ink-burst { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 29; }
.ink-burst i {
  position: absolute;
  left: -6px;
  top: -4px;
  width: 12px;
  height: 8px;
  border-radius: 2px;
  background: var(--plate-ink);
  opacity: 0;
  animation: chip-fly 1300ms var(--ease-out) forwards;
}
.ink-burst i.is-gold { background: var(--press-gold); }
@keyframes chip-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 90px)) rotate(var(--r)); }
}

/* proof sheet stats */
.win-stars { display: flex; justify-content: center; gap: 0.35rem; margin: 0 0 var(--space-sm) !important; font-size: 2rem; line-height: 1; }
.win-stars span { color: oklch(78% 0.03 85); }
.win-stars span.is-on { color: oklch(72% 0.19 80); animation: star-pop 420ms var(--ease-out) calc(300ms + var(--i) * 140ms) both; }
@keyframes star-pop {
  0% { transform: scale(0.2) rotate(-40deg); opacity: 0; }
  70% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.win-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--press-navy);
}
.win-grid dt { font-family: var(--font-label); font-weight: 700; opacity: 0.75; }
.win-grid dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .cell.is-ripple, .cell.is-hinted, .win-stars span.is-on { animation: none; }
  .ink-burst { display: none; }
}

/* tall proof sheet on short phones: let the overlay scroll */
.overlay { overflow-y: auto; overscroll-behavior: contain; }
.sheet { margin-block: auto; }