/* Swatchle prototype: the mobile layout, a 390px design in a centered app column.
   Values come from the Paper "Mobile screens" page unless a comment says otherwise.
   Wide screens with a mouse also load desktop.css, which restyles these same
   elements. Pieces that only show on desktop are switched off here. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  overscroll-behavior: none;
}
h1, h2, p, ol { margin: 0; padding: 0; }
ol { list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* Desktop-only pieces. desktop.css turns them on and hides the .for-touch ones. */
.for-mouse, .home-stickers, .game-header .header-how, .key-hint, .pick-help, .stamp-label, .clue-compact .round-badge { display: none; }

.app {
  --app-w: min(100vw, var(--container-app));
  position: relative;
  width: var(--app-w);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  /* It's a game: stray drags and long presses shouldn't select text. */
  user-select: none;
  -webkit-user-select: none;
}
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  animation: screen-in 220ms var(--ease-out) both;
}
@keyframes screen-in { from { opacity: 0; translate: 0 8px; } }

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { flex-shrink: 0; }
.btn-primary {
  --lip: 5px;
  width: 100%;
  height: 58px;
  border-radius: var(--radius-full);
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: var(--text-button);
  line-height: 26px;
  box-shadow: 0 var(--lip) 0 var(--color-action-lip);
  transition: translate var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out,
    background-color 160ms, color 160ms;
}
.btn-primary:active:not(:disabled) {
  translate: 0 var(--lip);
  box-shadow: 0 0 0 var(--color-action-lip);
}
.btn-primary:disabled {
  background: var(--color-action-disabled);
  color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
  box-shadow: none;
  cursor: default;
}
.btn-xl {
  --lip: 6px;
  height: 76px;
  gap: 12px;
  font-size: var(--text-title);
  line-height: 32px;
  box-shadow: 0 var(--lip) 0 var(--color-action-lip), 0 14px 24px rgb(231 111 81 / 28%);
}
.btn-secondary {
  height: 48px;
  padding-inline: var(--spacing-6);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-action-secondary);
  color: var(--color-action-secondary-text);
  font-size: var(--text-body-lg);
  line-height: 22px;
}
.btn-secondary:active { background: var(--color-surface-sunken); }
.icon-btn {
  --lip: var(--spacing-lip);
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-action-secondary);
  color: var(--color-action-secondary-text);
  box-shadow: 0 var(--lip) 0 var(--color-action-secondary-lip);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: translate var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out;
}
.icon-btn:active:not(:disabled) { translate: 0 var(--lip); box-shadow: 0 0 0 var(--color-action-secondary-lip); }
.icon-btn:disabled {
  border-color: transparent;
  background: var(--color-action-disabled);
  color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
  box-shadow: none;
  cursor: default;
}
.text-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: var(--spacing-2);
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
:focus-visible { outline: 3px solid var(--color-selection); outline-offset: 3px; }

/* Bottom action area. The artboards leave 42px for the phone's home indicator;
   in a browser we only need the safe-area inset. */
.bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-5);
  flex-shrink: 0;
  padding: var(--spacing-4) var(--spacing-4) max(var(--spacing-6), calc(env(safe-area-inset-bottom) + var(--spacing-3)));
}

/* ---------- 1 · Home ---------- */
.home-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding-inline: var(--spacing-6);
}
.logo-hero {
  width: 319px;
  height: 88px;
  flex-shrink: 0;
  background: url(../../design/logo-full.png) -22px -13px / 365px no-repeat;
  rotate: -2.12deg;
}
.pitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding-top: var(--spacing-2);
}
.tagline {
  font-family: var(--font-display);
  font-size: var(--text-clue);
  font-weight: 500;
  line-height: var(--leading-snug);
  text-align: center;
  text-wrap: balance;
}
.tagline-sub {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
  text-align: center;
}
.home-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  padding: 0 var(--spacing-4) max(var(--spacing-8), calc(env(safe-area-inset-bottom) + var(--spacing-4)));
}

/* ---------- 2 · How to play ----------
   Opens over whichever screen is showing, so it covers it. */
.howto { z-index: 15; background: var(--color-bg); }
.howto-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.howto-top { display: flex; padding: var(--spacing-4) var(--spacing-4) var(--spacing-2); }
.howto-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-4) var(--spacing-8);
}
.howto-head { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); }
.kicker {
  color: var(--color-teal);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--tracking-caps);
  line-height: 16px;
  text-transform: uppercase;
  text-align: center;
}
.howto-title {
  font-family: var(--font-display);
  font-size: var(--text-stamp);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 42px;
  text-align: center;
}
.steps { display: flex; flex-direction: column; gap: var(--spacing-6); max-width: 302px; }
.steps li { display: flex; align-items: flex-start; }
.step-num {
  flex-shrink: 0;
  width: 28px;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-clue);
  font-weight: 600;
  line-height: 26px;
}
.steps h2 { font-family: var(--font-display); font-size: var(--text-button); font-weight: 600; line-height: 26px; }
.steps p { margin-top: var(--spacing-1); color: var(--color-text-muted); font-size: var(--text-body); line-height: 22px; }

/* ---------- Game header ---------- */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 60px;
  padding-inline: var(--spacing-4);
}
.logo {
  appearance: none;
  border: 0;
  padding: 0;
  width: 145px;
  height: 32px;
  flex-shrink: 0;
  background: url(../../design/logo-full.png) -5.5px -8.5px / 157px no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.header-tools { display: flex; align-items: center; }
.pips { display: flex; align-items: center; gap: var(--spacing-3); }
.pip {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-text-muted) 28%, transparent);
}
.pip.is-current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--color-selection);
  background: var(--color-surface);
}
.pip.is-current::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: inherit;
  background: var(--color-selection);
}
/* Played pips take the answer's color (spec 6.2). Sized up from the empty pip so
   the color reads; not drawn in Paper yet. */
.pip.is-played {
  width: 14px;
  height: 14px;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--color-surface), 0 1px 4px rgb(0 0 0 / 22%);
}

/* ---------- 3 · Clue ---------- */
.clue-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: var(--spacing-4);
}
.clue-card-wrap { position: relative; width: 100%; max-width: 348px; padding-top: 22px; }
.clue-card {
  padding: var(--spacing-8) 28px;
  border-radius: var(--radius-xl);
  background: var(--color-clue-bg);
  box-shadow: var(--shadow-sticker);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 42px;
  text-wrap: pretty;
}
.clue-card.is-long { font-size: 30px; line-height: 36px; }
.round-badge {
  position: absolute;
  left: 50%;
  top: -26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-left: -38px;
  border: var(--spacing-sticker-border) solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-badge-bg);
  box-shadow: var(--shadow-sticker);
  rotate: 6deg;
  animation: pop-in var(--dur-pop) var(--ease-spring) 120ms both;
}
.round-badge-label {
  color: var(--color-badge-text);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  line-height: 12px;
  text-transform: uppercase;
}
.round-badge-num { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 32px; }
.hint { color: var(--color-text-muted); font-size: var(--text-body); font-weight: 700; line-height: 20px; text-align: center; }
@keyframes pop-in {
  0% { opacity: 0; scale: 0.9; }
  60% { opacity: 1; scale: 1.04; }
  100% { scale: 1; }
}

/* ---------- 4 to 6 · Round: picker ----------
   Top to bottom: header, clue, board, pick, lock button. The clue, pick, and
   button live together in .side (desktop stacks them in a panel beside the
   board), so here .side steps aside and `order` puts the board between them. */
.round { --play-pad: var(--spacing-4); --play-gap: var(--spacing-3); --zoom-h: 48px; }
.side { display: contents; }
.clue-compact { order: 1; flex-shrink: 0; padding: var(--spacing-2) var(--spacing-4) 0; }
.play { order: 2; }
.pick-row { order: 3; }
.side > .bottom { order: 4; margin-top: auto; }
.clue-note {
  padding: 12px 18px 14px;
  border: 4px solid var(--color-surface);
  border-radius: var(--radius-lg);
  background: var(--color-clue-bg);
  box-shadow: var(--shadow-sticker);
  font-family: var(--font-display);
  font-size: var(--text-clue);
  font-weight: 500;
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
/* Longer clues drop a size so the board keeps its room. Not in Paper: the
   artboards only show a short clue. */
.clue-note.is-long { font-size: var(--text-body-lg); }

/* The board is square at most, so .play is as tall as the zoom bar plus a full
   board, and gives up height first when the screen is short. */
.play {
  flex: 0 1 calc(var(--play-pad) + var(--zoom-h) + var(--play-gap) + var(--app-w) - 2 * var(--spacing-4));
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--play-gap);
  padding: var(--play-pad) var(--spacing-4) 0;
}
.zoom-bar { display: flex; align-items: center; justify-content: center; gap: var(--spacing-3); flex-shrink: 0; height: var(--zoom-h); }
.zoom-level { display: flex; align-items: center; gap: 4px; }
.zoom-level i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-pip-empty); transition: background-color 160ms; }
.zoom-level i:nth-child(2) { height: var(--spacing-3); }
.zoom-level i:nth-child(3) { height: var(--spacing-5); }
.zoom-level[data-level="1"] i:nth-child(1),
.zoom-level[data-level="2"] i:nth-child(2),
.zoom-level[data-level="3"] i:nth-child(3) { background: var(--color-selection); }

/* The board. It is a window onto the 256 swatches: level 1 fits the whole board,
   levels 2 and 3 zoom in and pan. Swatches only ever sit on pure white. */
.lens {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: calc(var(--app-w) - 2 * var(--spacing-4));
  border-radius: 10px;
  background: var(--color-board-surround);
  box-shadow: var(--shadow-board);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-radius var(--dur-zoom) var(--ease-out);
}
.lens[data-level="2"] { border-radius: var(--radius-lg); cursor: grab; }
.lens[data-level="3"] { border-radius: 30px; cursor: grab; }
.lens.is-dragging { cursor: grabbing; }
.lens:focus-visible { outline-offset: 2px; }
.field { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.field.is-animating { transition: transform var(--dur-zoom) var(--ease-out); }

.chip {
  --edge: 0 0 0 0 transparent;
  --ring: 0 0 0 0 transparent, 0 0 0 0 transparent;
  --lift: 0 0 0 0 transparent;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  height: var(--s);
  border-radius: var(--r);
  background: var(--c);
  color: var(--color-text-inverse);
  transform: translate(var(--x), var(--y)) rotate(var(--tilt, 0deg)) scale(var(--scale, 1));
  /* Candy lip: a darker bottom edge and a soft top highlight, both inside the chip. */
  box-shadow:
    var(--edge),
    inset 0 calc(var(--lip) * -1) 0 rgb(0 0 0 / 22%),
    inset 0 calc(var(--lip) * 0.75) 0 rgb(255 255 255 / 26%),
    var(--ring),
    var(--lift);
  transition: opacity 240ms linear var(--delay, 0ms);
}
.field.is-animating .chip {
  transition:
    transform var(--dur-zoom) var(--ease-out),
    width var(--dur-zoom) var(--ease-out),
    height var(--dur-zoom) var(--ease-out),
    border-radius var(--dur-zoom) var(--ease-out),
    opacity 240ms linear var(--delay, 0ms);
}
/* On the reveal, columns that wrap around to sit beside the answer fade in where
   they land instead of flying across the board. */
.field.is-animating .chip.is-wrapped {
  transition: opacity 240ms linear var(--delay, 0ms);
  animation: fade-in 200ms linear both;
}
.chip.on-light { color: var(--color-text); }
.chip.has-edge { --edge: inset 0 0 0 1px var(--color-border); }

.chip.is-selected {
  z-index: 3;
  --ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-selection);
}
:where(.lens[data-level="3"]) .chip.is-selected {
  --tilt: -4deg;
  --ring: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-selection);
  --lift: var(--shadow-lifted);
  transition: transform var(--dur-pop) var(--ease-spring), opacity 240ms linear var(--delay, 0ms);
}
/* Check mark on the selected chip, nudged up 1.5px to sit above the lip */
.lens[data-level="3"] .field:not(.is-revealed) .chip.is-selected::after,
.lens[data-level="wide"] .field:not(.is-revealed) .chip.is-selected::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -12.5px 0 0 -11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 7 · Round: reveal ---------- */
/* Chips fade by ring, and show their points at levels 2 and 3. */
.field.is-revealed .chip { opacity: 0.15; }
.field.is-revealed .chip[data-pts="1"] { opacity: 0.2; }
.field.is-revealed .chip[data-pts="2"] { opacity: 0.3; }
.field.is-revealed .chip[data-pts="3"] { opacity: 0.6; }
.field.is-revealed .chip[data-pts="4"],
.field.is-revealed .chip[data-pts="5"],
.field.is-revealed .chip.is-selected { opacity: 1; }
.field.is-revealed .chip[data-pts]::before {
  content: attr(data-pts);
  position: absolute;
  inset: 0 0 var(--lip) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 24px;
}
.lens[data-level="2"] .field.is-revealed .chip[data-pts]::before { font-size: 15px; }
.lens[data-level="1"] .field.is-revealed .chip[data-pts]::before { content: none; }
/* The answer: a dashed ink ring that marches around the chip, plus a halo that
   pulses outward. The pick's ring is solid and still, so the two read apart.
   Both are ink, never a color, so they don't tint the swatches around them. */
.field.is-revealed .chip.is-target {
  --halo: 7px;
  z-index: 2;
  outline: 3px solid transparent;
  outline-offset: var(--halo);
  animation: answer-pulse 1.8s var(--ease-out) 600ms infinite;
}
.field.is-revealed .chip.is-target.is-selected { --halo: 12px; }   /* a perfect pick: both rings, pulse outside them */
.lens[data-level="2"] .field.is-revealed .chip.is-target { --halo: 5px; outline-width: 2px; }
.lens[data-level="1"] .field.is-revealed .chip.is-target { --halo: 5px; outline-width: 2px; }
@keyframes answer-pulse {
  0% { outline-color: color-mix(in srgb, var(--color-selection) 55%, transparent); outline-offset: var(--halo); }
  75%, 100% { outline-color: transparent; outline-offset: calc(var(--halo) + 10px); }
}
.answer-ring rect { fill: none; }
.answer-ring .casing { stroke: var(--color-surface); }
.answer-ring .stroke {
  stroke: var(--color-selection);
  stroke-linecap: round;
  animation: answer-march 900ms linear infinite;
}
@keyframes answer-march { to { stroke-dashoffset: calc(var(--dash) * -1); } }
.reveal-mark {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms linear;
}
.reveal-mark.answer-ring { z-index: 2; }   /* above the answer chip, under the pick's ring */
.field.is-revealed .reveal-mark { opacity: 1; transition-delay: 360ms; }
.field.is-revealed .answer-ring { transition-delay: 200ms; }
.miss-line path { fill: none; stroke-linecap: round; }
.miss-line path.casing { stroke: var(--color-surface); }
.miss-line path.stroke { stroke: var(--color-selection); }
.miss-line circle.casing { fill: var(--color-surface); }
.miss-line circle.stroke { fill: var(--color-selection); }

/* Your pick: a die-cut sticker of the pick, so the color is judged at size */
.pick-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  flex-shrink: 0;
  height: var(--spacing-16);
  margin: var(--play-gap) var(--spacing-4) 0;
  padding-inline: var(--spacing-2);
  visibility: hidden;
}
.pick-row.has-pick { visibility: visible; }
.swatch-sticker {
  flex-shrink: 0;
  width: var(--spacing-16);
  height: var(--spacing-16);
  border: 4px solid var(--color-surface);
  border-radius: var(--radius-lg);
  background: var(--c, var(--color-surface-sunken));
  box-shadow: var(--shadow-lifted);
  rotate: -10deg;
}
.swatch-sticker.tilt-right { rotate: 10deg; }
.swatch-sticker.pop { animation: pop-in var(--dur-pop) var(--ease-spring) both; }
.pick-meta { display: flex; flex-direction: column; gap: 2px; }
.pick-label { font-size: var(--text-body); font-weight: 800; line-height: 20px; }
.pick-hex { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 18px; }

/* On reveal the controls leave and the result sheet slides up over the board */
.round.is-reveal .zoom-bar,
.round.is-reveal .pick-row,
.round.is-reveal .side > .bottom { display: none; }
.result-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-6) var(--spacing-6) max(var(--spacing-8), calc(env(safe-area-inset-bottom) + var(--spacing-4)));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-sheet);
  visibility: hidden;
  translate: 0 105%;
  transition: translate 380ms var(--ease-out), visibility 0s 380ms;
}
.round.is-reveal .result-sheet { visibility: visible; translate: 0 0; transition: translate 380ms var(--ease-out) 240ms; }
.stamp { display: contents; }
.stamp-row { display: flex; align-items: center; justify-content: space-between; width: 262px; padding: 4px 4px 0; }
.score-sticker {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  padding-top: 14px;
  border: var(--spacing-sticker-border) solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--tier-tint, var(--color-surface-sunken));
  box-shadow: var(--shadow-stamp);
  rotate: 6deg;
}
.round.is-reveal .score-sticker { animation: pop-in var(--dur-pop) var(--ease-spring) 520ms both; }
.score-num { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 52px; }
.score-of { color: var(--color-text-muted); font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 22px; }
.result-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 300px; text-align: center; }
.result-copy h2 { font-family: var(--font-display); font-size: var(--text-button); font-weight: 600; line-height: 24px; }
.result-copy p { color: var(--color-text-muted); font-size: var(--text-body); line-height: 20px; text-wrap: balance; }

/* ---------- Day complete (not designed in Paper yet) ---------- */
.done-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  padding: 0 var(--spacing-4) var(--spacing-2);
}
.done-head { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); }
.done-total { font-family: var(--font-display); font-size: var(--text-score); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 60px; }
.done-of { color: var(--color-text-muted); font-size: var(--text-title); letter-spacing: 0; }
.results {
  align-self: stretch;
  padding: var(--spacing-1) var(--spacing-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-board);
}
.results li { display: flex; align-items: center; gap: var(--spacing-4); padding-block: var(--spacing-2); }
.results li + li { border-top: 1px solid var(--color-border); }
.result-swatch {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: var(--spacing-badge-border) solid var(--color-surface);
  border-radius: var(--radius-md);
  background: var(--c);
  box-shadow: var(--shadow-sticker);
  rotate: -4deg;
}
.results li:nth-child(even) .result-swatch { rotate: 4deg; }
.result-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.result-name strong { font-family: var(--font-display); font-size: var(--text-body-lg); font-weight: 600; line-height: 22px; }
.result-name span { color: var(--color-text-muted); font-size: var(--text-caption); font-weight: 700; line-height: 16px; }
.result-points {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--tier);
  color: var(--tier-text, var(--color-tier-text));
  font-family: var(--font-display);
  font-size: var(--text-button);
  font-weight: 600;
}
.share-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sticker);
  rotate: -2deg;
}
.share-grid { display: grid; grid-template-columns: repeat(5, 20px); gap: 4px; flex-shrink: 0; }
.share-grid i { width: 20px; height: 20px; border-radius: 5px; background: var(--color-surface-sunken); }
.share-note { max-width: 150px; color: var(--color-text-muted); font-size: var(--text-label); font-weight: 700; line-height: 18px; }
.countdown { color: var(--color-text-muted); font-size: var(--text-body); font-weight: 700; }
.countdown span { color: var(--color-text); font-family: var(--font-mono); font-weight: 500; }

/* Score colors, by points */
[data-tier="5"] { --tier: var(--color-tier-5); --tier-tint: var(--color-tier-5-tint); }
[data-tier="4"] { --tier: var(--color-tier-4); --tier-tint: var(--color-tier-4-tint); }
[data-tier="3"] { --tier: var(--color-tier-3); --tier-tint: var(--color-tier-3-tint); }
[data-tier="2"] { --tier: var(--color-tier-2); --tier-tint: var(--color-tier-2-tint); }
[data-tier="1"] { --tier: var(--color-tier-1); --tier-tint: var(--color-tier-1-tint); --tier-text: var(--color-text-inverse); }
[data-tier="0"] { --tier: var(--color-tier-0); --tier-tint: var(--color-tier-0-tint); }
.share-grid i[data-tier] { background: var(--tier); }

/* ---------- Toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  bottom: 112px;
  z-index: 20;
  translate: -50% 0;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  font-size: var(--text-label);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow-sticker);
  animation: pop-in var(--dur-pop) var(--ease-spring) both;
}

/* ---------- Short viewports ----------
   The artboards are 844 tall, but a phone browser shows roughly 660 to 750 once
   its toolbars are counted. Tighten the chrome so the board keeps its room. */
@media (max-height: 740px) {
  .game-header { height: 52px; }
  .round { --play-pad: var(--spacing-3); --play-gap: var(--spacing-2); --zoom-h: 44px; }
  .pick-row { height: 52px; }
  .pick-row .swatch-sticker { width: 48px; height: 48px; border-radius: var(--radius-md); }
  .bottom { padding-top: var(--spacing-3); padding-bottom: max(var(--spacing-4), calc(env(safe-area-inset-bottom) + var(--spacing-2))); }
  .clue-note { padding: 8px 16px 10px; }
  .howto-body { gap: var(--spacing-6); padding-top: var(--spacing-2); }
  .result-sheet { gap: var(--spacing-3); padding-bottom: max(var(--spacing-5), calc(env(safe-area-inset-bottom) + var(--spacing-3))); }
}

/* ---------- Reduced motion: fade only, no scale, rotate, sink, or ripple ---------- */
@media (prefers-reduced-motion: reduce) {
  .screen, .round-badge, .swatch-sticker.pop, .toast, .round.is-reveal .score-sticker { animation: fade-in 150ms linear both; }
  .btn-primary, .icon-btn { transition: none; }
  .btn-primary:active:not(:disabled), .icon-btn:active:not(:disabled) { translate: none; }
  .field.is-animating, .field.is-animating .chip, .lens { transition: none; }
  .chip, .lens[data-level="3"] .chip.is-selected { transition: opacity 150ms linear; }
  .field.is-revealed .chip.is-target { animation: none; outline-color: color-mix(in srgb, var(--color-selection) 30%, transparent); }
  .answer-ring .stroke { animation: none; }
  .result-sheet, .round.is-reveal .result-sheet { translate: none; transition: opacity 150ms linear; opacity: 0; }
  .round.is-reveal .result-sheet { opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } }