styles.css

:root {
  --color-bg: #f4ead8;
  --color-bg-2: #ece0c5;
  --color-surface: #fbf4e2;
  --color-text: #1a1410;
  --color-muted: #7a6f5e;
  --color-primary: #d94f2a;
  --color-primary-text: #fbf4e2;
  --color-border: #d8c9a8;
  --color-border-strong: #1a1410;
  --color-hit: #c2362a;
  --color-miss: #a89e88;
  --color-sunk: #6b1f17;
  --color-ship: #1f3540;
  --color-accent: #d9a73a;
  --color-p1: #d94f2a;
  --color-p2: #1e5e6e;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --font-display: "Fraunces Variable", "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-stack: "Outfit Variable", "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --shadow-sm: 0 1px 2px rgba(26, 20, 16, 0.06);
  --shadow-md: 0 6px 18px rgba(26, 20, 16, 0.10);
  --shadow-stamp: 4px 4px 0 var(--color-border-strong);
  --shadow-stamp-sm: 2px 2px 0 var(--color-border-strong);

  /* Activity tints — used as the glyph swatch fill on home cards.
     Tuned to read cleanly against the warm cream bg (#f4ead8);
     the originals were too washed out to separate from the page. */
  --tint-vermilion: #ea9d83;
  --tint-teal:      #9cc1c7;
  --tint-mustard:   #e6c46a;
  --tint-rose:      #e1a0b1;
  --tint-olive:     #b8c184;
  --tint-plum:      #b39bc9;
  --tint-sky:       #98bbdd;
  --tint-peach:     #ebab7c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-stack);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(rgba(26, 20, 16, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(26, 20, 16, 0.035) 1px, transparent 1px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
  font-size: 16px;
  line-height: 1.45;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; font-size: inherit; }
select { font-family: inherit; font-size: inherit; }

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-4) 0;
}
.header h1 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0;
}
.header h1 .header__accent {
  font-style: italic;
  font-weight: 900;
  color: var(--color-primary);
}
/* Home wordmark — bigger, left-anchored, with italic accent letter. */
.header--brand .header__titles { align-items: flex-start; }
.header--brand h1.header__brand {
  font-size: 48px;
  line-height: 0.9;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  box-shadow: var(--shadow-stamp-sm);
  transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.1s ease;
}
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border-strong);
}
/* Hero CTA — the one-of-a-kind stamped showpiece (home "Suggest activity",
   Dice "Roll"). Heavy display serif, italic, oversized. Reserved for
   primaryBig — do not reach for this on in-game screens. */
.btn--hero {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.01em;
  min-height: 84px;
  padding: var(--space-5) var(--space-5);
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--color-border-strong);
  border-width: 2px;
}
.btn--hero:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--color-border-strong); }

/* Primary in-game action — bigger touch target than .btn, but readable
   sans at conversational weight. Used by "New round", "Asked!", "New word",
   replay/print actions. Inherits Outfit from body. */
.btn--lg {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--color-border-strong);
  border-width: 2px;
}
.btn--lg:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--color-border-strong); }
.btn--block { width: 100%; }
.btn--icon { padding: var(--space-2) var(--space-3); min-height: 40px; }
.btn--stacked { flex-direction: column; gap: 2px; }
.btn__sub { font-size: 13px; font-weight: 500; }
.btn__sub.is-hidden { display: none; }
.corner-menu__toggle svg { width: 22px; height: 22px; display: block; }

/* A horizontal rule sets the reroll off from the activity; the button sits
   centred below it. In flow at the end of the activity. */
.activity-bar {
  margin-top: var(--space-4);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.activity-bar__rule {
  width: 100%;
  height: 1.5px;
  margin: 0;
  border: none;
  background: var(--color-border);
}

/* A compact, centred button below the rule — the home Suggest wordmark's serif
   at a lighter weight, no vermilion fill, so it reads as the same action
   without competing with the activity. The › ‹ marks echo the reel's focus
   needles and bite inward on hover, linking it to the spin it triggers. */
.activity-resuggest {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-stamp-sm);
  cursor: pointer;
  color: var(--color-text);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.activity-resuggest:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.activity-resuggest__main {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.activity-resuggest__chev { color: var(--color-muted); transition: transform 0.12s ease; }
.activity-resuggest:hover .activity-resuggest__main > .activity-resuggest__chev:first-child { transform: translateX(3px); }
.activity-resuggest:hover .activity-resuggest__main > .activity-resuggest__chev:last-child  { transform: translateX(-3px); }
.activity-resuggest__sub { font-size: 12px; font-weight: 500; color: var(--color-muted); }
.activity-resuggest__sub.is-hidden { display: none; }

/* Home hero carries the same › ‹ motif (cream on vermilion) so the primary
   Suggest and the per-activity re-suggest read as one family. */
.suggest-chev {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--color-primary-text);
  opacity: 0.7;
  transition: transform 0.12s ease;
}
.activity-card--suggest:hover .suggest-chev:first-child { transform: translateX(4px); }
.activity-card--suggest:hover .suggest-chev:last-child  { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
  .activity-resuggest__chev, .suggest-chev { transition: none; }
}

.card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-stamp-sm);
}

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }

.row { display: flex; gap: var(--space-3); align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }

.muted { color: var(--color-muted); }
.center { text-align: center; }
.h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2) 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.h2 em {
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--color-muted);
}
.big { font-size: 56px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.bigger { font-size: 96px; font-weight: 700; letter-spacing: -2px; line-height: 1; }

.pill-toggle {
  display: inline-flex;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface);
}
.pill-toggle .pill-btn {
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  min-height: 40px;
}
.pill-toggle .pill-btn.is-active {
  background: var(--color-text);
  color: var(--color-bg);
}
.pill-toggle .pill-btn--icon {
  font-size: 16px;
  line-height: 1;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pill-eye { width: 18px; height: 18px; display: block; }

/* Kind filter — additive multi-select, grouped as one rounded track (matching
   the .pill-toggle shell) so the four options read as a single control. Each
   option carries a leading checkbox: ticked ink box = selected, empty box =
   excluded. Only the small boxes carry ink, so the default (all selected) stays
   light — no block of fill. The checkbox distinguishes this multi-select from
   the single-select .pill-toggle beside it. */
.checkbox-track {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  overflow: hidden;
}
.checkbox-track__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.14s ease, opacity 0.14s ease;
}
/* The checkbox: ticked ink box when selected. The tick is an SVG background (not
   text) so it stays decorative — it must not leak into the button's accessible
   name, which has to remain just the kind label. */
.checkbox-track__opt::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--color-text);
  background-color: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf4e2' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}
/* Excluded: empty box + muted, dimmed label. */
.checkbox-track__opt:not(.is-active) {
  color: var(--color-muted);
  opacity: 0.65;
}
.checkbox-track__opt:not(.is-active)::before {
  background-color: transparent;
  background-image: none;
  border-color: var(--color-muted);
}
@media (hover: hover) {
  .checkbox-track__opt:not(.is-active):hover { color: var(--color-text); opacity: 0.9; }
}

.corner-menu { position: relative; }
.corner-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 109;
  display: none;
}
.corner-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  min-width: 220px;
  z-index: 110;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.corner-menu.is-open .corner-menu__backdrop { display: block; }
.corner-menu.is-open .corner-menu__panel { display: flex; }
.corner-menu__langs {
  display: flex;
  gap: 2px;
  padding: 2px;
}
.corner-menu__lang {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  min-height: 40px;
}
.corner-menu__lang.is-active {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  border-color: var(--color-primary);
}
.corner-menu__divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) 2px;
}
.corner-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  min-height: 40px;
  width: 100%;
}
.corner-menu__item:hover { background: var(--color-bg); }
.corner-menu__item-icon {
  width: 20px;
  height: 20px;
  color: var(--color-muted);
  flex-shrink: 0;
}
.corner-menu__item-icon svg { width: 100%; height: 100%; display: block; }

/* Tap-to-hear button — reused across read-aloud activities. */
.speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: var(--shadow-stamp-sm);
}
.speak-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.speak-btn__icon { width: 24px; height: 24px; display: block; }

.tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  box-shadow: var(--shadow-stamp-sm);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.tile:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.tile .tile__glyph {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  width: 40px;
  text-align: center;
  flex: 0 0 auto;
}
.tile .tile__body { flex: 1; min-width: 0; }
.tile .tile__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.1; display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tile .tile__desc { color: var(--color-muted); font-size: 13px; margin-top: 2px; }
.tile .tile__chev { color: var(--color-muted); font-size: 22px; margin-left: auto; }
.tile__badge {
  font-family: var(--font-stack);
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.2;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/* Name filter — sits in the filter-pill cluster as a single round pill, and
   unwinds sideways into a search bar on tap. Matches the pill toggles next to
   it (same border, radius, surface) so it reads as one of the controls. */
.search {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 43px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.search.is-open { width: min(280px, 72vw); }
.search__toggle {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1;
}
.search__icon { width: 19px; height: 19px; display: block; }
.search__field {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--space-3) 0 var(--space-1);
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: transparent;
  border: none;
  opacity: 0;
  transition: opacity 0.18s ease 0.08s;
}
.search.is-open .search__field { opacity: 1; }
.search__field:focus { outline: none; }
.search__field::placeholder { color: var(--color-muted); }

.activity-grid__divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0;
  color: var(--color-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.activity-grid__divider::before,
.activity-grid__divider::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--color-border);
}
.activity-grid__divider-label { white-space: nowrap; }
.activity-grid__empty {
  grid-column: 1 / -1;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.activity-card {
  position: relative;
  /* Two-row grid: glyph+name share row 1 (horizontal), desc spans row 2
     full-width so longer copy isn't squeezed into a narrow column. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-text);
  min-height: 84px;
  overflow: hidden;
  box-shadow: var(--shadow-stamp-sm);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.activity-card:active { transform: translate(1.5px, 1.5px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.activity-card .activity-card__glyph {
  grid-row: 1;
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--tile-stamp, var(--color-bg-2));
  /* Hairline border tinted from the swatch itself — anchors the square
     against the parchment bg without dropping a hard black outline. */
  border: 1px solid color-mix(in srgb, var(--tile-stamp, var(--color-border-strong)) 55%, var(--color-border-strong));
  /* Glyph reads as ink from the same color family as the wash. */
  color: color-mix(in srgb, var(--tile-stamp, var(--color-text)) 30%, var(--color-text));
}
/* Body wrapper participates in the outer grid via display:contents so
   name and desc can land in distinct grid cells without restructuring
   the Laminar markup. */
.activity-card .activity-card__body { display: contents; }
.activity-card .activity-card__name {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  align-self: center;
}
.activity-card .activity-card__desc {
  grid-row: 2;
  grid-column: 1 / -1;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
}
/* Top-right control cluster: hide (eye) + favourite (star). */
.activity-card__actions {
  position: absolute;
  top: 4px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.activity-card__action {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  color: var(--color-muted);
  border-radius: 6px;
  transition: color 0.08s ease, background 0.08s ease, transform 0.08s ease;
}
.activity-card__action:hover {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text);
}
.activity-card__action:active { transform: scale(0.92); }
.activity-card__fav { font-size: 18px; }
.activity-card__fav.is-active { color: var(--color-primary); }
.activity-card__action-icon { width: 16px; height: 16px; display: block; }
/* Eye starts open (visible); the slash appears once the card is hidden. */
.activity-card__eye-slash { opacity: 0; transition: opacity 0.08s ease; }
.activity-card__hide.is-active { color: var(--color-text); }
.activity-card__hide.is-active .activity-card__eye-slash { opacity: 1; }

/* A hidden card (only seen while "show hidden" is on) is dimmed so it reads
   as set-aside, and its glyph desaturates toward the parchment. */
.activity-card--muted { opacity: 0.5; }
.activity-card--muted:hover { opacity: 0.72; }

/* Narrow phones: descriptions get squeezed in a 2-col grid, so the
   activity catalog becomes a single-column index strip. Glyph stamp
   spans both rows on the left; name + full-width description stack
   to its right. The "Suggest" card still sits at the top as a banner. */
@media (max-width: 479px) {
  .activity-grid { grid-template-columns: 1fr; }
  .activity-card .activity-card__glyph { grid-row: 1 / span 2; align-self: center; }
  .activity-card .activity-card__desc { grid-column: 2; }
}

/* Primary call-to-action card — vermilion field, cream ink, italic display
   type. Distinct as the showpiece while still occupying a grid cell. */
.activity-card--suggest {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 72px;
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.activity-card--suggest .activity-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-primary-text);
}

/* Tint variants — color is contained to the glyph stamp, not the whole tile,
   so the grid reads as a quiet catalog rather than a patchwork. */
.activity-card--vermilion { --tile-stamp: var(--tint-vermilion); }
.activity-card--teal      { --tile-stamp: var(--tint-teal); }
.activity-card--mustard   { --tile-stamp: var(--tint-mustard); }
.activity-card--rose      { --tile-stamp: var(--tint-rose); }
.activity-card--olive     { --tile-stamp: var(--tint-olive); }
.activity-card--plum      { --tile-stamp: var(--tint-plum); }
.activity-card--sky       { --tile-stamp: var(--tint-sky); }
.activity-card--peach     { --tile-stamp: var(--tint-peach); }

/* ── Suggest spin — slot reel ──────────────────────────────────────────
   Plays after tapping the Suggest card: a strip of catalog cards spins
   through a framed focus window and decelerates onto the picked activity,
   then gives a stamp "thunk". Item height (76px) is mirrored in
   SuggestSpin.ItemPx — keep the two in sync. */
.suggest-spin { position: fixed; inset: 0; z-index: 200; display: none; }
.suggest-spin.is-open { display: block; }

.suggest-spin__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-text) 60%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: suggest-fade 0.18s ease both;
}
@keyframes suggest-fade { from { opacity: 0; } to { opacity: 1; } }

.suggest-spin__panel {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.suggest-spin__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--color-surface);
  text-shadow: 2px 2px 0 var(--color-border-strong);
}

.suggest-reel {
  position: relative;
  width: 100%;
  height: 228px; /* 3 * item height */
  overflow: hidden;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-stamp);
}
/* Static viewport: soften the top and bottom rows so the eye settles on the
   focus band. The fade lives here (not on the strip) so it stays anchored to
   the window while the strip scrolls behind it. */
.suggest-reel__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 30%, #000 70%, transparent 99%);
  mask-image: linear-gradient(to bottom, transparent 1%, #000 30%, #000 70%, transparent 99%);
}
.suggest-reel__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 2.7s cubic-bezier(0.13, 0.86, 0.13, 1);
}
.suggest-reel__item {
  height: 76px;
  flex: 0 0 76px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.suggest-reel__glyph {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  border-radius: 10px;
  background: var(--tile-stamp, var(--color-bg-2));
  border: 1px solid color-mix(in srgb, var(--tile-stamp, var(--color-border-strong)) 55%, var(--color-border-strong));
  color: color-mix(in srgb, var(--tile-stamp, var(--color-text)) 30%, var(--color-text));
}
.suggest-reel__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}

/* Focus band: the centre row, framed with dashed rules and a vermilion
   needle biting in from each edge. Sits above the strip, ignores pointers. */
.suggest-reel__window {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 76px;
  transform: translateY(-50%);
  pointer-events: none;
  border-top: 2px dashed var(--color-border-strong);
  border-bottom: 2px dashed var(--color-border-strong);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.suggest-reel__window::before,
.suggest-reel__window::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.suggest-reel__window::before { left: 0;  border-left: 12px solid var(--color-primary); }
.suggest-reel__window::after  { right: 0; border-right: 12px solid var(--color-primary); }

/* Stamp "thunk" the moment the reel lands. */
.suggest-spin__panel.is-landed .suggest-reel__window {
  animation: suggest-thunk 0.42s cubic-bezier(0.2, 1.5, 0.3, 1) both;
}
@keyframes suggest-thunk {
  0%   { transform: translateY(-50%) scaleY(1); }
  35%  { transform: translateY(-50%) scaleY(1.18); background: color-mix(in srgb, var(--color-primary) 24%, transparent); }
  100% { transform: translateY(-50%) scaleY(1); }
}

/* Honour reduced-motion: collapse the long decel to a quick settle. */
@media (prefers-reduced-motion: reduce) {
  .suggest-reel__strip { transition-duration: 0.35s; }
  .suggest-spin__backdrop { animation: none; }
  .suggest-spin__panel.is-landed .suggest-reel__window { animation: none; }
}

/* Boards */
.board {
  display: grid;
  gap: 2px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
}
.cell {
  background: var(--color-surface);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(14px, 4vw, 22px);
  line-height: 1;
  color: var(--color-text);
}
.cell--btn { cursor: pointer; }
.cell--ship { background: var(--color-ship); color: white; }
.cell--hit  { background: var(--color-hit); color: white; }
.cell--miss { background: var(--color-miss); color: white; }
.cell--sunk { background: var(--color-sunk); color: white; }
.cell--x    { color: var(--color-p1); font-size: clamp(28px, 9vw, 56px); }
.cell--o    { color: var(--color-p2); font-size: clamp(28px, 9vw, 56px); }
.board--dense .cell--x,
.board--dense .cell--o { font-size: clamp(12px, 3.5vw, 20px); }
.cell--win  { background: #fef9c3; }
.cell--fresh {
  box-shadow: inset 0 0 0 3px #facc15;
  position: relative;
  z-index: 1;
}

.bs-grid    { grid-template-columns: repeat(10, 1fr); }
.bs-resolve-bar {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.bs-resolve-bar .banner { flex: 1; display: flex; align-items: center; justify-content: center; }
.bs-resolve-bar .btn { white-space: nowrap; }
.ttt-board  { max-width: 360px; width: 100%; margin-left: auto; margin-right: auto; }
.ttt-board.board--dense { max-width: 480px; }

.mem-board { max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; }
.mem-card { background: var(--color-primary); font-size: clamp(28px, 9vw, 56px); transition: background 120ms ease, opacity 120ms ease; }
.mem-card.mem-card--up { background: var(--color-surface); }
.mem-card.mem-card--matched { opacity: 0.45; }

.mem-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  min-width: 80px;
}
.mem-score--p1 { background: color-mix(in srgb, var(--color-p1) 12%, var(--color-surface)); color: var(--color-p1); }
.mem-score--p2 { background: color-mix(in srgb, var(--color-p2) 12%, var(--color-surface)); color: var(--color-p2); }
.mem-score.is-active.mem-score--p1 { border-color: var(--color-p1); }
.mem-score.is-active.mem-score--p2 { border-color: var(--color-p2); }
.mem-score__label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.8; }
.mem-score__value { font-size: 28px; font-weight: 800; line-height: 1; }

/* Checkers */
.ck-board { max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; }
.ck-cell { position: relative; }
.ck-cell--light { background: #f1e4c3; }
.ck-cell--dark  { background: #8b6b3a; }
.ck-cell--selected { box-shadow: inset 0 0 0 4px #facc15; z-index: 1; }
.ck-cell--target::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(250, 204, 21, 0.85);
  pointer-events: none;
}
.ck-cell--hint > .ck-piece { box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.9), 0 1px 3px rgba(0, 0, 0, 0.35); }
.ck-piece {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 4vw, 22px);
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.ck-piece--p1 { background: var(--color-p1); }
.ck-piece--p2 { background: var(--color-p2); }
.ck-piece--king::after { content: "♛"; color: #fde68a; }

/* Chess */
.chess-board { max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; }
.chess-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.chess-showcase .chess-board { max-width: 100%; }
.chess-showcase .chess-piece { font-size: clamp(16px, 4vw, 28px); }
.chess-showcase .chess-cell { cursor: default; }
.chess-cell { position: relative; }
.chess-cell--light { background: #f0d9b5; }
.chess-cell--dark  { background: #b58863; }
.chess-cell--last.chess-cell--light { background: #e8d36b; }
.chess-cell--last.chess-cell--dark  { background: #b09144; }
.chess-cell--selected { box-shadow: inset 0 0 0 4px #facc15; z-index: 1; }
.chess-cell--target::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.chess-cell--capture::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.38);
  pointer-events: none;
}
.chess-cell--check > .chess-piece {
  filter: drop-shadow(0 0 6px #dc2626) drop-shadow(0 0 12px #dc2626);
}
.chess-piece {
  font-size: clamp(22px, 7vw, 44px);
  line-height: 1;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.chess-piece--p1 { color: var(--color-p1); }
.chess-piece--p2 { color: var(--color-p2); }

.handoff {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-5);
}
.handoff__title { font-size: 28px; font-weight: 700; margin: 0; }
.handoff__sub   { color: var(--color-muted); max-width: 28ch; }

.fleet-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.fleet-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  background: var(--color-surface);
}
.fleet-pill.is-sunk {
  background: var(--color-sunk);
  color: white;
  border-color: var(--color-sunk);
  text-decoration: line-through;
}

.dice-faces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.die {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.die.is-rolling { animation: shake 0.5s ease; }
@keyframes shake {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-6px) rotate(-8deg); }
  50% { transform: translateY(0) rotate(8deg); }
  75% { transform: translateY(-3px) rotate(-4deg); }
}

.banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-align: center;
}
.banner--info { background: #eff6ff; color: #1e40af; }
.banner--win  { background: #ecfdf5; color: #065f46; }
.banner--hit  { background: #fee2e2; color: #991b1b; }
.banner--miss { background: #f1f5f9; color: #334155; }
.banner--warn {
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
  color: #7a4a00;
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 60%, var(--color-border-strong));
  font-size: 14px;
  font-weight: 600;
}

/* Player theming — applied to the page wrapper during a player's turn */
.player-page {
  --player-color: transparent;
  border-top: 8px solid var(--player-color);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0;
  padding: var(--space-3) var(--space-2) 0;
}
.player-page--p1 { --player-color: var(--color-p1); }
.player-page--p2 { --player-color: var(--color-p2); }

.player-page .banner--player {
  background: var(--player-color);
  color: white;
}
.player-page .btn--player {
  background: var(--player-color);
  color: white;
}
.player-page .btn--player:disabled { opacity: 0.5; }

.player-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--player-color);
  color: white;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

label.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--color-muted); font-weight: 600; }
label.field select { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); min-height: 40px; }

.spacer { flex: 1; }

.wa-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-4);
  min-height: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--color-text);
  word-break: break-word;
}
/* Phrase variant for multi-word prompts (e.g. categories) — smaller
   type so they fit without wrapping awkwardly. */
.wa-card--phrase { font-size: 32px; letter-spacing: 0; min-height: 140px; }
/* Single-letter variant — oversized, accent-colored, readable across
   the back seat. */
.wa-card--letter {
  font-size: 120px;
  line-height: 1;
  color: var(--color-primary);
  min-height: 180px;
}

/* Categories game: phrase + letter shown side-by-side. Equal width so
   both halves carry visual weight; cards stretch to match the taller
   card's height. Type sizes are tuned for narrower columns. */
.cg-round {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}
.cg-round > .wa-card { flex: 1 1 0; padding: var(--space-5) var(--space-3); }
.cg-round > .wa-card--phrase { font-size: 26px; min-height: 0; }
.cg-round > .wa-card--letter { font-size: 96px; min-height: 0; }

/* Offline mode: compact letter helper above the timer. */
.cg-letter-helper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.cg-letter-helper__card {
  font-size: 72px;
  min-height: 0;
  padding: var(--space-3) var(--space-5);
  min-width: 120px;
}

.wyr-prefix {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0;
}
.wyr-or {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* 20 questions: hidden state desaturates the card so the keeper can tell
   at a glance whether the word is exposed before passing the phone. */
.tq-card { position: relative; }
.tq-card--hidden .tq-card__text {
  color: var(--color-muted);
  font-size: 28px;
  letter-spacing: 1px;
}
.tq-card__toggle {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 14px;
  font-weight: 600;
}
.tq-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}
.tq-actions > :first-child { justify-self: start; }
.tq-actions > :last-child  { justify-self: end; }
.tq-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
}
.tq-counter__value {
  font-size: 40px;
  font-weight: 800;
  color: var(--color-primary);
}
.tq-counter__label { font-size: 12px; }

.rules-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.rules-card__title {
  margin: 0 0 var(--space-2) 0;
  font-size: 18px;
}
.rules-card__title + .rules-list { margin-top: 0; }
.rules-card .rules-list + .rules-card__title { margin-top: var(--space-4); }
.rules-list {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  line-height: 1.4;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 100;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.modal__title { margin: 0; font-size: 20px; font-weight: 700; }
.modal__body { margin: 0; color: var(--color-text); line-height: 1.5; }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }
.modal__version { margin: 0; text-align: right; font-size: 0.7rem; letter-spacing: 0.02em; }

/* Solitaire */
.sol {
  /* declare a containment context so cqi (container inline size)
     resolves to the .sol width — and 'card-w' / 'card-h' below are
     real lengths usable inside height-context calcs */
  container-type: inline-size;
  --sol-gap: 4px;
  --sol-card-w: calc((100cqi - 6 * var(--sol-gap)) / 7);
  --sol-card-h: calc(var(--sol-card-w) * 1.4);
  --sol-down-step: calc(var(--sol-card-h) * 0.20);
  --sol-up-step:   calc(var(--sol-card-h) * 0.32);
  --sol-card-red:   #b91c1c;
  --sol-card-black: #111827;
}

.sol-table { user-select: none; touch-action: manipulation; }

.sol--readonly .sol-card,
.sol--readonly .sol-slot,
.sol--readonly .sol-col-base,
.sol--readonly .sol-stock,
.sol--readonly .sol-waste { cursor: default; }


/* Stock/waste/foundations live in the same 7-column grid as the
   tableau so they line up. Stock+waste on the left, gap cell in the
   middle, four foundations on the right. */
.sol-top {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sol-gap);
  align-items: start;
}
.sol-stock       { grid-column: 1; }
.sol-waste       { grid-column: 2; }
.sol-foundation-0 { grid-column: 4; }
.sol-foundation-1 { grid-column: 5; }
.sol-foundation-2 { grid-column: 6; }
.sol-foundation-3 { grid-column: 7; }

.sol-tableau {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sol-gap);
  align-items: start;
}

.sol-col {
  position: relative;
  width: 100%;
  /* total height = one card + one step per card past the first.
     Scala passes counts that already exclude the bottom card. */
  min-height: calc(
    var(--sol-card-h)
    + var(--down-count, 0) * var(--sol-down-step)
    + var(--up-count, 0) * var(--sol-up-step)
  );
}
.sol-col-base {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1.5px dashed var(--color-border);
  background: transparent;
  z-index: 0;
  cursor: pointer;
}
.sol-col.is-target > .sol-col-base {
  border-color: var(--color-accent);
  background: rgba(245, 158, 11, 0.12);
}

.sol-card {
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  /* rank+suit anchored to the top-left, side-by-side, so they remain
     visible when the card is overlapped by a lower one in the tableau */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3px 5px;
  gap: 2px;
  font-weight: 700;
  line-height: 1;
  font-size: clamp(12px, 3.6vw, 18px);
  cursor: pointer;
}
.sol-card__rank { font-weight: 800; line-height: 1; }
.sol-card__suit { font-weight: 700; line-height: 1; }
.sol-card--red   { color: var(--sol-card-red); }
.sol-card--black { color: var(--sol-card-black); }
.sol-card--back {
  background: repeating-linear-gradient(45deg, #1e3a8a 0 6px, #1e40af 6px 12px);
  border: 1px solid #cbd5e1;
  /* extra rim so a stack of face-down cards reads as distinct cards
     rather than one big striped block */
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.45) inset,
    0 1px 2px rgba(0, 0, 0, 0.25);
  color: white;
}
.sol-card.is-selected {
  outline: 3px solid var(--color-accent);
  outline-offset: -2px;
}

.sol-slot {
  aspect-ratio: 2.5 / 3.5;
  border-radius: 6px;
  border: 1.5px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
}
.sol-slot.sol-card { border: 1px solid var(--color-border); background: var(--color-surface); }
.sol-foundation-hint {
  font-size: clamp(18px, 5vw, 28px);
  color: var(--color-muted);
}
.sol-foundation.is-target {
  border-color: var(--color-accent);
  background: rgba(245, 158, 11, 0.12);
}

/* Stacked tableau cards: absolutely positioned, offset by face-down + face-up steps. */
.sol-stacked {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--down, 0) * var(--sol-down-step) + var(--up, 0) * var(--sol-up-step));
  z-index: calc(var(--down, 0) + var(--up, 0) + 1);
}

/* Hangman */
.hangman-svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.hangman-frame line {
  stroke: var(--color-text);
  stroke-width: 4;
  stroke-linecap: round;
}
.hangman-part {
  stroke: var(--color-text);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}

.hangman-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.hangman-letter {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 28px;
  padding: 0 4px 4px;
  border-bottom: 3px solid var(--color-text);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.hangman-letter--miss {
  color: var(--color-hit);
  border-bottom-color: var(--color-hit);
}

.hangman-lives {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}
.hangman-lives__value {
  font-size: 28px;
  font-weight: 700;
}

.hangman-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.hangman-key {
  min-width: 40px;
  min-height: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
}
.hangman-key:active { transform: scale(0.97); }
.hangman-key:disabled { cursor: not-allowed; opacity: 0.7; }
.hangman-key--hit {
  background: #ecfdf5;
  border-color: #065f46;
  color: #065f46;
}
.hangman-key--miss {
  background: #fee2e2;
  border-color: #991b1b;
  color: #991b1b;
}

/* Mode chooser / materials / rules card / printable wrapper */
.mode-chooser {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mode-chooser__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.mode-chooser__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 480px) {
  .mode-chooser__options { grid-template-columns: 1fr 1fr; }
}
.mode-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}
.mode-option:active { transform: scale(0.99); }
.mode-option.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.mode-option__label { font-weight: 700; font-size: 17px; }
.mode-option__materials { color: var(--color-muted); font-size: 13px; }
.mode-option__hint { color: var(--color-muted); font-size: 13px; }

.mode-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.mode-bar__label { font-size: 13px; color: var(--color-muted); }
.mode-bar__current { font-weight: 700; font-size: 14px; }
.mode-bar__change { font-size: 13px; }

.materials-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-muted);
}
.materials-bar__item {
  padding: 2px var(--space-2);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border-radius: var(--radius-sm);
}

.rules-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}
.rules-card__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--space-2) 0;
}
.rules-list {
  margin: 0 0 var(--space-3) 0;
  padding-left: var(--space-4);
}
.rules-list li { margin-bottom: var(--space-1); line-height: 1.4; }

/* Printable A4 wrapper */
.printable {
  background: white;
  color: black;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-4);
}
.printable__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid #ccc;
}
.printable__title { font-size: 22px; font-weight: 700; margin: 0; }
.printable__brand { font-size: 13px; color: #666; letter-spacing: 1px; text-transform: uppercase; }
.printable__body { font-size: 14px; }
.printable__footer { margin-top: var(--space-4); font-size: 11px; text-align: center; border-top: 1px solid #ddd; padding-top: var(--space-2); }

/* Battleships printable — both players on one A4 page; parent cuts in half */
.bs-print-sheet { display: flex; flex-direction: column; gap: var(--space-2); }
.bs-print-player { display: flex; flex-direction: column; gap: var(--space-1); }
.bs-print-player__title { font-size: 14px; font-weight: 700; margin: 0; }
.bs-print-fleet { font-size: 11px; }
/* Fixed grid width: with 1fr columns the cells balloon and two player
   blocks overflow the page. 78mm × 2 keeps both players on one sheet. */
.bs-print-grids {
  display: grid;
  grid-template-columns: repeat(2, 78mm);
  justify-content: center;
  gap: var(--space-4);
}
.bs-print-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.bs-print-grid__label { font-size: 13px; font-weight: 700; text-align: center; }
.bs-print-grid__table {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 0;
  border: 1px solid black;
}
.bs-print-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 0.5px solid #888;
  background: white;
  color: black;
}
.bs-print-cell--header { background: #eee; font-weight: 700; }
.bs-print-cutline {
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: #666;
  padding: var(--space-2) 0;
}

/* Memory printable sheet */
.mem-print-sheet {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid black;
}
/* Hangman keeper card */
.hangman-keeper-word {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 6px;
  padding: var(--space-4);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

/* Categories printable sheet */
.cg-print-sheet { font-size: 12px; }
.cg-print-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.cg-print-th, .cg-print-td {
  border: 1px solid #888;
  padding: var(--space-2);
  text-align: center;
  height: 36px;
}
.cg-print-th { background: #eee; font-weight: 700; font-size: 13px; }
.cg-print-th--cat, .cg-print-td--cat { text-align: left; width: 22%; }
.cg-print-th--score, .cg-print-td--score { width: 12%; }

.mem-print-card {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border: 1px dashed #888;
  background: white;
}

/* Sudoku */
.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 0;
  /* Fit both axes: never wider than container/480px, never taller than viewport
     minus space for status + number pad + controls. */
  width: min(100%, 480px, calc(100svh - 260px));
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: var(--color-border);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-sm);
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
}
.sudoku-cell {
  position: relative;
  background: var(--color-surface);
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: clamp(13px, 3.6vmin, 22px);
  color: var(--color-text);
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.sudoku-cell.is-fixed { font-weight: 800; color: var(--color-text); background: color-mix(in srgb, var(--color-border) 18%, var(--color-surface)); }
.sudoku-cell.is-peer { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
.sudoku-cell.is-fixed.is-peer { background: color-mix(in srgb, var(--color-primary) 14%, color-mix(in srgb, var(--color-border) 18%, var(--color-surface))); }
.sudoku-cell.is-same { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)); }
.sudoku-cell.is-selected { background: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface)); box-shadow: inset 0 0 0 3px var(--color-primary); z-index: 1; }
.sudoku-cell.is-conflict { color: var(--color-hit); }
.sudoku-cell.is-conflict.is-selected { box-shadow: inset 0 0 0 3px var(--color-hit); }
.sudoku-cell--boxl { border-left: 2px solid var(--color-text); }
.sudoku-cell--boxt { border-top: 2px solid var(--color-text); }
.sudoku-cell__value { line-height: 1; }
/* Emoji variants: fewer, bigger cells. */
.sudoku-board--4 { width: min(100%, 360px, calc(100svh - 260px)); }
.sudoku-board--4 .sudoku-cell { font-size: clamp(26px, 9vmin, 44px); }
.sudoku-board--6 { width: min(100%, 420px, calc(100svh - 260px)); }
.sudoku-board--6 .sudoku-cell { font-size: clamp(20px, 6vmin, 32px); }
.sudoku-pencil {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-size: clamp(6px, 1.4vmin, 10px);
  font-weight: 500;
  color: var(--color-muted);
}
.sudoku-pencil__digit {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sudoku-pad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  max-width: 480px;
  width: 100%;
  margin: var(--space-5) auto 0;
}
.sudoku-pad__btn {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-2);
  font-size: 18px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 40px;
}
.sudoku-pad__btn:active { transform: scale(0.97); }
.sudoku-pad__btn:disabled { opacity: 0.35; cursor: default; }
.sudoku-pad__btn:disabled:active { transform: none; }
.sudoku-pad__btn.is-pencil { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)); }
.sudoku-pad__btn--erase { color: var(--color-muted); }
.sudoku-pad--emoji .sudoku-pad__btn { font-size: 24px; }
.sudoku-controls { gap: var(--space-2); }
.sudoku-controls .btn.is-active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.sudoku-print-actions {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Sudoku printable sheet — 2 columns x 3 rows = 6 puzzles per page.
   A4 body area after page margins, printable header and footer leaves
   ~247mm tall. Three 75mm puzzles + two 5mm gaps = 235mm, comfortable. */
.sudoku-print-sheet {
  display: grid;
  grid-template-columns: repeat(2, 75mm);
  grid-auto-rows: 75mm;
  gap: 5mm;
  justify-content: center;
}
.sudoku-print-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  border: 2px solid black;
  width: 75mm;
  height: 75mm;
}
.sudoku-print-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11pt;
  font-weight: 700;
  border: 1px solid #aaa;
  min-width: 0;
  min-height: 0;
}
.sudoku-print-cell--boxl { border-left: 2px solid black; }
.sudoku-print-cell--boxt { border-top: 2px solid black; }
/* Emoji variants: legend above each board, board shrunk to leave room for it
   inside the same 75mm sheet slot. */
.sudoku-print-puzzle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2mm;
}
.sudoku-print-legend { font-size: 13pt; line-height: 1; letter-spacing: 1.5mm; }
.sudoku-print-board--4, .sudoku-print-board--6 { width: 65mm; height: 65mm; }
.sudoku-print-board--4 .sudoku-print-cell { font-size: 18pt; }
.sudoku-print-board--6 .sudoku-print-cell { font-size: 13pt; }

/* Minesweeper */
.ms-board {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.ms-cell {
  position: relative;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(12px, 3vw, 18px);
  line-height: 1;
  cursor: pointer;
}
.ms-cell--revealed { background: var(--color-surface); cursor: default; }
.ms-cell--mine { background: color-mix(in srgb, var(--color-hit) 60%, var(--color-surface)); }
.ms-cell--flagged { background: color-mix(in srgb, #facc15 30%, var(--color-surface)); }
.ms-cell__face { display: flex; align-items: center; justify-content: center; }
.ms-cell__face--n1 { color: #1d4ed8; }
.ms-cell__face--n2 { color: #15803d; }
.ms-cell__face--n3 { color: #b91c1c; }
.ms-cell__face--n4 { color: #6b21a8; }
.ms-cell__face--n5 { color: #92400e; }
.ms-cell__face--n6 { color: #0e7490; }
.ms-cell__face--n7 { color: #1f2937; }
.ms-cell__face--n8 { color: #4b5563; }
.ms-mode { display: inline-flex; gap: 0; margin: var(--space-3) auto var(--space-4); }
.ms-mode__icon { margin-right: var(--space-1); }
.ms-status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  max-width: 560px;
  width: 100%;
  margin: var(--space-3) auto var(--space-4);
}
.ms-flags {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  justify-self: start;
}
.ms-banner {
  font-weight: 700;
  justify-self: center;
  text-align: center;
}
.ms-status > button:last-child { justify-self: end; }

/* Timer */
.timer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.timer__display {
  --pct: 100%;
  position: relative;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)) var(--pct),
    var(--color-surface) var(--pct)
  );
  text-align: center;
  border: 2px solid var(--color-border);
  transition: background 200ms linear;
}
.timer__display.is-running { border-color: var(--color-primary); }
.timer__display.is-done { border-color: var(--color-hit); background: color-mix(in srgb, var(--color-hit) 18%, var(--color-surface)); }
.timer__value { font-size: 56px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.timer__controls { display: flex; gap: var(--space-2); }
.timer__presets { display: flex; gap: var(--space-2); }
.timer__presets .btn.is-active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* Paint */
.paint {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.paint__canvas {
  display: block;
  width: 100%;
  height: min(60vh, 480px);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  /* Paper background comes from the buffer fill (PaperColor in Paint.scala). */
  /* The canvas owns its touches entirely — no scroll/zoom while drawing. */
  touch-action: none;
  cursor: crosshair;
}
.paint__palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.paint__swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--swatch);
  cursor: pointer;
}
.paint__swatch.is-active {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.paint__sizes { display: flex; gap: var(--space-2); }
.paint__size {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.paint__size.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
}
.paint__size-dot {
  border-radius: 50%;
  background: currentColor;
}

/* Draw & Guess */
.draw-guess__word {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1px;
  text-align: center;
  overflow-wrap: anywhere;
}
.draw-guess__peek { flex: 1; }
.draw-guess__peek.is-peeking {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.draw-guess__guessed { flex: 1; }

.header__lede { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.header__glyph {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  border-radius: 12px;
  background: var(--tile-stamp, var(--color-bg-2));
  border: 1.5px solid color-mix(in srgb, var(--tile-stamp, var(--color-border-strong)) 55%, var(--color-border-strong));
  color: color-mix(in srgb, var(--tile-stamp, var(--color-text)) 30%, var(--color-text));
  box-shadow: var(--shadow-stamp-sm);
}
.header__titles { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.header__rule {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--tile-stamp, var(--color-border));
}
.header__tagline {
  margin: 4px 0 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.print-only { display: none; }

@page { margin: 10mm; }

@media print {
  html, body { margin: 0; padding: 0; }
  .no-print { display: none !important; }
  .print-only { display: block; }
  .app { max-width: none; padding: 0; margin: 0; }
  .printable { margin: 0; }
  .printable__header { margin-bottom: var(--space-2); padding-bottom: var(--space-1); }
  .board { background: black; border-color: black; gap: 1px; }
  .cell { background: white !important; color: black !important; border: none; }
  .cell--ship { background: #ddd !important; }
  .card { border: 1px solid black; box-shadow: none; }
  .page-break { page-break-after: always; }
  .printable { border: none; padding: 0; }
  .printable + .printable { page-break-before: always; }
  .bs-print-player { page-break-inside: avoid; }
  .bs-print-cell { border: 1px solid black; }
  .rules-card { border: 1px solid black; box-shadow: none; }
  .mode-chooser, .mode-bar { display: none !important; }
  .stack-lg > * + * { margin-top: 0; }
  .stack > * + * { margin-top: 0; }
  .printable {
    display: flex;
    flex-direction: column;
    /* 2mm under the page body: exactly-full sheets round over in print
       and spill a phantom empty page. */
    min-height: calc(297mm - 22mm);
  }
  .printable__footer { margin-top: auto; }
}

/* Maze — SVG board, drag-to-trace play, batch-print sheet.
   Geometry is drawn in CELL-unit space and scaled by the viewBox; the board is
   always square so its aspect-ratio matches the viewBox, which keeps the
   pointer→cell mapping in Maze.scala exact. */
.maze-svg {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: visible;       /* let the border stroke straddle the viewBox edge */
  touch-action: none;      /* claim drags so the page doesn't scroll under them */
  user-select: none;
  cursor: pointer;
}
.maze-border {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 0.7;
  stroke-linejoin: round;
}
.maze-wall {
  stroke: var(--color-border-strong);
  stroke-width: 0.7;
  stroke-linecap: round;
}
.maze-trail {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.maze-start { fill: color-mix(in srgb, var(--color-primary) 40%, var(--color-surface)); }
.maze-instruction { margin: 0 auto; max-width: 34ch; }
.maze-controls { margin-top: var(--space-2); }

.maze-print-actions { max-width: 360px; margin-left: auto; margin-right: auto; }
.maze-print-sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6mm;
  justify-content: center;
  align-content: start;
}
.maze-print-sheet--single { grid-template-columns: 1fr; }
.maze-print-board { display: flex; align-items: center; justify-content: center; }
.maze-print-svg { width: 100%; height: auto; overflow: visible; }
.maze-print-board--easy   { width: 88mm;  height: 88mm;  }
.maze-print-board--medium { width: 92mm;  height: 92mm;  }
.maze-print-board--hard   { width: 180mm; height: 180mm; }
.maze-print-svg .maze-border,
.maze-print-svg .maze-wall { stroke: black; stroke-width: 0.6; }

/* Dot to Dot — tap numbered dots in order; the picture is the reward.
   Geometry lives in a 100-unit viewBox (see DotToDot.scala) so the same
   puzzle serves the responsive board and the fixed-mm print sheet. */
.dots-svg {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  touch-action: manipulation;
  user-select: none;
}
.dots-instruction { margin: 0 auto; max-width: 34ch; }
.dots-controls { margin-top: var(--space-2); }
.dots-path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.dots-dot { cursor: pointer; }
.dots-hit { fill: transparent; }          /* generous invisible tap target */
.dots-mark {
  fill: var(--color-border-strong);
  transition: fill 150ms ease;
  pointer-events: none;
}
.dots-num {
  font-size: 3.2px;
  font-weight: 700;
  fill: var(--color-text-muted, #777);
  pointer-events: none;
  transition: opacity 300ms ease;
}
.dots-dot.is-linked .dots-mark { fill: var(--color-primary); }
/* The source emoji hides under the outline until the loop closes; the faint
   interior line-art (the "printed eye" of paper dot-to-dots) shows throughout. */
.dots-reveal { opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
.dots-detail { pointer-events: none; }
.dots-svg.is-done .dots-reveal { opacity: 1; }
.dots-svg.is-done .dots-detail { opacity: 0; }
.dots-svg.is-done .dots-num { opacity: 0; }
.dots-svg.is-done .dots-mark { fill: var(--color-primary); }

.dots-print-actions { max-width: 360px; margin-left: auto; margin-right: auto; }
.dots-print-sheet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8mm;
  justify-items: center;
  align-content: start;
}
/* Dashed cut-line around each puzzle. */
.dots-print-board {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 105mm;
  height: 105mm;
  border: 0.3mm dashed #999;
  padding: 3mm;
}
.dots-print-svg { width: 100%; height: auto; overflow: visible; }
.dots-print-mark { fill: black; }
.dots-print-start { fill: none; stroke: black; stroke-width: 0.35; }
.dots-print-num { font-size: 3px; font-weight: 600; fill: black; }

/* Lab: generator eyeball page (/activity/dot-to-dot/lab), dev only. */
.dots-lab {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  /* break out of the app's narrow content column — dev page only */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.dots-lab-card { width: 360px; }
.dots-lab-card--rejected { background: #fee; border-radius: 6px; padding: 4px; }
.dots-lab-meta { font-size: 14px; text-align: center; }
.dots-lab-svg { width: 100%; aspect-ratio: 1 / 1; background: white; border-radius: 6px; }
.dots-lab-outline { fill: none; stroke: #c33; stroke-width: 0.8; stroke-linejoin: round; }
.dots-lab-reveal { opacity: 0.45; }
.dots-lab-mark { fill: #333; }

/* ---- Word search ---- */
.word-search-grid {
  display: grid;
  grid-template-columns: repeat(var(--ws-size), 1fr);
  grid-template-rows: repeat(var(--ws-size), 1fr);
  gap: 0;
  width: min(100%, 460px, calc(100svh - 320px));
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: var(--color-border);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-sm);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.word-search-cell {
  position: relative;
  background: var(--color-surface);
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: clamp(11px, 3.2vmin, 20px);
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
}
.word-search-cell.is-found {
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface));
  font-weight: 800;
}
.word-search-cell.is-selected {
  background: color-mix(in srgb, var(--color-primary) 38%, var(--color-surface));
  box-shadow: inset 0 0 0 2px var(--color-primary);
  z-index: 1;
}
.word-search-words {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}
.word-search-words__title {
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
  color: var(--color-muted);
}
.word-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
}
.word-search-list__item {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.word-search-list__item.is-found {
  text-decoration: line-through;
  color: var(--color-muted);
  font-weight: 500;
}
.word-search-controls { gap: var(--space-2); margin-top: var(--space-2); }
.word-search-print-actions { max-width: 360px; margin-left: auto; margin-right: auto; }

/* Word search printable sheet — two boards tiled side by side (one for hard),
   each a grid with its own word list below. Tiling across, not stacking down,
   keeps both boards plus their lists on a single A4 page. */
.word-search-print-sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10mm;
  justify-content: center;
  align-content: start;
}
.word-search-print-sheet--single { grid-template-columns: 1fr; }
.word-search-print-board {
  display: flex;
  flex-direction: column;
  gap: 4mm;
  align-items: center;
  break-inside: avoid;
  page-break-inside: avoid;
}
.word-search-print-grid {
  display: grid;
  grid-template-columns: repeat(var(--ws-size), 1fr);
  grid-template-rows: repeat(var(--ws-size), 1fr);
  border: 2px solid black;
}
.word-search-print-board--easy   .word-search-print-grid { width: 84mm;  height: 84mm;  }
.word-search-print-board--medium .word-search-print-grid { width: 84mm;  height: 84mm;  }
.word-search-print-board--hard   .word-search-print-grid { width: 150mm; height: 150mm; }
.word-search-print-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #bbb;
  min-width: 0;
  min-height: 0;
}
.word-search-print-words { width: 100%; }
.word-search-print-words__title { margin: 0 0 2mm; font-size: 10pt; }
.word-search-print-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5mm 6mm;
  font-size: 10pt;
  font-weight: 600;
  text-transform: uppercase;
}

/* ---- Guide the robot ---- */
.robot-instruction,
.robot-hint { margin: 0 auto; max-width: 38ch; }

.robot-board {
  display: grid;
  grid-template-columns: repeat(var(--robot-size), 1fr);
  grid-template-rows: repeat(var(--robot-size), 1fr);
  gap: 4px;
  width: min(92vw, 360px, calc(100svh - 360px));
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 6px;
  background: var(--color-bg-2);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-stamp-sm);
}
.robot-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: clamp(16px, 6vmin, 30px);
  line-height: 1;
  user-select: none;
}
.robot-bot { line-height: 1; }

/* Heading caret for the turning tiers: a triangle pinned to the top-centre of
   the cell, then the whole overlay is rotated about the cell centre so the
   caret orbits to — and points along — the robot's leading edge. */
.robot-facing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1px;
  font-size: 0.5em;
  font-weight: 900;
  line-height: 1;
  color: var(--color-primary);
  pointer-events: none;
}
.robot-facing--up    { transform: rotate(0deg); }
.robot-facing--right { transform: rotate(90deg); }
.robot-facing--down  { transform: rotate(180deg); }
.robot-facing--left  { transform: rotate(270deg); }
.robot-cell--wall { background: color-mix(in srgb, var(--color-border-strong) 14%, var(--color-bg-2)); }
.robot-cell--robot { background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)); }

.robot-build { align-items: center; }
.robot-program {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.6rem;
}
.robot-program__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.robot-program__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Horizontal spacing comes from the .robot-gap elements between chips; only
     the row gap is needed here for wrapping. */
  gap: var(--space-1) 0;
  max-width: 420px;
}
.robot-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.35rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
.robot-chip:active { opacity: 0.55; }

/* Insertion points between steps. A thin sliver normally; while a palette
   button is being dragged the whole strip widens its gaps into drop zones, and
   the one under the pointer lights up. */
.robot-gap {
  align-self: stretch;
  width: 4px;
  min-height: 1.9rem;
  border-radius: 3px;
  transition: width 0.1s ease, background 0.1s ease;
}
/* While dragging, every gap shows as a faint slot... */
.robot-program__chips.is-dragging .robot-gap {
  width: 8px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
/* ...and the gap under the pointer becomes a bold, glowing insertion bar so the
   drop point is unmistakable. */
.robot-program__chips.is-dragging .robot-gap.is-drop {
  width: 14px;
  background: var(--color-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.robot-gap--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 9rem;
  padding: var(--space-2) var(--space-3);
  border: 1.5px dashed transparent;
  border-radius: var(--radius-sm);
}
.robot-gap--empty.is-drop {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.robot-program__empty { font-size: 0.9rem; }

.robot-dpad {
  display: grid;
  grid-template-columns: repeat(3, 3.2rem);
  grid-auto-rows: 3.2rem;
  gap: var(--space-2);
  justify-content: center;
}
.robot-dpad__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-stamp-sm);
  cursor: grab;
  touch-action: none; /* claim drags so the page doesn't scroll under them */
}
.robot-dpad__btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.robot-dpad__btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }

.robot-controls { justify-content: center; flex-wrap: wrap; margin-top: var(--space-2); }
.robot-print-actions { max-width: 360px; margin-left: auto; margin-right: auto; }

/* Printable worksheet — boards tiled two-up, each with a row of boxes beneath
   for writing the arrow path by hand. */
.robot-print-sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10mm;
  justify-content: center;
  align-content: start;
}
.robot-print-item {
  display: flex;
  flex-direction: column;
  gap: 4mm;
  align-items: center;
  break-inside: avoid;
  page-break-inside: avoid;
}
.robot-print-board {
  display: grid;
  grid-template-columns: repeat(var(--robot-size), 1fr);
  grid-template-rows: repeat(var(--robot-size), 1fr);
  border: 2px solid black;
  width: 78mm;
  height: 78mm;
}
.robot-print-item--easy .robot-print-board { width: 70mm; height: 70mm; }
.robot-print-cell {
  border: 1px solid #bbb;
  border-radius: 0;
  aspect-ratio: auto;
  background: #fff;
  font-size: 7mm;
}
.robot-print-cell.robot-cell--wall { background: #e5e5e5; }
.robot-print-cell .robot-facing { color: #000; }
.robot-print-write { width: 100%; }
.robot-print-write__label { display: block; font-size: 10pt; margin-bottom: 1.5mm; }
.robot-print-write__boxes { display: flex; flex-wrap: wrap; gap: 2mm; }
.robot-print-box {
  display: inline-block;
  width: 8mm;
  height: 8mm;
  border: 1px solid #555;
  border-radius: 1mm;
}

/* ---- P2P lobby ---- */
.p2p-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 3rem;
  letter-spacing: 0.4rem;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2, #f3f4f6);
  border-radius: 12px;
  font-weight: 700;
}

.p2p-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  letter-spacing: 0.4rem;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  width: 8ch;
  min-height: 64px;
  box-sizing: border-box;
  border: 2px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-md);
  background: var(--surface-2, #f3f4f6);
}
.p2p-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ---------- Word Builder ---------- */

.wb { display: flex; flex-direction: column; align-items: stretch; }

.wb-picture-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.wb-picture {
  font-size: 96px;
  line-height: 1;
  text-align: center;
  padding: var(--space-3) 0;
  user-select: none;
}

.wb-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
}
.wb-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 56px;
  padding: 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: default;
}
.wb-slot--empty { border-style: dashed; background: var(--color-bg-2); }
.wb-slot--filled {
  border-style: solid;
  border-color: var(--color-border-strong);
  cursor: pointer;
  box-shadow: var(--shadow-stamp-sm);
}
.wb-slot--filled:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.wb-slots--correct .wb-slot {
  border-color: #065f46;
  background: color-mix(in srgb, #065f46 10%, var(--color-surface));
}
.wb-slots--wrong { animation: wb-shake 0.4s ease-in-out 1; }
.wb-slots--wrong .wb-slot--filled {
  border-color: var(--color-hit);
  background: color-mix(in srgb, var(--color-hit) 10%, var(--color-surface));
}
@keyframes wb-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

.wb-pool {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}
.wb-tile {
  min-width: 48px;
  min-height: 56px;
  padding: 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-stamp-sm);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.1s ease;
}
.wb-tile:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.wb-tile--used {
  visibility: hidden;
  pointer-events: none;
}

/* Print worksheet */
.wb-print-sheet { display: flex; flex-direction: column; gap: 16px; }
.wb-print-row {
  display: grid;
  grid-template-columns: 64px auto auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px dashed #999;
}
.wb-print-emoji { font-size: 44px; line-height: 1; text-align: center; }
.wb-print-pool { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-print-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 32px;
  font-size: 18px;
  font-weight: 700;
  border: 1.5px solid #333;
  border-radius: 4px;
}
.wb-print-arrow { font-size: 22px; color: #555; }
.wb-print-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-print-slot {
  display: inline-block;
  width: 28px;
  height: 32px;
  border: 1.5px dashed #333;
  border-radius: 4px;
}

/* Word stem (read direction: word -> picture) */
.wb-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  padding: var(--space-3) 0;
  user-select: none;
  color: var(--color-text);
}
.wb-word--correct { color: #065f46; }

.wb-pic-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-2);
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.wb-pic-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  font-size: 72px;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-stamp-sm);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.1s ease, background 0.1s ease;
}
.wb-pic-choice:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.wb-pic-choice--correct {
  border-color: #065f46;
  background: color-mix(in srgb, #065f46 12%, var(--color-surface));
}
.wb-pic-choice--wrong {
  border-color: var(--color-hit);
  background: color-mix(in srgb, var(--color-hit) 12%, var(--color-surface));
  animation: wb-shake 0.4s ease-in-out 1;
}

/* Print row for read direction */
.wb-print-row--read {
  grid-template-columns: auto auto 1fr;
}
.wb-print-word {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0 8px;
}
.wb-print-pics { display: flex; gap: 10px; flex-wrap: wrap; }
.wb-print-pic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  border: 1.5px solid #333;
  border-radius: 8px;
}

/* Math Practice */
.mp { display: flex; flex-direction: column; align-items: stretch; }

.mp-prompt-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.mp-prompt {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-text);
  text-align: center;
  min-height: 1.4em;
}

.mp-stem {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  padding: var(--space-3) var(--space-2);
}

.mp-expr {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-align: center;
}

.mp-numeral {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: var(--color-text);
}
.mp-numeral--side { font-size: 72px; }

.mp-group {
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  max-width: min(520px, 92vw);
}

.mp-pic-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.mp-op {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--color-text);
}
.mp-op--vs { color: var(--color-text-muted, #777); font-size: 32px; }
.mp-op--q  { color: var(--color-text-muted, #777); font-size: 56px; }

/* Numeral shown above a pictured group, so the picture supports the numeral. */
.mp-operand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.mp-operand-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--color-text);
}

/* Crossed-out item in a take-away (subtraction) group. */
.mp-strike {
  display: inline-block;
  position: relative;
  opacity: 0.5;
}
.mp-strike::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  border-top: 3px solid var(--color-hit);
  transform: rotate(-12deg);
}

.mp-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  max-width: 560px;
  margin: 0 auto;
}

.mp-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-stamp-sm);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}
.mp-choice:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-border-strong); }
.mp-choice-num { font-size: 40px; line-height: 1; }
.mp-choice-pic { font-size: 24px; line-height: 1.25; word-break: break-word; }
.mp-choice-sym { font-size: 56px; line-height: 1; font-weight: 700; }
.mp-choice--pic { min-height: 84px; }
.mp-choice--correct {
  border-color: #065f46;
  background: color-mix(in srgb, #065f46 12%, var(--color-surface));
}
.mp-choice--wrong {
  border-color: var(--color-hit);
  background: color-mix(in srgb, var(--color-hit) 12%, var(--color-surface));
  animation: mp-shake 0.4s ease-in-out 1;
}
@keyframes mp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

/* Clock — telling the time */
.clock-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.clock-format__label {
  color: var(--color-muted);
  font-size: 14px;
}

.clock-digital {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-align: center;
}

.clock-choice-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.clock-analog { display: inline-flex; }
.clock-dial { display: block; }
/* SVG text honours CSS font/anchor via the wrapper. */
.clock-dial text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  fill: var(--color-text);
  text-anchor: middle;
  dominant-baseline: central;
}

.clock-daypart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.clock-daypart__emoji { font-size: 34px; line-height: 1; }
.clock-daypart__label { font-size: 16px; }

/* Math print worksheet */
.mp-print-sheet { display: flex; flex-direction: column; gap: 12px; }
.mp-print-row {
  display: grid;
  grid-template-columns: 1fr auto 96px;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px dashed #999;
  min-height: 48px;
}
.mp-print-stem { font-size: 22px; }
.mp-print-expr { font-weight: 700; letter-spacing: 0.04em; }
.mp-print-group { font-size: 24px; line-height: 1.2; }
.mp-print-pic { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-print-op { font-weight: 700; font-size: 22px; }
.mp-print-eq { font-weight: 700; font-size: 22px; }
.mp-print-slot {
  border-bottom: 1.5px solid #333;
  width: 96px;
  height: 26px;
}
.mp-print-row--cmp {
  grid-template-columns: 1fr auto 1fr;
  justify-items: center;
}
.mp-print-slot--box {
  border: 1.5px dashed #333;
  border-bottom: 1.5px dashed #333;
  border-radius: 4px;
  width: 56px;
  height: 36px;
}

/* Reading: age-banded book list. Sections stack; each book is a row that
   wraps on narrow screens (title block above, links below). */
.reading-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.reading-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.reading-band {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.reading-books {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.reading-book {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.reading-book__text { flex: 1 1 240px; }
.reading-book__title { font-weight: 700; }
.reading-book__author { color: var(--color-muted); }
.reading-book__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.reading-link {
  font-size: 14px;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: transparent;
}
.reading-link:hover { background: var(--color-bg-2); }
.reading-link--free {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.reading-link--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  line-height: 0;
}

/* ---------- Freeze Dance ---------- */
.freeze-instruction { max-width: 40ch; margin: 0 auto; }

.freeze-source-panel,
.freeze-stage,
.freeze-actions { width: 100%; max-width: 480px; margin-inline: auto; }

.freeze-source { width: 100%; }
.freeze-hint { max-width: 42ch; margin: 0 auto; }
.freeze-yt-note { font-size: 13px; }

/* One-tap suggested songs — the primary path. Stamped tinted cards in a grid. */
.freeze-suggestions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 520px) {
  .freeze-suggestions { grid-template-columns: 1fr; }
}

.freeze-song-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-stamp-sm);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.12s ease;
}
.freeze-song-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--color-border-strong);
}
.freeze-song-card:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-border-strong);
}
.freeze-song-card.is-active { background: var(--tint-plum); }
.freeze-song-card__glyph {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: var(--tint-plum);
  font-size: 14px;
}
.freeze-song-card.is-active .freeze-song-card__glyph { background: var(--color-surface); }
.freeze-song-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}
.freeze-song-card__by { font-size: 12px; color: var(--color-muted); }
.freeze-song-card.is-active .freeze-song-card__by { color: var(--color-text); }

/* Secondary "bring your own" block — collapsed behind a toggle to keep calm. */
.freeze-add { display: flex; flex-direction: column; gap: var(--space-2); }
.freeze-add__toggle {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  padding: var(--space-2);
}
.freeze-add__toggle:hover { color: var(--color-text); }
.freeze-add__chev { display: inline-block; transition: transform 0.15s ease; }
.freeze-add__toggle.is-open .freeze-add__chev { transform: rotate(90deg); }
.freeze-add__body {
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1.5px dashed var(--color-border);
}
.freeze-add__label {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  margin-top: var(--space-2);
}
.freeze-add__label:first-child { margin-top: 0; }

.freeze-link__row { gap: var(--space-2); justify-content: center; }
.freeze-link__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.freeze-yt {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-stamp-sm);
  background: #000;
}
/* Show the video box only once a YouTube link is loaded — a class `display`
   would otherwise override the `hidden` attribute and leave an empty black box. */
.freeze-yt[hidden] { display: none; }
.freeze-audio { display: none; }

/* Native file input hidden behind a styled <label> button. */
.freeze-file { cursor: pointer; display: inline-flex; }
.freeze-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.freeze-stage {
  --freeze-tint: var(--tint-plum);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-stamp);
  background: var(--color-surface);
  transition: background 0.18s ease;
}
.freeze-stage__emoji { font-size: 88px; line-height: 1; }
.freeze-stage__cue {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.freeze-stage.is-dancing { background: var(--freeze-tint); }
.freeze-stage.is-dancing .freeze-stage__emoji {
  animation: freeze-bounce 0.5s ease-in-out infinite alternate;
}
.freeze-stage.is-frozen { background: #d7e7f6; }
.freeze-stage.is-frozen .freeze-stage__emoji {
  filter: drop-shadow(0 0 8px #8fb9e3);
}

@keyframes freeze-bounce {
  from { transform: translateY(0) rotate(-7deg); }
  to   { transform: translateY(-14px) rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .freeze-stage.is-dancing .freeze-stage__emoji { animation: none; }
}

.freeze-links { font-size: 13px; }
.freeze-links a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.freeze-links a:hover { text-decoration: underline; }
.freeze-links__sep { color: var(--color-muted); }

/* Phase visibility + video stage. Placed last so these win over .freeze-stage
   display/background rules above (the `hidden` attr is otherwise overridden by
   `.freeze-stage { display:flex }`, and `.is-dancing` would keep its tint). */
.freeze-stage[hidden] { display: none; }
.freeze-video { width: 100%; }
.freeze-stage.has-video {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

/* Roomier setup rhythm — the top of the page felt cramped (instruction, tabs and
   hint were stacked with no breathing room). Appended last so the [hidden] guard
   wins over the display:flex below. */
.freeze-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.freeze-setup[hidden] { display: none; }
.freeze-instruction,
.freeze-hint { line-height: 1.55; }
/* a touch more air between the panel hint and the cards */
.freeze-source.stack > * + * { margin-top: var(--space-4); }

/* Hot Potato — same stage furniture as Freeze Dance: a centred focal panel that
   tints while passing and flashes on the catch. */
.potato-stage,
.potato-actions { width: 100%; max-width: 480px; margin-inline: auto; }
.potato-instruction { line-height: 1.55; }

.potato-stage {
  --potato-tint: var(--tint-vermilion);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-stamp);
  background: var(--color-surface);
  transition: background 0.18s ease;
}
.potato-stage__emoji { font-size: 88px; line-height: 1; }
.potato-stage__cue {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.potato-stage.is-passing { background: var(--potato-tint); }
.potato-stage.is-passing .potato-stage__emoji {
  animation: potato-toss 0.42s ease-in-out infinite alternate;
}
.potato-stage.is-caught { background: #ef8b6f; }
.potato-stage.is-caught .potato-stage__emoji {
  animation: potato-pop 0.4s ease-out;
}

@keyframes potato-toss {
  from { transform: translateX(-16px) rotate(-12deg); }
  to   { transform: translateX(16px) rotate(12deg); }
}
@keyframes potato-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .potato-stage.is-passing .potato-stage__emoji,
  .potato-stage.is-caught .potato-stage__emoji { animation: none; }
}

/* Placed after the display:flex rule so the hidden attr wins (same gotcha as
   the freeze stage). */
.potato-stage[hidden] { display: none; }

/* ---------- Jigsaw ---------- */
.jigsaw-svg {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 600 / 1140;   /* board (600) + gap + tray, see Jigsaw.scala */
  overflow: visible;          /* let edge tabs straddle the board border */
  touch-action: none;         /* claim drags so the page doesn't scroll under them */
  user-select: none;
}
.jigsaw-svg.is-solved { aspect-ratio: 1 / 1; }   /* tray cropped away once done */
.jigsaw-frame {
  fill: var(--color-surface);
  stroke: var(--color-border-strong);
  stroke-width: 2;
  stroke-dasharray: 7 7;
  opacity: 0.6;
}
.jigsaw-ghost {
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.jigsaw-tray-divider {
  stroke: var(--color-border);
  stroke-width: 1.5;
  stroke-dasharray: 4 7;
  opacity: 0.7;
}
.jigsaw-piece {
  cursor: grab;
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.3));
}
.jigsaw-piece:active { cursor: grabbing; }
.jigsaw-piece.is-placed {
  pointer-events: none;
  filter: none;
}
.jigsaw-piece-edge {
  fill: none;
  stroke: rgba(0, 0, 0, 0.28);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.jigsaw-piece.is-placed .jigsaw-piece-edge { stroke: rgba(0, 0, 0, 0.05); }
.jigsaw-file-input,
.wbk-import-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.jigsaw-controls { margin-top: var(--space-2); }

/* Letter Tracing — in-app canvas + printable handwriting sheets.
   The canvas mirrors .paint__canvas (the guide glyph and ruled lines are
   painted into the buffer by LetterTracing.scala). Print rows are SVG so
   glyph baselines sit exactly on the drawn rules. */
.lt-canvas {
  display: block;
  width: 100%;
  height: min(55vh, 440px);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  touch-action: none;
}
.lt-counter {
  min-width: 4.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lt-print-sheet { display: flex; flex-direction: column; gap: 8px; }
.lt-print-row { display: block; width: 100%; height: auto; }
.lt-print-rule { stroke: #8a8a8a; stroke-width: 1.5; }
.lt-print-rule--mid { stroke: #b5b5b5; stroke-width: 1; stroke-dasharray: 7 6; }
.lt-print-glyph {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 75px;
  font-weight: 600;
  fill: #222;
}
.lt-print-glyph--trace { fill: #cdcdcd; }
.lt-print-glyph--faint { fill: #e4e4e4; }

/* Seek & Find — busy emoji scene; tap (or print and circle) the targets.
   The board's aspect-ratio must match SeekAndFind.scala's 100×120 viewBox
   so the pointer hit areas line up with what's drawn. */
.snf-board {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 100 / 120;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  touch-action: manipulation;   /* taps shouldn't arm double-tap zoom */
  user-select: none;
  -webkit-user-select: none;
}
.snf-item { cursor: pointer; }
.snf-hit { fill: transparent; }            /* generous invisible tap target */
/* Wobble lives on an inner group so it doesn't fight the item's own
   translate/rotate transform attribute. */
.snf-emoji { transform-box: fill-box; transform-origin: center; }
.snf-item.is-miss .snf-emoji { animation: snf-wobble 0.35s ease-in-out 1; }
@keyframes snf-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-14deg); }
  75% { transform: rotate(14deg); }
}
.snf-ring {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.snf-item.is-found .snf-ring { opacity: 1; animation: snf-pop 0.25s ease-out 1; }
@keyframes snf-pop {
  from { transform: scale(0.5); }
  to   { transform: scale(1); }
}

/* Target legend — one chip per target: the emoji plus a fill-in dot per
   copy to find. Reads with zero words or numerals. */
.snf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.snf-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow-stamp-sm);
}
.snf-chip.is-done { opacity: 0.55; }
.snf-chip__emoji { font-size: 24px; line-height: 1; }
.snf-dots { display: flex; gap: 4px; }
.snf-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
}
.snf-dot.is-on { background: var(--color-primary); border-color: var(--color-primary); }

/* Counting mode */
.snf-question { text-align: center; font-size: 26px; font-weight: 700; }
.snf-answers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.snf-answer { min-width: 64px; font-size: 22px; font-variant-numeric: tabular-nums; }
.snf-answer:disabled { opacity: 0.4; }
.snf-answer.is-wrong { animation: snf-wobble 0.35s ease-in-out 1; }

/* Print sheets — one big field per A4 page under a legend strip; the
   counting sheet adds write-in boxes below the field. */
.snf-print-actions { max-width: 360px; margin-left: auto; margin-right: auto; }
.snf-print-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4mm;
  margin-bottom: 4mm;
}
.snf-print-legend__label { font-size: 13pt; font-weight: 700; }
.snf-print-chip { font-size: 17pt; white-space: nowrap; }
.snf-print-field {
  display: block;
  width: 100%;
  height: auto;
  border: 1.5px solid black;
  border-radius: 2mm;
}
.snf-count-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10mm;
  margin-top: 6mm;
}
.snf-count-cell { display: flex; align-items: center; gap: 3mm; font-size: 20pt; }
.snf-count-box {
  width: 13mm;
  height: 13mm;
  border: 1.5px solid black;
  border-radius: 2mm;
}
.snf-print-emoji { width: 9mm; height: 9mm; vertical-align: middle; }

/* ---- Workbook — generated, personalized, disposable activity book ---- */

/* Workbook hero: the feature card heading the Tools group. A little fan of
   "pages" plus a primary CTA so "compose a book" stays the standout tool,
   without competing with the activity grid the way the old in-grid banner did. */
.workbook-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: linear-gradient(120deg, var(--color-surface), var(--color-bg-2));
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-stamp);
  cursor: pointer;
}
.workbook-hero:active { transform: translate(2px, 2px); box-shadow: var(--shadow-stamp-sm); }

/* The fanned page stack — three sheets, the front one tinted like a cover. */
.workbook-hero__fan { position: relative; width: 64px; height: 60px; flex: none; }
.workbook-hero__fan span {
  position: absolute;
  width: 42px;
  height: 54px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow-stamp-sm);
}
.workbook-hero__fan span:nth-child(1) { transform: rotate(-14deg) translate(2px, 2px); }
.workbook-hero__fan span:nth-child(2) { transform: rotate(-2deg); }
.workbook-hero__fan span:nth-child(3) { transform: rotate(11deg) translate(8px, -2px); background: var(--tint-mustard); }

.workbook-hero__body { flex: 1; min-width: 0; }
.workbook-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.workbook-hero__desc { font-size: 13.5px; color: var(--color-muted); max-width: 34ch; }
.workbook-hero__go {
  margin-left: auto;
  flex: none;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  padding: 9px 18px;
  white-space: nowrap;
  box-shadow: var(--shadow-stamp-sm);
}

/* Builder: the preset panel, folded behind an explicit start/replace toggle. */
.wbk-presets-toggle { color: var(--color-muted); }
.wbk-presets__row { flex-wrap: wrap; gap: var(--space-2); }
.wbk-preset-chip {
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 14px;
}
.wbk-preset-chip.is-active {
  background: var(--color-border-strong);
  color: var(--color-surface);
}
/* Books list: one card per saved book, identified by its emoji + name. */
.wbk-empty { margin: var(--space-4) 0 var(--space-2); max-width: 36ch; margin-left: auto; margin-right: auto; }
.wbk-book-card {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.wbk-book-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: none;
  background: none;
  padding: var(--space-1) 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.wbk-book-card__emoji { font-size: 30px; line-height: 1; }
.wbk-book-card__body { flex: 1; min-width: 0; }
.wbk-book-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.wbk-book-card__name--unnamed {
  color: var(--color-muted);
  font-style: italic;
  font-weight: 500;
}
.wbk-book-card__chev { font-size: 22px; font-weight: 700; color: var(--color-muted); }
.wbk-book-card__delete {
  align-self: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 15px;
  cursor: pointer;
}
.wbk-book-card__delete:hover {
  border-color: var(--color-hit);
  color: var(--color-hit);
}

/* Drag-to-reorder grip at the row's end. touch-action: none claims the
   gesture so the page doesn't scroll under a touch drag. */
.wbk-row__drag {
  border: none;
  background: none;
  color: var(--color-muted);
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  margin: -4px -6px -4px -2px; /* grow the target without growing the row */
  cursor: grab;
  touch-action: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wbk-row__drag:active { cursor: grabbing; }
.wbk-row__grip { width: 18px; height: 18px; }
/* While a card is in flight it rides above its shifting neighbours. */
.wbk-row.is-dragging {
  position: relative;
  z-index: 5;
  box-shadow: var(--shadow-md);
  transition: none;
}
.is-dragging-list .wbk-row:not(.is-dragging) { transition: transform 150ms ease; }

/* Editor: share + delete, quiet until hovered, and held well clear of
   the Print zone — destructive actions don't share its neighbourhood. */
.wbk-secondary-actions { justify-content: center; flex-wrap: wrap; }
.stack > .wbk-secondary { margin-top: var(--space-6); }
.wbk-presets__row { justify-content: center; }
.wbk-share-book { color: var(--color-muted); }
.wbk-delete-book { color: var(--color-muted); }
.wbk-delete-book:hover { color: var(--color-hit); border-color: var(--color-hit); }

/* Clipboard fallback: the link revealed for manual copy when the copy failed. */
.wbk-share-manual { margin-top: var(--space-3); }
.wbk-share-url { width: 100%; flex: none; font-size: 13px; }

/* Standing banner when local storage refuses a save — can't be missed, but
   stays out of the print sheet. */
.wbk-save-warning {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-hit);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-hit) 12%, var(--color-surface));
  color: var(--color-text);
  font-size: 14px;
  text-align: center;
}

/* Library backup: quiet export/import row under the create button. */
.wbk-library-actions { margin-top: var(--space-4); align-items: center; }
.wbk-library-actions .row { justify-content: center; flex-wrap: wrap; }
.wbk-import, .wbk-export { color: var(--color-muted); }
/* .wbk-import-input is visually hidden — see the shared rule with .jigsaw-file-input. */
.wbk-import-error { color: var(--color-hit); }

/* Printed paper pages — plain, lined (10mm) and squared (5mm). SVG strokes
   because browsers skip CSS backgrounds when printing. */
.wbk-paper {
  width: 190mm;
  height: 235mm;
  margin: 0 auto;
}
.wbk-paper-svg { width: 100%; height: 100%; display: block; }
.wbk-paper-line { stroke: #b9b3a6; stroke-width: 0.25; }
.wbk-paper--lined .wbk-paper-line { stroke-width: 0.35; }

/* The destructive confirm in the delete modal. */
.wbk-confirm-delete {
  background: var(--color-hit);
  border-color: var(--color-hit);
  color: white;
}

/* Builder: inputs */
.wbk-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 15px;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.wbk-input:disabled { opacity: 0.45; }
.wbk-input::placeholder { color: var(--color-muted); }

/* Builder: identity card — the book's picture as a tap-to-change button
   beside its name. */
.wbk-identity__line { gap: var(--space-2); }
.wbk-emoji-current {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.wbk-emoji-current.is-open { box-shadow: var(--shadow-stamp-sm); }
.wbk-emoji-row {
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-1) 0;
}
.wbk-emoji-btn {
  font-size: 20px;
  line-height: 1;
  padding: 6px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}
.wbk-emoji-btn.is-active { border-color: var(--color-border-strong); background: var(--color-surface); }

/* Builder: composition rows */
.wbk-row { padding: var(--space-2) var(--space-3); }
.wbk-row__line { gap: var(--space-2); }
.wbk-row__main {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: none;
  background: none;
  padding: var(--space-1) 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
/* Eye + count/toggle cluster, pinned to the row's end so the variant
   dropdown can sit on the left, right next to the title. */
.wbk-row__end {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.wbk-row__glyph {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  border-radius: 10px;
  background: var(--tile-stamp, var(--color-bg-2));
  border: 1.5px solid color-mix(in srgb, var(--tile-stamp, var(--color-border-strong)) 55%, var(--color-border-strong));
}
.wbk-row__glyph--emoji { font-size: 20px; background: var(--color-bg-2); }
.wbk-row__name { min-width: 0; font-weight: 600; font-size: 15px; }
.wbk-row__peek {
  display: inline-flex;
  color: var(--color-muted);
  border: none;
  background: none;
  padding: 4px;
  cursor: pointer;
}
.wbk-row__peek.is-open { color: var(--color-primary); }
.wbk-row__eye { width: 22px; height: 22px; display: block; }
.wbk-row__eye-slash { display: none; }
/* Cover off: the pinned row stays, dimmed, so the page is one tap away. */
.wbk-row--cover.is-off .wbk-row__main { opacity: 0.45; }
.wbk-toggle {
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  cursor: pointer;
}
.wbk-toggle__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-border);
  transition: transform 150ms ease, background 150ms ease;
}
.wbk-toggle.is-on { background: var(--tint-sky); }
.wbk-toggle.is-on .wbk-toggle__knob {
  transform: translateX(17px);
  background: var(--color-border-strong);
}
.wbk-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  overflow: hidden;
}
.wbk-stepper__btn {
  border: none;
  background: none;
  font-size: 18px;
  font-weight: 700;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: inherit;
}
.wbk-stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.wbk-stepper__count { min-width: 1.5ch; text-align: center; font-weight: 700; }

/* Variant dropdown on the row line — step two of page selection, switched
   with the preview open. Wraps below the name on narrow screens. */
.wbk-row__stack > * + * { margin-top: var(--space-2); }
.wbk-row__line { flex-wrap: wrap; }
.wbk-variant-select {
  appearance: none;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  padding: 4px 30px 4px 12px;
  background: var(--color-surface);
  font-size: 14px;
  color: inherit;
  cursor: pointer;
  /* A small chevron so the closed select reads as a dropdown. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%231a1410' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Builder: tap-to-peek sample page. The page body renders at print size
   (mm units) and is zoomed down; narrow screens scroll it. */
.wbk-preview {
  margin-top: var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: white;
  overflow: auto;
  max-height: 420px;
}
.wbk-preview__page { zoom: 0.45; padding: 8mm; }

/* Builder: add-pages grid */
.wbk-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-2);
}
.wbk-add-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}
.wbk-add-chip:hover { border-color: var(--color-border-strong); }
.wbk-add-chip.is-added { border-color: var(--color-border-strong); }
.wbk-add-chip__name { flex: 1; min-width: 0; }
/* Pages of this kind already in the book. */
.wbk-add-chip__badge {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-border-strong);
  color: var(--color-surface);
  font-size: 12px;
  font-weight: 700;
}

/* Builder: the print dock. Sticky, so the one real action stays in reach
   while the composition scrolls; it settles into the flow at the end. The
   gradient lets list cards slide visibly underneath. */
.wbk-print-dock {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: var(--space-4) 0 var(--space-3);
  background: linear-gradient(to top, var(--color-bg) 72%, transparent);
}

/* Printed cover page */
.wbk-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10mm;
  min-height: 240mm;
}
/* Modest size on purpose: raster emoji look bad rendered large. */
.wbk-cover__emoji { font-size: 40mm; line-height: 1; }
.wbk-cover__name {
  font-family: var(--font-display);
  font-size: 36pt;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}
.wbk-cover__date { font-size: 14pt; color: #555; }
.wbk-cover__brand {
  margin-top: 14mm;
  font-size: 11pt;
  color: #888;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Printed coloring page: the dot-to-dot silhouette, smooth and dot-free,
   with the faint interior line-art to anchor recognition. */
.dots-coloring-board {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180mm;
  height: 220mm;
  margin: 0 auto;
}
.dots-coloring-svg { width: 100%; height: 100%; overflow: visible; }
.dots-coloring-outline {
  fill: none;
  stroke: black;
  stroke-width: 0.7;
  stroke-linejoin: round;
}

/* Printed blank tic-tac-toe boards: classic # marks, no outer border.
   Twenty to a page (4×5) — games are short, paper isn't free. */
.wbk-ttt-sheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7mm 8mm;
  justify-items: center;
  align-content: start;
  padding-top: 2mm;
}
.wbk-ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 13.5mm);
  grid-template-rows: repeat(3, 13.5mm);
}
.wbk-ttt-cell { border: 0 solid black; }
.wbk-ttt-cell:not(:nth-child(3n)) { border-right-width: 0.6mm; }
.wbk-ttt-cell:nth-child(-n+6) { border-bottom-width: 0.6mm; }

/* Paper tool: the print buttons mirror the activities' offline modes. */
.paper-print-actions { max-width: 360px; margin-left: auto; margin-right: auto; }

/* ---- Workbook polish pass ---- */

/* Unfold-on-open: previews, the emoji picker and the add grid rise into
   place instead of snapping. */
@keyframes wbk-unfold {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
}
.wbk-preview, .wbk-emoji-row, .wbk-add-grid, .wbk-presets__row { animation: wbk-unfold 180ms ease-out; }
.wbk-row__peek, .wbk-emoji-current { transition: color 120ms ease, box-shadow 120ms ease; }

/* Empty-list set-piece: a fanned stack of miniature pages. */
.wbk-empty-art {
  position: relative;
  height: 150px;
  margin-top: var(--space-5);
}
.wbk-empty-page {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 86px;
  height: 112px;
  padding: 10px;
  background: #fdfaf2;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow-stamp-sm);
}
.wbk-empty-page--0 { transform: translateX(-50%) translateX(-58px) rotate(-7deg); }
.wbk-empty-page--1 { transform: translateX(-50%) rotate(1deg); top: 0; z-index: 1; }
.wbk-empty-page--2 { transform: translateX(-50%) translateX(58px) rotate(7deg); }
.wbk-empty-page__glyph { font-size: 20px; line-height: 1; display: block; margin-bottom: 8px; }
.wbk-empty-page__line {
  height: 5px;
  border-radius: 3px;
  background: var(--color-border);
  margin-top: 7px;
}
.wbk-empty-page__line--short { width: 60%; }
/* The right page peeks out from behind the middle one — its glyph lives in
   the corner that stays visible. */
.wbk-empty-page--2 .wbk-empty-page__glyph { text-align: right; }

/* Book card: what's inside, one glyph per kind. */
.wbk-book-card__strip { margin-top: 3px; display: flex; gap: 6px; }
.wbk-book-card__strip-glyph { font-size: 13px; line-height: 1; opacity: 0.8; }

/* Narrow screens: a deliberate two-line row grammar — line one names the
   page (glyph, kind, variant), line two holds the controls, right-aligned,
   identically on every row. Beats flex-wrap deciding per row. */
@media (max-width: 480px) {
  .wbk-row__end {
    flex-basis: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
  .wbk-add-grid { grid-template-columns: repeat(2, 1fr); }
  .wbk-add-chip { font-size: 13px; gap: var(--space-1); }
  .wbk-add-chip .wbk-row__glyph { width: 30px; height: 30px; font-size: 15px; }
  /* Narrow screens: let the CTA wrap to its own full-width row under the copy
     so the title/desc keep their space. */
  .workbook-hero { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); }
  .workbook-hero__go { margin-left: 0; width: 100%; text-align: center; }
}

/* The preset toggle's restart arrow, at proper icon size. */
.wbk-reset-icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* Printed gomoku boards: two blank 10×10 grids, five-in-a-row paper. */
.wbk-gomoku-sheet {
  display: grid;
  gap: 10mm;
  justify-items: center;
  align-content: start;
  padding-top: 2mm;
}
.wbk-gomoku-board {
  display: grid;
  grid-template-columns: repeat(10, 11mm);
  grid-template-rows: repeat(10, 11mm);
  border: 0.5mm solid black;
}
.wbk-gomoku-cell { border: 0 solid #999; }
.wbk-gomoku-cell:not(:nth-child(10n)) { border-right-width: 0.3mm; }
.wbk-gomoku-cell:nth-child(-n+90) { border-bottom-width: 0.3mm; }