/* The Daily Green — The Record
   The frame down to the sheet is ported from the Anagrams, which ported it from the Mazes,
   from the Word Sort, from the sudoku, from the crossword, from the word search — so this
   reads as a page of the same paper. Only what sits on the sheet is new.

   THIS IS THE FIRST THING IN THE FOLDER ON THIS SHELL WITH NO AGE GATE (SPEC §7.4), so the
   .gate block is absent rather than unused. It is not on the CLASSICS roster in
   tools/compare-games.py and must not be added to it: four surfaces would report at once and
   the answer would be to take it back off, not to add a gate. */

@font-face {
  font-family: 'Zuume';
  src: url('../assets/fonts/Zuume-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zuume';
  src: url('../assets/fonts/Zuume-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* THE SERIF IS `--grid-face`. Five classics say --grid-face, the scramble says --tile-face
   and the Mazes says --body-face; compare-games.py reports the :root block as a shared
   surface, so this joins the majority rather than inventing a third name. */
:root {
  --green:        #446329;   /* sampled from the newspaper background */
  --green-deep:   #1d2c12;
  --green-bright: #7bb03f;
  --paper:        #ebebeb;
  --ink:          #14140f;
  --ink-soft:     #4c4c44;
  --rule:         rgba(20, 20, 15, 0.22);

  --display: zuume, 'Zuume', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --grid-face: 'Times New Roman', Times, 'Tinos', 'Liberation Serif', serif;
}

* { box-sizing: border-box; }

/* A class-level `display` beats the UA stylesheet's [hidden] rule. Three separate games in
   this folder shipped that bug; any element given a display here needs this. */
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  padding: clamp(.4rem, 1.6vw, 1.1rem) clamp(0.5rem, 3vw, 2rem);
  font-family: var(--grid-face);
  color: var(--paper);
  background:
    linear-gradient(rgba(18, 30, 12, 0.7), rgba(18, 30, 12, 0.78)),
    url('../assets/bg-newspaper.jpg') center / cover fixed no-repeat;
  background-color: var(--green-deep);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- masthead */

/* #paper, not #play. The Five renamed its container and kept the sibling's `#paper` rule,
   which then matched nothing and let the sheet run the full width of a desktop window —
   the first drift compare-games.py was written to catch. */
#paper { max-width: 46rem; margin: 0 auto; }

/* THE MASTHEAD IS DELIBERATELY SMALLER HERE THAN IN THE TEN GAMES, and it is the one place
   this page breaks the shell on purpose.

   Every game's masthead is `min(30rem, 88%)` and byte-identical across all ten, because a
   game is a page of the paper and the masthead is the first thing a player meets. THIS IS NOT
   A PAGE OF THE PAPER — it is a strip at the top of the site's own games index, under the
   site's own Daily Green logo, and a full masthead there is the same brand twice in one
   screen with the games pushed below the fold.

   Measured at 375 px: the logo went 330 x 131 to 128 x 51, and the whole folded panel 391 px
   to the figure in §7.7. It is not on the CLASSICS roster, so compare-games.py does not hold
   it to the siblings' value and will not report this. */
.masthead { text-align: center; margin-bottom: .5rem; }
.masthead__logo { width: min(8rem, 34%); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }

.dateline {
  margin: .3rem auto 0; padding-top: .3rem;
  max-width: min(21rem, 94%);
  border-top: 1px solid rgba(255, 255, 255, .4);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.58rem, 2.2vw, .76rem);
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

/* ---------------------------------------------------------------- the sheet */

/* Vertical padding is tightened and the horizontal is the house value untouched. The sheet
   still reads as a sheet across its width, where the eye judges it; the height is what this
   page is paying for (SPEC §7.7). */
.sheet {
  display: block;
  padding: clamp(.55rem, 1.8vw, 1.15rem) clamp(0.75rem, 3vw, 2rem);
  color: var(--ink);
  background: url('../assets/paper.jpg') center / cover, var(--paper);
  border: 1px solid rgba(0, 0, 0, .4);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .45);
}
.sheet--record { margin-top: .5rem; }

.editions__head {
  margin: 0 0 1rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: .02em;
  border-bottom: 3px double var(--ink); padding-bottom: .4rem;
}

/* ---------------------------------------------------------------- buttons */

/* THE BARE `button` RULE, PORTED. The Five and the scramble both shipped their age gate's
   Enter button without it, so the one control neither project wrote fell through to browser
   chrome — Arial 13px on a 2px outset bevel, under a Zuume masthead, on a live site. The
   only <button> on this page is the reset, and it is exactly the same kind of control: the
   one nobody thinks about. */
button {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .9rem;
  padding: .6rem 1.1rem; color: var(--paper); background: var(--green);
  border: none; border-radius: 2px; cursor: pointer;
}
button:hover { background: var(--green-deep); }
button.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
button.ghost:hover { background: rgba(0, 0, 0, .07); }

/* `button:disabled` and `--pencil` ship as a PAIR (folder CLAUDE.md) — the word sort and the
   mazes have both, the other six have neither, and porting one without the other is what
   dimmed the Five's 28 keys. This page has neither, deliberately: nothing here is ever
   disabled. */

/* ---------------------------------------------------------------- the fold */

/* SPEC §7.7. Both sheets fold, because this sits at the top of the games index and measured
   1501 px at 375 x 812 with both open — nearly two phone screens before a visitor reaches
   the games it is meant to send them to.

   THE HEADING IS THE CONTROL, and the count stays in it in both states, so a folded panel
   still says something true. A drawer labelled only "Your best" tells a player nothing about
   whether there is anything in it. */

/* NO BOTTOM MARGIN ON THE HEADING — the gap belongs to the body, so a folded panel does not
   reserve space under a rule for content that is not there. Folded, that was 16 px per panel
   for nothing. */
.editions__head--fold { padding-bottom: 0; margin-bottom: 0; }
.fold__body { padding-top: .85rem; }

/* The house `button` rule paints a green block with padding and a radius (see above), which
   is right for the reset and wrong for a heading. This resets the four things that make it a
   block — background, colour, padding, radius — and KEEPS the display face, the weight, the
   uppercase and the letter-spacing, because those are what make it look like the heading it
   replaced. compare-games.py lists classed buttons that inherit from the bare rule; this one
   inherits on purpose and the list is where you would check that. */
.fold {
  display: flex; align-items: baseline; gap: .6rem; width: 100%;
  /* The vertical padding is a TOUCH TARGET, not spacing. Measured at 375 px the heading row
     came to 31 px, and unlike the Five's 31 px keys or the Anagrams' 32 px tiles there is no
     second argument here — the row is not unusually tall, a miss is not free (it folds the
     wrong panel), and there is no keyboard path past it. This takes it to ~44 px and costs
     the folded page about 24 px in total. */
  /* Padding restored to hold the 44 px target after the type came down for §7.7's shrink —
     it measured 37 px on the smaller heading. This is the one place the shrink is NOT allowed
     to pay for itself: a miss here folds the wrong panel, and unlike the Five's 31 px keys
     there is no second argument carrying the target. Costs the folded page 14 px. */
  padding: .72rem 0 .82rem; background: none; color: var(--ink); border-radius: 0;
  font-size: clamp(1.15rem, 4.2vw, 1.6rem); line-height: 1.05; letter-spacing: .02em;
  text-align: left; cursor: pointer;
}
.fold:hover { background: none; color: var(--green); }
.fold__title { flex: 0 0 auto; }

/* The count. Same face as the headline, deliberately a quarter of its size and in the soft
   ink: it is a caption on the heading, not a second heading. At heading size the eye would
   have two things to read first. */
.fold__meta {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--display); font-weight: 700;
  font-size: .68rem; letter-spacing: .16em; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fold__meta b { color: var(--ink); font-size: .9rem; }

/* Drawn, not a glyph: every mark in this folder is drawn, and a chevron character would be
   the one thing on the sheet set in the system UI face. */
.fold__mark {
  flex: none; width: .55rem; height: .55rem; margin-bottom: .18rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .12s ease;
}
.fold[aria-expanded="false"] .fold__mark { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .fold__mark { transition: none; } }

/* No height animation. The host iframe is resized from a height ping (SPEC §6.3), so an
   animated fold would drive a resize on every frame of it — and the newspaper idiom has no
   animation anywhere else. `[hidden]` at the top of this file carries !important, which is
   what stops `.card { display: grid }` beating it: the trap three games in this folder have
   already shipped. */
.fold__body[hidden] { display: none !important; }

/* ---------------------------------------------------------------- the tally */

/* The count moved into the fold heading, so this now carries only the roster warning — and
   it collapses to nothing when there is none, rather than leaving a gap above the card. */
.tally { margin: 0; }
.tally:empty { display: none; }
.tally__note {
  display: block; margin: 0 0 .8rem;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem; color: #b3241f;
}
.tally__note:empty { display: none; }

/* ---------------------------------------------------------------- the card */

.card { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .card { grid-template-columns: repeat(2, 1fr); } }

/* An <a>, not a <button>. The Five's front-page cards are anchors and the other five
   classics' are buttons, which is why five front pages print their card copy bold and two do
   not — a live difference nobody should "fix" casually (folder CLAUDE.md). Here the box is
   genuinely a link to another page, so an anchor is the honest element and the bold question
   does not arise. */
.box {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .7rem .8rem;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  background: transparent;
}
.box:hover { background: rgba(0, 0, 0, .05); }
.box--done { border-left-color: var(--green); background: rgba(68, 99, 41, .07); }

/* The tick is drawn, not a font glyph and not an image: every sibling draws its own marks,
   and an emoji here would be the one character on the page set in the system UI face. */
.box__mark {
  flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem;
  border: 1.5px solid var(--rule); border-radius: 50%;
  position: relative;
}
.box--done .box__mark { border-color: var(--green); background: var(--green); }
.box--done .box__mark::after {
  content: ''; position: absolute; left: .3rem; top: .12rem;
  width: .22rem; height: .5rem;
  border: solid var(--paper); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.box__text { flex: 1 1 auto; min-width: 0; }
.box__name {
  display: block;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.05rem; line-height: 1.1; letter-spacing: .02em;
}
.box__state {
  display: block; margin-top: .15rem;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: .62rem; color: var(--ink-soft);
}
.box--done .box__state { color: var(--green); }

/* SET AS A SENTENCE, not as a label. The rest of this sheet's furniture is uppercase Zuume
   at .7rem, which is right for "10 OUT OF 10 COMPLETED" and wrong for a line of running copy:
   the client's wording is 90 characters, and uppercased at that size it is four dense lines a
   reader skips. It is the one thing on the sheet that is asking to be READ, so it is set in
   the body face at body size. */
.prize {
  margin: 1rem 0 0; padding: .85rem 1rem;
  border: 2px dashed var(--rule); text-align: center;
  font-family: var(--grid-face); font-size: .95rem; line-height: 1.5;
  color: var(--ink-soft); text-wrap: balance;
}
.prize--full { border-color: var(--green); border-style: solid; color: var(--green); }

.card__foot { margin: .9rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }
.card__foot b { color: var(--ink); }

/* The run line and the share, under the card. `.linky` is the siblings' text control and it
   resets the house button rule the way the masthead links do — compare-games.py lists it as a
   classed button that inherits, which it does on purpose. */
.run {
  margin: .9rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .13em;
  font-size: .66rem; color: var(--ink-soft);
}
.run:empty { display: none; }
.run__said { color: var(--green); }

/* ---------------------------------------------------------------- the bests */

/* Wide content scrolls inside its own box. Three editions plus a label is four columns and a
   375px phone has not got them; the page itself must never scroll sideways. */
.scroller { overflow-x: auto; }

.bests { width: 100%; border-collapse: collapse; font-size: .85rem; }
.bests th, .bests td { padding: .45rem .5rem; text-align: left; border-bottom: 1px solid var(--rule); }
.bests thead th {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .13em;
  font-size: .62rem; color: var(--ink-soft); white-space: nowrap;
}
.bests tbody th {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .82rem; letter-spacing: .02em; white-space: nowrap;
}
.bests td { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* An empty cell reads as never played, not as zero. */
.bests td:empty::after,
.bests .none::after { content: '—'; color: var(--rule); }
.bests__unit { color: var(--ink-soft); font-size: .74rem; }

.bests__foot { margin: .8rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }

.reset { margin: 1.1rem 0 0; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.reset__note { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; color: var(--ink-soft); }

.colophon {
  margin: .5rem 0 0; text-align: center;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .16em;
  font-size: .58rem; color: rgba(255, 255, 255, .55);
}