:root {
  --paper: #f6f2e7;
  --card: #fffdf6;
  --ink: #2c2a24;
  --faint: #7c766a;
  --rule: #d9d1bd;
  --edge: #e8e1cf;   /* softer than --rule, for the pad's own edge */
  --pen: #4a4d52;
  --pen-soft: #eaeae6;
  --red: #b23b2e;
  --green: #4a8a4a;
  --amber: #bd8420;
  --hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Comic Sans", cursive;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Card/panel corners. These were asymmetric "hand-drawn" radii; stacked
     across every surface they read as untidy rather than handmade. */
  --radius-sm: 10px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  /* Dot grid over a subtle fibre-grain noise, so the page reads as paper
     rather than a flat colour. */
  background-image:
    radial-gradient(rgba(44, 42, 36, 0.05) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 22px 22px, 140px 140px;
  line-height: 1.5;
}

.hand { font-family: var(--hand); }
.muted { color: var(--faint); font-size: 0.9rem; }
.big { font-size: 2rem; line-height: 1.1; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px dashed var(--rule);
  background: rgba(255, 253, 246, 0.7);
}
.brand { font-family: var(--hand); font-size: 1.5rem; font-weight: 700; }
.brand-dot { color: var(--pen); }
.tabs { display: flex; gap: 0.3rem; }
.tab {
  font: inherit;
  border: 1px solid transparent;
  background: transparent;
  color: var(--faint);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--pen);
  border-color: var(--rule);
  background: var(--pen-soft);
}

/* ---------- layout ---------- */
#app {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.4rem 1.1rem 3rem;
}
.screen { animation: fadein 0.25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.foot {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1.1rem 2rem;
  color: var(--faint);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- chips / headings ---------- */
.daychip, .reveal-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.chip {
  display: inline-block;
  font-family: var(--hand);
  background: var(--ink);
  color: var(--paper);
  padding: 0.15rem 0.6rem;
  border-radius: 6px;
  transform: rotate(-1.5deg);
}
.question {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0.2rem 0 0.8rem;
}

/* ---------- fine print ---------- */
.fineprint { margin-bottom: 0.8rem; font-size: 0.9rem; }
.fineprint summary { cursor: pointer; color: var(--pen); }
.fineprint ul { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--faint); }

/* ---------- segmented toggle ---------- */
.segmented {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.seg {
  font: inherit;
  border: 0;
  background: var(--card);
  color: var(--faint);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.seg.active { background: var(--pen); color: #fff; }

/* ---------- panels ---------- */
.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 2px 3px 0 rgba(44, 42, 36, 0.06);
  margin-bottom: 1rem;
}

/* ---------- the scribble pad (C) ---------- */
/* Tool chip: the one secondary-action style. Quiet until you reach for it. */
.tbtn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tbtn:hover:not(:disabled) { border-color: var(--pen); color: var(--pen); }
.tbtn:active:not(:disabled) { background: var(--pen-soft); }
.tbtn:disabled { opacity: 0.45; cursor: not-allowed; }

.padactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }

/* Shared label column so the Tools and Lifelines rows line up. */
.helper-label {
  min-width: 4.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Optional help, fenced off from the pad → reading → total chain above it. */
.helpers {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

/* A clean sheet that sits above the card on a real shadow, rather than a
   rectangle distorted into looking handmade. No tilt, no clipping: depth
   and the writing lines do the work. Padding here MUST stay identical to
   .pad-highlight's, since that layer mirrors this one pixel for pixel. */
.padwrap { position: relative; }
.pad {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 9.5rem;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 2rem;
  padding: 0.6rem 1rem 0.9rem;
  resize: vertical;
  position: relative;
  z-index: 1;
}
.pad:focus { outline: 0; border-color: var(--pen); }
.pad::placeholder { color: var(--rule); }

/* Sits behind the (now-transparent) pad, mirroring its text box exactly so
   <mark> highlights land right under what you typed — and carrying the
   paper itself: the sheet's fill, its shadow, and the writing lines.
   Warm grey at this weight guides the eye without the old blue-and-red
   exercise-book shout. `local` keeps the lines pinned to the text when the
   pad scrolls; the 0.6rem offset is the pad's own top padding, so text
   sits on a line rather than between two. */
.pad-highlight {
  position: absolute;
  inset: 0;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--edge);
  border-radius: 10px;
  font-size: 16px;
  line-height: 2rem;
  padding: 0.6rem 1rem 0.9rem;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
  background-color: var(--card);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent calc(2rem - 1px),
    rgba(44, 42, 36, 0.07) calc(2rem - 1px), rgba(44, 42, 36, 0.07) 2rem);
  background-position: 0 0.6rem;
  background-attachment: local;
  box-shadow: 0 1px 2px rgba(44, 42, 36, 0.04), 0 6px 16px -6px rgba(44, 42, 36, 0.16);
}
/* One box per line: wraps exactly as the textarea does. */
.padline { position: relative; white-space: pre-wrap; word-wrap: break-word; }

/* Sits on the line you should type next, until you go there yourself. */
.padline-ghost { color: var(--rule); }

/* A straight pencil underline — reads as "underlined this while working it
   out" rather than a text-selection highlight. */
.pad-highlight mark.hl {
  background: rgba(74, 77, 82, 0.07);
  box-shadow: inset 0 -2px 0 var(--pen);
  border-radius: 2px;
  color: transparent;
}
.pad-highlight mark.hl.hl-muted {
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--rule);
}
/* Hovering a pill lights up the number it came from. */
.pad-highlight mark.hl.hl-linked { background: rgba(74, 77, 82, 0.18); }

.demo-note { margin: 0 0 0.5rem; font-style: italic; }
.pad.demo-typing { border-color: var(--pen); box-shadow: 0 0 0 3px var(--pen-soft); }

.demo-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(44, 42, 36, 0.45);
  animation: fadein 0.2s ease;
}
.demo-modal {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
  max-width: 22rem;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(44, 42, 36, 0.25);
}
.demo-modal .big { font-size: 1.6rem; margin-bottom: 0.5rem; }
.demo-modal p { margin: 0 0 1.1rem; }
.demo-modal .btn { width: 100%; }
.demo-modal .linkbtn { display: block; margin: 0.6rem auto 0; }

.info-modal { text-align: left; max-height: 80vh; overflow-y: auto; }
.info-modal .big { text-align: center; }
.modal-close { display: block; margin: 1rem auto 0; }

.stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-13deg) scale(1);
  font-family: var(--hand);
  font-size: 2rem;
  letter-spacing: 0.06em;
  color: var(--red);
  border: 4px solid var(--red);
  border-radius: 8px;
  padding: 0.3rem 1rem;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 253, 246, 0.65);
}
.stamp.go { animation: stampin 0.42s cubic-bezier(0.2, 1.4, 0.3, 1) forwards; }
@keyframes stampin {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-13deg) scale(1.9); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(-13deg) scale(1); }
}

.ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.7rem; min-height: 1.8rem; }
/* Nothing typed yet = nothing to read; don't hold open an empty strip. */
.ribbon:empty { min-height: 0; margin-top: 0; }
/* The scripted pad demo knows its content in advance, so it reserves the
   ribbon's grown size up front instead of letting the page jump open the
   instant the first number is recognized (and keeps it reserved for the
   whole run, so settling in the first pill doesn't shrink it back down). */
.demo-run .ribbon { min-height: 3.4rem; margin-top: 0.7rem; }
.pill {
  font: inherit;
  font-family: var(--hand);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.pill-op { color: var(--faint); font-size: 0.85rem; }
.pill.muted { opacity: 0.45; text-decoration: line-through; }
.pill.flip { border-color: var(--amber); background: #f6ecd8; }
.pill.pill-new { animation: pillpop 0.32s cubic-bezier(0.2, 1.6, 0.35, 1); }
@keyframes pillpop {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  60% { transform: scale(1.12) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.ribbon-eq { font-family: var(--hand); color: var(--pen); margin-left: 0.2rem; }
.ribbon-label { font-size: 0.78rem; font-style: italic; margin-right: 0.1rem; }
.ribbon-hint { margin: 0.3rem 0 0; font-size: 0.8rem; }

/* Quiet tier: no underline until you're actually reaching for it. */
.linkbtn {
  font: inherit;
  font-size: 0.85rem;
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  padding: 0.3rem 0;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.linkbtn:hover { color: var(--pen); text-decoration: underline; }
.peekwrap { margin-top: 0.2rem; }
.peeknote { margin: 0.3rem 0 0; }

/* The two optional-help links share a row instead of stacking as a list.
   No rule above it — the total's dashed line is already the divider here. */
.padhelp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.2rem;
  margin-top: 0.8rem;
}

.total {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 2px dashed var(--rule);
}
.total-approx {
  font-family: var(--hand);
  font-size: 2rem;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: text;
}
.total-approx:hover { text-decoration: underline dotted; }
.total-words { font-size: 0.85rem; }
.total-edit {
  font-family: var(--hand);
  font-size: 1.8rem;
  width: 9ch;
  border: 0;
  border-bottom: 2px dashed var(--pen);
  background: transparent;
  color: var(--ink);
}
.total-edit:focus { outline: 0; }
.total-revert {
  font: inherit;
  font-size: 0.8rem;
  border: 0;
  background: none;
  color: var(--pen);
  cursor: pointer;
  text-decoration: underline;
}

.hintbtn { display: inline-block; margin-top: 0.7rem; font-size: 0.85rem; }
.anchorchips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; align-items: center; }
.chips-h { width: 100%; font-style: italic; }
.achip {
  font: inherit;
  font-size: 0.82rem;
  border: 1px dashed var(--rule);
  background: var(--card);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  color: var(--faint);
}
.achip:hover { border-color: var(--pen); color: var(--pen); }

.factspanel {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.7rem;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  background: var(--card);
}
.factrow {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  border: 0;
  background: none;
  text-align: left;
  padding: 0.3rem 0;
  cursor: pointer;
  color: var(--ink);
}
.factrow + .factrow { border-top: 1px dotted var(--rule); }
.factrow:hover { color: var(--pen); }
.factrow span:last-child { color: var(--pen); white-space: nowrap; }

.undohint { margin: 0.5rem 0 0.3rem; font-size: 0.78rem; }

.slider { width: 100%; margin: 0.8rem 0 0.4rem; accent-color: var(--pen); }
.eyeval { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  font: inherit;
  font-family: var(--hand);
  font-size: 1.05rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(44, 42, 36, 0.25);
}
.btn:hover:not(:disabled) { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(44, 42, 36, 0.25); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost { background: var(--card); color: var(--ink); }
.btn.submit { width: 100%; margin-top: 0.4rem; }
.stats .btn { margin: 0.3rem 0.4rem 0 0; }

/* ---------- reveal ---------- */
.yourcall {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 1.2rem;
}
.guessnum { min-width: 2ch; display: inline-block; }
.guessnum.pop { animation: numpop 0.45s cubic-bezier(0.2, 1.6, 0.35, 1); }
.narrative { display: flex; flex-direction: column; gap: 0.7rem; min-height: 3rem; }
.beat {
  position: relative;
  margin: 0;
  padding-left: 1.5rem;
  font-size: 1.15rem;
  opacity: 0;
  transform: translateY(10px);
  animation: beatin 0.55s ease forwards;
}
/* A quick pencil scribble marks where each line starts as it lands, rather
   than a formal numbered list — reads as jotted notes, not a step sheet. */
.beat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 1.05rem;
  height: 0.5rem;
  transform: rotate(-6deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M1 6 Q4 1 7 6 T13 6 T19 6 T23 6' stroke='%234a4d52' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
@keyframes beatin { to { opacity: 1; transform: none; } }
.narrative.done .beat { animation: none; opacity: 1; transform: none; }
.answerbeat { font-weight: 700; }
.skip { display: inline-block; margin-top: 0.8rem; }

.after { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }

.hero {
  text-align: center;
  border-radius: var(--radius-lg);
  padding: 1.4rem 1rem 1.5rem;
  border: 2px solid var(--faint);
  background: var(--card);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 1.3, 0.35, 1);
}
.hero.in { opacity: 1; transform: none; }
.hero.nailed { border-color: var(--green); background: #eaf3ea; }
.hero.solid  { border-color: var(--pen);   background: var(--pen-soft); }
.hero.close  { border-color: var(--amber); background: #f7efdc; }
.hero.miss   { border-color: var(--red);   background: #f6e6e3; }
.hero-emoji { font-size: 3.4rem; line-height: 1; }
.hero-score { font-size: 2.4rem; line-height: 1.1; margin: 0.3rem 0 0.1rem; }
.hero.nailed .hero-score { color: var(--green); }
.hero.solid  .hero-score { color: var(--pen); }
.hero.close  .hero-score { color: var(--amber); }
.hero.miss   .hero-score { color: var(--red); }
.hero-ratio { font-size: 1.05rem; font-weight: 700; }
.hero-quip { margin-top: 0.5rem; font-style: italic; color: var(--faint); }
.hero-highlight {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule);
  font-size: 0.92rem;
}

.answerbox {
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
.actualnum-wrap { position: relative; display: inline-block; }
.actualnum { display: block; font-size: 2.6rem; margin: 0.2rem 0 0; }
.actualnum.pop { animation: numpop 0.45s cubic-bezier(0.2, 1.6, 0.35, 1); }
@keyframes numpop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* A hand-drawn circle scribbles itself around the actual answer once it's
   landed — the "circle the answer on the napkin" moment. */
.answer-circle { position: absolute; inset: -0.3em -0.5em -0.25em -0.5em; overflow: visible; pointer-events: none; }
.answer-circle path {
  fill: none;
  stroke: var(--pen);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}
.actualnum-wrap.circled .answer-circle path { animation: circledraw 0.7s ease forwards; }
@keyframes circledraw { to { stroke-dashoffset: 0; } }
.source { margin: 0; font-style: italic; }

.gbar { padding-top: 0.2rem; }
.gbar-track {
  position: relative;
  height: 2.2rem;
  margin: 1.2rem 0;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--rule);
}
.gbar-span {
  position: absolute;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: var(--faint);
}
.gbar-mark { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); }
.gbar-mark.actual { background: var(--green); }
.gbar-mark.you { background: var(--red); }
.gbar-tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--hand);
  font-size: 0.72rem;
  white-space: nowrap;
}
.gbar-mark.actual .gbar-tag { bottom: -1.15rem; color: var(--green); }
.gbar-mark.you .gbar-tag { top: -1.15rem; color: var(--red); }
.gbar-scale { display: flex; justify-content: space-between; font-size: 0.75rem; }

/* ---------- napkin comparison ---------- */
.compare {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1rem;
}
.compare h3 { margin: 0 0 0.7rem; font-size: 1.2rem; }
.youwrote {
  white-space: pre-wrap;
  font-size: 1.05rem;
  line-height: 1.7;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pen);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.9rem;
}
.cmp-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 0.35rem 0.6rem;
  align-items: baseline;
  font-size: 0.92rem;
}
.cmp-h { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); }
.cmp-var { grid-column: 1; }
.cmp-you { display: flex; flex-direction: column; }
.cmp-model { font-family: var(--hand); }
.tag {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  margin-top: 0.1rem;
  width: max-content;
}
.tag-tight { background: #e4f1e4; color: var(--green); }
.tag-low, .tag-high { background: #f6ecd8; color: var(--amber); }
.tag-skipped { background: #eee; color: var(--faint); }

.notes { margin: 0.9rem 0 0; padding-left: 1.1rem; color: var(--faint); font-size: 0.88rem; }
.notes li { margin-bottom: 0.25rem; }
.sanity { margin: 0.6rem 0 0; }
.extras { margin: 0.7rem 0 0; }

/* ---------- share card ---------- */
.sharecard {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 1rem;
  text-align: center;
}
.sharetext {
  font-family: var(--hand);
  font-size: 1.2rem;
  margin: 0 0 0.8rem;
  white-space: pre-wrap;
  line-height: 1.4;
}
.comeback { text-align: center; }

/* ---------- challenge mode ---------- */
.challenge-intro .statgrid { margin: 1rem 0; }
.lede { font-size: 1.05rem; line-height: 1.5; margin: 0.2rem 0 0; max-width: 34rem; }

.rulebox {
  margin: 1.2rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.rulebox-title {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
}
.rulelist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; }
.rulelist dt { font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.rulelist dd { margin: 0; font-size: 0.92rem; color: var(--faint); }
@media (max-width: 480px) {
  .rulelist { grid-template-columns: 1fr; gap: 0.1rem; }
  .rulelist dd { margin-bottom: 0.5rem; }
}
.challenge-summary { text-align: center; margin-bottom: 1rem; }
.challenge-summary .big { font-size: 1.9rem; }

.chud-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0.3rem 0 1rem;
}
.hearts { font-size: 1.25rem; letter-spacing: 0.08rem; }
.chud-streak { font-size: 1.1rem; color: var(--pen); }
.chud-streak.streak-big { font-size: 1.7rem; font-weight: 700; }
.chud-diff {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
}
.chud-chase { margin: -0.4rem 0 0.6rem; font-size: 0.85rem; }
.chud-row.hit { animation: chudshake 0.4s ease; }
@keyframes chudshake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.lifelines { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.45rem 0 0; }

.milestone-banner {
  font-size: 1.6rem;
  color: var(--pen);
  margin: 0.3rem 0 0.9rem;
  animation: milestonepop 0.5s cubic-bezier(0.2, 1.6, 0.35, 1);
}
@keyframes milestonepop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.challenge-hud {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}
.challenge-hud .chud-row { justify-content: center; }
.challenge-msg { margin: 0.4rem 0 0.9rem; }
.challenge-msg.miss { color: var(--red); font-weight: 600; }
.challenge-gameover {
  margin: 0.6rem 0 1.1rem;
  padding-top: 0.9rem;
  border-top: 2px dashed var(--rule);
}
.challenge-gameover .big { font-size: 2rem; }
.newbest { color: var(--green); font-weight: 700; }
.challenge-hud .btn, .challenge-hud .linkbtn { margin: 0.3rem 0.3rem 0 0; }

/* ---------- practice list ---------- */
.qlist { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.qcard {
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.2rem 0.7rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}
.qcard:hover { border-color: var(--pen); }
.qnum { grid-row: span 2; font-family: var(--hand); font-size: 1.2rem; color: var(--pen); }
.qtext { font-weight: 600; }
.qmeta { font-size: 0.8rem; }

/* ---------- stats ---------- */
.statgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 1rem 0;
}
.stat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.9rem;
  text-align: center;
}
.stat-val { font-size: 1.7rem; }
.stat-label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; }

.sparkbox { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.9rem; }
.spark { width: 100%; height: 70px; margin-top: 0.4rem; overflow: visible; }
.spark-base { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 3; }
.spark-line { fill: none; stroke: var(--pen); stroke-width: 1.5; }
.dot { stroke: #fff; stroke-width: 1; }
.dot-nailed { fill: var(--green); }
.dot-solid { fill: var(--pen); }
.dot-close { fill: var(--amber); }
.dot-miss { fill: var(--red); }

.backup { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--rule); }
.backup h3 { margin: 0 0 0.3rem; }

@media (max-width: 480px) {
  .question { font-size: 1.35rem; }
  .statgrid { grid-template-columns: 1fr 1fr; }
  .hero-emoji { font-size: 2.8rem; }
  .hero-score { font-size: 1.9rem; }
  .actualnum { font-size: 1.9rem; }

  /* Four tabs led by "Challenge" don't fit a phone at full size. */
  .topbar { padding: 0.7rem 0.75rem; gap: 0.4rem; }
  .brand { font-size: 1.25rem; }
  .tabs { gap: 0.1rem; }
  .tab { padding: 0.3rem 0.45rem; font-size: 0.85rem; }

  /* Helper label above its buttons rather than stealing a column of width. */
  .helper-label { min-width: 100%; margin-bottom: 0.1rem; }
}