/* CLUEZO game page (index.html): the animated savanna fills the window, with Goatle's layout on top:
   a home screen (name, date, Play) and one game panel.
   The look is the savanna at dusk: panels open on a pixel-art sunset (art/dusk.svg) whose acacia and
   grass are the panel's own colour, so the picture runs into the panel. One palette throughout: dark
   earth, warm cream, and gold as the only accent; green and terracotta only say "solved" and "missed". */
:root {
  --panel: #1b130c;          /* the same colour as the dusk art's foreground */
  --raise: #261b11;
  --sunk: #120c07;
  --line: rgba(236, 204, 140, .14);
  --text: #f4e8d0;
  --muted: #cbb791;          /* lighter than it was, so small notes read on the dark earth */
  --gold: #e6b44a;
  --gold-hot: #f6d47c;
  --gold-deep: #8b6427;
  --tile: #f6ebd3;
  --tile-low: #e4d1aa;
  --tile-ink: #24180c;
  --band: #3a1c0f;           /* the tiles' band: dusk earth */
  --band-low: #2a140a;
  --clue: #170e08;
  --sage: #a9c96e;           /* solved */
  --clay: #d9693e;           /* missed, wrong, out of time */
  --sq-green: #78b04a; --sq-yellow: #e6b44a; --sq-orange: #dd7f34; --sq-red: #c4452a;
  /* Jersey 20: the Jersey 10 letters drawn on a finer pixel grid, so they keep the look and read
     clearly at every size (one weight only). Silkscreen stays for the stone wordmark (caps.js). */
  --font-pixel: "Jersey 20", ui-monospace, monospace;      /* labels, clues, buttons */
  --font-block: "Jersey 20", ui-monospace, monospace;      /* tiles and numbers */
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
/* manipulation: quick taps (Submit, then Hint) don't double-tap zoom; pinch still does */
* { box-sizing: border-box; touch-action: manipulation; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: #1fb9fb; color: var(--text); font-family: var(--font-mono); overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
.backdrop { position: fixed; inset: 0; overflow: hidden; background: #1fb9fb; }
#scene { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.scrim { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(18, 10, 6, .55), rgba(18, 10, 6, .25)); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- the savanna look, after Goatle's snow-capped stone: caps.js draws the name and every capped
   box (date, Play, panels) in lilac-grey savanna stone, with a blanket of dry
   grass on top that slumps down the sides and sprouts out of them. The grass stands above each box
   (--cap-room), so a capped box needs that much space above it; it hangs --cap-hang into the box.
   The --cap-* sizes come from caps.js; the fallbacks hold until it has run. */
.capped { isolation: isolate; background: none; border: 0; box-shadow: none; filter: drop-shadow(0 5px 0 rgba(20, 10, 4, .35)); }
.capped:not(.panel) { position: relative; }
.cap-frame { z-index: -1; image-rendering: pixelated; pointer-events: none; }

/* ---- the plain pixel frame inside panels (the board): the same stone rim, no grass (art/frame.svg, 2 screen px per art px) */
.frame {
  border: 6px solid transparent;
  border-image: url("art/frame.svg") 3 / 6px stretch;
  image-rendering: pixelated;
  background: var(--panel);
  background-clip: padding-box;
}

/* ---- home, laid out and lettered like Goatle's: bold white sans, outlined dark where it sits on the scene */
:root {
  --font-ui: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --ink-line: #221a33;     /* the outline round text on the scene: the stone's own outline colour */
}
.home {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(56px, 12vh, 120px)) 16px 16px;
  pointer-events: none;
  font-family: var(--font-ui);
}
.home > * { pointer-events: auto; }
/* the game panel or a sheet: the home screen steps back behind it, as Goatle's does */
.home { transition: opacity .25s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
body:is(.playing, .reading) .home { opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity .25s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s .25s; }

.corner {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: max(12px, env(safe-area-inset-right, 0px));
  display: flex; gap: 6px; align-items: flex-start;
}
/* bare stone, no grass: a 3 art px rim (9px) on top and the sides, 5 (15px) below with the base.
   Sizes are whole art px (3px), so the 20px icons sit in the middle of a 24px fill. */
.corner-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; min-width: 42px; cursor: pointer;
  padding: 11px 14px 17px;
  font: 700 15px/1 var(--font-ui); color: #fff;
}
.corner-btn:not(:has(span)) { width: 42px; padding-inline: 0; }
.corner-btn svg { width: 20px; height: 20px; stroke-width: 2.2; }
.corner-btn:hover { color: var(--gold-hot); }

.home-top { display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: none; }
.wordmark {
  margin: 0; line-height: 0;
  font-family: "Silkscreen", ui-monospace, monospace; font-weight: 700; font-size: clamp(48px, 10vw, 92px); color: #e9e2f1;
}
.wordmark canvas { display: block; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(20, 10, 4, .3)); }
.wordmark:not(.drawn) canvas { display: none; }
.wordmark.drawn .wordmark-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.date {
  margin-top: calc(var(--cap-room, 27px) + 6px);
  padding: calc(var(--cap-hang, 12px) + 2px) calc(var(--cap-side, 9px) + 16px) calc(var(--cap-base, 6px) + 10px);
  font: 700 15px/1.2 var(--font-ui); color: #fff;
}
.play {
  display: inline-flex; align-items: center; gap: 14px; cursor: pointer;
  margin-top: calc(var(--cap-room, 27px) + 30px);
  /* the dark fill starts 12px into the box and ends 21px from its bottom (rim and base): the same
     10px inside it top and bottom centres the content on it */
  padding: calc(var(--cap-hang, 12px) + 10px) calc(var(--cap-side, 9px) + 34px) calc(var(--cap-base, 9px) + 22px);
  font: 700 26px/1 var(--font-ui); color: #fff;
}
/* the label's box trimmed to its capitals, and the triangle's to its ink, so both centre on what shows */
.play span { text-box: trim-both cap alphabetic; }
.play svg { width: 10.5px; height: 22px; fill: currentColor; stroke: none; }
.play:hover:not(:disabled) { color: var(--gold-hot); }
.play:active:not(:disabled) { transform: translateY(3px); }
.play:disabled { cursor: default; opacity: .85; }

.home-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 22px; text-align: center; }
.home-links, .home-sub {
  color: #fff; font-weight: 800; letter-spacing: .01em;
  text-shadow: /* a solid 3px outline all round (the underlines get it too), then a drop below, as on Goatle's links */
    3px 0 0 var(--ink-line), -3px 0 0 var(--ink-line), 0 3px 0 var(--ink-line), 0 -3px 0 var(--ink-line),
    3px 3px 0 var(--ink-line), -3px 3px 0 var(--ink-line), 3px -3px 0 var(--ink-line), -3px -3px 0 var(--ink-line),
    2px 3px 0 var(--ink-line), -2px 3px 0 var(--ink-line), 3px 2px 0 var(--ink-line), -3px 2px 0 var(--ink-line),
    2px -3px 0 var(--ink-line), -2px -3px 0 var(--ink-line), 3px -2px 0 var(--ink-line), -3px -2px 0 var(--ink-line),
    0 5px 0 var(--ink-line), 2px 5px 0 var(--ink-line), -2px 5px 0 var(--ink-line);
}
.home-links { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.home-sub { font-size: 15px; }
.home-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-shadow: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.home-link:hover { color: var(--gold-hot); }
.home-note { max-width: 30rem; margin-top: 4px; text-align: center; padding: 8px 12px; font-size: 14px; background: rgba(27, 19, 12, .92); border: 1px solid #6f6290; }
.dev-reset {
  position: fixed; left: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); padding: 4px 10px; cursor: pointer;
  font: 12px var(--font-mono); color: #fff; background: rgba(140, 30, 20, .85); border: 1px dashed #ffb3a3;
}

/* ---- the settings menu, under its button */
.menu-wrap { position: relative; }
.menu.capped {
  position: absolute; right: 0; top: calc(100% + 10px + var(--cap-room, 27px)); z-index: 20; width: 250px;
  padding: calc(var(--cap-hang, 12px) + 4px) calc(var(--cap-side, 9px) + 14px) calc(var(--cap-base, 6px) + 14px);
  font-family: var(--font-ui); text-align: left;
}
.menu-title { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.menu-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 0; background: none; border: 0; cursor: pointer; font: 700 15px var(--font-ui); color: #fff; text-align: left; }
.menu-label { flex: 1; }
.menu-row svg { width: 20px; height: 20px; }
.menu-row[aria-checked="true"] .cross, .menu-row[aria-checked="false"] .wave { display: none; }
#motionToggle { padding-left: 30px; }   /* in line with the Sound label */
.toggle { position: relative; width: 38px; height: 22px; border-radius: 11px; background: #3a2f4f; box-shadow: inset 0 0 0 2px #6f6290; transition: background .15s; }
.toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d6cde3; transition: transform .15s; }
.menu-row[aria-checked="true"] .toggle { background: var(--sage); box-shadow: inset 0 0 0 2px #6f8f30; }
.menu-row[aria-checked="true"] .toggle::after { transform: translateX(16px); background: #fff; }
.menu-note { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* keyboard focus: one gold ring on every control */
:is(button, a, [tabindex]):focus-visible { outline: 3px solid var(--gold-hot); outline-offset: 3px; }
.panel:focus-visible, .sheet:focus-visible { outline: none; }
.home-link:focus-visible { outline-offset: 5px; }
.menu-row:focus-visible { outline-offset: 0; }
.archive-day:focus-visible { outline-offset: -3px; }

/* reduced motion, from the settings menu or the system */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }

/* ---- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 6px 18px 8px; cursor: pointer;
  font-family: var(--font-pixel); font-weight: 400; font-size: 23px; letter-spacing: .02em;
  color: var(--text); background: var(--raise); border: 2px solid #0c0804;
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, .08), 0 3px 0 #0c0804;
}
.btn:hover { background: #31231a; }
.btn.primary {
  color: #2a1a08; background: linear-gradient(180deg, #fbe2a0, var(--gold) 55%, #cf9535);
  box-shadow: inset 0 2px 0 rgba(255, 248, 225, .7), inset 0 -3px 0 rgba(120, 72, 16, .4), 0 3px 0 #0c0804;
}
.btn.primary:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0c0804; }
.btn.big { min-height: 50px; font-size: 21px; padding: 8px 30px 10px; }
.btn:disabled { opacity: .5; cursor: default; }
.text-btn { background: none; border: 0; padding: 6px 2px; cursor: pointer; font-family: var(--font-pixel); font-weight: 400; font-size: 21px; color: var(--muted); }
.text-btn:hover { color: var(--text); }
.text-btn.armed { color: var(--clay); }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer; background: rgba(18, 10, 8, .55); border: 1px solid rgba(246, 212, 124, .25); color: var(--text); }
.icon-btn:hover { background: rgba(18, 10, 8, .8); }
.spacer { flex: 1; }

/* ---- panel: a capped box over the scene; the frame's stone rim and dark earth fill are on its canvas.
   Centred in the window (the grass above it counted in), placed with translate so the open and close
   animations (game.js) are free to use transform. */
.panel {
  --gap: clamp(12px, 4vh, 40px);
  position: fixed; z-index: 10; left: 50%; top: calc(50% + var(--cap-room, 27px) / 2);
  translate: -50% -50%;
  width: min(640px, calc(100% - 16px));
  max-height: calc(100dvh - 2 * var(--gap) - var(--cap-room, 27px));
  display: flex; flex-direction: column;
  outline: none;
  padding: var(--cap-hang, 12px) calc(var(--cap-side, 9px) + 12px) calc(var(--cap-base, 6px) + 12px);
  filter: drop-shadow(0 8px 0 rgba(20, 10, 4, .35));
}
.panel-head { flex: none; border-bottom: 1px solid var(--line); }
.panel-bar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; }
.round-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.round-label { font-family: var(--font-pixel); font-weight: 400; font-size: 23px; letter-spacing: .02em; color: var(--text); white-space: nowrap; text-shadow: 0 2px 0 rgba(10, 4, 4, .6); }
.pips { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.pips li { width: 9px; height: 9px; background: rgba(244, 232, 208, .14); box-shadow: 0 1px 0 rgba(10, 4, 4, .5); }
.pips li.now { background: var(--text); }
.pips li.g { background: var(--sq-green); }
.pips li.y { background: var(--sq-yellow); }
.pips li.o { background: var(--sq-orange); }
.pips li.r { background: var(--sq-red); }
.score { display: inline-block; font-family: var(--font-block); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: .02em; color: var(--gold-hot); white-space: nowrap; text-shadow: 0 3px 0 rgba(10, 4, 4, .7); transform-origin: 70% 60%; }
.score small { font-family: var(--font-pixel); font-size: 21px; color: var(--muted); font-weight: 400; margin-left: 4px; text-shadow: none; }
.score.bump { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 30% { transform: scale(1.3); color: #fff4d0; } }
.panel-body { min-height: 0; padding: 14px 8px 6px; overflow-y: auto; scrollbar-color: var(--gold-deep) transparent; }
/* under the results: the next game and Share, always on screen */
.panel-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 8px 2px; border-top: 1px solid var(--line); }
.panel-foot .btn { min-width: 120px; }

/* ---- ready */
.view-ready { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ready-title { font-family: var(--font-pixel); font-weight: 400; font-size: 36px; color: var(--gold-hot); line-height: 1; }
.ready-sub { font-size: 14px; color: var(--muted); max-width: 30rem; line-height: 1.55; }
.rounds-table { border-collapse: collapse; font-size: 15px; width: min(100%, 360px); }
.rounds-table th { font-weight: 500; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 4px 8px; }
.rounds-table td { padding: 5px 8px; border-top: 1px solid var(--line); }
.rounds-table td:first-child { color: var(--muted); }

/* ---- a round: after a TV word quiz: points and time up top, honeycomb tiles on a band, the clue in
   capitals on the band below, the whole board in one frame */
.board-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 60px; height: 36px; padding: 0 10px;
  font-family: var(--font-block); font-weight: 400; font-size: 25px; color: var(--text);
  background: var(--sunk); border: 1px solid var(--line); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35);
}
.stake { color: var(--gold-hot); }
.stake::after { content: "pts"; margin-left: 4px; font-family: var(--font-pixel); font-weight: 400; font-size: 18px; color: var(--muted); }
.stake.won { color: var(--sage); }
.stake.lost { color: var(--muted); }
.timer { min-width: 70px; font-variant-numeric: tabular-nums; }
.timer.urgent { color: #fff4ec; background: #8e2d16; border-color: var(--clay); animation: pulse 1s steps(2) infinite; }
.timer.stopped { color: var(--muted); }
@keyframes pulse { 50% { background: #6e2210; } }
.hint-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px 0 10px; cursor: pointer;
  font-family: var(--font-pixel); font-weight: 400; font-size: 22px; color: var(--gold-hot);
  background: transparent; border: 1px solid rgba(230, 180, 74, .55);
}
.hint-btn:hover:not(:disabled) { background: rgba(230, 180, 74, .1); }
.hint-btn small { font-size: 14px; color: var(--muted); }
.hint-count { font-family: var(--font-block); font-weight: 400; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; background: var(--gold); color: #2a1a08; font-size: 21px; line-height: 1; }
.hint-btn:disabled { opacity: .4; cursor: default; }

.board { display: block; margin: 0; cursor: text; }
.band {
  position: relative; container-type: inline-size;
  padding: 14px 12px;
  background:
    radial-gradient(ellipse 70% 120% at 50% 100%, rgba(246, 168, 80, .16), transparent 70%),
    linear-gradient(180deg, var(--band), var(--band-low));
  border-bottom: 1px solid rgba(246, 212, 124, .22);
}
/* pointy-top hexagons side by side, sharing their upright edges like a row of honeycomb */
.tiles { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.tile {
  --edge-c: #120a05;
  position: relative; flex: 0 1 62px; min-width: 0; aspect-ratio: 0.866;
  display: grid; place-items: center; cursor: pointer;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--edge-c);
  font-family: var(--font-block); color: var(--tile-ink);
  font-size: 30px;
}
/* the letter follows the tile: 38px on a full-size tile, smaller when nine of them share a phone */
.tile { container-type: inline-size; }
.tile span { font-size: min(38px, 60cqw); line-height: 1; }
.tile::before {
  content: ""; position: absolute; inset: 2px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, #fffaf0 0%, var(--tile) 40%, var(--tile-low) 100%);
}
.tile span { position: relative; }
.typing .tile.cursor, .tile.cursor { --edge-c: var(--gold); }
.tile.cursor::before { inset: 3px; }
.typing .tile.cursor:not(.has)::after { content: ""; position: absolute; bottom: 30%; width: 32%; height: 3px; background: var(--gold-deep); animation: blink 1s steps(2) infinite; }
.view-round:not(.typing) .tile.cursor { --edge-c: #120a05; }
.view-round:not(.typing) .tile.cursor::before { inset: 2px; }
.tile.locked::before { background: linear-gradient(180deg, #fff3cf 0%, #f6d98c 45%, #e3b75a 100%); }
.tile.locked { cursor: default; }
.tile.solved::before { background: linear-gradient(180deg, #f4fae6 0%, #d6e9ae 45%, #b3d27c 100%); }
.tile.solved { color: #253a10; }
.tile.missed { color: var(--clay); }
.tiles.shake { animation: shake .36s; }
/* a solved word's tiles hop up one after another */
.tiles.won .tile { animation: hop .42s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes hop { 40% { transform: translateY(-9px); } }
/* a hint's letter turns over into place */
.tile.fresh { animation: flip .4s ease-out; }
@keyframes flip { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* the field that takes the typing: over the tiles, invisible, big enough type that iOS doesn't zoom */
.typer {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0;
  opacity: 0; font-size: 16px; color: transparent; caret-color: transparent; background: transparent;
}
.clue {
  padding: 12px 16px 13px; min-height: 52px;
  display: grid; place-items: center;
  background: var(--clue);
  font-family: var(--font-pixel); font-weight: 400; font-size: 27px; letter-spacing: .04em; line-height: 1.2;
  text-transform: uppercase; text-align: center; color: var(--text);
}

.round-status { min-height: 24px; margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.round-status.good { color: var(--sage); }
.round-status.bad { color: var(--clay); }
.round-status b { font-family: var(--font-pixel); font-weight: 400; font-size: 25px; }
/* this round's wrong guesses, crossed out */
.tries { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.tries:empty { display: none; }
.tries li {
  padding: 3px 8px 3px; font-family: var(--font-block); font-weight: 400; font-size: 21px; letter-spacing: .06em;
  color: rgba(244, 196, 170, .8); background: rgba(217, 105, 62, .14);
  text-decoration: line-through; text-decoration-color: var(--clay); text-decoration-thickness: 2px;
}
.tap-hint { margin-top: 2px; text-align: center; font-family: var(--font-pixel); font-weight: 400; font-size: 20px; color: var(--muted); }
.typing .tap-hint { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .tap-hint { display: none; } }
.round-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* ---- results */
.view-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
/* the dusk art across the top of the results; its foreground is the panel's colour, so it runs into the panel */
.result-art {
  align-self: stretch; height: 102px; margin: -14px -8px 4px;
  background: url("art/dusk.svg") center bottom / 600px 102px no-repeat, #21141d;
  image-rendering: pixelated;
}
.eyebrow { font-family: var(--font-pixel); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: 21px; color: var(--muted); }
.result-points { font-family: var(--font-block); font-weight: 400; font-size: 73px; line-height: 1; color: var(--gold-hot); text-shadow: 0 4px 0 #6e4a17; }
.result-points small { font-family: var(--font-pixel); font-weight: 400; font-size: 29px; color: var(--muted); text-shadow: none; }
.result-meta { font-size: 14px; color: var(--muted); }
.squares { font-size: 26px; letter-spacing: 2px; margin: 4px 0; }
.words { width: 100%; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
.words li { display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 10px; align-items: baseline; padding: 9px 4px; border-top: 1px solid var(--line); }
.words .n { font-family: var(--font-pixel); font-weight: 400; font-size: 22px; color: var(--muted); }
.words .w { font-family: var(--font-block); font-weight: 400; font-size: 25px; letter-spacing: .06em; }
.words .w.missed { color: var(--clay); }
.words .p { font-family: var(--font-block); font-weight: 400; font-size: 23px; color: var(--gold-hot); }
.words .c { grid-column: 2 / 4; font-size: 13px; color: var(--muted); }
.next-game { flex: 1; text-align: left; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the day's scores: the curve draws itself left to right, the hill fills in, then your marker drops in */
.score-comparison { width: 100%; margin: 8px 0 2px; padding: 12px 12px 10px; background: var(--sunk); border: 1px solid var(--line); }
.score-comparison figcaption { text-align: left; font-family: var(--font-pixel); font-weight: 400; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chart { position: relative; margin-top: 8px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-axis { stroke: rgba(244, 232, 208, .2); }
.chart-fill { fill: rgba(230, 180, 74, .14); animation: chart-fade .7s .35s ease-out both; }
.chart-curve { fill: none; stroke: var(--gold-hot); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: chart-draw 1.1s cubic-bezier(.3, .7, .3, 1) both; }
.chart-marker { stroke: var(--text); stroke-width: 2; stroke-dasharray: 4 3; animation: chart-fade .3s .9s ease-out both; }
.chart-dot { fill: var(--text); transform-box: fill-box; transform-origin: center; animation: chart-pop .45s 1s cubic-bezier(.3, 1.6, .5, 1) both; }
/* page text over the chart, so it keeps its size however wide the chart is drawn */
.chart-you {
  position: absolute; bottom: 38px; translate: 8px 0;   /* above the axis: the scale below is 22px + 4px margin */
  font-family: var(--font-pixel); font-weight: 400; font-size: 21px; line-height: 1; color: var(--text);
  animation: chart-fade .4s 1.05s ease-out both;
}
.chart-you.left { translate: calc(-100% - 8px) 0; }
.chart-ticks { position: relative; height: 22px; margin-top: 4px; }
.chart-ticks span {
  position: absolute; top: 0; translate: -50% 0;
  font-family: var(--font-block); font-weight: 400; font-size: 20px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.chart-ticks span:first-child { translate: 0 0; }
.chart-ticks span:last-child { translate: -100% 0; }
@keyframes chart-draw { from { stroke-dashoffset: 1; } }
@keyframes chart-fade { from { opacity: 0; } }
@keyframes chart-pop { from { transform: scale(0); } }
.comparison-rank { margin-top: 4px; font-size: 13px; color: var(--gold-hot); }
.comparison-retry { margin-top: 4px; }

/* one optional rating of the day */
.daily-review { width: 100%; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.daily-review h2 { margin-bottom: 10px; font-family: var(--font-pixel); font-weight: 400; font-size: 26px; color: var(--text); }
.review-buttons { display: flex; justify-content: center; gap: 8px; }
.review-buttons .btn { width: 46px; min-height: 46px; padding: 4px 0 6px; font-family: var(--font-block); font-weight: 400; font-size: 25px; }
.review-buttons .btn[aria-pressed="true"] { color: #2a1a08; background: linear-gradient(180deg, #fbe2a0, var(--gold) 55%, #cf9535); }
.review-scale { display: flex; justify-content: space-between; max-width: 262px; margin: 6px auto 0; font-size: 12px; color: var(--muted); }
.review-note { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* a word's points flying up into the header score */
.fly {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  font-family: var(--font-block); font-weight: 400; font-size: 34px; color: var(--gold-hot);
  text-shadow: 2px 0 #1d172e, -2px 0 #1d172e, 0 2px #1d172e, 0 -2px #1d172e, 2px 2px #1d172e, -2px -2px #1d172e, 2px -2px #1d172e, -2px 2px #1d172e, 0 4px #1d172e;
}
/* pixel confetti (fx.js) */
.fx { position: fixed; inset: 0; z-index: 55; width: 100%; height: 100%; pointer-events: none; }

/* ---- how to play */
.sheet { width: min(520px, calc(100% - 16px)); }
.sheet-title { flex: 1; font-family: var(--font-pixel); font-weight: 400; font-size: 31px; color: var(--text); text-shadow: 0 2px 0 rgba(10, 4, 4, .6); }
.sheet-body { display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.55; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.steps b { color: var(--gold-hot); }
.legend { margin: 0; display: grid; gap: 4px; }
.legend div { display: flex; gap: 10px; align-items: center; padding: 5px 10px; background: var(--raise); }
.legend dt { font-size: 16px; } .legend dd { margin: 0; }
.sheet-note { color: var(--muted); font-size: 13px; }
.sheet-link { color: var(--gold-hot); text-underline-offset: 3px; }
.sheet-link:hover { color: var(--text); }

/* ---- the archive */
.archive-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.archive-day { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; background: var(--raise); color: var(--text); text-decoration: none; }
.archive-day:hover, .archive-day.current { background: #33251a; }
.archive-no { font-family: var(--font-block); font-weight: 400; font-size: 23px; color: var(--gold-hot); min-width: 52px; }
.archive-when { flex: 1; }
.archive-status { font-size: 13px; color: var(--muted); white-space: nowrap; }
.archive-status.done { color: var(--text); }
.archive-status b { font-family: var(--font-block); font-weight: 400; font-size: 23px; color: var(--gold-hot); }
.archive-status.perfect b { color: var(--sage); }
.archive-squares { display: inline-flex; gap: 2px; margin-right: 8px; vertical-align: 1px; }
.archive-squares i { width: 8px; height: 8px; background: rgba(244, 232, 208, .14); }
.archive-squares i.g { background: var(--sq-green); }
.archive-squares i.y { background: var(--sq-yellow); }
.archive-squares i.o { background: var(--sq-orange); }
.archive-squares i.r { background: var(--sq-red); }

/* ---- the account sheet: the streak */
.streak { display: grid; gap: 6px; }
.streak-title { margin: 0; font-family: var(--font-pixel); font-weight: 400; font-size: 21px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.streak-count { font-size: 15px; color: var(--muted); }
.streak-count b { font-family: var(--font-block); font-weight: 400; font-size: 68px; line-height: 1; color: var(--gold-hot); text-shadow: 0 4px 0 #6e4a17; }
.streak-best { font-size: 14px; color: var(--text); }
.account { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.account-who { display: grid; gap: 2px; }
.account-who b { font-family: var(--font-pixel); font-weight: 400; font-size: 26px; color: var(--text); }
.account-who span { color: var(--muted); overflow-wrap: anywhere; }
.account-actions { display: flex; align-items: center; gap: 12px; }
.account-actions .text-btn { font-size: 18px; }
/* Google's button: its four-colour G on white */
.google-btn { align-self: center; color: #1f1f1f; background: #fff; text-decoration: none; }
.google-btn:hover { background: #f2f2f2; }
.google-btn svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 480px) {
  /* near the top, so the board stays above the on-screen keyboard. Phones shrink only the visual
     viewport for the keyboard, so game.js tracks it in --vv-top and --vv-height */
  .panel {
    top: calc(var(--vv-top, 0px) + env(safe-area-inset-top, 0px) + 8px + var(--cap-room, 27px)); translate: -50% 0;
    max-height: calc(min(100dvh, var(--vv-height, 100dvh)) - 16px - var(--cap-room, 27px) - env(safe-area-inset-top, 0px));
  }
  .panel-foot { padding: 10px 2px 2px; }
  .home { padding-top: calc(env(safe-area-inset-top, 0px) + 120px); }
  .corner-btn span { display: none; }       /* Sign in shows its icon only */
  .corner-btn { width: 42px; padding-inline: 0; }
  .panel-body { padding: 10px 2px 4px; }
  .result-art { margin: -10px -2px 4px; }
  .pips { display: none; }
  .band { padding: 12px 6px; }
  .clue { font-size: 23px; padding: 10px; }
  /* with the keyboard up, the round packs tighter, and Give up and Submit stay pinned at the bottom
     if it still doesn't all fit */
  .panel:has(.view-round.typing) .panel-bar { padding-block: 4px; }
  .view-round.typing .board-top { margin-bottom: 6px; }
  .view-round.typing .band { padding-block: 8px; }
  .view-round.typing .tile { flex-basis: 50px; }
  .view-round.typing .clue { padding: 6px 10px; min-height: 0; }
  .view-round.typing .round-status { margin-top: 4px; min-height: 20px; }
  .view-round.typing .tap-hint { display: none; }
  .view-round.typing .round-foot { position: sticky; bottom: -4px; margin-top: 4px; padding-block: 4px; background: var(--panel); }
}
@media (prefers-reduced-motion: reduce) {
  .timer.urgent, .tile.cursor:not(.has)::after, .tiles.shake, .tiles.won .tile, .tile.fresh, .score.bump { animation: none; }
  .chart-fill, .chart-curve, .chart-marker, .chart-dot, .chart-you { animation: none; }
  .home { transition: none; }
}