/* Griddles on the pencil-puzzle kit (games/static/games/puzzles/kit/puzzles.css
   and kit.css, loaded before this): its accent, a griddle-cake brown beside
   Star Battle's indigo, Fillomino's terracotta, Hashi's teal, Yin-Yang's
   plum, Galaxies' night sky and Aquarium's sea glass; and its board, a grid
   filled in with graphite until a picture shows. Cell units: one cell is 1 wide. */
:root {
  --accent: #8a5410;         /* the one filled button: 6.3:1 with white */
  --accent-ink: #ffffff;
  --gd-ink: #2a2724;         /* a filled cell */
  --gd-guide: color-mix(in srgb, #e3a84a 20%, transparent);  /* your row and column */
  --gd-done: #a8a196;        /* a finished clue number: 2.4:1, faded on purpose; the line says so too */
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.mark { display: block; overflow: visible; }
.gd-mark .mark-paper { fill: var(--paper-2); }
.gd-mark .mark-ink { fill: var(--accent); }
.gd-mark .mark-lines { fill: none; stroke: var(--ink); stroke-opacity: .25; stroke-width: .06; }
.gd-mark .mark-frame { fill: none; stroke: var(--ink); stroke-width: .18; }

/* ── the board ──────────────────────────────────────────────────────────── */
.griddles .gd-guide { fill: var(--gd-guide); pointer-events: none; }
.griddles .gd-ink { fill: var(--gd-ink); pointer-events: none; }
.griddles .layer-lines .cell-lines { stroke: color-mix(in srgb, var(--ink) 26%, transparent); }
.griddles .gd-fives { fill: none; stroke: var(--ink); stroke-width: .045; opacity: .7; pointer-events: none; }
.griddles .frame { fill: none; stroke: var(--ink); stroke-width: .08; }
.griddles .gd-x { fill: none; stroke: var(--soft); stroke-width: .07; stroke-linecap: round; pointer-events: none; }

/* Mistakes (shown as you go, or for a moment by Check): a red ring on a wrong fill, a red cross where a fill belongs. */
.griddles .gd-wrong { fill: none; stroke: var(--bad); stroke-width: .12; pointer-events: none; }
.griddles .gd-wrong-x { fill: none; stroke: var(--bad); stroke-width: .1; stroke-linecap: round; pointer-events: none; }

/* The clues: graphite, read across and down; faded once done; bold on the row and column you're on. */
/* (a clue as large as its line holds it: a two-digit clue's neighbors, in a
   line of 20 or fewer, are one digit, and at .52 "12" lit (800) still keeps
   an eighth of a cell from its neighbor in a row's clues, CW .62 apart) */
.griddles .gd-num { font: 600 .52px/1 var(--ui); font-variant-numeric: proportional-nums lining-nums; fill: var(--ink); text-anchor: middle; dominant-baseline: alphabetic; pointer-events: none; transition: fill var(--m-quick, 150ms) ease; }
.griddles .gd-num.done { fill: var(--gd-done); }
.griddles .gd-num.on { font-weight: 800; }
.griddles .gd-num.on.done { fill: var(--soft); }

/* The clues' bands: invisible until the grid is zoomed and moved so they'd
   leave the view; then pinned to its edge, on paper, with a rule along the
   grid side. No transition: they follow the scroll exactly. */
.griddles .gd-pin-bg { fill: var(--paper-2); opacity: 0; pointer-events: none; }
.griddles .gd-pin-edge { fill: none; stroke: var(--ink); stroke-width: .05; opacity: 0; pointer-events: none; }
.griddles .gd-pin.pinned .gd-pin-bg { opacity: 1; pointer-events: all; }
.griddles .gd-pin.pinned .gd-pin-edge { opacity: .5; }
.griddles .gd-pin.pinned .gd-pin-bg { filter: drop-shadow(0 0 .08px rgba(60, 48, 20, .35)); }

/* A stroke's length, by its end. */
.griddles .gd-badge { pointer-events: none; }
.griddles .gd-badge rect { fill: var(--ink); }
.griddles .gd-badge text { font: 700 .42px/1 var(--ui); fill: var(--paper-2); text-anchor: middle; dominant-baseline: alphabetic; }

/* The picture's title, under it once it's solved. */
.griddles .gd-title { font: 400 .78px/1 var(--display); fill: var(--ink); text-anchor: middle; dominant-baseline: central; opacity: 0; }
.griddles.big .gd-title { font-size: 1.15px; }
.griddles.done .gd-title { opacity: 1; }

/* Solved: the crosses, lines and clues step back and leave the picture. */
.griddles.done .gd-x, .griddles.done .gd-wrong, .griddles.done .gd-wrong-x { opacity: 0; }
.griddles.done .layer-lines .cell-lines, .griddles.done .gd-fives { opacity: .12; }
.griddles.done .gd-num { fill: var(--gd-done); }
.griddles.done .frame { stroke: var(--good); }
.griddles.done .gd-ink { fill: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .griddles .gd-x, .griddles .layer-lines .cell-lines, .griddles .gd-fives { transition: opacity .5s ease; }
  /* The reveal: each filled cell settles in turn from the top left, and the title rises in after. */
  .griddles.win .gd-ink { animation: gd-settle .45s cubic-bezier(.3, .7, .3, 1) var(--d, 0ms) both; transform-box: fill-box; transform-origin: center; }
  .griddles.win .gd-title { animation: gd-title .45s ease .55s both; }
}
@keyframes gd-settle { 0% { scale: .55; fill: var(--accent); } 60% { scale: 1.08; fill: var(--accent); } }
@keyframes gd-title { from { opacity: 0; translate: 0 .3px; } }

/* Check, in the tray under the desk. */
.gd-tools { display: flex; justify-content: center; }

/* ── a small grid: a daily's card, How to play, the result sheet ────────── */
.griddles-mini .mini-paper { fill: var(--paper-2); }
.griddles-mini .mini-ink { fill: var(--gd-ink); }
.griddles-mini.solved .mini-ink { fill: var(--accent); }
.griddles-mini .mini-cross { fill: none; stroke: var(--soft); stroke-width: .07; stroke-linecap: round; }
.griddles-mini .cell-lines { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-width: .04; }
.griddles-mini .mini-fives { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: .05; }
.griddles-mini .frame { fill: none; stroke: var(--ink); stroke-width: .1; }
.griddles-mini.solved .frame { stroke: var(--good); }
.griddles-mini .mini-dots { fill: none; stroke: var(--soft); stroke-width: .16; stroke-linecap: round; opacity: .7; }
.griddles-mini .mini-clue { font: 700 .46px/1 var(--ui); fill: var(--ink); text-anchor: middle; dominant-baseline: alphabetic; }

/* The result sheet's picture and its title. */
.gd-emblem { margin: 0; display: grid; justify-items: center; gap: var(--s2); }
.gd-emblem svg { width: 112px; height: 112px; }
.gd-emblem figcaption { font: 400 var(--t-heading)/1.2 var(--display); color: var(--ink); }
/* A short screen on its side hides the result sheet's emblem (kit.css); the picture's name still shows, small. */
@media (orientation: landscape) and (max-height: 500px) {
  .house-result .house-emblem:has(.gd-emblem) { display: grid; }
  .gd-emblem svg { display: none; }
  .gd-emblem figcaption { font-size: var(--t-label); }
}