/* * The UI typeface, drawn on the same grid as the creatures — see * scripts/pixel/uifont.mjs. The app used the system monospace, which sat beside * hand-placed sprites and made one screen read as two products. * * ⚠️ `font-size` MUST be a multiple of 9px. The em box is exactly the 9-row glyph * grid, so 18px renders each row at 2 screen pixels and 27px at 3. Anything else * lands rows between pixels and the font blurs — which defeats the only reason to * have drawn it. Every size in this file is 18 or 27 for that reason. * * It is also FIXED-ADVANCE: every glyph is 6 units wide, so it is a monospace font * and the stat card's column alignment survives unchanged. */ @font-face { font-family: "ScanlingsPixel"; src: url("./font/scanlings-pixel.ttf") format("truetype"); font-display: block; /* never flash a fallback; the layout is sized for this font */ } :root { /* One type scale, two sizes. Pixel UIs do not have seven text sizes. */ --type: 18px; --type-big: 27px; --bg: #14161a; --panel: #101216; --line: #2e3238; --fg: #e8e6df; --dim: #8a8f98; --accent: #c8b06a; /* * ⛔ **VERDICT COLOURS, AND `--bad` WAS REFERENCED IN FOUR PLACES AND DEFINED IN NONE.** * `.danger`, `button.primary.danger` and the requirement rows all read `var(--bad, #d9534f)`, so * every one of them had always run on its fallback and neither theme had ever coloured it. * Defined here at exactly that fallback, so nothing changes appearance and the token stops being * a hole. ⭐ `--good` is new, for a requirement the team already meets. */ --good: #5aa469; --bad: #d9534f; /* * ⛔ **THE EIGHT ELEMENT COLOURS, AS TOKENS, BECAUSE THEY MUST CHANGE WITH THE THEME.** * * They used to be read straight out of `PALETTES[tone][4]` in JS and written as an inline * `style.color`. That palette is the CREATURE's ramp, tuned against a #14161a page, and an * inline colour cannot respond to a theme at all. Measured on light: every one of the eight * scored between **1.18 and 2.91** against #f4f2ed — unreadable, all of them. Alessandro * noticed the worst: *"AIR element is barely readable."* * * ⚠️ **THE LIGHT SET IS DERIVED, NOT PICKED.** Each keeps its hue and saturation and drops * only lightness, and the target contrast preserves each element's RELATIVE prominence from * the dark theme rather than flattening them all to 4.5. * * ⭐ That last part is the whole trick. Driving all eight to the same ratio makes them equally * readable and mutually indistinguishable — SACRED and EARTH came out the same brown, because * in the dark theme those two are separated by LIGHTNESS, not hue. Mapping the range instead * keeps the closest pair at 1.01 on light, which is exactly what it is on dark. */ --el-earth: #e3b055; --el-lightning: #f6ea6a; --el-water: #8ed2e8; --el-fire: #f7a54a; --el-poison: #dced5c; --el-void: #a08bd0; --el-sacred: #f4ead0; --el-air: #dfe7ec; /* * The stat ramp — five bands of twenty, red through green. * * Alessandro, 2026-08-08: *"you see all red you know immediately it's bad, even * before reading the numbers."* * * ⚠️ Muted on purpose. Web-standard #f00/#0f0 would be the two most saturated * things on a screen whose brightest colour is a soft gold, and the creatures are * drawn from sixteen-colour ramps. These sit in the same register as the art. * `--stat-3` IS the accent gold, so the middle of the ramp is the colour the rest * of the UI already uses. */ --stat-1: #b5483f; --stat-2: #c47a3d; --stat-3: #c8b06a; --stat-4: #8aa54a; --stat-5: #5f9e57; color-scheme: dark; } * { box-sizing: border-box; } /* * ⚠️ Load-bearing. The UA rule is `[hidden] { display: none }` at the lowest * possible specificity, so ANY class that sets `display` silently beats it — * `.gate { display: flex }` meant the name prompt never hid, and the app showed * the "what should we call you" screen and the scanner at the same time on a real * phone. Caught by Alessandro installing it, not by any test, because every test * asserted the `hidden` PROPERTY rather than what was on screen. */ [hidden] { display: none !important; } /* Light theme. `color-scheme` alone only restyles form controls, so the palette is swapped explicitly. */ :root[data-theme="light"] { --bg: #f4f2ed; --panel: #fffdf8; --line: #d9d4c9; --fg: #1d1f24; --dim: #6b6f78; --accent: #8a6d1f; /* ⚠️ Darkened for the light page — the dark set's green and red both fail contrast on it. */ --good: #2f7d43; --bad: #a8322e; /* Derived from the dark set above — hue and saturation held, lightness dropped until each one clears 4.5:1 on #f4f2ed at its share of the original prominence. Measured after: 4.60 (VOID) to 9.57 (SACRED), against 1.18–2.91 before. */ --el-earth: #765313; --el-lightning: #484204; --el-water: #16576c; --el-fire: #894b06; --el-poison: #404708; --el-void: #795cbd; --el-sacred: #4c3c12; --el-air: #2f4350; /* Darkened for a light background — the dark-theme ramp washes out on #f4f2ed. */ --stat-1: #9c342c; --stat-2: #a05a1c; --stat-3: #8a6d1f; --stat-4: #5f7a2a; --stat-5: #3d7238; color-scheme: light; } /* --- pixel frames -------------------------------------------------------- * * ⚠️ A 1px square-cornered CSS box reads as a WEB UI, not as pixel art, however * pixel-perfect the font beside it is. Alessandro: *"the borders are too clean for a * pixel game."* Three things separate a drawn frame from a `border: 1px solid`: * * 1. **Weight.** Sprites are drawn with a near-black 1px contour and displayed at * 2×, so their outline reads as 2 screen pixels. A 1px UI border is visually * thinner than everything it sits beside. Frames are 2px. * 2. **Notched corners.** Hand-drawn 8-bit frames cut the corner rather than turning * a perfect right angle — it is what a rectangle looks like when a person places * the pixels. The notch is a whole number of pixels so the diagonal steps land on * the grid instead of anti-aliasing into a curve. * 3. **No curves anywhere**, which the border-radius purge already handled. * * `clip-path` cuts through the border itself, so the corners come out stepped rather * than mitred — which is exactly the look. One class, applied everywhere, so the * whole UI shares one frame language. */ .px-frame { --notch: 4px; border: 2px solid var(--line); clip-path: polygon( var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch) ); } /* Small controls get a smaller notch, or the cut eats the whole corner. */ .px-frame-sm { --notch: 3px; } body { margin: 0; padding: 1.75rem 1rem 3rem; background: var(--bg); color: var(--fg); /* * Line height in WHOLE PIXELS, not a ratio. 1.5 × 18px = 27px per line, which * pushed the collection from seven visible creatures to three — the font grew and * the leading grew with it. 22px keeps 8px of air above a 14px cap height, which * is enough to read and half the wasted space. */ font: var(--type)/22px "ScanlingsPixel", ui-monospace, SFMono-Regular, Menlo, monospace; } main { max-width: 34rem; margin: 0 auto; } /* * ⛔⛔ **A HEADING THAT WRAPS MUST NOT TOUCH ITSELF** — his report, 2026-09-23, on "Climb from floor 150?": * *"we need some space between the 2 lines of the wrapped title… this issue is repeated in many places."* * ⚠️ **The cause is one fixed number**: `body` carries `line-height: 22px`, which every heading INHERITS while * its own font is 27px — so two lines sit 22px apart under 27px glyphs. A ratio scales with the font; a pixel * value cannot. ⭐ Applies to every heading at once, which is where the "many places" go. */ h1, h2, h3, h4 { line-height: 1.25; } h1 { margin: 0; font-size: var(--type-big); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .sub { margin: 0.35rem 0 1.5rem; color: var(--dim); } button { padding: 0.7rem 1.15rem; border: 0; background: var(--accent); color: #14161a; font: inherit; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; } button:disabled { background: var(--line); color: var(--dim); cursor: not-allowed; } .primary { display: block; width: 100%; padding: 0.95rem; } .ghost { background: transparent; border: 1px solid var(--line); color: var(--fg); font-weight: 400; } /* --- viewfinder --------------------------------------------------------- */ .viewfinder { position: relative; margin-top: 0.75rem; } .viewfinder video { display: block; width: 100%; max-height: 60vh; border: 1px solid var(--line); background: #000; object-fit: cover; } /* Guides the barcode into frame — a phone camera hunts otherwise. */ .reticle { position: absolute; top: 50%; left: 8%; width: 84%; height: 22%; transform: translateY(-50%); border: 2px solid var(--accent); opacity: 0.65; pointer-events: none; } .viewfinder .ghost { width: 100%; margin-top: 0.5rem; } /* --- manual entry ------------------------------------------------------- */ details { margin-top: 1rem; } summary { color: var(--dim); cursor: pointer; } form { display: flex; gap: 0.5rem; margin-top: 0.75rem; } input { flex: 1 1 auto; min-width: 0; padding: 0.7rem 0.85rem; border: 1px solid var(--line); background: #1b1e23; color: var(--fg); font: inherit; letter-spacing: 0.08em; } input:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* --- output ------------------------------------------------------------- */ pre { margin: 1.5rem 0 0; padding: 1.1rem 0.9rem; border: 1px solid var(--line); background: var(--panel); /* * The render guarantees no line exceeds 44 characters, so this should never * actually scroll. It stays as a safety net: a 
 scrolled right clips its
   * LEFT edge, which once hid the creature's own name.
   */
  overflow-x: auto;
  /*
   * ⚠️ `pre-wrap`, NOT `pre`. The 44-character guarantee above holds for the RENDERED
   * creature block, and then the egg message — an ordinary sentence — was put in here
   * and scrolled the panel sideways. Alessandro caught it on his phone. `pre-wrap`
   * keeps the alignment of anything pre-formatted and lets prose wrap, so no future
   * message can do it again; `overflow-x` stays as the net for an unbreakable token.
   */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre:empty {
  display: none;
}

.note {
  margin-top: 1.25rem;
  color: var(--dim);
  font-size: var(--type);
}

#scan-note {
  margin-top: 0.75rem;
}

.dim {
  color: var(--dim);
}

.status {
  margin: 1rem 0 0;
  font-size: var(--type);
  color: var(--dim);
}

.status[data-kind="warn"] {
  color: #e0a35c;
}

/* --- notes -------------------------------------------------------------- */

.note-editor {
  margin-top: 1rem;
}

.note-editor label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--type);
  color: var(--dim);
}

.private {
  color: var(--accent);
  opacity: 0.8;
}

textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  background: #1b1e23;
  color: var(--fg);
  font: inherit;
  font-size: var(--type);
  resize: vertical;
}

textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#note-saved {
  margin-top: 0.35rem;
}

/* --- collection --------------------------------------------------------- */

.collection {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.collection-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.collection h2 {
  margin: 0;
  font-size: var(--type);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.collection-actions {
  display: flex;
  gap: 0.4rem;
}

.small {
  padding: 0.35rem 0.7rem;
  font-size: var(--type);
}

.list {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

/*
 * THE "NEW" BADGE — a creature that arrived and has not been opened.
 *
 * ⚠️ A left BAR plus a corner tag, not just a coloured border. The rows are already
 * colour-coded by tier along their whole frame, so another colour would read as a tier
 * and not as news. A bar in the gutter sits outside that language entirely.
 *
 * It persists until the card is opened — Alessandro's call. A creature you have not
 * looked at is still one you have not looked at, however old, and an expiry would be us
 * deciding on the player's behalf that they have seen it.
 */
.row.is-unseen {
  position: relative;
  padding-left: 0.35rem;
}

.row.is-unseen::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: var(--accent);
}

/*
 * ⚠️ RESERVE THE SPACE. The tag is absolutely positioned, so without this it sat ON TOP
 * of the creature's title — "Zarudidex, the Brute of" with the rest under the badge.
 * Found by looking at the screen, which is the only place absolute positioning ever
 * confesses.
 */
.row.is-unseen .row-main {
  padding-right: 3rem;
}

.row.is-unseen .row-main::after {
  content: "NEW";
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--bg);
  background: var(--accent);
  padding: 1px 4px;
  pointer-events: none;
}

.chip-new[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg);
}

/*
 * "Mark all seen" — deliberately QUIETER than the other chips. It is an escape hatch beside
 * the NEW filter, not a peer of the tier chips: the common action is opening a creature, and
 * a button that clears every badge should not be the easiest thing on the row to hit.
 * Rendered only when the count is above zero, so it never sits there inert.
 */
.chip-seen-all {
  opacity: 0.75;
  font-size: 0.78rem;
}

.chip-seen-all:hover,
.chip-seen-all:focus-visible {
  opacity: 1;
}

/* Under the revealed creature: "4 more hatched — see them". */
.more-hatched {
  margin-top: 0.6rem;
}

.row-main {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  /*
   * thumbnail | three stacked lines: name / barcode / tier · clan · re-rolled
   *
   * ⚠️ It used to be `auto 1fr auto` with the meta right-aligned in its own
   * column and `white-space: nowrap`. On a narrow phone a long clan name plus
   * "re-rolled" could not shrink and pushed the text outside the card — which is
   * exactly what Alessandro reported. Two columns and a wrapping meta line cannot
   * overflow, because nothing is pinned to the right edge any more.
   */
  grid-template-columns: auto 1fr;
  /*
   * ⚠️ THE ROWS MUST BE EXPLICIT, and this is not cosmetic.
   *
   * `.row-thumb` says `grid-row: 1 / -1` to span every text line so the sprite anchors
   * the whole row. But `-1` resolves against the EXPLICIT grid, and with no
   * `grid-template-rows` every row here is implicit — so the thumbnail spanned only the
   * FIRST line, sat at the top of the row, and its `align-self: center` had nothing to
   * centre within. Alessandro saw the result exactly: *"vertically it's not in the middle
   * but like 2/3 up."* Measured before the fix: a 40px thumbnail 10.6px from the top of an
   * 83px row, so its centre was 11px above the row's.
   *
   * Three rows because there are three lines — name, barcode, and the tier/clan/re-rolled
   * meta. A fourth line would be implicit again and re-break the span, so it would need a
   * fourth track here.
   */
  grid-template-rows: repeat(3, auto);
  align-items: start;
  gap: 0 0.6rem;
  padding: 0.6rem 0.75rem;
  /*
   * ⚠️ BORDER AND BACKGROUND CARRY THE TIER, and nothing else does.
   *
   * The reference's rule: bind colour to the axis that VARIES inside one player's
   * collection. Tier varies; clan and house do not — a shopping trip returns one
   * clan, so a clan-coloured card makes every card the same colour. This is the same
   * reasoning that moved the title off the clan.
   *
   * Hue and saturation come from --tier-h / --tier-s, set per grade below. The
   * border is the saturated statement; the background is the SAME hue pulled far
   * down in saturation so body text stays readable. Both themes derive from the same
   * two numbers, so a new tier needs one line, not two.
   */
  border: 2px solid hsl(var(--tier-h) var(--tier-s) var(--tier-l));
  background: hsl(var(--tier-h) calc(var(--tier-s) * 0.30) 11%);
  color: var(--fg);
  font-weight: 400;
  text-align: left;
  letter-spacing: normal;
  border-width: 2px;
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px
  );
}

/*
 * The tier ladder: **gray → yellow → green → blue → gold**.
 *
 * ⚠️ THIRD VERSION, and the history matters because it keeps drifting. First an
 * invented ladder (grey-blue/green/blue/violet/gold/ember/rose). Then the STANDARD
 * rank colours Alessandro supplied — E gray, D white, C green, B blue, A pink,
 * S/SS/SSS gold, L red — with D moved off white, which on a dark UI shouted louder
 * than the gold above it and inverted the whole ladder. Now this: D takes the gray
 * the standard assigns to the E rank we do not have, yellow moves in at C, and green
 * and blue shift up a rung.
 *
 * The reason it is better than bronze-at-D: **gray reads as worthless, bronze reads
 * as a metal** — and D is the most common tier in the game. Gray is the honest
 * signal. Pink leaves the ladder entirely.
 *
 * ⚠️ THE YELLOW/GOLD CLASH DOES NOT GO AWAY BY MOVING IT. Whichever tier wears
 * yellow shares a hue with the gold S tiers, so the separation must come from
 * saturation and lightness — exactly the problem bronze-at-D had, relocated. C is
 * the most common tier and S is the rarest, so those two must never be confusable.
 *
 * Measured rather than eyeballed, in RGB distance: C sits **76** from S, **78** from
 * D and **119** from B. The first draft of C (hsl 46 45% 46%) came out at only 61
 * from gold and was rejected for it.
 *
 * E and L do not exist in GRADES — they are declared so extending the ladder later
 * needs no re-derivation.
 *
 * Three numbers per tier: hue, saturation, border lightness. Light mode needs its own
 * lightness, which is clamped further down.
 */
/*
 * ⭐ **THE ITEM CELLS JOIN THE TIER PALETTE — his ask, 2026-09-08.** `.keeper-slot` and
 * `.keeper-item` now carry `data-tier`, so they read the same `--tier-h/s/l` the collection has
 * used since day one. ⚠️ ONE palette, not a second copy that drifts.
 */
.row-main, .bars li[data-tier], .filter-chosen li[data-tier], .filter-option[data-tier], .mark-tier[data-tier], .keeper-slot[data-tier], .keeper-item[data-tier], .shop-slot[data-tier] { --tier-h: 0; --tier-s: 0%; --tier-l: 60%; }
.row-main[data-tier="E"], .bars li[data-tier="E"], .filter-chosen li[data-tier="E"], .filter-option[data-tier="E"], .mark-tier[data-tier="E"], .keeper-slot[data-tier="E"], .keeper-item[data-tier="E"], .shop-slot[data-tier="E"]   { --tier-h: 0;   --tier-s: 0%;  --tier-l: 34%; } /* dark gray — the ORIGIN tier: in-store barcodes, off the rolled ladder */
.row-main[data-tier="D"], .bars li[data-tier="D"], .filter-chosen li[data-tier="D"], .filter-option[data-tier="D"], .mark-tier[data-tier="D"], .keeper-slot[data-tier="D"], .keeper-item[data-tier="D"], .shop-slot[data-tier="D"]   { --tier-h: 0;   --tier-s: 0%;  --tier-l: 48%; } /* gray   */
.row-main[data-tier="C"], .bars li[data-tier="C"], .filter-chosen li[data-tier="C"], .filter-option[data-tier="C"], .mark-tier[data-tier="C"], .keeper-slot[data-tier="C"], .keeper-item[data-tier="C"], .shop-slot[data-tier="C"]   { --tier-h: 48;  --tier-s: 50%; --tier-l: 40%; } /* yellow */
.row-main[data-tier="B"], .bars li[data-tier="B"], .filter-chosen li[data-tier="B"], .filter-option[data-tier="B"], .mark-tier[data-tier="B"], .keeper-slot[data-tier="B"], .keeper-item[data-tier="B"], .shop-slot[data-tier="B"]   { --tier-h: 140; --tier-s: 55%; --tier-l: 45%; } /* green  */
.row-main[data-tier="A"], .bars li[data-tier="A"], .filter-chosen li[data-tier="A"], .filter-option[data-tier="A"], .mark-tier[data-tier="A"], .keeper-slot[data-tier="A"], .keeper-item[data-tier="A"], .shop-slot[data-tier="A"]   { --tier-h: 212; --tier-s: 65%; --tier-l: 52%; } /* blue   */
.row-main[data-tier="S"], .bars li[data-tier="S"], .filter-chosen li[data-tier="S"], .filter-option[data-tier="S"], .mark-tier[data-tier="S"], .keeper-slot[data-tier="S"], .keeper-item[data-tier="S"], .shop-slot[data-tier="S"]   { --tier-h: 45;  --tier-s: 70%; --tier-l: 50%; } /* gold   */
.row-main[data-tier="SS"], .bars li[data-tier="SS"], .filter-chosen li[data-tier="SS"], .filter-option[data-tier="SS"], .mark-tier[data-tier="SS"], .keeper-slot[data-tier="SS"], .keeper-item[data-tier="SS"], .shop-slot[data-tier="SS"]  { --tier-h: 45;  --tier-s: 85%; --tier-l: 58%; } /* gold+  */
.row-main[data-tier="SSS"], .bars li[data-tier="SSS"], .filter-chosen li[data-tier="SSS"], .filter-option[data-tier="SSS"], .mark-tier[data-tier="SSS"], .keeper-slot[data-tier="SSS"], .keeper-item[data-tier="SSS"], .shop-slot[data-tier="SSS"] { --tier-h: 45;  --tier-s: 98%; --tier-l: 66%; } /* gold++ */
.row-main[data-tier="L"], .bars li[data-tier="L"], .filter-chosen li[data-tier="L"], .filter-option[data-tier="L"], .mark-tier[data-tier="L"], .keeper-slot[data-tier="L"], .keeper-item[data-tier="L"], .shop-slot[data-tier="L"]   { --tier-h: 0;   --tier-s: 80%; --tier-l: 52%; } /* red    — unused */

/* The tier label picks up its own colour, so the letter and the frame agree. */
.row-meta {
  color: hsl(var(--tier-h) var(--tier-s) var(--tier-l));
}

.row-name {
  grid-column: 2;
  font-weight: 400;
  /*
   * No tracking. The 1px gap between glyphs is already drawn into the font's
   * advance, so `letter-spacing` here added a fractional pixel per character —
   * which a pixel font cannot land on, and which widened the ", the" gap further.
   */
  letter-spacing: normal;
  /* A syllable name can run to twelve letters; let it break rather than overflow. */
  overflow-wrap: anywhere;
}

.row-name strong {
  font-weight: 700;
}

/*
 * The title rides on the same line as the name, lighter, so the pair reads as one
 * phrase — "Goronedok, the Ox of Monsoon" — while the eye still lands on the name.
 * On its own line it would read as a subtitle and stop doing its job.
 */
.row-title {
  color: var(--dim);
  font-weight: 400;
}

.row-meta {
  grid-column: 2;
  color: var(--accent);
  font-size: var(--type);
  text-align: left;
}

#coverage {
  font-size: var(--type);
}

/*
 * Narrow phones: shrink the output just enough that a 44-character line fits
 * without scrolling. A monospace glyph advances ~0.6em, so 44 chars need about
 * 26em of width; on a 360px screen minus padding that lands near 11px.
 */
@media (max-width: 26rem) {
  pre {
    font-size: var(--type);
    padding: 0.9rem 0.7rem;
  }
}

/*
 * The portrait.
 *
 * `image-rendering: pixelated` is not decoration — a browser's default smoothing
 * turns a 32px sprite into exactly the soft-edged mush the whole art constraint
 * exists to avoid. The scale factors are integers (128/32=4, 128/64=2, 128/128=1)
 * so nearest-neighbour lands each source pixel on a whole number of screen pixels;
 * a fractional scale gives uneven pixel widths, which reads as a rendering bug.
 */
/*
 * The scan page's sprite. One canvas, centred — the "actual pixels" swatch beside
 * it is gone, along with the debug line under it. The card below is the same one
 * the collection shows, so a creature looks identical wherever you meet it.
 */
.portrait {
  display: flex;
  justify-content: center;
  padding: 1rem 0 0.4rem;
}

/*
 * ⚠️ --box-w / --box-h, not width / height. The three body plans have three
 * different canvas shapes (64×64, 64×96, 96×64, each plus its shadow margin), and a
 * canvas obeys no `object-fit` — naming a hard 128×128 here STRETCHED every biped
 * and quadruped to fit it. `fitBox` in main.ts reads these two numbers and sets the
 * real width and height at one uniform scale.
 *
 * The element still needs a size before the first paint, or the row reflows once the
 * sprite lands; the height below is that placeholder and is overwritten immediately.
 */
/*
 * 168×156, not 128×128 — Alessandro's call, 2026-08-05.
 *
 * The shadow margin made the canvas bigger (round 64×64 → 84×78), and fitting that
 * into the old box shrank the creature to about 1.5×. 168×156 is exactly 2× the
 * padded round plan, so the creature is back to the size it was and every plan comes
 * out at least as large as before:
 *
 *   round  84×78  → 2.00×   biped  84×110 → 1.42×   quad  116×78 → 1.45×
 *
 * ⚠️ 200×188 as of 2026-08-06, still exactly 2× the padded round plan — the canvases
 * grew (round 64×64 → 80×80) to give the tier-weight ramp headroom, and leaving the
 * box at 168×156 would have rendered every creature ~16% SMALLER at the same box.
 * The box is derived from the plan, so it moves whenever the plan does.
 *
 * ⚠️ 268 WIDE as of 2026-08-09, because the biped canvas went 80 → 160 to make room
 * for wings. `fitBox` scales the WHOLE bitmap, empty margin included, so widening a
 * plan silently shrinks every creature on it: biped fell from 1.49× to 1.11×, a
 * quarter smaller, with nothing on screen to explain why.
 *
 * I had assumed the assembled grid was trimmed to its content and said so in
 * plans.ts. It is not — `assemble` takes its canvas from the torso and keeps it. And
 * trimming would be WRONG here anyway: a fixed frame is exactly what makes the
 * tier-weight ramp legible, since a shrunken E only reads as pathetic when it is
 * measured against the same box as an SSS. Widening the box is the fix; trimming
 * would have destroyed the signal.
 *
 * 268 = the padded biped's 180 width at the 1.49× it used to get. Round is unchanged
 * (still height-limited at 2.00×) and quad IMPROVES from 1.52× to 2.00×.
 * ⚠️ 316×211 as of 2026-08-16, because the TIER RAMP pads the canvas. `tier-art.ts` adds 16px
 * of headroom on each side and on top so an SSS at 1.24× is not clipped, at EVERY grade so
 * that all tiers share one frame. `fitBox` scales the whole canvas into this box, so a
 * canvas that grew 180×126 → 212×142 renders every creature 15% smaller unless the box grows
 * with it. Derived, not guessed: the old box gave the binding biped k=1.489, and 212×142 at
 * that same k is 316×211.
 *
 *
 * ⚠️ The scan page and the expanded card get this; the collection row does NOT. A
 * list is a list, and fifty rows growing to fit a shadow is a real cost in scrolling
 * for something you are skimming past.
 */
.portrait-canvas {
  /* ⚠️ 2026-09-19: the ramp's room grew (TIER_PAD.top 30, canvas 212×156) — every box grew TALLER by the same k, rounded up; widths untouched. */
  --box-w: 316;
  --box-h: 232;
  height: 232px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}


/* Sized in JS to the sprite's true pixel count — this is the honest answer to
   "how big is it really", and no CSS rule can know the number. */


.sizes {
  display: flex;
  gap: 0.3rem;
  margin-top: auto;
}

.size {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-size: var(--type);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.size[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

/* The name gate. A label, not a login — styled as a first-run question, with
   nothing that borrows the visual language of a sign-in form (no lock, no
   "password", no "account"), because it protects nothing and shouldn't imply it. */
.gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 1rem;
}

/*
 * THE ENTRY SCREEN'S RHYTHM — Alessandro, 2026-08-20: *"increase space between each
 * element, they are all crampled together, title in the center and all the text too,
 * buttons are fine but leave more space."*
 *
 * ⭐ **SPACING IS A GRID GAP HERE, NOT A PILE OF MARGINS**, and that is what makes the
 * instruction actionable: `--gate-gap` and `--gate-step` are the only two numbers on the
 * screen, so "more space" is a one-line change rather than a hunt through twelve rules
 * that each contribute a bit. Every child's own margin is zeroed below for the same
 * reason — a margin surviving here would add to the gap and put one element out of step
 * with the rest for no visible reason.
 */
.gate-card {
  /* ⚠️ Opened from 2.25rem on his second pass: title→creature and creature→panel. */
  --gate-gap: 3.25rem;
  --gate-step: 1.4rem;
  width: 100%;
  max-width: 24rem;
  /* His instruction, and it applies to the whole card: title, creature and every line. */
  text-align: center;
  display: grid;
  gap: var(--gate-gap);
  justify-items: center;
}

/* The panels are full width; the creature is not, and centres itself. */
.gate-card > *:not(.gate-creature) {
  width: 100%;
}

.gate-card h1 {
  margin: 0;
}

/*
 * THE ENTRY SCREEN'S CREATURE — Ochremite, the same drawing as the app icon.
 *
 * ⚠️ `image-rendering: pixelated` is not enough on its own: the canvas is sized in
 * ART pixels and displayed at its own size, so one source pixel lands on one device
 * pixel. Scaling it in CSS to fill a box is what made a family of creatures the wrong
 * shape once already — an integer scale in the paint call, never a stretched canvas.
 */
.gate-creature {
  display: block;
  margin: 0;
  image-rendering: pixelated;
}

/*
 * ⚠️ The three panels are siblings and only one is ever shown. They need no `[hidden]`
 * rule of their own — the global `[hidden] { display: none !important }` near the top of
 * this file already beats a class that sets `display`, which is the bug that once left
 * the name prompt on screen beside the scanner.
 */
#landing,
#name-panel,
#import-panel {
  display: grid;
  gap: var(--gate-step);
  justify-items: center;
}

#landing > *,
#name-panel > *,
#import-panel > * {
  width: 100%;
  margin: 0;
}

.landing-welcome {
  margin: 0;
  font-size: 1.15rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/*
 * One column, thumb-reachable, in the order they are meant to be read.
 *
 * ⚠️ Its own gap is deliberately TIGHTER than the screen's. The buttons are one group and
 * should read as one — *"buttons are fine"* — while what separates them from the sentence
 * above is a full `--gate-gap`, his second pass: *"from your collection text to play
 * button"*. The panel's step already contributes, so only the difference is added here.
 */
/*
 * ⚠️ SELECTOR CARRIES THE ID, and it has to. `#landing > * { margin: 0 }` above is
 * specificity (1,0,0) and beats a bare class wherever it sits in the file — a margin
 * written as `.landing-actions` here is silently discarded.
 */
#landing .landing-actions {
  display: grid;
  gap: 0.75rem;
  margin: calc(var(--gate-gap) - var(--gate-step)) 0 0;
}

/* Step two of naming — the rule sits inside the panel grid, so no margin of its own. */
#name-connect {
  margin: 0;
}

/*
 * ⚠️ The case-4 refusal is written with a blank line in it — the rule and the choice are two
 * thoughts — so the newline has to survive. Every other message here is one sentence.
 */
#name-connect-note {
  white-space: pre-wrap;
}

#import-gsi {
  min-height: 44px;
}

#import-progress {
  color: var(--accent);
}

/*
 * ⭐ BACK IS SET APART. It is not one of the choices on the screen, it is the way off it,
 * so it gets a step of its own rather than sitting in the rhythm with everything else.
 */
#name-back,
#import-back {
  margin-top: calc(var(--gate-step) * 0.5);
}

#name-form {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

/* --- the three-step first run ------------------------------------------- */

/*
 * ⭐ THE COUNTER EXISTS TO SAY "THIS IS SHORT". Alessandro's spec asked for one by name — a
 * new player will give you three questions if they can see there are three, and none at all
 * if it looks open-ended.
 */
/*
 * ⭐ THE COUNTER IS THE HEADING ON A STEP, and it earns the promotion twice over: it tells a new
 * player how much is left — which is the one thing a first run has to say — and it buys back
 * the height the wordmark was using to repeat something they already know.
 */
.gate-step {
  margin: 0;
  color: var(--accent);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
}

.gate-choice {
  display: grid;
  gap: 0.6rem;
}

/*
 * ⛔ THE CONSENT BOXES — deliberately plain, and left-aligned in a centred gate.
 *
 * ⚠️ A checkbox someone has to TICK must read as a statement they are making, not as decoration:
 * centred text under a centred box is hard to scan and easy to tick without reading. The label
 * wraps the input so the whole line is a hit target, which matters most on a phone.
 *
 * ⭐ No colour and no emphasis. This is the one place in the app that must not persuade.
 */
.gate-consent {
  display: grid;
  gap: 0.55rem;
  margin: 0.9rem 0 1rem;
  text-align: left;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
}

/* ⚠️ Big enough to hit with a thumb; the browser's own control, so it is obviously a checkbox. */
.consent input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.consent a {
  color: var(--accent);
}

.choice-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

/* Two equal halves: neither answer is the default-looking one. */
.choice {
  flex: 1 1 0;
  background: var(--panel);
  border: 2px solid var(--line);
  color: var(--dim);
}

.choice[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/*
 * ⛔ **STACKED, NOT SIDE BY SIDE** — 64 above, 32 below, which is what `onboarding.md` §2 asked
 * for and what the comparison needs. Side by side forces each creature into half a phone's
 * width, and the whole point is to see them at the size they are actually looked at: the
 * collection card is 316×211, and two of those do not fit next to each other.
 */
.art-choices {
  display: grid;
  gap: 0.6rem;
  justify-items: stretch;
}

/*
 * ⚠️ THIS STEP RUNS TIGHTER THAN THE REST, and it earns the exception: two creatures at a size
 * worth judging plus a button is a lot of height, and a first-run step you must SCROLL to
 * finish is worse than one that is a little dense. Measured at 390×844 — the step fits with
 * room to spare, and the comparison is the thing that gets the space.
 */
#art-panel {
  gap: 0.9rem;
}

/*
 * ⚠️ THE CARD'S OWN RHYTHM TIGHTENS FOR THIS STEP TOO. At the normal 3.25rem gap the step came
 * to 851px against an 844px viewport — seven pixels, and "Continue" fell below the fold, which
 * on a first run is the difference between three questions and two.
 */
.gate.is-tight {
  /* ⚠️ The container's own padding counts too: 823 + 2rem was still 855 against 844. */
  padding: 0.5rem;
}

/*
 * ⛔ **THE GATE WAS PAYING RENT FOR FURNITURE IT DOES NOT HAVE.**
 *
 * `body` reserves 28px at the top and 88px at the bottom for the sticky topbar and the fixed
 * tab bar — both of which live INSIDE `#app`, which is hidden whenever the gate is up. So every
 * gate screen was giving away 116px of a phone's height to a bar that was not on it.
 *
 * ⚠️ Found while chasing seven pixels on the art step, and it is worth more than that step: it
 * is the difference between "Continue" being on screen and being below the fold, on ALL of
 * them. Measured at 390×844.
 */
body.on-gate {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.gate.is-tight .gate-card {
  --gate-gap: 1.5rem;
}

.art-choice {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem 0.6rem;
  background: var(--panel);
  border: 2px solid var(--line);
  color: var(--dim);
}

.art-choice[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/*
 * ⚠️ IT HAS TO LOOK TAPPABLE, because the tap is the only way forward on this step — there is
 * no Continue to fall back on. A creature sitting in a plain frame reads as an illustration.
 */
.art-choice:hover,
.art-choice:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/*
 * ⚠️ THE BOX IS FIXED AND BOTH CANVASES SHARE IT — that is what makes this a comparison of
 * DETAIL rather than of size. `blit` reads these as `--box-w` / `--box-h` and letterboxes the
 * creature into them, exactly as the collection card does.
 */
/*
 * ⚠️ **220 IS THE MEASURED CEILING, not a taste.** Two things bought the room: the wordmark
 * standing down in favour of "Step 2 of 3", and the Continue button going away when tapping
 * became the answer. At 390×844 with both: 200 leaves 65px spare, **220 leaves 25**, 240
 * overflows by 15. Every pixel of it goes to the comparison, because the comparison IS the
 * step.
 */
.art-demo {
  /* ⚠️ UNITLESS, like `.portrait-canvas` — `boxFrame` reads these with `parseFloat`. */
  --box-w: 220;
  --box-h: 220;
  height: 220px;
  image-rendering: pixelated;
}

.art-label {
  font-size: var(--type);
  letter-spacing: 0.08em;
}

/*
 * THE HOMEPAGE'S SPRITE ANIMATION, ported.
 *
 * ⚠️ A STRIP, NOT A GIF: one PNG of `--n` frames, stepped by `background-position-x`. The end
 * position is the FULL strip width so `steps(n)` lands on each frame exactly, and it reads
 * `--s` too — which is why changing the scale cannot desync the animation from the art.
 *
 * ⚠️ `image-rendering: pixelated` and an INTEGER `--s`. A fractional scale puts one source
 * pixel on a fraction of a screen pixel, which is how a family of creatures came out the wrong
 * shape once already.
 */
/*
 * ⚠️ **`--s` IS SET PER STRIP IN `showArtPanel`, NOT HERE**, and that is the whole fix. The 32
 * art is exactly half the pixels of the 64 art, so it is drawn at DOUBLE the scale to land in
 * the same box — same size on screen, half the resolution, which is precisely what the
 * collection page does and what is being chosen. A shared scale compares picture sizes
 * instead, which is the version he sent back.
 */
.creature-strip {
  --s: 2;
  display: block;
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  background-size: calc(var(--w) * var(--s) * var(--n)) calc(var(--h) * var(--s));
  background-repeat: no-repeat;
  background-position-x: 0;
  image-rendering: pixelated;
  animation-name: gate-parade;
  animation-iteration-count: infinite;
}

@keyframes gate-parade {
  from { background-position-x: 0; }
  to { background-position-x: calc(-1 * var(--w) * var(--s) * var(--n)); }
}

@media (prefers-reduced-motion: reduce) {
  /* ⚠️ Still SHOWN, just still: the size comparison is the point and it survives stillness. */
  .creature-strip { animation: none !important; }
}

#name-form label {
  color: var(--dim);
  font-size: var(--type);
}

#name-form input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.whobox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.gate-label {
  margin: 1.25rem 0 0.5rem;
  color: var(--dim);
  font-size: var(--type);
}

/* "Who's playing?" and the names are one group, so they get their own inner grid. */
#roster {
  display: grid;
  gap: 0.75rem;
}

#roster > * {
  margin: 0;
}

.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

/*
 * Whole row is the target — this gets used one-handed, often by a child.
 *
 * ⚠️ Centred with the rest of the screen (his instruction, 2026-08-20). It is optically
 * off by half the ✕ button beside it; centring within the row rather than within the card
 * is the honest reading of "all the text", and his eye decides if it wants the other one.
 */
.roster button {
  width: 100%;
  text-align: center;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.roster button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Deliberately understated: it's a label you can change, not an account menu. */
.who {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-size: var(--type);
  font-weight: 400;
  letter-spacing: 0.04em;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.who {
  display: inline-block;
}

/* Storage warnings are the one note in the app that must not be ignorable —
   the failure it describes is silent and irreversible. */
.warn-note {
  padding: 0.5rem 0.65rem;
  border-left: 2px solid var(--accent);
  background: var(--panel);
  color: var(--fg);
}


/* --- the header bar ------------------------------------------------------ */

/*
 * ⛔ **FULL-BLEED, LIKE THE TAB BAR — it used to stop 300px short of it on a wide window.**
 *
 * Alessandro, 2026-08-30: *"the headbar never fills all the space like the navbar, I wanted to
 * tell you since long time but always forget."* ⚠️ **Measured before touching it:** at a 1200px
 * viewport the topbar ran 312→888 (576px) while `.tabs` ran 0→1200. The two bars bracket the app
 * and only one of them reached the edges.
 *
 * ⭐ **THE CAUSE IS THAT THEY ESCAPE DIFFERENTLY.** `.tabs` is `position: fixed; left: 0; right: 0`
 * and answers to the viewport. The topbar is in flow inside `main`, which is `max-width: 34rem`,
 * so its old `-1rem` side margins could only cancel the BODY's padding — never the column cap.
 *
 * ⚠️ **SO THE BAR GOES FULL WIDTH AND THE PADDING PUTS THE CONTENT BACK.** `max()` is what keeps
 * it honest on a phone: below 34rem the calc goes negative and the 1rem floor wins, so a narrow
 * screen is exactly as it was.
 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  margin: -1.75rem -1rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

/*
 * ⛔ **ONLY ABOVE 36rem, AND THE SCOPE IS THE FIX RATHER THAN A DETAIL.**
 *
 * ⭐ **A PHONE WAS ALREADY FULL-BLEED**: `main`'s 34rem cap does not bind below it, so the `-1rem`
 * margins above cancel the body padding exactly and the bar reaches both edges. The gap only opens
 * once the column stops growing — at `34rem + 2rem`, which is this breakpoint, so the two rules
 * meet exactly: `(36rem − 34rem) / 2` is the same 1rem the narrow case uses.
 *
 * ⛔ **AND APPLYING IT EVERYWHERE BROKE THE PHONE, measured:** at 375px the bar came out 19→356
 * instead of 0→375, because `zoom: 0.9` below 380px scales the element while `100vw` still
 * resolves to 375 — 375 × 0.9 = 337.5, centred, which is exactly the 19px inset that appeared.
 * **`vw` and `zoom` do not agree, so the zoomed widths must never see a `vw` calculation.**
 */
@media (min-width: 36rem) {
  .topbar {
    width: 100vw;
    padding-left: calc((100vw - 34rem) / 2);
    padding-right: calc((100vw - 34rem) / 2);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.topbar-name {
  font-size: var(--type);
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.burger {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-size: var(--type);
  line-height: 1;
}

.menu {
  position: sticky;
  top: 3.4rem;
  z-index: 19;
  display: grid;
  gap: 0.3rem;
  margin: -0.5rem 0 1rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.menu button {
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.8rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  font-weight: 400;
  letter-spacing: 0.03em;
}

.menu button:hover,
.menu button[aria-current="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0.3rem 0;
}

h1 {
  font-size: var(--type-big);
}


/* Sprite thumbnails in the collection list. Nearest-neighbour, and sized in CSS
   rather than by canvas width so one source pixel is always a whole number of
   screen pixels. */
/*
 * Light mode. Same hues, capped lightness, a pale wash instead of a dark one.
 *
 * ⚠️ THIS BLOCK WAS DELETED ONCE and the symptom was a BLACK card on a light page.
 * The dark 11%-lightness background is declared on `.row-main` unconditionally, so
 * losing this override leaves light mode wearing the dark theme's card. It vanished
 * inside the slice while a stale duplicate ladder was being cut out. If black cards
 * ever reappear in light theme, this is the first thing to check.
 *
 * The lightness clamp is load-bearing too: several tier borders are bright enough to
 * disappear on a pale page, so none may exceed 45%.
 */
:root[data-theme="light"] .row-main {
  border-color: hsl(var(--tier-h) var(--tier-s) min(var(--tier-l), 45%));
  background: hsl(var(--tier-h) calc(var(--tier-s) * 0.35) 95%);
}

:root[data-theme="light"] .row-meta {
  color: hsl(var(--tier-h) var(--tier-s) min(var(--tier-l), 38%));
}

.row-thumb {
  /* Spans every text line, so the sprite anchors the whole row. */
  grid-row: 1 / -1;
  /* See .portrait-canvas — the plans are three shapes, so the box is a bound and
     not a size. A fixed 40×40 squashed every biped and quadruped in the list.
     ⚠️ 58 wide since the biped canvas doubled: at 40 the row thumb was width-limited
     and every biped in the list shrank by a third. 58 puts the bound back on HEIGHT,
     where a list wants it — rows stay 40px tall whatever shape the creature is. */
  /* ⚠️ 67×45 as of 2026-08-16 — the tier ramp's canvas padding, see .portrait-canvas. The
     row is HEIGHT-bound by design, and 58×40 against the padded canvas flips it to
     width-bound, which is the bug the paragraph above records happening once already.
     67×45 keeps k at 0.316, so a list of creatures is the size it was. */
  /* ⚠️ 2026-09-19: the ramp's room grew (TIER_PAD.top 30, canvas 212×156) — every box grew TALLER by the same k, rounded up; widths untouched. */
  --box-w: 67;
  --box-h: 50;
  height: 50px;
  image-rendering: pixelated;
  align-self: center;
}

/*
 * ⭐ **THE POOL ROW'S CREATURE DOUBLES WHERE THERE IS ROOM** — *"I'm talking about the battle
 * page card also, especially that one"*, 2026-08-21.
 *
 * ⚠️ **THE ROW DOES NOT GET TALLER, because the space was already there.** Measured at 390px:
 * the row is 358×115 and the thumb was 67×45, spanning all three text rows and leaving **70px
 * of its own column unused**. This spends that, and the row height does not move.
 *
 * ⛔ **THE STAT ICONS ARE WHAT BOUNDS IT, not the row.** The icon row is the widest thing in
 * the text column at 184px (5 × 32 + 4 × 6), so the text column may never go below that:
 *   thumb ≤ row − 9.6 gap − 184.
 * At 358 that allows 164. ⚠️ Raising `.stat-icons` gap raises 184 and eats the slack — the two
 * numbers are linked, which nothing but this comment will tell you.
 *
 * ⛔ **TWO STEPS, NOT ONE, AND 381px IS WHY.** `zoom: 0.9` below 380px hands the layout MORE
 * room, so 381 — the first unzoomed width — is tighter than the 375 below it. Measured slack
 * between the icon row and its column:
 *
 * | viewport | thumb (rendered) | slack |
 * |---|---|---|
 * | 320–359 | 60×41 (base) | 33–72 |
 * | 360–375 | 101×68 | 33–48 |
 * | 381–389 | 112×75 | 17–25 |
 * | 390+ | 128×86 | 10–196 |
 *
 * ⚠️ The 360–375 rendered sizes are the 112 box times `zoom: 0.9`, not a third step.
 *
 * One step of 128 from 360 up was tried first: it fits at every width and left **1.4px** at
 * 381. That passes a measurement and fails the standing rule, which is his — *"we need to make
 * sure we don't cut anything."* A second step costs three lines and buys real room.
 *
 * ⚠️ **360px, and the number is derived:** the first step needs a row of at least 184 + 9.6 +
 * 112 = 306, which is a 360px viewport (row = viewport − 32) or a zoomed narrower one, where `zoom:
 * 0.9` hands the layout MORE room. Below that the small thumb stays, because the alternative is
 * a wrapped icon row.
 */
@media (min-width: 360px) {
  .row-thumb {
    --box-w: 112;
    --box-h: 83;
    height: 83px;
  }
}

@media (min-width: 390px) {
  .row-thumb {
    --box-w: 128;
    --box-h: 95;
    height: 95px;
  }
}


/* The expanded creature card, inside its list row. */
.row {
  display: block;
}

.row-card {
  padding: 0.5rem 0 0.75rem;
}

.row-card pre {
  margin: 0.5rem 0 0;
}

/* The expanded card — you tapped to open it, so the creature is the point here too.
   One card is open at a time, so this costs no scrolling. See .portrait-canvas. */
.row-art {
  display: block;
  /* 316, matching .portrait-canvas — same reason, plus the tier ramp's padding. */
  /* ⚠️ 2026-09-19: the ramp's room grew (TIER_PAD.top 30, canvas 212×156) — every box grew TALLER by the same k, rounded up; widths untouched. */
  --box-w: 316;
  --box-h: 232;
  height: 232px;
  margin: 0 auto;
  image-rendering: pixelated;
}

/*
 * ⭐ **THE CARD'S CREATURE IS 13% BIGGER WHERE THERE IS ROOM** — asked for by a friend of
 * Alessandro's, relayed 2026-08-21: *"my friend would like to see the creature bigger in the
 * card… we have plenty of horizontal space, we are limited vertically."*
 *
 * ⛔ **WIDTH ALONE BUYS NOTHING, AND THIS IS THE THING TO UNDERSTAND BEFORE TOUCHING IT.** The
 * box is already BALANCED: the widest canvas any creature produces is 212×142 (the padded
 * biped — measured, and it is what every card reserves), and 316/212 = 1.491 against
 * 211/142 = 1.486. The two constraints agree to within 0.3% because the box was derived that
 * way. So the creature is height-bound by a hair, and widening the box while holding the height
 * leaves it EXACTLY the same size. The 42px of slack on a 390px phone is page margin, not room
 * inside the frame.
 *
 * ⚠️ **SO THE HEIGHT HAS TO MOVE, on the axis he called scarce.** 358×239 keeps the same 1.498
 * aspect, uses every pixel of that margin, and costs 28px of vertical: scale goes 1.49× → 1.69×.
 *
 * ⛔ **NOT A TRIM, AND NEVER A TRIM.** The obvious alternative — crop each canvas to its content
 * so a small creature stops carrying empty margin — would destroy the tier-weight signal. A
 * shrunken E only reads as pathetic when it is measured against the same frame as an SSS. The
 * note above `.portrait-canvas` records that this was already established once.
 *
 * ⚠️ **390px, because 358 is what a 390px phone HAS** (viewport minus 32 of page padding). The
 * gate is deliberately on the raw viewport, so a zoomed narrow phone keeps the smaller box even
 * where it would have fitted — the failure it avoids is a canvas wider than the page, which
 * scrolls the whole thing sideways, and he has hit that before.
 */
@media (min-width: 390px) {
  .row-art {
    --box-w: 358;
    --box-h: 263;
    height: 263px;
  }
}

/* --- the creature card ---------------------------------------------------
 *
 * ⚠️ Replaces a `
` holding a 44-column text dump. At 18px a 44-character
 * monospace line is 528px — wider than any phone — so the card scrolled sideways.
 * The old stylesheet shrank the `pre` font on narrow screens purely to make those
 * columns fit, and the pixel font killed that trick: it is only crisp at multiples
 * of 9px, and 9px is unreadable. Stacking the label above its value removes the
 * columns entirely, which is why nothing here sets a width.
 */

.creature {
  border: 1px solid var(--line);
  padding: 0.75rem;
  background: var(--panel);
  border-width: 2px;
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px
  );
}

.creature-name {
  margin: 0;
  font-size: var(--type-big);
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.creature-title {
  margin: 0 0 0.35rem;
  color: var(--dim);
}

.creature-quote {
  margin: 0 0 0.75rem;
  color: var(--accent);
}

.section {
  margin: 0.9rem 0 0.35rem;
  font-size: var(--type);
  letter-spacing: 0.12em;
  color: var(--dim);
}

/*
 * ONE FACT PER LINE — TIER, ELEMENT, ARCHETYPE, CLAN, FAMILY, each on its own row.
 *
 * ⚠️ IT USED TO BE TWO COLUMNS, and on a phone that put two label-and-value pairs side by side
 * with their notes wrapping underneath — so "ARCHETYPE COLOSSUS" sat next to "CLAN Sunspine"
 * and their second lines ("VIT · FOR · GRD · SPK" and "Mediterranean south") ran together into
 * one unreadable strip. Alessandro: *"put them all on new lines, so they don't become hard to
 * read on small devices when they are on the same line."*
 *
 * ⭐ The height this costs is cheap: five short rows, and the card already scrolls for its stat
 * bars. Two columns was saving space the card was not short of.
 *
 * ⚠️ THE COVERAGE REPORT KEEPS ITS COLUMNS via `.report .fields` — every value there is "8/32",
 * and one tall column of short numbers wastes half the panel. Do not "tidy" the two rules into
 * one; they are different problems.
 */
.fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 0.75rem;
}

/* ⚠️ LABEL AND VALUE SIT ON ONE LINE — "TIER C", not TIER above C.
   Alessandro, 2026-08-08, looking at a real card: three lines for one fact, and a
   card that ran off the bottom of the phone.

   The label USED to sit above the value, which was also his suggestion at the time
   and was right then: it removed the fixed-width padded columns that made the old
   
 scroll sideways. Now that the values are short — a tier letter, a clan word
   — the column is gone and stacking only costs height.

   `flex-wrap` is what keeps the old fix intact: a long value (`pearl white / blue
   sheen`) wraps under its label instead of forcing the card wider. */
/*
 * ⚠️ **THE ROW GAP MATCHES `.fields`, or a wrapped NOTE is glued to the line above it.**
 *
 * It was `0 0.6rem` — no row gap at all — which nothing revealed until the archetype's note
 * became a row of 32px icons. Measured on a real card: every field sat 8px from its neighbour
 * and the icons sat **0px** below the ARCHETYPE line. Alessandro: *"icons are closer to element
 * text and have a lot of space at the bottom, let's make all equal."*
 *
 * ⭐ 0.5rem is not a new number — it is the same 8px `.fields` already uses between fields, so
 * the card has ONE vertical rhythm rather than one for fields and another for their notes.
 */
.field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.6rem;
  min-width: 0;
}

.field-label {
  color: var(--dim);
  letter-spacing: 0.12em;
}

.field-value {
  overflow-wrap: anywhere;
}

/* The note is genuinely subordinate — a clan's region, a cap's reason — so it takes
   its own line under the pair rather than competing with the value. */
.field-note {
  color: var(--dim);
  flex-basis: 100%;
}

.stats {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * ⚠️ Two columns, and BOTH rows must agree on where the split is.
 *
 * The first version let the value and the bar find their own widths, so the number
 * sat hard right on row 1 while the bar sat somewhere else on row 2 and the role
 * label floated alone on the left. Nothing lined up with anything —
 * Alessandro: *"alignment of the stats is wonky."*
 *
 * The bar is a fixed 118px (10 cells of 8px + 9 gaps of 2px), so the right column
 * is pinned to exactly that and the number sits above its own bar rather than
 * above whitespace.
 */
/*
 * ⭐ **ONE LINE PER STAT: ICON · NAME · NUMBER · BAR** — his layout.
 *
 * ⚠️ It was a two-row grid, name and number above, bar wrapped underneath — which made every
 * stat two lines tall and stood the five bars in a column away from the numbers they describe.
 * A flex row puts each number against its own bar.
 *
 * ⚠️ The name is the only part allowed to shrink: the icon is fixed art, the number and the
 * bar are fixed widths, and a name that ellipsises is better than a bar that wraps.
 */
.stats li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.stats .stat-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats .stat-value {
  flex: 0 0 auto;
  /* ⚠️ Fixed width, so five different numbers do not put five bars at five different starts. */
  min-width: 2.5ch;
  text-align: right;
}

.stat-name {
  letter-spacing: 0.06em;
}

/* The icon rides with the name — see the note at the call site about the two-column grid. */
.stats .stat-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stat-value {
  text-align: right;
}

/*
 * The bar, in blocks rather than characters.
 *
 * Ten cells for ten tiers. Sized in whole pixels so it lands on the same grid as
 * the font and the sprites — a bar with fractional cells is the one thing on screen
 * that would betray that this is CSS and not pixel art.
 */
/* One pixel per point — see statBar() in main.ts for why the segments went. */
.stat-bar {
  /* ⚠️ Fixed, and last on the line — see `.stats li`. */
  flex: 0 0 100px;
  width: 100px;
  height: 10px;
  background: var(--line);
}

.stat-bar i {
  display: block;
  height: 100%;
  background: var(--stat-3);
}

/*
 * Colour by absolute value, in five bands of twenty.
 *
 * ⚠️ REDUNDANT WITH LENGTH AND THE NUMBER, WHICH IS WHY IT IS SAFE. Roughly one man
 * in twelve cannot separate red from green, and for them the bar still reads
 * correctly because its LENGTH carries the same fact and the value is printed beside
 * it. Colour here is a third encoding of one thing, never the only one.
 */
.stat-bar i[data-band="1"] { background: var(--stat-1); }
.stat-bar i[data-band="2"] { background: var(--stat-2); }
.stat-bar i[data-band="3"] { background: var(--stat-3); }
.stat-bar i[data-band="4"] { background: var(--stat-4); }
.stat-bar i[data-band="5"] { background: var(--stat-5); }

/* Only ever visible with ?debug=1 — see DEBUG in main.ts. */
.debug {
  margin-top: 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
}

/* --- achievements --------------------------------------------------------
 *
 * ⚠️ NO BADGE ART EXISTS YET. `.badge-art` reserves the box a drawing will occupy so
 * the layout can be judged first — the opposite order to the part library, where
 * twenty torsos were drawn before the arrangement was settled. When art arrives it
 * replaces the contents of this box and nothing around it moves.
 *
 * The box is 40px because that is what a 20×20 badge at 2× occupies, and doubling a
 * whole number is the only scaling that keeps pixel art crisp.
 */

/*
 * The filter row and the collapsible sub-sections — added 2026-08-25 with the 192-badge
 * catalogue. ⛔ THE CREATURES alone is 132 of them, so the page has to open as a handful of
 * headings rather than a wall: `achievements.md` §3p.
 */
/*
 * The badge close-up — 128px is 4× of 32, and only integer multiples are legal.
 * ⚠️ A native , so focus trapping, Escape and the backdrop are the browser's job.
 */
/*
 * ⛔ A FIXED WIDTH, NOT A MAX-WIDTH. A  is shrink-to-fit, so `max-width` alone let the box
 * size itself to its longest line: "Not found yet." produced a visibly narrower dialog than "Find
 * a hazed creature." — the same dialog changing shape depending on which badge you clicked, which
 * is what he caught in two screenshots.
 *
 * ⚠️ `min()` so it still fits a narrow phone; the width is fixed, not rigid.
 */
.badge-modal {
  border: 2px solid var(--accent);
  background: var(--bg);
  color: var(--fg);
  width: min(22rem, calc(100vw - 2rem));
  padding: 1.25rem;
  text-align: center;
}

/*
 * ⚠️ The close button sits in a 
, which is a block — so the button lands
 * hard left however the dialog is aligned. `text-align: center` on the dialog does not reach it.
 */
.badge-modal form { display: flex; justify-content: center; margin-top: 0.25rem; }

.badge-modal::backdrop { background: rgb(0 0 0 / 0.6); }

/*
 * ⛔ A FIXED 128px BOX, EARNED OR NOT. His ask: "make them all the same size, discovered or not."
 * `min-height` alone let an unearned badge — whose contents may be a single `?` glyph — collapse
 * the box narrower than a drawing, so the dialog changed shape depending on what you clicked.
 */
.badge-modal-art {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  margin: 0 auto 0.75rem;
  font-size: 3rem;
  color: var(--dim);
}

.badge-modal-art img { image-rendering: pixelated; display: block; }

.badge-modal-detail { margin: 0.25rem 0 0.5rem; }

/* ⚠️ 192 rows have to look activatable, or the close-up is a feature nobody finds. */
.badge { cursor: pointer; }
.badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
 * ⭐ THE ARROWS HAVE TO LOOK LIKE ARROWS YOU CAN PRESS. His ask: "in those pages with the
 * pagination we could make the arrows glow slightly to show them."
 *
 * ⚠️ A PULSE THAT NEVER STOPS IS A NAG. This runs three times and settles — long enough to catch
 * the eye on arrival, short enough that it is not still moving while somebody reads.
 */
.board-pager button {
  color: var(--accent);
  border-color: var(--accent);
  animation: pager-hint 1.4s ease-in-out 3;
}

@keyframes pager-hint {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ⛔ Somebody who asked for less motion gets none. The colour still marks them as controls. */
@media (prefers-reduced-motion: reduce) {
  .board-pager button { animation: none; opacity: 1; }
}

.awards-kicker {
  text-align: center;
  margin: 0 0 -0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

.badge-filter {
  display: flex;
  gap: 6px;
  margin: 0 0 1rem;
}

.badge-filter button {
  font: inherit;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--dim);
  cursor: pointer;
}

/* ⚠️ aria-pressed IS the state, so the styling cannot drift from what a screen reader says. */
.badge-filter button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

.badge-sub {
  border-top: 1px solid var(--line);
  margin-top: 0.5rem;
}

.badge-sub > summary {
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.badge-sub[open] > summary { color: var(--accent); }

.badge-group {
  margin-bottom: 1.25rem;
}

.badge-blurb {
  margin: 0 0 0.6rem;
  color: var(--dim);
}

.badges {
  list-style: none;
  margin: 0;
  padding: 0;
}

.badge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 0.6rem;
  padding: 0.5rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--line);
  background: var(--panel);
  /* Unearned badges are present but quiet: a goal you can see is the point, and a
     hidden one cannot motivate anyone. */
  opacity: 0.55;
  border-width: 2px;
  clip-path: polygon(
    3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px),
    calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px
  );
}

.badge.earned {
  opacity: 1;
  border-color: var(--accent);
}

/* Tier badges wear the tier's own colour — one ladder, reused, never a second
   colour language. See the tier ramp above. */
.badge.earned[data-tier] {
  border-color: hsl(var(--tier-h) var(--tier-s) var(--tier-l));
}

/*
 * ⛔ 32px, NOT 40. A badge is drawn at 32×32 and shown at an INTEGER multiple — 32, 64 or 128.
 * `box-sizing: border-box` is global and this box carries a 2px border, so a 40px box left
 * 36px of usable space: a 32px drawing would have been resampled to 1.125×, the exact ragged
 * mush the whole art constraint exists to prevent. `achievements.md` §3n.
 */
.badge-art img { image-rendering: pixelated; display: block; }

/*
 * ⛔ THE SILHOUETTE AND DIM TREATMENTS WERE REMOVED 2026-09-07 — his call.
 *
 * An unearned badge had FOUR looks depending on its family: dimmed art, a silhouette, a "?" and a
 * "·". He saw all four on one screen — "we have some with the silhouette, some with ? and now some
 * with a dot… some still show the badge dimmed" — and nothing on that screen taught a player what
 * any of them meant.
 *
 * ⭐ TWO STATES NOW, and they are in `main.ts` rather than here because there is no longer anything
 * to style: locked is a "?", unlocked is the art, and the star is only for an unlocked badge nobody
 * has drawn yet. `reveal` still decides what the NAME and DETAIL give away; it no longer touches
 * the picture, and those were two different questions tangled into one branch.
 */

.badge-art {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  /* ⚠️ The art is 32px inside a 2px border: 32 + 2 + 2 = 36, so it sits flush and unscaled. */
  padding: 0;
  border: 1px solid var(--line);
  color: var(--dim);
  /* A drawing goes here. Until then, the frame shows the space is reserved. */
  background: var(--bg);
  border-width: 2px;
  clip-path: polygon(
    3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px),
    calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px
  );
}

.badge.earned .badge-art {
  color: var(--accent);
  border-color: var(--accent);
}

.badge.earned[data-tier] .badge-art {
  color: hsl(var(--tier-h) var(--tier-s) var(--tier-l));
  border-color: hsl(var(--tier-h) var(--tier-s) var(--tier-l));
}

.badge-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.badge-name {
  letter-spacing: 0.06em;
}

.badge-detail {
  color: var(--dim);
  overflow-wrap: anywhere;
}

.badge-progress {
  color: var(--dim);
  white-space: nowrap;
}

/* --- three-line tier frames ----------------------------------------------
 *
 * Alessandro: *"if we make them 3px border we can use the middle line for colour and
 * the 2 external shade of the main, so it looks more pixel style and we use more the
 * tier colours."* Right on both counts — it is the classic 8-bit window frame, and it
 * puts the tier colour on three times the pixels a 1px border did.
 *
 * ⚠️ BUILT FROM INSET RINGS, NOT A BORDER, and that is forced rather than chosen: a
 * CSS border cannot carry three colours, and the obvious alternative — stacked outer
 * `box-shadow`s — is CLIPPED AWAY by the `clip-path` that gives us notched corners.
 * Inset shadows are drawn inside the box, so they survive the clip and get cut
 * diagonally at each corner, which is exactly the stepped look we want.
 *
 * Ring order matters and is counter-intuitive: the FIRST shadow listed paints on top,
 * so they run narrowest-first — 1px shade, then 2px colour, then 3px shade — leaving
 * one pixel of each, outside in.
 *
 * Shades are the same hue at lower lightness, never grey. A grey outer line would
 * read as a drop shadow; a darker tint reads as the same painted line curving away.
 */
.tier-frame {
  border: none;
  box-shadow:
    inset 0 0 0 1px hsl(var(--tier-h) var(--tier-s) calc(var(--tier-l) - 20%)),
    inset 0 0 0 2px hsl(var(--tier-h) var(--tier-s) var(--tier-l)),
    inset 0 0 0 3px hsl(var(--tier-h) var(--tier-s) calc(var(--tier-l) - 20%));
}

.row-main {
  border: none;
  /* The rings occupy 3px that the border used to, so the padding absorbs them. */
  padding: calc(0.6rem + 1px) calc(0.75rem + 1px);
  box-shadow:
    inset 0 0 0 1px hsl(var(--tier-h) var(--tier-s) calc(var(--tier-l) - 20%)),
    inset 0 0 0 2px hsl(var(--tier-h) var(--tier-s) var(--tier-l)),
    inset 0 0 0 3px hsl(var(--tier-h) var(--tier-s) calc(var(--tier-l) - 20%));
}

/*
 * Light mode keeps the same construction; only the lightnesses move. The shade goes
 * DARKER here too — on a pale page a lighter outer ring would vanish into the
 * background and the frame would read as 1px again.
 *
 * ✅ Verified across all 7 tiers × 2 themes: every combination resolves to three
 * distinct rings with the shade genuinely darker than the mid, including the nested
 * `min()` inside `calc()` that the light-mode clamp needs. The bronze D is the tight
 * one — 45% clamped, minus 15%, still reads against a #f4f2ed page.
 */
:root[data-theme="light"] .row-main {
  box-shadow:
    inset 0 0 0 1px hsl(var(--tier-h) var(--tier-s) calc(min(var(--tier-l), 45%) - 15%)),
    inset 0 0 0 2px hsl(var(--tier-h) var(--tier-s) min(var(--tier-l), 45%)),
    inset 0 0 0 3px hsl(var(--tier-h) var(--tier-s) calc(min(var(--tier-l), 45%) - 15%));
}

/* The sort control. A native .
 *
 * Two bugs in one control. It shared a line with three buttons, which pushed the
 * collection header wider than a phone and made the page scroll sideways — the
 * third time that has happened, hence the rule: one control group per line.
 *
 * And it was a native dropdown. A