/* The acrostic board, the start/pause gate, the entry field and the clue list.
   Layout is the POC's: the flex-wrap board, width:fit-content chunks and the
   680px stacking breakpoint are all load-bearing and documented in DESIGN.md §3.
   What changed is colour, type, radius and weight — and every colour comes from
   tokens.css.

   The dressing is the same as site.css: hairlines and marker bars for structure,
   the puzzle's accent for anything that lights up, and the primary for the
   board's own furniture. */

:root{
  --tile-w:32px; --tile-h:36px;
  --slot-w:25px; --slot-h:32px;
}

/* progress hairline pinned to the very top, above the masthead */
#line{
  position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);
  z-index:9;transition:width .35s var(--ease);
}

/* ---------------- header ---------------- */
.wrap header{
  padding:26px 0 14px;margin-bottom:20px;border-bottom:1px solid var(--rule);
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
}
.wrap h1{
  font-family:var(--display);font-weight:700;font-size:clamp(26px,4.4vw,36px);
  letter-spacing:-.035em;line-height:1.05;margin:0;
}
.wrap h1 em{font-style:normal;color:var(--accent-ink)}

/* The clock is set in the serif with its axes up, like the letters on the board
   and the final time — it is a printed figure, not a dashboard readout. Tabular
   numerals are what stop it jittering as the seconds tick. The pause control
   sits on the same baseline beside it. */
.dateline{
  flex-basis:100%;margin:6px 0 0;font-size:12px;letter-spacing:.01em;color:var(--dim);
}

/* ---------------- the gate ----------------
   The puzzle does not show itself. On arrival the board, the clue list and the
   entry field are all out of the document and this panel stands in their place;
   the clock starts on the button and not before, so the time on the scoreboard
   is time actually spent playing rather than time the tab was open. Pause is the
   same panel and the same mechanism — one state, two labels — which is why
   pausing cannot leave the board on screen to be studied for free.

   It is a panel in the flow, not an overlay: an overlay would have to blur or
   cover the board, and a blurred board with real letters in it is still a board
   somebody can read. Removing it is the only honest way to hide it. */
.gate{
  display:none;
  background:var(--card);border:1px solid var(--rule-firm);border-radius:var(--radius-card);
  border-top:4px solid var(--accent);
  min-height:300px;padding:44px 26px;
  text-align:center;
}
body.is-gated .gate{display:grid;place-items:center}
/* everything the gate stands in for */
body.is-gated .board,
body.is-gated .clues,
body.is-gated .note,
body.is-gated .entry{display:none}
/* the entry bar is out of the flow and the page owes back its height (see
   `.entry`); while it is gone, the debt is cancelled */
body.is-gated{padding-bottom:56px}

.gate-in{max-width:420px}
.gate-kicker{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);
}
.gate h2{
  font-family:var(--display);font-weight:700;font-size:clamp(24px,4vw,32px);
  letter-spacing:-.03em;line-height:1.1;margin:10px 0 0;
}
.gate p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--slate)}
#gateBtn{margin-top:22px;padding:14px 30px;font-size:14px}
.gate-figures{
  margin-top:16px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}

/* ---------------- how to play, on the gate ----------------
   The panel is where the clock is NOT running, which makes it the one place on
   the page where instructions are free to read. The note under the board says
   the same four things at length and stays there for the whole game; this is
   the short version, and it is deliberately the same block, in the same place,
   with the same styling as the binary's — the two games are one product, and a
   player should not have to learn twice where the rules live.

   Ranged left inside a centred panel: a numbered list is read down its left
   edge, and centring one turns it into a poster. */
.gate-rules{
  margin:22px auto 0;text-align:left;
  border-top:1px solid var(--rule);padding-top:16px;
}
.gate-rules-head{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);text-align:center;margin-bottom:12px;
}
.gate-rules ol{
  margin:0;padding:0 0 0 20px;
  display:grid;gap:7px;
  font-size:13.5px;line-height:1.5;color:var(--slate);
}
.gate-rules li::marker{color:var(--accent-ink);font-weight:800}
.gate-rules b{color:var(--ink);font-weight:800}

/* ---------------- board ---------------- */
/* The board is the one panel that separates by value rather than by a rule:
   light tiles on a dark ground, because a revealed letter has to read instantly
   against its blank neighbours. On the mint page it is the darkest thing on
   screen; in dark mode it lifts slightly off the page instead. Either way the
   tiles stay light, which is the half of the relationship that carries the
   legibility. */
.board{
  position:relative;
  background:var(--board);border:1px solid var(--board-line);border-radius:var(--radius-card);
  padding:28px 22px 26px;
  /* the inset hairline is the primary at a third strength: on a panel this dark
     it is the one place #58daca can sit at full saturation and still be a line
     rather than a glare */
  box-shadow:0 24px 50px -30px var(--shadow-board),inset 0 1px 0 var(--brand-line);
}
/* Neither the board nor the answer squares can be selected. The letters they are
   still owed no longer exist in the page at all — acrostic.js withholds them
   until the tile is revealed (DESIGN §2.4) — so there is nothing left here to
   leak; this is what stops a drag, a double-tap or a long press over a tile from
   painting a selection when the player is only clicking to focus the field. */
.board,.slots{-webkit-user-select:none;user-select:none}
.grid{
  display:flex;flex-wrap:wrap;
  justify-content:center;      /* centres every wrapped line */
  align-items:flex-start;
  gap:12px 34px;               /* row gap / word gap */
}
/* one word, held together so it never breaks across lines. flex-wrap is the
   safety valve: a word too long for the viewport at the smallest tile size has
   to break somewhere, and breaking is better than overflowing the page. */
.chunk{display:inline-flex;gap:3px;align-items:flex-start;flex-wrap:wrap}
/* A tile is drawn two ways, and which one depends on the theme rather than on
   the game. On paper it is a white square on a near-black board: the fill does
   all the work and --tile-line is the same white, so there is no visible edge.
   In the dark theme a white square is wrong — sixty-five of them on an unsolved
   board is a wall of glare, which is exactly what it looked like — so the fill
   goes dark and --tile-line becomes a real rim at 3.5:1 against the board. The
   tile is then drawn by its edge instead of by its area.
   A REVEALED tile lights up either way, but not to the same colour. On paper it
   goes white with dark ink. In the dark theme it takes the PUZZLE'S OWN accent
   with the letter reversed out white, so the sentence assembles itself in the
   day's colour instead of in a wall of white — the same reason the tiles stopped
   being white in the first place. --tile-on and --tile-ink are therefore set per
   accent in the dark blocks of tokens.css, and left alone in the light ones. */
.cell{
  position:relative;width:var(--tile-w);height:var(--tile-h);
  background:var(--tile);border:1px solid var(--tile-line);border-radius:var(--radius-tile);
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:900;font-size:18px;line-height:1;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  color:transparent;
  transition:color .2s ease,transform .2s ease,background .2s ease;
}
.cell .n,.cell .g{
  position:absolute;top:2px;font-family:var(--ui);
  font-size:9px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;
  transition:opacity .25s ease;
}
/* The position figure is ALWAYS the puzzle's accent, not a neutral grey. It is
   the only ink on an unrevealed tile, so it is the one place the accent can be
   read across the whole board at once — and it makes the board belong to the
   day's colour rather than to the chrome. --accent-ink is the accent at a value
   you can set type in, which is legible on a white tile and on a dark one
   without needing a second token per theme. */
.cell .n{left:4px;color:var(--accent-ink)}
.cell .g{display:none}
.cell.on{background:var(--tile-on);border-color:var(--tile-on);color:var(--tile-ink)}
.cell.on .n,.cell.on .g{opacity:0}
/* Hover preview. It used to FILL every tile the hovered answer owns with the
   accent, which turned a quarter of the sentence into solid coloured blocks and
   read as though those squares had been solved. The tiles are the puzzle; the
   preview is an annotation on it, so it belongs on the annotation layer — the
   position figure, which is the only thing on an unrevealed tile anyway. It
   takes --accent-ink because that is the accent at a value you can set type in,
   and it is legible on a white tile and on a dark one without a second token. */
/* Hover preview: the whole tile takes the accent, so the answer's letters read
   as a shape on the board at a glance. The figure flips to --on-accent, because
   it is now sitting ON the accent rather than beside it. */
.cell.hl{background:var(--accent);border-color:var(--accent)}
.cell.hl .n{color:var(--on-accent)}
/* the spring is the whole character of the reveal: the tile overshoots, then
   settles. Flattened entirely under prefers-reduced-motion, in site.css. */
.cell.pop{animation:pop .46s var(--spring)}
@keyframes pop{
  0%{transform:scale(1);background:var(--accent)}
  40%{transform:scale(1.22) rotate(-2deg);background:var(--accent)}
  100%{transform:scale(1);background:var(--tile-on)}
}
.punc{
  height:var(--tile-h);display:grid;place-items:end center;
  color:var(--punc);font-family:var(--serif);font-weight:700;font-size:20px;
  padding-bottom:3px;min-width:6px;
}
/* The quotation marks around a quoted sentence (§2.7). They are punctuation like
   any comma on the board — no tile, no letter behind them, nothing to fill in —
   and they sit inside the first and last `.chunk` so they can never wrap onto a
   line alone. Two differences from a comma: a raised comma belongs at the TOP of
   the row rather than on its baseline, and these are set a size larger, so they
   read as quotation marks rather than as specks. */
.punc.quo{
  place-items:start center;
  padding-bottom:0;padding-top:1px;
  font-size:27px;line-height:1;min-width:9px;
}

/* ---------------- entry ---------------- */
/* The field is pinned to the foot of the viewport at every width. The clue list
   is longer than a window on a desktop as well as on a phone, so a field sitting
   in the flow scrolls off exactly when it is wanted — the player is reading a
   clue and has to go back up to type it. Both were reported by players.
   It is `fixed`, not `sticky`: `position:sticky` with a `bottom` inset pulls a
   box UP from further down the flow; it does not hold one that has already
   scrolled off the top, so it does nothing for a field the page scrolls past.
   One bar, one behaviour, no breakpoint: the band spans the window and the field
   inside it keeps the 520px measure it has always had. */
.entry{
  position:fixed;left:0;right:0;bottom:0;z-index:6;
  margin:0;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  /* --page, not --card: see the masthead note in site.css. The chrome is the
     ground; a near-white band across the foot of a teal page was half the white
     on the screen. */
  background:var(--page);
  border-top:1px solid var(--rule-firm);
}
/* the band is full width; its contents keep the 520px measure. Named children
   rather than `.entry > *`, which would have to set `display` and would fight
   `.result`'s own display switching. */
.entry #guess,.entry .status,.entry .result{max-width:520px;margin-left:auto;margin-right:auto}
/* the bar is out of the flow, so the page owes back the height it would have
   occupied — without this it covers the last clue, the give-up button and the
   footer */
body{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))}
/* the result is a panel, not a bar: `.done` drops the block back into the flow,
   where it takes the field's place — and the debt is paid off with it */
.entry.done{
  position:static;max-width:520px;margin:26px auto 0;padding:0;
  background:none;border-top:0;
}
body:has(.entry.done){padding-bottom:56px}
#guess{
  /* block, so `margin:auto` can centre it in the full-width bar — an input is
     inline-block by default and would sit at the left edge */
  display:block;width:100%;padding:15px 18px;text-align:center;
  font-family:var(--ui);font-size:17px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  /* the field is a step DOWN from the bar it sits in, not a white slab on top
     of it — an inset teal well with the accent as its rim */
  background:var(--page-deep);border:2px solid var(--accent-deep);border-radius:var(--radius-card);
  outline:none;transition:border-color .15s,box-shadow .15s,background .15s;
}
#guess::placeholder{color:var(--placeholder);letter-spacing:.14em;font-weight:700}
/* Three states have to stay apart while the field is focused the whole time, so
   they are told apart by the weight of the ring rather than by colour: holding
   the caret, the beat after a correct answer, and a word that was already found.
   `.hit` is a 500 ms flash (acrostic.js) fired while the field already has
   focus, so it has to read wider than the focus ring it lands on top of —
   matching it would make a correct answer look like nothing happened. */
#guess:focus{border-color:var(--accent);box-shadow:0 0 18px 3px var(--accent-glow)}
#guess.hit{
  border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 32px 10px var(--accent-glow);
}
#guess.dupe{border-color:var(--dupe-line);box-shadow:none}
.status{
  min-height:19px;font-size:12px;color:var(--slate);text-align:center;
  padding-top:9px;letter-spacing:.01em;
}
.status b{color:var(--ink);font-weight:800}

/* give up: deliberately quiet, and two-step — one stray click must not end a
   puzzle the player is still working on. The first press arms the button, the
   second reveals; typing again, or four seconds of silence, disarms it.
   At the foot of the clue list: the player looks here when stuck, and it keeps a
   destructive button away from the field they are typing into. */
.giveup{text-align:center;padding:22px 0 0}
.giveup.gone{display:none}
#giveup{
  background:transparent;border:1px solid var(--rule-firm);border-radius:var(--radius-card);
  padding:9px 18px;cursor:pointer;
  font-family:var(--ui);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  transition:color .15s,border-color .15s,background .15s;
}
#giveup:hover{color:var(--ink);border-color:var(--ink)}
#giveup.armed{
  color:var(--accent-ink);border-color:var(--accent-deep);background:var(--accent-soft);
  box-shadow:0 0 14px 1px var(--accent-glow);
}

/* ---------------- clues ---------------- */
/* One layout at every width: the tip on its own line, its squares under it,
   both left-aligned. The two-column version — right-aligned tips against a
   fixed answer gutter — is the printed-acrostic look every other acrostic on
   the web also wears, and it was ours only by inheritance. Stacking is what the
   narrow layout already did, so this is the phone's list grown up rather than a
   third arrangement to keep working.
   The list is now a column of rules rather than a card: on paper a bordered box
   around a list is one line too many, and the rows already separate themselves. */
.clues{
  width:100%;max-width:640px;margin:34px auto 0;
}
.clues .section-head{margin-bottom:6px}
.clue{
  display:grid;gap:9px 0;
  padding:14px 10px;margin:0 -10px;
  /* --rule-firm, not --rule: a hairline drawn to sit on the page all but
     disappears on the mint panel these rows now sit on. */
  border-bottom:1px solid var(--rule-firm);
  transition:background .15s ease;
}
.clue:first-of-type{border-top:1px solid var(--rule-firm)}
/* Hovering a row previews the tiles it owns up on the board, so the row marks
   itself too — as a DEEP panel of the accent, reversed out, and the same one in
   both themes. The pale tint this used to take was fine on a pale page and brash
   on a saturated teal one: a block of near-white lavender sitting on #58daca.
   --accent-panel and --accent-panel-ink are deliberately theme-independent, so
   the light theme now gets exactly the purple the dark theme always had. */
.clue:hover{background:var(--accent-panel)}
.clue:hover .tip{color:var(--accent-panel-ink)}
/* The tips are the half of the page a player actually reads, so they are set at
   reading size in full ink rather than as a caption in a lighter tone. */
.tip{
  font-size:16px;font-weight:500;line-height:1.45;
  color:var(--ink);text-wrap:pretty;
}
.clue.done .tip{
  color:var(--muted);font-weight:400;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.slots{display:flex;gap:5px;flex-wrap:wrap;justify-self:start}
/* word break inside a multi-word answer: DEEP END gets a gap, not a space
   character. Printed acrostics separate the words this way. */
.slots .gap{width:9px}
/* The tile number lives in the corner and the letter below it, which is why the
   slot carries top padding rather than centring its letter in the whole box: a
   solved slot shows both at once, and at this size they were landing on top of
   each other. */
/* --page, NOT --card. A slot sits on the clue panel, and the panel IS --card —
   a slot drawn in the same token would be a mint square on a mint sheet. The
   pale went to the page in the swap (see tokens.css), so that is where a slot
   takes its fill from now. */
.slot{
  position:relative;width:var(--slot-w);height:var(--slot-h);
  background:var(--page);border:1px solid var(--slot-line);border-radius:var(--radius-slot);
  display:grid;place-items:center;padding-top:7px;
  font-family:var(--serif);font-weight:900;font-size:16px;
  font-variation-settings:"SOFT" 70,"WONK" 1;color:transparent;
  transition:color .2s ease,border-color .2s ease;
}
/* The slot's tile number is the SAME accent ink as the figure on the board tile
   it points at — they are two views of one number, and colouring them
   differently made that read as a coincidence rather than as a reference. */
.slot .n{
  position:absolute;top:1px;left:3px;font-family:var(--ui);
  font-size:8px;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums;
}
/* Every slot looks the same. The first one used to be filled with the accent,
   which in a printed acrostic means something — the initials spell the author
   and title. Ours spell nothing, so the colour was pointing at a message that
   was never there. */
.slot.on{color:var(--ink);border-color:var(--rule-firm)}
.slot.on .n{opacity:.45}
.slot.lit{animation:lit .5s var(--ease)}
@keyframes lit{
  0%{background:var(--accent);border-color:var(--accent-deep)}
  100%{background:var(--page);border-color:var(--slot-line)}
}

.note{
  max-width:640px;margin:24px auto 0;padding:16px 18px;
  background:var(--brand-soft);border-left:4px solid var(--brand);
  border-radius:var(--radius-card);
  font-size:13px;line-height:1.7;color:var(--slate);
}
.note b{color:var(--ink);font-weight:800}

/* ---------------- result (replaces the entry field) ---------------- */
.result{display:none;text-align:center}
.entry.done #guess,
.entry.done .status{display:none}
.entry.done .result{
  display:block;padding:26px 20px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
  border-top:3px solid var(--accent);
  animation:rise .4s var(--ease);
}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.result .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:800}
/* the one place the serif still gets to be big: a finished time is the page's
   trophy, and it is set as a printed figure rather than a UI readout */
.result .final{
  font-family:var(--serif);font-weight:900;font-size:56px;line-height:1.05;
  font-variation-settings:"SOFT" 80,"WONK" 1;
  font-variant-numeric:tabular-nums;margin:8px 0 0;letter-spacing:-.02em;
}
.result .flabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.result button{margin-top:20px;width:100%}

/* ---------------- the source card ---------------- */
/* What the sentence was, shown only once the puzzle is over — it is inside
   `.result`, so it appears and disappears with the rest of the panel and needs
   no JavaScript of its own (§2.7). The time above it is a centred trophy; this
   is prose, so it goes left-aligned and takes a rule of its own to sit under. */
.source{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  text-align:left;
}
.src-label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:800;
}
/* the person, or the work when there is no person — the one line a player
   glances at to see whose words they just assembled */
.src-name{
  font-family:var(--serif);font-weight:900;font-size:19px;line-height:1.25;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  color:var(--ink);margin-top:6px;
}
/* the work, the scene, the speaker, the year — joined with middots by the server */
.src-meta{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.5}
.src-note{font-size:13.5px;line-height:1.65;color:var(--slate);margin:10px 0 0}


@media (max-width:680px){
  /* The tile is sized from the viewport rather than stepped through
     breakpoints, because what has to fit is the sentence's longest word and no
     breakpoint knows how long that is. The divisor is a worst-case 15-letter
     word: at 390px this lands near 21px, which fits puzzle 3's ARCHAEOLOGISTS
     with room to spare, and it degrades smoothly instead of overflowing the
     page the way a fixed 25px did. */
  :root{
    --tile-w:clamp(19px,calc((100vw - 52px) / 15 - 2px),26px);
    --tile-h:calc(var(--tile-w) + 4px);
    --slot-w:22px;--slot-h:28px;
  }
  .cell{font-size:calc(var(--tile-w) * .6)}
  .cell .n,.cell .g{font-size:8px}
  .cell .n{left:3px}
  .cell .g{right:3px}
  .chunk{gap:2px}
  .grid{gap:9px 18px}
  .board{padding:16px 11px 14px}
  .punc{font-size:17px}
  .punc.quo{font-size:23px;min-width:8px}
  .wrap header{padding-top:20px}
  /* the gate has no board to stand in for at this width, so it does not need to
     reserve one screen's worth of height */
  .gate{min-height:240px;padding:34px 18px}
  .gate-rules ol{font-size:13px}
  /* the clue row is the same stacked shape it is on a wide screen; only the
     type and the padding come down */
  .tip{font-size:15px}
  .slot{font-size:15px;padding-top:6px}
  .clues{margin-top:26px}
  #guess{font-size:16px;padding:14px 16px}
  .result .final{font-size:44px}
  .src-name{font-size:17px}
  .src-note{font-size:13px}

  /* the pinned field is the same object at every width (see `.entry` above);
     only the type and the spacing inside it come down here */
  .status{padding-top:7px;min-height:16px;font-size:12px}
}