:root {
  /* Next Up design system — orange primary, blue secondary, grey accent */
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-light: #f4f5f7;
  --tile: #ffffff;
  --ink: #0e1a2e;
  --text: #0e1a2e;
  --muted: #4a5262;
  --accent: #fda300;            /* orange: primary */
  --accent-hover: #e08e00;
  --accent-shadow: #b87400;     /* solid under-edge on pressable keys */
  --accent-text: #946000;       /* orange as text on light grounds */
  --on-accent: #0e1a2e;         /* text on orange, never white */
  --secondary: #024089;         /* blue: secondary */
  --secondary-hover: #012f68;
  --secondary-shadow: #01234f;
  --on-secondary: #ffffff;
  --grey: #e1e3e7;              /* grey: accent */
  --correct: #0f7b6c;
  --wrong: #9ca3af;
  --border: #d5d8de;
  --gold: #946000;
  --accent-link: #024089;
  --focus-ring: #024089;
  --mark-blue: #024089;
  --mark-orange: #fda300;
  --mark-grey: #8a92a1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1424;
    --panel: #14213a;
    --panel-light: #1b2a47;
    --ink: #f3f5f9;
    --text: #f3f5f9;
    --muted: #a8b1c2;
    --border: #2f3f5f;
    --accent-text: #fda300;
    --gold: #fda300;
    --accent-link: #8db6f2;
    --correct: #5cd0b6;
    --focus-ring: #fda300;
    --mark-blue: #5b93e0;
    --mark-grey: #e1e3e7;
  }
}
* { box-sizing: border-box; }
html, body, button, input, select, textarea, .container * {
  font-family: 'Geologica', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Never let content shove the page sideways (the "it goes around when I zoom"
   problem) — only vertical scroll is allowed. */
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  /* safe centering: centers when the game fits, but falls back to the top/left
     instead of clipping or drifting off-screen when it's taller/wider than the
     viewport (e.g. when zoomed in). */
  align-items: safe center;
  justify-content: safe center;
  padding: 24px;
  flex-direction: column;
}
/* Column layout: the auto top margin centres the container vertically and keeps the footer at the bottom. */
.container { width: 100%; max-width: 980px; margin: auto auto 0; }
.screen { display: none; }
.screen.active { display: block; }

.subtitle, .label, .diff-label, .big-label,
.result-stat .lbl, .stat span, .history-row.head,
.account-bar .signin-text, .account-info .who .sub { font-weight: 300; }

/* ----- Menu ----- */
.menu { text-align: center; padding: 32px 20px; }
.menu h1 { font-size: 36px; margin: 0 0 8px 0; font-weight: 500; }
.menu .subtitle { color: var(--muted); font-size: 16px; margin-bottom: 18px; }
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  margin-bottom: 26px;
  color: var(--text);
}
.streak-chip b { color: var(--gold); }
.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  margin: 0 auto 28px auto;
}
.menu-actions button {
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-light);
  color: var(--text);
  transition: all 0.15s;
  min-height: 48px;
}
.menu-actions button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.menu-actions button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.menu-actions button:hover { border-color: var(--accent); }
.menu-actions button:not(.primary) {
  background: var(--secondary); color: var(--on-secondary); border-color: var(--secondary);
  box-shadow: 0 4px 0 0 var(--secondary-shadow); font-weight: 600;
}
.menu-actions button:not(.primary):hover { background: var(--secondary-hover); border-color: var(--secondary-hover); }
.menu-actions button:not(.primary):active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--secondary-shadow); }
.menu-actions button .sub-note { display: block; font-size: 12px; font-weight: 300; opacity: 0.85; margin-top: 2px; }
.menu-divider {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 18px 0 4px 0;
}
.diff-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.diff-row button {
  background: var(--panel-light);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}
.diff-row button.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.diff-label {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* ----- Round ----- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
h1.round-title { font-size: 22px; margin: 0; font-weight: 500; }
.stats { display: flex; gap: 10px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.stat {
  background: var(--panel-light);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
}
.stat span { color: var(--muted); margin-right: 6px; }
#timer { display: inline-block; min-width: 44px; text-align: right; }
.progress-bar {
  height: 6px;
  background: var(--panel-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.progress-fill { height: 100%; background: var(--accent); transition: width 0.3s; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
}
.label {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.sequence { margin-bottom: 20px; }

/* Frames read LEFT-TO-RIGHT (numbered 1→4) in a single row that never wraps,
   then the answer (frame 5) sits below as a larger stage. Reference frames are
   sized in viewport units so all four always fit the width on one line, at any
   zoom, and the row stays centered. Applies to every 4-frame sequence family. */
.frame-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 16px);
}
/* Reference frames: read-only, so kept compact and viewport-scaled. Beats the
   generic #screen-round .sequence .tile width rule. 20vw × 4 + gaps always
   clears the viewport width. */
#screen-round .sequence .tile.frame-tile,
.tile.frame-tile {
  position: relative;
  flex: 0 0 auto;
  width: min(18vw, 22vh, 118px);
  height: min(18vw, 22vh, 118px);
}
.frame-tile svg { width: 100%; height: 100%; }
.frame-chip {
  position: absolute;
  top: -9px;
  left: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--muted);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* The answer stage: frame 5, larger and centered at the bottom of the column. */
.answer-stage { display: flex; justify-content: center; margin: clamp(8px, 1.6vh, 14px) 0 8px; }
.answer-wrap { position: relative; }
.answer-wrap .chip-answer { background: var(--accent); }
/* High specificity on purpose: must beat the #screen-round .sequence .tile
   sizing rules at any screen width. Uses vh too so it shrinks to help fit. */
#screen-round .sequence .tile.answer-big,
.tile.answer-big {
  width: min(70vw, 40vh, 240px);
  height: min(70vw, 40vh, 240px);
}
.answer-big .slot-canvas svg { width: 100%; height: 100%; }
.matrix {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 10px;
  margin-bottom: 28px;
}
.tile {
  width: 120px;
  height: 120px;
  background: #fff; /* tiles stay white in dark mode so figures read */
  border: 2px solid #000;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.tile.question {
  background: var(--panel-light);
  border-style: dashed;
  border-color: var(--muted);
  color: var(--muted);
  font-size: 48px;
  font-weight: 300;
}
.matrix .tile { width: 96px; height: 96px; }
.matrix .tile.question { font-size: 40px; }
.arrow { color: var(--muted); font-size: 18px; user-select: none; }
.options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.option .tile { transition: all 0.15s; width: 110px; height: 110px; }
.option:hover:not(:disabled) .tile,
.option:focus-visible .tile {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.option .letter { font-weight: 500; color: var(--muted); font-size: 16px; }
.option.correct .tile { border-color: var(--correct); box-shadow: 0 0 0 3px var(--correct); }
.option.wrong   .tile { border-color: var(--wrong);   box-shadow: 0 0 0 3px var(--wrong); }
.option:disabled { cursor: default; }

/* ----- Answer builder (construct-the-answer) ----- */
.builder { margin-top: 8px; }
.bld-stage { display: flex; gap: 16px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.bld-stage-center { justify-content: center; }
.bld-canvas-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bld-canvas {
  width: 150px; height: 150px; background: #fff;
  border: 2px solid #000; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bld-palette {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  align-content: start;
  padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-light); min-width: 150px;
}
.bld-palette-title { grid-column: 1 / -1; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 2px; text-align: center; }
.bld-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 6px; border: 2px solid transparent; border-radius: 8px;
  background: #fff; cursor: pointer; min-height: 64px; min-width: 64px;
}
.bld-chip-label { font-size: 10px; color: #555; text-transform: capitalize; }
@media (max-width: 700px) {
  .bld-stage { flex-direction: column; align-items: center; }
  .bld-palette { grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 360px; }
}
.bld-chip.sel { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.bld-chip:hover { border-color: var(--muted); }
.bld-chip svg { display: block; }
.bld-blank { font-size: 12px; color: var(--muted); background: var(--panel-light); }
.bld-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bld-ctl-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.bld-slot, .bld-size, .bld-step, .bld-clear {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-light); color: var(--text); cursor: pointer; min-height: 40px;
}
.bld-slot.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bld-size.sel { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.bld-step { font-size: 20px; min-width: 44px; line-height: 1; }
.bld-count { font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.bld-slot-row { justify-content: center; }
.bld-hint { font-size: 13px; color: var(--muted); }
/* Tap-the-box dot builder: an invisible 3x3 grid sits over the preview. */
.bld-dotbox { position: relative; display: inline-block; }
.bld-dotgrid-overlay {
  position: absolute; inset: 2px; /* sit inside the canvas border */
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
}
.bld-cellhit { background: transparent; border: none; cursor: pointer; padding: 0; }
.bld-cellhit:hover:not(.disabled) { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.bld-cellhit.disabled { cursor: default; }
.bld-submit { margin-top: 22px; }

/* Number pad builder */
.bld-numpad-display {
  min-width: 180px;
  min-height: 52px;
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bld-numpad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.bld-key {
  min-height: 50px;
  font-size: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-light);
  color: var(--text);
  cursor: pointer;
}
.bld-key:hover { border-color: var(--accent); }

/* Week builders (calendar pattern + pick-a-day) */
.bld-canvas-wide { width: 330px; height: auto; min-height: 0; padding: 4px; }
.bld-weekrow { display: flex; gap: 4px; }
.bld-day {
  flex: 1;
  min-width: 40px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-light);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.bld-day.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Tap-to-cycle nested builder: invisible section hotspots over the preview. */
.bld-nested-wrap { position: relative; }
.bld-nested-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.bld-sect { fill: transparent; stroke: none; cursor: pointer; }
.bld-sect:hover { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.bld-sect.drop { fill: color-mix(in srgb, var(--accent) 32%, transparent); }
.bld-sect:focus-visible { stroke: var(--accent); stroke-width: 2; outline: none; }
.bld-legend { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.bld-legend-chip {
  display: inline-flex; padding: 4px; border: 2px solid transparent; border-radius: 8px;
  background: #fff; cursor: grab; line-height: 0;
  min-width: 46px; min-height: 46px;             /* touch-friendly */
  align-items: center; justify-content: center;
  touch-action: none;                            /* pointer-drag, not scroll */
  user-select: none;
  -webkit-user-select: none;
}
.bld-legend-chip:active { cursor: grabbing; }
.bld-legend-chip:hover { border-color: var(--muted); }
.bld-legend-chip.sel { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.bld-legend-chip svg { border-radius: 3px; pointer-events: none; }

/* Pointer-drag ghost: a copy of the fill chip riding under the finger. */
.bld-drag-ghost {
  position: fixed;
  transform: translate(-50%, -55%) scale(1.15);
  pointer-events: none;
  z-index: 200;
  opacity: 0.92;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ----- Puzzle-first round format -----
   The puzzle IS the page: no boxed panel, a full-bleed progress bar pinned to
   the top, and a small fixed HUD bottom-right (question · time · mute · quit). */
#screen-round .panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 0 90px 0; /* bottom space so the HUD never overlaps content */
}
.round-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 7px;
  margin: 0;
  border: none;
  border-radius: 0;
}
.corner-hud {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  font-size: 13px;
  color: var(--muted);
}
.corner-hud .hud-q { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.corner-hud .hud-time { font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.hud-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  min-height: 0;
}
.hud-btn:hover { color: var(--text); }

/* Bigger puzzle tiles in the round (sizes match the renderPanel calls). */
#screen-round .sequence .tile { width: 150px; height: 150px; }
#screen-round .matrix .tile { width: 120px; height: 120px; }
@media (max-width: 560px) {
  #screen-round .sequence .tile { width: 124px; height: 124px; }
  #screen-round .matrix .tile { width: 100px; height: 100px; }
  #screen-round .sequence .tile svg, #screen-round .matrix .tile svg { max-width: 100%; max-height: 100%; }
}

/* ----- Per-family identity -----
   Each puzzle family gets its own accent + frame treatment so types look,
   play, and feel distinct. data-family is set on .panel by loadQuestion. */
.panel[data-family] { border-top: none; }
.panel[data-family]::before {
  content: attr(data-family);
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fam-accent, var(--accent));
  border: 1px solid var(--fam-accent, var(--accent));
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.panel[data-family="shapes"]   { --fam-accent: #0072B2; }
.panel[data-family="dots"]     { --fam-accent: #56B4E9; }
.panel[data-family="matrix"]   { --fam-accent: #CC79A7; }
.panel[data-family="nested"]   { --fam-accent: #009E73; }
.panel[data-family="number"]   { --fam-accent: #E69F00; }
.panel[data-family="weeks"]    { --fam-accent: #D55E00; }
.panel[data-family="schedule"] { --fam-accent: #8b5cf6; }
.panel[data-family="month"]    { --fam-accent: #D55E00; }
.panel[data-family="bars"]     { --fam-accent: #0072B2; }
.panel[data-family="word"]     { --fam-accent: #E69F00; }

/* Nested puzzles read better with larger frames and no arrows between them. */
.panel[data-family="nested"] .sequence .arrow { display: none; }
.panel[data-family="nested"] .sequence { gap: 14px; }

/* Number panels: lighter frame so the digits carry the look. */
.panel[data-family="number"] .tile { border-width: 1px; border-radius: 12px; }

/* Weeks & schedule: stacked wide rows, paper-calendar feel. */
.weeks, .schedule { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 20px; max-width: 100%; }
.week-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 6px 10px;
}
/* The week/schedule grids render at a fixed 330px SVG; let them scale down so
   they never overflow a phone (which, with overflow-x hidden, would clip). */
.week-row svg { display: block; min-width: 0; max-width: 100%; height: auto; }
.week-num { font-size: 11px; color: #888; min-width: 34px; font-variant-numeric: tabular-nums; }
.week-slot { min-width: 0; }
.question-week { border-style: dashed; color: var(--muted); background: var(--panel-light); }
.week-q { font-size: 22px; font-weight: 300; padding: 4px 140px 4px 4px; }
.tile.week-tile { width: auto; height: auto; max-width: 100%; padding: 8px; }
.tile.week-tile svg { max-width: 100%; height: auto; }

/* Instruction line for puzzle families that need a hint up top. */
.instruction {
  font-size: 13px;
  color: var(--muted);
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

/* ----- Daily intro ----- */
.daily-intro .intro-note { color: var(--muted); font-size: 14px; max-width: 420px; margin: 8px auto 0; line-height: 1.5; }
.daily-intro .go-btn { margin-top: 24px; }

/* ----- GO button + menu links ----- */
.go-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 420px;
  margin: 18px auto 6px auto;
  padding: 26px 20px;
  border-radius: 18px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: transform 0.12s ease-out, background 0.15s;
}
.go-btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.go-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 0 var(--accent-shadow); }
.go-btn .go-word { font-size: 34px; font-weight: 700; letter-spacing: 4px; line-height: 1; }
.go-btn .sub-note { font-size: 13px; opacity: 0.92; }
.menu-links { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 18px; color: var(--muted); }
.menu-link {
  background: none; border: none; padding: 4px 2px;
  color: var(--muted); font-size: 14px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.menu-link:hover { color: var(--text); }
.howto-gallery-note { font-size: 12px; color: var(--muted); max-width: 220px; text-align: left; }
@media (prefers-reduced-motion: reduce) {
  .go-btn, .go-btn:hover { transition: none; transform: none; }
}

/* ----- Game feel: shake, streak glow, pulses ----- */
/* Decaying horizontal shake on the puzzle panel (never the viewport). */
@keyframes nu-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.panel.shake { animation: nu-shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }

/* Streak heat: fixed glow layer behind everything; opacity-only changes. */
.streak-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease-out, background 0.6s ease-out;
}
@keyframes nu-glow-tick {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.streak-glow.glow-tick { animation: nu-glow-tick 0.5s ease-out; }
.container, .screen { position: relative; z-index: 1; }

/* Correct-answer pulse on the revealed tile (200ms overshoot). */
@keyframes nu-pop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.tile.correct { animation: nu-pop 0.22s cubic-bezier(.175,.885,.32,1.275); }

@media (prefers-reduced-motion: reduce) {
  .panel.shake { animation: none; outline: 2px solid var(--wrong); outline-offset: 2px; }
  .streak-glow.glow-tick { animation: none; }
  .streak-glow { transition: none; }
  .tile.correct { animation: none; }
}

/* ----- Inline answer slot (the "?" in the puzzle is the input) ----- */
.answer-slot { position: relative; border-style: dashed; border-color: var(--accent); }
.answer-slot .slot-canvas { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.answer-slot .slot-canvas svg { max-width: 100%; max-height: 100%; }
.answer-slot .slot-ph { font-size: 40px; font-weight: 300; color: var(--accent-text); }
.answer-slot.resolved { pointer-events: none; border-style: solid; }
.answer-slot.resolved.correct { border-color: var(--correct); box-shadow: 0 0 0 3px var(--correct); }
.answer-slot.resolved.wrong { border-color: #d55e00; box-shadow: 0 0 0 3px #d55e00; }

/* dots: 3x3 hit-grid over the slot. While unresolved, tappable cells carry a
   faint inset outline so players can see where to tap (hover never fires on
   touch); :active gives press feedback. */
.slot-dotgrid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 3px; gap: 2px;
}
.answer-slot:not(.resolved) .bld-cellhit:not(.disabled) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 6px;
}
.bld-cellhit:active:not(.disabled) { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* number: typed value lives in the slot */
.slot-number { font-size: 40px; font-weight: 600; color: #111; font-variant-numeric: tabular-nums; }

/* week answer row in the slot */
.week-slot { flex: 1; }
.slot-week { display: flex; gap: 4px; }
.slot-day {
  flex: 1; min-width: 38px; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-light); color: var(--text); font-size: 11px; cursor: pointer;
}
.slot-day.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.slot-day-dot { font-size: 12px; min-height: 14px; }
.question-week .week-slot .slot-week { width: 100%; }

/* month calendar answer */
.month-layout, .bars-layout { display: flex; justify-content: center; margin-bottom: 20px; }
.month-slot { width: 100%; max-width: 420px; }
.slot-month {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 10px;
}
.m-head { text-align: center; font-size: 11px; color: #888; padding: 2px 0; }
.m-day {
  position: relative; min-height: 44px;
  border: 1px solid #ddd; border-radius: 6px; background: #fafafa;
  color: #111; font-size: 13px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.m-day:hover { border-color: var(--accent); }
.m-day.sel { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.m-day .m-sym { font-size: 11px; line-height: 1; }
.m-day.sel .m-sym { color: var(--on-accent); }

/* interactive ratio bars */
.bars-slot { width: 100%; max-width: 420px; }
.slot-bars {
  display: flex; gap: 28px; justify-content: center; align-items: flex-end;
  background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 18px 24px 12px;
}
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: ns-resize; touch-action: none; }
.bar-val { font-size: 15px; font-weight: 600; color: #111; font-variant-numeric: tabular-nums; }
.bar-track {
  width: 56px; height: 180px;
  background: #f0f1f3; border: 1px solid #ddd; border-radius: 8px;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
.bar-fill { background: var(--accent); width: 100%; transition: height 0.05s linear; }
.bar-label { font-size: 12px; color: #555; max-width: 90px; text-align: center; }

/* word problems: big readable prompt next to the answer slot */
.word-layout { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.word-prompt {
  max-width: 420px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--fam-accent, var(--accent));
  border-radius: 10px;
  padding: 16px 18px;
}

/* tray head: hint left, clear right (owner: clear sits above, to the right) */
.bld-tray-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; max-width: 480px; margin: 0 auto 10px; }
.bld-tray-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.builder { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Answer reveal after submitting */
.reveal { display: flex; gap: 24px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.reveal-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.reveal-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.tile.correct { border-color: var(--correct); box-shadow: 0 0 0 3px var(--correct); }
.tile.wrong { border-color: var(--wrong); box-shadow: 0 0 0 3px var(--wrong); }

.feedback {
  margin-top: 24px;
  min-height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.msg { font-size: 15px; }
.msg.correct { color: var(--correct); }
.msg.wrong   { color: var(--wrong); }
.rule-note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}
.rule-note b { color: var(--text); }
button.next, button.quit {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
}
button.next:hover { background: var(--accent-hover); }
button.next[hidden] { display: none; }

/* The round's forward control is a wordless directional button — progress is
   felt (→), not read. (Results-screen .next buttons keep their text.) */
#next {
  width: 54px;
  min-width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
#next[hidden] { display: none; }

/* Pick-from-5 options for the shape / colour / pattern puzzles. */
.choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 2px; }
.choice-opt {
  position: relative;
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  line-height: 0;
  width: min(26vw, 120px);
  height: min(26vw, 120px);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.choice-opt svg { width: 100%; height: 100%; }
.choice-opt:hover:not(:disabled) { border-color: var(--accent); }
.choice-opt:disabled { cursor: default; }
.choice-opt.opt-correct { border-color: var(--correct); box-shadow: 0 0 0 3px var(--correct); }
.choice-opt.opt-wrong { border-color: #d55e00; box-shadow: 0 0 0 3px #d55e00; opacity: 0.55; }

/* The echoed pick (and any direct render) scales within the answer cell. */
#answer-slot svg { max-width: 100%; max-height: 100%; }

/* Combine matrix: rows shown as A + B = C, source cells highlighted. */
.combine-grid { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-bottom: 20px; }
.combine-row { display: flex; align-items: center; gap: 6px; }
.combine-cell { width: 92px; height: 92px; }
.combine-cell svg { width: 100%; height: 100%; }
.combine-cell.src { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); }
.combine-op { font-size: 24px; font-weight: 700; color: var(--muted); width: 18px; text-align: center; }
@media (max-width: 560px) {
  .combine-cell { width: 66px; height: 66px; }
  .combine-op { font-size: 18px; width: 12px; }
}

/* Numbers-add-up grid: 3x3 board + row totals (right) + column totals (bottom). */
.sumgrid-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.sumgrid { display: grid; grid-template-columns: repeat(3, 64px) 58px; grid-auto-rows: 64px; gap: 6px; }
.sum-cell {
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 600; color: #111;
  background: #fff; border: 2px solid #000; border-radius: 8px;
}
.sum-cell.sum-hl { background: color-mix(in srgb, var(--accent) 16%, #fff); }
.sum-blank { border-style: dashed; border-color: var(--accent); position: relative; }
.sum-blank .slot-canvas { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sum-blank .slot-number { font-size: 26px; }
.sum-blank .slot-ph { font-size: 28px; color: var(--accent-text); }
.sum-tot { display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--muted); }
.sum-tot.sum-hl { color: var(--accent-text); }
@media (max-width: 560px) {
  .sumgrid { grid-template-columns: repeat(3, 52px) 48px; grid-auto-rows: 52px; }
  .sum-cell { font-size: 20px; }
  .sum-tot { font-size: 17px; }
}
button.quit {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
button.quit:hover { color: var(--text); border-color: var(--accent); }

/* ----- Results ----- */
.results { text-align: center; padding: 20px; }
.results h2 { font-size: 28px; margin: 0 0 8px 0; }
.results .big {
  font-size: 64px;
  font-weight: 500;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin: 18px 0 8px 0;
}
.results .big-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  margin-bottom: 24px;
}
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 540px;
  margin: 0 auto 24px auto;
}
.result-stat {
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.result-stat .val { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.result-stat .lbl {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
.share-grid { font-size: 28px; letter-spacing: 4px; margin: 6px 0 14px 0; user-select: none; }
.countdown-note { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.countdown-note b { font-variant-numeric: tabular-nums; color: var(--text); }
.results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.signin-upsell {
  max-width: 420px;
  margin: 0 auto 24px auto;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  font-size: 14px;
  color: var(--muted);
}
.signin-upsell .btn-google { margin-top: 10px; }
.per-problem { max-width: 700px; margin: 0 auto 28px auto; text-align: left; }
.per-problem table { width: 100%; border-collapse: collapse; font-size: 14px; }
.per-problem th, .per-problem td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.per-problem th {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.per-problem td.right { text-align: right; font-variant-numeric: tabular-nums; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.badge.correct { background: color-mix(in srgb, var(--correct) 15%, transparent); color: var(--correct); }
.badge.wrong   { background: var(--panel-light); color: var(--muted); }

/* ----- Stats ----- */
.stats-screen h2 { font-size: 24px; margin: 0 0 4px 0; }
.stats-screen .subtitle { color: var(--muted); margin-bottom: 24px; font-size: 14px; }
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.dist {
  max-width: 460px;
  margin-bottom: 28px;
}
.dist h3 { font-size: 15px; font-weight: 500; margin: 0 0 12px 0; }
.dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.dist-row .k { width: 34px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.dist-row .bar-wrap { flex: 1; background: var(--panel-light); border-radius: 4px; overflow: hidden; }
.dist-row .bar {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----- History ----- */
.history { padding: 8px 0; }
.history h2 { font-size: 24px; margin: 0 0 4px 0; }
.history .subtitle { color: var(--muted); margin-bottom: 24px; font-size: 14px; }
.history-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.history-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px 100px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 14px;
}
.history-row:last-child { border-bottom: none; }
.history-row.head {
  background: var(--panel-light);
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}
.history-row .avg { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent-text); }
.history-row .num { font-variant-numeric: tabular-nums; }
.history-empty {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  background: var(--panel-light);
  border-radius: 10px;
}
.history-actions { display: flex; justify-content: space-between; margin-top: 20px; gap: 8px; }
.back-link {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}
.back-link:hover { color: var(--text); border-color: var(--accent); }

/* ----- Invite landing ----- */
.login { display: none; min-height: 60vh; }
.login.active { display: flex; align-items: center; justify-content: center; }
.login-card { text-align: center; padding: 40px 28px; max-width: 420px; width: 100%; }
.login-card h1 { font-size: 32px; margin: 0 0 12px 0; font-weight: 500; }
.login-card .subtitle { color: var(--muted); font-size: 15px; margin-bottom: 32px; line-height: 1.5; }
#btn-invite-google { width: 280px; padding: 12px 20px; margin-bottom: 28px; }
#btn-invite-skip {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  width: 280px;
  padding: 12px 20px;
}
#btn-invite-skip:hover { color: var(--text); border-color: var(--accent); }

/* ----- Account widget ----- */
.account-bar {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.account-trigger {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-light);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
}
.account-trigger:hover { border-color: var(--accent); }
.account-trigger img { width: 100%; height: 100%; object-fit: cover; }
.account-trigger svg { width: 22px; height: 22px; display: block; }
.account-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  width: max-content;
  gap: 10px;
  padding: 14px;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.account-bar.open .account-panel { display: flex; }
.account-bar .signin-text { color: var(--muted); font-size: 12px; text-align: center; }
.account-info { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.account-info .who { text-align: left; line-height: 1.25; }
.account-info .who .name { font-weight: 500; font-size: 14px; }
.account-info .who .sub { color: var(--muted); font-size: 12px; }
.btn-small {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.btn-small:hover { color: var(--text); border-color: var(--accent); }
.account-panel .btn-small { align-self: stretch; }

/* ----- Modal ----- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17,19,24,0.45);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-box h3 { margin: 0 0 10px 0; font-size: 20px; }
.modal-box p { color: var(--muted); font-size: 14px; margin: 0 0 22px 0; }
.modal-box .avatar { width: 56px; height: 56px; margin: 0 auto 14px auto; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; }
.modal-actions button {
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-light);
  color: var(--text);
  min-height: 44px;
}
.modal-actions button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.modal-actions button.primary:hover { background: var(--accent-hover); }
.howto-example { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.howto-example .tile { width: 64px; height: 64px; }
.modal-box p.howto-note { font-size: 13px; margin-bottom: 12px; }

/* ----- Leaderboard ----- */
.leaderboard h2 { font-size: 24px; margin: 0 0 8px 0; }
#leaderboard-content { margin: 20px 0; }
.lb-tabs { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.lb-tab {
  flex: 1 1 auto;
  min-width: 64px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-light);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-height: 42px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lb-tab:hover { color: var(--text); border-color: var(--muted); }
.lb-tab.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.leaderboard .history-row { grid-template-columns: 44px 1fr 110px 90px 120px; }
.leaderboard .history-row.no-diff { grid-template-columns: 44px 1fr 90px 120px; }
.leaderboard .history-row.lb-attempts { grid-template-columns: 44px 1fr 80px 90px 100px; }
.leaderboard .history-row .rank { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }
.leaderboard .history-row.me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.leaderboard .history-row .you {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-text);
  margin-left: 6px;
}

/* ----- Friend groups ----- */
#groups-content { margin: 20px 0; }
.group-create { display: flex; gap: 8px; margin-bottom: 20px; }
.group-create input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-light);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.group-create input:focus { outline: none; border-color: var(--accent); }
.group-create button {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
}
.group-create button:hover { background: var(--accent-hover); }
.group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.group-item .group-name { font-weight: 500; flex: 1; min-width: 120px; }
.group-item .group-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.group-item .group-actions button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-height: 40px;
}
.group-item .group-actions button:hover { color: var(--text); border-color: var(--accent); }
.group-item .group-actions button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.group-item .group-actions button.primary:hover { background: var(--accent-hover); }

/* ----- Google button ----- */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
}
.btn-google:hover { background: #f7f8f8; border-color: #c6c9cc; }
.btn-google svg { display: block; }

.danger {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
.danger:hover { color: #b91c1c; border-color: #b91c1c; }

svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 720px) {
  body { justify-content: flex-start; padding: 12px; }
  .container { margin-top: 0; }
  body:not(.login-active) .container { padding-top: 64px; }
  .options { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .tile { width: 80px; height: 80px; }
  .option .tile { width: 88px; height: 88px; }
  .matrix { gap: 6px; }
  .matrix .tile { width: 76px; height: 76px; }
  .history-row { grid-template-columns: 1fr 80px 80px; }
  .history-row .col-problems { display: none; }
  .leaderboard .history-row { grid-template-columns: 30px 1fr 64px 92px; }
  .account-bar { top: 12px; right: 12px; gap: 8px; }
  .panel { padding: 16px; }
  .header { margin-bottom: 12px; }
  .progress-bar { margin-bottom: 14px; }
  .label { margin-bottom: 8px; }
  .sequence { gap: 8px; margin-bottom: 16px; }
  .tile.question { font-size: 36px; }
  .feedback { margin-top: 14px; }
  .results .big { font-size: 48px; }
}
/* ----- Site footer (every page) ----- */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 32px 0 4px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}
.site-footer a { color: var(--muted); text-underline-offset: 3px; padding: 4px 2px; }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: var(--text); }

/* ----- Legal pages (/privacy, /terms) ----- */
.legal {
  max-width: 70ch;
  margin: 0 auto;
  padding: 24px 0 8px;
  line-height: 1.65;
  font-size: 17px;
}
.legal h1 { font-size: 34px; font-weight: 500; line-height: 1.2; margin: 24px 0 8px; }
.legal h2 { font-size: 22px; font-weight: 500; line-height: 1.3; margin: 36px 0 8px; }
.legal p, .legal ul { margin: 0 0 14px; }
.legal ul { padding-left: 1.4em; }
.legal li { margin-bottom: 6px; }
.legal strong { font-weight: 500; }
.legal a { color: var(--accent-link); text-underline-offset: 3px; }
.legal a:hover { color: var(--text); }
.legal a.legal-home {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
}
.legal a.legal-home:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 720px) {
  body.legal-body { padding: 16px; }
  body.legal-body .container { padding-top: 8px; }
  .legal { font-size: 16px; }
  .legal h1 { font-size: 28px; }
}
/* (Removed the asymmetric right padding that pushed the game off-center on
   medium / zoomed widths — the game now centers globally at every size.) */

/* ----- Logo hero: six shapes that become N E X T U P ----- */
.menu .logo-hero, .logo-hero { margin: 0 auto 12px; width: min(560px, 100%); line-height: 0; }
.logo-hero svg { width: 100%; height: auto; display: block; overflow: visible; }
.logo-hero.replayable { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }