/* 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: 4.6rem;
}
.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);
}

.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;
}
.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;
  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);
}
.press.is-big { --cell: 3rem; }
.press.is-clear { animation: press-proof 480ms var(--ease-out); }
.press-corner { min-width: 2.5rem; }
.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: 2px;
  padding-bottom: 5px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  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.28rem;
  padding-right: 7px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  min-width: 2.5rem;
  color: var(--press-navy);
}
.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);
}
.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;
}
.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: 18%;
  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%);
}
.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; }

.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); }
  40% { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}
@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); }
}

@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 { transform: none; animation: none; }
}