/* © 2026 MEK.txt. All rights reserved. */
/* Anchorites: this idea's differences from the design system. Always linked last. */

/* The cell's ground: Miner's, lifted off pure black to #0f0f0f, so the cards' shadows can be black and still show */
:root[data-theme="miner"] { --100: #0f0f0f; }

/* The saint's card. Its colours are the saint's: app.js sets the picture's own four (--saint-ground, -face, -field,
   -motif) on it, and every alias the card's pieces read is mapped onto them here, so its ink, edge, fill, tags
   box, frames and ornaments all follow the saint, whatever the page's theme. */
.saint {
  --bg: var(--saint-ground); --surface: var(--saint-ground); --100: var(--saint-ground);
  --line: var(--saint-field); --text: var(--saint-face); --text-muted: var(--saint-face); --text-strong: var(--saint-motif);
  --accent: var(--saint-face);
  color: var(--text);
}
/* Rarity is a metal, the same on every card of it: the card's furniture (its frame, the plates, the number, the
   rarity, their tiles) is drawn in the rarity's three tones (--rank-light, -mid, -dark, set by app.js); everything
   about the saint (the profile, its frame and ornaments, the ground's weave) keeps the saint's own colours. */
.saint { --motif-1: var(--rank-light); --motif-2: var(--rank-mid); --motif-3: var(--rank-dark); --motif-4: var(--rank-dark); }
.saint-shrine { --motif-1: var(--saint-motif); --motif-2: var(--saint-face); --motif-3: var(--saint-field); --motif-4: var(--saint-field); }
/* The tiles beside the number and the rarity: a step under the type, in the metal's middle tone */
.rank-tile { --motif-1: var(--rank-mid); --motif-2: var(--rank-mid); --motif-3: var(--rank-dark); --motif-4: var(--rank-dark); }
/* The card at one pixel scale, --k: 3 on a desk, 2 on a phone. The icon (64×64) in its framed box (94×94), the
   frames, the ornaments, the ground's weave and the type's font pixels all at it, so every part of the card is in
   proportion, and the card is as wide as the profile's box and its frame: the profile at its centre. app.js gives the
   frames and ornaments the same scale as data-scale. */
.saint { --k: 3; --frame-air: calc(var(--k) * 2px); justify-self: center; width: max-content; }
@media (max-width: 500px) { .saint { --k: 2; } }
.saint-body { display: grid; gap: calc(var(--k) * 3px); justify-items: center;
  background: var(--saint-weave, none) 0 0 / calc(var(--k) * 8px) calc(var(--k) * 8px), var(--saint-ground); image-rendering: pixelated; }
/* The profile's box: always 94×94, the icon at its middle; its frame is one of the design system's, richer with the
   rarity (app.js), the widest (15px) leaving the icon just room, the thinner ones more of the box's black */
.saint-shrine { box-sizing: border-box; width: calc(var(--k) * 94px); height: calc(var(--k) * 94px); display: grid; place-items: center; }
/* Ornaments on the profile's frame, each centred on the frame's line: at the corners, and the middles of the sides */
/* Each a step darker than the saint's tones (mixed a quarter toward its black ground), so they sit back from the
   profile, and outlined in that black, one card pixel (--k) all round: four hard, unblurred copies, not a shadow */
.shrine-o { position: absolute; translate: -50% -50%; --o: calc(var(--frame-t, 0px) / 2);
  --motif-1: color-mix(in srgb, var(--saint-motif) 75%, var(--saint-ground));
  --motif-2: color-mix(in srgb, var(--saint-face) 75%, var(--saint-ground));
  --motif-3: color-mix(in srgb, var(--saint-field) 75%, var(--saint-ground));
  --motif-4: color-mix(in srgb, var(--saint-field) 75%, var(--saint-ground));
  --ol: calc(var(--k) * 1px);
  filter: drop-shadow(var(--ol) 0 0 var(--saint-ground)) drop-shadow(calc(-1 * var(--ol)) 0 0 var(--saint-ground))
    drop-shadow(0 var(--ol) 0 var(--saint-ground)) drop-shadow(0 calc(-1 * var(--ol)) 0 var(--saint-ground)); }
.shrine-o[hidden] { display: none; }
.shrine-o[data-at="tl"] { left: var(--o); top: var(--o); }
.shrine-o[data-at="tr"] { left: calc(100% - var(--o)); top: var(--o); }
.shrine-o[data-at="bl"] { left: var(--o); top: calc(100% - var(--o)); }
.shrine-o[data-at="br"] { left: calc(100% - var(--o)); top: calc(100% - var(--o)); }
.shrine-o[data-at="t"] { left: 50%; top: var(--o); }
.shrine-o[data-at="b"] { left: 50%; top: calc(100% - var(--o)); }
.shrine-o[data-at="l"] { left: var(--o); top: 50%; }
.shrine-o[data-at="r"] { left: calc(100% - var(--o)); top: 50%; }
.shrine-o[data-at="t1"] { left: 25%; top: var(--o); }  .shrine-o[data-at="t3"] { left: 75%; top: var(--o); }
.shrine-o[data-at="b1"] { left: 25%; top: calc(100% - var(--o)); }  .shrine-o[data-at="b3"] { left: 75%; top: calc(100% - var(--o)); }
.shrine-o[data-at="l1"] { left: var(--o); top: 25%; }  .shrine-o[data-at="l3"] { left: var(--o); top: 75%; }
.shrine-o[data-at="r1"] { left: calc(100% - var(--o)); top: 25%; }  .shrine-o[data-at="r3"] { left: calc(100% - var(--o)); top: 75%; }
/* A Epic card's ornaments sit out at the frame's edge, not on the middle of its band: centred half their own size
   in (four card pixels, its 8px tiles' half), so each one's outer side meets the edge */
.saint[data-tier="Epic"] .shrine-o { --o: calc(var(--k) * 4px); }
/* A Relic's are set in by exactly half their own size (--half, in motif pixels, from app.js), each flush with the edge,
   and it has more of them: at the three- and five-eighths of every side too */
.saint[data-tier="Relic"] .shrine-o { --o: calc(var(--k) * var(--half, 4) * 1px); }
.shrine-o[data-at="t3e"] { left: 37.5%; top: var(--o); }  .shrine-o[data-at="t5e"] { left: 62.5%; top: var(--o); }
.shrine-o[data-at="b3e"] { left: 37.5%; top: calc(100% - var(--o)); }  .shrine-o[data-at="b5e"] { left: 62.5%; top: calc(100% - var(--o)); }
.shrine-o[data-at="l3e"] { left: var(--o); top: 37.5%; }  .shrine-o[data-at="l5e"] { left: var(--o); top: 62.5%; }
.shrine-o[data-at="r3e"] { left: calc(100% - var(--o)); top: 37.5%; }  .shrine-o[data-at="r5e"] { left: calc(100% - var(--o)); top: 62.5%; }
.saint-art { display: block; width: calc(var(--k) * 64px); height: calc(var(--k) * 64px); image-rendering: pixelated; }
/* The plate and the rarity's box: the profile's width, in the card's frame */
.saint-plate, .saint-tags { box-sizing: border-box; width: calc(var(--k) * 94px); --frame-air: calc(var(--k) * 2px); }
/* The number and the rarity: MEKZANTINE (the number in its Mono, every number the same width; the rarity in capitals),
   one font pixel to one card pixel (its 18px em × --k), in the metal's light, extruded one font pixel down in its dark
   (extrude.css; on in any theme, on this card) */
.saint-number, .saint-tier { margin: 0; text-align: center; white-space: nowrap; color: var(--rank-light);
  --extrude-flat: 0; --extrude-depth: var(--rank-dark); --extrude-grid: 18; }
.saint-number { font: calc(max(1, var(--k) - 1) * 18px) / 1 var(--font-blackletter-mono); }
/* The number and the rarity a step under the card's scale: two font pixels to its three (one to its two on a phone),
   their tiles a step smaller with them (app.js) */
.saint-tier { font: calc(max(1, var(--k) - 1) * 18px) / 1 var(--font-blackletter); text-transform: uppercase; --extrude-grid: 18; }
/* Each between its two tiles, the tiles centred in the room either side */
.saint-plate, .saint-tags { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
/* A pair of tiles either side, the same size, the size growing with the rarity */
.tile-side { display: flex; align-items: center; gap: calc((var(--k) - 1) * 2px); }



/* Light on the card's frame, as gilt catches it: a band of the rarity's light sweeping across the card at a slant,
   showing only on the frame's own pixels (the frame's shape, --frame-mask, from motifs.js; the card's frame and the
   number's and rarity's frames each have one, on the same cycle, so one band crosses all three), in pixel steps, then
   resting. Rare: half strength (a 2×2 dither of the light), every eight seconds; Epic and Relic: solid, every five,
   and a spark at each corner that blinks now and then. Only on a live card (card.js: the one shown in full), nothing
   below Rare, nor wherever motion is turned down. */
.card-sheen, .card-spark { position: absolute; pointer-events: none; display: none; z-index: 1; --o: calc(var(--frame-t, 0px) / 2); }
.saint.live[data-tier="Rare"] .card-sheen, .saint.live:is([data-tier="Epic"], [data-tier="Relic"]) :is(.card-sheen, .card-spark) { display: block; }
.card-sheen { inset: 0; image-rendering: pixelated;
  background: linear-gradient(115deg, transparent 0 45%, var(--rank-light) 45% 55%, transparent 55% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--frame-mask) 0 0 / var(--frame-w) var(--frame-h) no-repeat,
    repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / calc(var(--k) * 2px) calc(var(--k) * 2px);
  -webkit-mask-composite: source-in;
  mask: var(--frame-mask) 0 0 / var(--frame-w) var(--frame-h) no-repeat,
    repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / calc(var(--k) * 2px) calc(var(--k) * 2px);
  mask-composite: intersect;
  animation: card-sheen 8s steps(20) infinite; }
.saint:is([data-tier="Epic"], [data-tier="Relic"]) .card-sheen {
  -webkit-mask: var(--frame-mask) 0 0 / var(--frame-w) var(--frame-h) no-repeat; mask: var(--frame-mask) 0 0 / var(--frame-w) var(--frame-h) no-repeat;
  animation-duration: 5s; }
/* (Hidden outright between sweeps: the band is slanted, so even past the edge its foot can still cross a corner) */
@keyframes card-sheen {
  0% { background-position: 100% 0; opacity: 1; }
  20% { background-position: 0% 0; opacity: 1; }
  20.01%, 100% { background-position: 0% 0; opacity: 0; }
}
/* A spark: a plus of the light, three card pixels across, on the frame's corner; it shows for a moment, then rests */
.card-spark { width: calc(var(--k) * 3px); height: calc(var(--k) * 3px); translate: -50% -50%; background: var(--rank-light);
  clip-path: polygon(33.4% 0, 66.6% 0, 66.6% 33.4%, 100% 33.4%, 100% 66.6%, 66.6% 66.6%, 66.6% 100%, 33.4% 100%,
    33.4% 66.6%, 0 66.6%, 0 33.4%, 33.4% 33.4%);
  opacity: 0; animation: card-spark 5s steps(1) infinite; }
.card-spark[data-at="tl"] { left: var(--o); top: var(--o); }
.card-spark[data-at="tr"] { left: calc(100% - var(--o)); top: var(--o); animation-delay: -1.3s; }
.card-spark[data-at="br"] { left: calc(100% - var(--o)); top: calc(100% - var(--o)); animation-delay: -2.6s; }
.card-spark[data-at="bl"] { left: var(--o); top: calc(100% - var(--o)); animation-delay: -3.9s; }
@keyframes card-spark { 0%, 92% { opacity: 0; } 93%, 97% { opacity: 1; } 98%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .card-sheen, .card-spark { display: none !important; } }

/* ---------- The table: a hand dealt face down (table.js) ----------
   Each card is the full card at one art pixel to a screen pixel (--k: 1, 110×172), turning over on the design
   system's card turn: --turn-u one card pixel. As many across as fit (eight at most), two rows; on a narrow screen
   more rows, so a hand is always ten or more. Before the first
   deal the hand keeps its room, so nothing below it moves when it comes. */
.table { display: grid; gap: var(--space-4); }
.hand { display: flex; flex-wrap: wrap; gap: var(--space-6); min-height: 184px; }
/* Each card's button is the card's own size (never stretched to the hand's height), so the focus ring sits 2px round
   the card on every side. The ring is keyboard focus only, as everywhere (DESIGN.md "Focus"): a click leaves no
   mark, and the card last opened shows nothing more, since the dialog says which it is. */
.hand-slot { padding: 0; border: 0; background: none; cursor: pointer; display: block; align-self: center; }
.hand-slot:disabled { cursor: default; }
.hand-slot { position: relative; }
/* a card never collected before: the design system's tag, "New", over the middle of its top edge (out of the flow) */
.card-new { position: absolute; top: 0; left: 50%; translate: -50% -50%; z-index: 3; pointer-events: none; }
.hand-slot:not(:disabled):hover > .hand-card { filter: brightness(1.08); }   /* a card under the pointer: 8% brighter, at once */
/* A turning card drops its shadow 3 card pixels down and 2 right, past its own box: the hand keeps that room always
   (at its scale, data-k), and the page keeps the scrollbar's, so a turn never changes the page's height or width and
   nothing around it jiggles. */
.pool .hand { --u: 1px; padding: 0 calc(2 * var(--u)) calc(3 * var(--u)) 0; box-sizing: border-box; }
.pool .hand[data-k="2"] { --u: 2px; }
.pool .hand[data-k="3"] { --u: 3px; }
html { scrollbar-gutter: stable; }
.hand-slot:focus-visible { outline: var(--stroke) dashed var(--focus-ring); outline-offset: var(--focus-offset); }
.saint.hand-card { --k: 1; --turn-u: calc(var(--k) * 1px); }
.hand-card .tile-side { display: none; }   /* at 1× the number and rarity fill their plates alone, centred */
.hand-card :is(.saint-plate, .saint-tags) { grid-template-columns: 1fr; }
@media (max-width: 500px) { .hand { gap: var(--space-4) var(--space-1); } }   /* three across a 375px phone */
/* The back, the same on every card but for a hint (below): the cell window's lattice and its flower, in two browns of
   the wood (DawnBringer 32's #663931 ground and #8f563b lattice, from the art library: no rarity's metal). While a card
   is face down, and all through its turn, its frames wear the browns too: the rarity's metal arrives only as it lands. */
.saint.hand-card { --back-ground: #663931; --back-wood: #8f563b; --back-glint: #eec39a; --back-glint-bright: #fbf236; }
/* A hint's tint (hint.js): the same back in another hue, its two tones as dark and as far apart as the browns, from
   DawnBringer 32 too. The table draws the back again when it changes (its motifs take their colours as drawn). */
.hand-slot[data-tint="blue"] .saint.hand-card { --back-ground: #3f3f74; --back-wood: #306082; }
.hand-slot[data-tint="green"] .saint.hand-card { --back-ground: #524b24; --back-wood: #4b692f; }
.hand-slot[data-tint="violet"] .saint.hand-card { --back-ground: #45283c; --back-wood: #76428a; }
.saint.hand-card.anim-turn { --turn-shadow: #000000; }   /* a card's shadow as it turns: pure black, on the #0f0f0f ground */
/* (the face keeps its metal underneath, so it can be drawn ahead while the card lies down: table.js prepaint) */
.saint.hand-card > .turn-face { --motif-1: var(--rank-light); --motif-2: var(--rank-mid); --motif-3: var(--rank-dark); --motif-4: var(--rank-dark); }
.saint.hand-card:is(:not(.up), .turning) { --motif-1: var(--back-wood); --motif-2: var(--back-wood); --motif-3: var(--back-ground);
  --motif-4: var(--back-ground); --bg: var(--back-ground); }
.saint-back { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(6, calc(var(--k) * 14px));
  grid-auto-rows: calc(var(--k) * 24px); justify-content: center; align-content: center; overflow: hidden; background: var(--back-ground);
  --motif-1: var(--back-wood); --motif-2: var(--back-wood); --motif-3: var(--back-ground); --motif-4: var(--back-ground); }
.saint-back-flower { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
/* A hint's glints (hint.js: most Epics and Relics, now and then a Rare, never saying which): face down, the back
   sparkles. Six glints of gilt catch the light on the lattice, each opening from a point into a plus five card pixels
   across and breaking up toward its tips, then showing next somewhere else (three places each, --x/--y in card
   pixels), every other one the brighter --back-glint-bright. Each glint a beat apart from the others, and each card from the next (--i, its place in the
   hand: table.js). Only while it's down (the slot's data-state), so they go the moment it's turned. Lit unless the
   keyframes hide them, so where motion is turned down (the system cuts animations) they stay lit, still, whole, in
   their first places: the hint is kept, only the blinking goes. */
.back-glint { display: none; position: absolute; z-index: 1; width: calc(var(--k) * 1px); height: calc(var(--k) * 1px);
  left: calc(var(--k) * var(--x1) * 1px); top: calc(var(--k) * var(--y1) * 1px); translate: calc(var(--k) * 2px) calc(var(--k) * 2px);
  --c: var(--back-glint); box-shadow: var(--f3); pointer-events: none; animation: back-glint 4.8s steps(1) infinite;
  /* the frames of one glint, each a set of card pixels round its centre (box-shadows, one a pixel, the rest clear) */
  --f1: calc(var(--k) * 0px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * -1px) transparent, calc(var(--k) * 1px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * 1px) transparent, calc(var(--k) * -1px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * -2px) transparent, calc(var(--k) * 2px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * 2px) transparent, calc(var(--k) * -2px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * -3px) transparent, calc(var(--k) * 3px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * 3px) transparent, calc(var(--k) * -3px) calc(var(--k) * 0px) transparent;
  --f2: calc(var(--k) * 0px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * -1px) var(--c), calc(var(--k) * 1px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * 1px) var(--c), calc(var(--k) * -1px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * -2px) transparent, calc(var(--k) * 2px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * 2px) transparent, calc(var(--k) * -2px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * -3px) transparent, calc(var(--k) * 3px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * 3px) transparent, calc(var(--k) * -3px) calc(var(--k) * 0px) transparent;
  --f3: calc(var(--k) * 0px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * -1px) var(--c), calc(var(--k) * 1px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * 1px) var(--c), calc(var(--k) * -1px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * -2px) var(--c), calc(var(--k) * 2px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * 2px) var(--c), calc(var(--k) * -2px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * -3px) transparent, calc(var(--k) * 3px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * 3px) transparent, calc(var(--k) * -3px) calc(var(--k) * 0px) transparent;
  --f4: calc(var(--k) * 0px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * -1px) var(--c), calc(var(--k) * 1px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * 1px) var(--c), calc(var(--k) * -1px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * -2px) var(--c), calc(var(--k) * 2px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * 2px) var(--c), calc(var(--k) * -2px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * -3px) transparent, calc(var(--k) * 3px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * 3px) transparent, calc(var(--k) * -3px) calc(var(--k) * 0px) transparent;
  --f5: calc(var(--k) * 0px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * -1px) transparent, calc(var(--k) * 1px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * 1px) transparent, calc(var(--k) * -1px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * -2px) transparent, calc(var(--k) * 2px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * 2px) transparent, calc(var(--k) * -2px) calc(var(--k) * 0px) transparent, calc(var(--k) * 0px) calc(var(--k) * -3px) var(--c), calc(var(--k) * 3px) calc(var(--k) * 0px) var(--c), calc(var(--k) * 0px) calc(var(--k) * 3px) var(--c), calc(var(--k) * -3px) calc(var(--k) * 0px) var(--c); }
.hand-slot[data-state="down"][data-glint] .back-glint { display: block; }
.back-glint:is([data-g="2"], [data-g="4"], [data-g="6"]) { --c: var(--back-glint-bright); }
.back-glint[data-g="1"] { --x1: 22; --y1: 38; --x2: 76; --y2: 64; --x3: 34; --y3: 118;
  animation-delay: calc(var(--i, 0) * -1.3s - 0.0s); }
.back-glint[data-g="2"] { --x1: 80; --y1: 124; --x2: 28; --y2: 86; --x3: 64; --y3: 30;
  animation-delay: calc(var(--i, 0) * -1.3s - 0.8s); }
.back-glint[data-g="3"] { --x1: 52; --y1: 22; --x2: 14; --y2: 140; --x3: 82; --y3: 96;
  animation-delay: calc(var(--i, 0) * -1.3s - 1.6s); }
.back-glint[data-g="4"] { --x1: 84; --y1: 48; --x2: 46; --y2: 104; --x3: 20; --y3: 66;
  animation-delay: calc(var(--i, 0) * -1.3s - 2.4s); }
.back-glint[data-g="5"] { --x1: 36; --y1: 80; --x2: 82; --y2: 150; --x3: 58; --y3: 132;
  animation-delay: calc(var(--i, 0) * -1.3s - 3.2s); }
.back-glint[data-g="6"] { --x1: 66; --y1: 112; --x2: 12; --y2: 20; --x3: 84; --y3: 78;
  animation-delay: calc(var(--i, 0) * -1.3s - 4.0s); }
/* three places a glint shows, in turn; at each it opens from its centre: a point, a small plus, the whole plus, then
   its heart goes out and its tips fly a pixel further and are gone, a step every 72ms (steps: whole pixels only) */
@keyframes back-glint {
  0%, 100% { opacity: 0; }
  22.0% { opacity: 1; left: calc(var(--k) * var(--x1) * 1px); top: calc(var(--k) * var(--y1) * 1px); box-shadow: var(--f1); }
  23.5% { box-shadow: var(--f2); }
  25.0% { box-shadow: var(--f3); }
  26.5% { box-shadow: var(--f4); }
  28.0% { box-shadow: var(--f5); }
  29.5% { opacity: 0; }
  55.0% { opacity: 1; left: calc(var(--k) * var(--x2) * 1px); top: calc(var(--k) * var(--y2) * 1px); box-shadow: var(--f1); }
  56.5% { box-shadow: var(--f2); }
  58.0% { box-shadow: var(--f3); }
  59.5% { box-shadow: var(--f4); }
  61.0% { box-shadow: var(--f5); }
  62.5% { opacity: 0; }
  88.0% { opacity: 1; left: calc(var(--k) * var(--x3) * 1px); top: calc(var(--k) * var(--y3) * 1px); box-shadow: var(--f1); }
  89.5% { box-shadow: var(--f2); }
  91.0% { box-shadow: var(--f3); }
  92.5% { box-shadow: var(--f4); }
  94.0% { box-shadow: var(--f5); }
  95.5% { opacity: 0; }
}

/* ---------- The cell at night ----------
   One game screen (the design system's .gm-screen), open, no box round it: the table where the hand lands, on the same
   black as everything else, then the menu and the cell number at the foot. Always Miner (index.html). */
.cell { display: grid; height: 100%; align-content: center; }   /* the screen in the middle of what the page leaves it */
.vigil { grid-template-areas: "pool" "menu" "foot"; gap: var(--space-6); padding: var(--space-4); }
.vigil > .pool { margin-bottom: var(--space-8); }   /* the cards, then room before the menu under them */
.pool { grid-area: pool; width: 100%; display: grid; justify-items: center; }
.pool-ring { width: 100%; box-sizing: border-box; background: none; }   /* the whole page: the hand takes as many across as fit */
.pool-light { display: grid; justify-items: center; gap: var(--space-4); }
.pool .hand { width: 100%; display: grid; grid-template-columns: repeat(var(--across, 5), max-content); justify-content: center; gap: var(--space-4); }   /* four, in a row or two by two (table.js sets --across) */
.pool-note { margin: 0; text-align: center; }
/* The button's candle and its words: the candle in the menu's ▶ place, the words after it. Both words sit in one place,
   the longer's width, only the one for now shown, so the candle (a 7x18 pixel candle at 2x, the menu's row tall) never
   moves: unlit while it says "Light the candles",
   lit once it says "Add new candles", its flame flickering between two shapes and sparks rising off it, a frame at
   a time; the flame still and no sparks where motion is turned down. */
#deal { grid-template-columns: 30px auto; }   /* the candle where the menu's ▶ goes, then the words */
#deal::before, #deal::after { display: none; }   /* the candle is its cursor: no ▶ either side (the menu part draws one each side on a screen) */
#deal .deal-label { display: grid; }
#deal .deal-label > span { grid-area: 1 / 1; }
#deal[data-does="reveal"] .deal-label > [data-for="deal"], #deal[data-does="deal"] .deal-label > [data-for="reveal"] { visibility: hidden; }
#deal .deal-candle { display: block; justify-self: center; image-rendering: pixelated; }
#deal:not([data-does="deal"]) .deal-candle :is(.flame, .spark) { display: none; }
#deal .flame.f2 { visibility: hidden; }
#deal[data-does="deal"] .flame.f1 { animation: candle-a 640ms steps(1, end) infinite; }
#deal[data-does="deal"] .flame.f2 { animation: candle-b 640ms steps(1, end) infinite; }
@keyframes candle-a { 0%, 60% { visibility: visible; } 61%, 100% { visibility: hidden; } }
@keyframes candle-b { 0%, 60% { visibility: hidden; } 61%, 100% { visibility: visible; } }
#deal .spark { opacity: 0; }
#deal[data-does="deal"] .spark { animation: candle-spark 1.4s steps(7, end) infinite; animation-delay: calc(var(--i) * 470ms); }
@keyframes candle-spark { 0% { opacity: 1; translate: 0 0; } 70% { opacity: 1; } 100% { opacity: 0; translate: 0 -7px; } }
@media (prefers-reduced-motion: reduce) {
  #deal .flame { animation: none !important; }
  #deal .flame.f1 { visibility: visible; }
  #deal .spark { display: none; }
}
/* Enclose: the design system's loupe (css/parts/loupe.css), as Dosage opens a glyph: the card at 2× on the left, the
   details beside it (under it on a phone, centred: the loupe's own wrap). No frame and no accent: the card carries
   the rarity's metal, and is the one loud thing. One size whatever the saint: the name, the place and the saying keep
   fixed room, so stepping through the hand changes only the card and its words, never the panel. */
.enclose-side { flex: none; align-self: flex-start; display: grid; gap: var(--space-3); justify-items: center; max-width: 100%; }
.enclose-side > .saint { --k: 2; }
.enclose { max-height: calc(100dvh - 32px); overflow-y: auto; }   /* never past a short window: it scrolls inside */
.enclose .loupe-title > .loupe-actions { flex: none; flex-wrap: nowrap; }   /* Save and Close together, never squeezed (as Dosage) */
/* Save is a link (it downloads), and base.css pulls an icon in any <a> onto a line of text (--icon-text-pull), so it
   would sit 3.75px higher than Close's: a boxed button's icon is centred, link or not. (A design system fix: an
   a.btn's icon should be a button's. Until then, here.) */
.enclose .loupe-actions > a.btn > .icon { margin-block: 0; vertical-align: 0; }
.enclose-about { gap: var(--space-3); }
/* The name: MEKZANTINE at two font pixels (36px), up to two lines, extruded in the metal's dark */
.enclose-name { font: 36px / 1 var(--font-blackletter); color: var(--rank-light, var(--text-strong)); min-height: 72px; align-content: start;
  --extrude-flat: 0; --extrude-depth: var(--rank-dark); --extrude-grid: 18; }
.enclose-where { margin: 0; min-height: 36px; }   /* two lines kept: the longest epithet and place wrap once */
.enclose-saying { margin: 0; color: var(--text); line-height: 20px; min-height: calc(5 * 20px); }
/* The stats at the foot: each an icon (the design system's, at 1×, in the muted ink), the two counted on the HUD's
   stat rows, the rest three across in short capitals */
/* The line they're in (the diagram part): teacher, them, students; compact, the wires 24px tall, nodes 12px apart,
   each node its name and number; them the accent's edge (.goal), the others buttons that open their card */
.lineage { --diagram-gap-y: 10px; --diagram-gap-x: 8px; --diagram-ground: var(--bg); padding: 0; width: 100%; }
.lineage[hidden] { display: none; }
.lineage .diagram-node { display: flex; justify-content: center; align-items: baseline; gap: var(--space-2); padding: 4px var(--space-2); font-size: 16px; line-height: 20px; white-space: nowrap; overflow: hidden; }
.lineage .diagram-node > b { font-weight: inherit; color: var(--text-strong); }
.lineage .diagram-node > span { font: 14px / 1 var(--font-mono); color: var(--text-muted); }
.lineage .diagram-node > b { overflow: hidden; text-overflow: ellipsis; }
.lineage button.diagram-node { cursor: pointer; background: none; border: 0; font: inherit; color: inherit; }
/* Who they were: a row each, an icon and its word in the muted ink, then what it says */
.saint-lore { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--space-3); margin: 0; font-size: 14px; line-height: 18px; }
.saint-lore dt { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); white-space: nowrap; }
.saint-lore dt .icon { width: 15px; height: 15px; color: var(--rank-light, var(--text-muted)); }
.saint-lore dd { margin: 0; color: var(--text-strong); }
/* a dashed rule between the rows (as over them), across both columns: each row's word and what it says */
.saint-lore { row-gap: 0; }
.saint-lore > :is(dt, dd) { padding-block: 6px; }
.saint-lore > :is(dt, dd):nth-child(n + 3) { border-top: var(--stroke) dashed var(--line); }
.saint-lore dd .link { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.saint-stats { margin-top: auto; display: grid; gap: var(--space-2); padding-top: var(--space-2); border-top: var(--stroke) dashed var(--line); }
.saint-stats .hud-stat { grid-template-columns: 15px minmax(0, 1fr) 4ch; --hud-bar: 1fr; }
.saint-stats .icon { width: 15px; height: 15px; color: var(--text-muted); }
.saint-stats .hud-num { color: var(--rank-light, var(--text-strong)); text-align: right; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 15px minmax(0, 1fr)); gap: var(--space-1) var(--space-2); margin: 0; align-items: center;
  font: var(--text-crisp) / 1.4 var(--font-mono); }
.stat-grid dt { display: grid; place-items: center; }
.stat-grid dd { margin: 0; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: clip; }
/* A phone: the open card the whole screen, read top to bottom as a page: the card, its name (with Save and Close,
   held at the top as it scrolls), the facts, the saying, who they were, then the line they're in last; and the
   achievements' toasts lifted over the foot bar, clear of the chest */
@media (max-width: 640px) {
  .enclose { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; }
  .enclose::backdrop { background: var(--bg); }   /* the screen it covers kept out of sight: the box's ground is drawn on
                                                     the box, so it scrolls with what's inside and would show the page */
  .enclose-side { display: contents; }
  .enclose #card-slot { order: 0; }
  .enclose-about { order: 1; }
  .enclose #lineage { order: 2; flex-basis: 100%; }
  .enclose .loupe-title { position: sticky; top: calc(-1 * var(--space-4)); z-index: 1; background: var(--bg); padding-block: var(--space-2); }
  .toasts { bottom: calc(var(--page-gutter) + 56px); }
}
/* A short phone: the card at 1×, so the whole panel fits with nothing scrolling inside it */
@media (max-width: 640px) and (max-height: 760px) { .enclose-side > .saint { --k: 1; } }
@media (max-width: 700px) {
  /* the table runs to the screen's edges, so the hand still sits three across; the hand and its button held together
     in the middle, the room left falling evenly above and below */
  .vigil { padding-inline: 0; align-content: center; }
  .vigil > .pool { margin-bottom: 0; }
  .pool .hand { gap: var(--space-4) var(--space-1); }
}

/* The hand's scale, as table.js picks it (data-k: the biggest card at which four fit, in a row or two by two): at 2× and
   3× the detailed cards, their side tiles back. The page takes the window's whole width: the table wants the room. */
.page { --page-max: 2400px; }
.hand[data-k="2"] .saint.hand-card { --k: 2; }
.hand[data-k="3"] .saint.hand-card { --k: 3; }
.hand:is([data-k="2"], [data-k="3"]) .hand-card .tile-side { display: flex; }
.hand:is([data-k="2"], [data-k="3"]) .hand-card :is(.saint-plate, .saint-tags) { grid-template-columns: 1fr auto 1fr; }
/* While a hand is being laid down, a card not yet placed keeps its room but doesn't show */
.hand-slot.unplaced { visibility: hidden; }

/* ---------- The album (album.js) ----------
   A game's collection screen in the plain card's frame (the gold double line, so it keeps its room for the saints):
   the chest in the foot bar opens it. Saints: a framed ledger beside the saints collected, a field of cells
   filling the rest, each its portrait in its rarity's frame and metal. Achievements: a framed strip of the tally over
   badge tiles. */
.album-count { font: var(--text-crisp) / 1 var(--font-mono); color: var(--text-strong); }
.album { display: none; --motif-1: #d9a066; --motif-2: #8a6f30; --motif-3: #663931; --motif-4: #45283c; }   /* the frame: the candle's golds (DawnBringer 32) */
.album[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.album-saints[hidden], .album-achs[hidden] { display: none; }

/* The head: the name in MEKZANTINE 72 (its 18 grid), extruded in the frame's dark gold; the two books as framed
   buttons at Tall 24, a chest and a trophy; the close at the end */
/* the name at the start, the two books in the middle, the close in the corner (absolute) */
.album-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); min-width: 0; }
.album-title { justify-self: start; }
.album-title { margin: 0; font: 72px / 1 var(--font-blackletter); color: #fbf236; --extrude-flat: 0; --extrude-depth: #8a6f30; --extrude-grid: 18; }
/* the two books: each in the plain card's frame (the gold double line, at 1x), no tray behind them; the chosen one
   in the bright gold, the other in the dim (its frame and its word), both quiet until picked */
.album-modes { display: flex; gap: var(--space-3); justify-self: center; }
.album-modes > .btn { --motif-1: #8a6f30; --motif-2: #8a6f30; --motif-3: #45283c; --motif-4: #45283c; color: var(--text-muted); }
.album-modes > .btn[aria-pressed="true"] { --motif-1: #fbf236; --motif-2: #d9a066; --motif-3: #8a6f30; --motif-4: #45283c; color: var(--text-strong); }
.album-modes > .btn { font: 24px / 1 var(--font-ui); -webkit-font-smoothing: none; padding: calc(var(--frame-t, 0px) + var(--space-2)) calc(var(--frame-r, 0px) + var(--space-4)); gap: var(--space-2); }
.album-modes > .btn .icon { width: 30px; height: 30px; }
/* the close in the panel's top right corner, just inside the frame, whatever the head's height (the dialog, fixed,
   is what it sits in) */
.album-head > .close { position: absolute; top: calc(var(--frame-t, 0px) + var(--space-3)); right: calc(var(--frame-r, 0px) + var(--space-3)); z-index: 2; }
.album-head { padding-right: var(--space-8); }

/* A counter: the number lit in gold and extruded, the zeros before it and the total after it quiet, all one size
   (MEKZANTINE 54). .sm: a ledger's, in Mono 24, its number lit in its row's metal, the total " / 5892" */
.tally { display: inline-flex; align-items: baseline; font: 54px / 1 var(--font-blackletter); -webkit-font-smoothing: none; }
.tally-zeros, .tally-of { color: var(--text-muted); }   /* quiet, but read: the muted ink (700), as labels are */
.tally-n { color: #fbf236; text-shadow: 0 2px #8a6f30, 0 4px #45283c; }
.tally.sm { font: 24px / 1 var(--font-mono); }
.tally.sm .tally-n { color: var(--text-strong); text-shadow: none; }
.tally.sm .tally-of { white-space: pre; }
.ledger-count > .tally { font-size: 36px; }   /* 0028/9999 across the ledger, on MEKZANTINE's 18 grid */

/* Saints: the ledger (264px) and the field */
.album-saints { min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-6); }
.album-ledger { display: grid; align-content: start; gap: var(--space-4); --motif-1: #fbf236; --motif-2: #d9a066; --motif-3: #8a6f30; --motif-4: #45283c; }
.ledger-count { margin: 0; }
/* a rarity: its name in Humanist 24 in its metal, its counter under it in Mono */
.ledger-tiers { display: grid; gap: var(--space-1); margin: 0; }
.ledger-tiers dt { font: 24px / 1 var(--font-ui); color: var(--rank-light); -webkit-font-smoothing: none; margin-top: var(--space-2); }
.ledger-tiers dd { margin: 0; }
.album-field { min-width: 0; min-height: 0; overflow-y: auto; padding: 0 var(--space-2) var(--space-2) 0; display: grid; align-content: start; gap: var(--space-6); }   /* scrolls: every saint collected */
/* a group: its name in Humanist 24 with how many in Mono, quiet, on a rule, then its cells */
.album-group { display: grid; gap: var(--space-3); }
.album-group-name { margin: 0; display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--stroke) dashed var(--line);
  font: 24px / 1 var(--font-ui); color: var(--text-strong); -webkit-font-smoothing: none; }
.album-group-n { font: 24px / 1 var(--font-mono); color: var(--text-muted); }
/* the sort menu, in the ledger: the game menu at its size (on a phone, the dropdown beside the count instead) */
.album-sort { margin-top: var(--space-2); }
.album-sort-pick { display: none; }
.album-sort > button { font-family: var(--font-ui); -webkit-font-smoothing: none; }   /* Humanist, as the ledger's words, at the menu's 24 */
.album-grid { display: grid; grid-template-columns: repeat(var(--across, 10), var(--cell, 96px)); grid-auto-rows: calc(var(--cell, 96px) + 24px); gap: 8px;
  outline-offset: var(--focus-offset); }   /* each cell a line taller than wide: the number has its own room under the portrait */
.album-cell { display: grid; place-items: center; }
/* a collected saint: its portrait at a whole scale, in its rarity's frame and metal, its number under it */
.album-cell.on { grid-template-rows: minmax(0, 1fr) 24px; padding: calc(var(--frame-t, 8px) + 2px) calc(var(--frame-r, 8px) + 2px) calc(var(--frame-b, 8px) + 2px) calc(var(--frame-l, 8px) + 2px);
  gap: 4px; cursor: pointer; color: var(--rank-light); --fill: #0f0f0f; }
.album-cell.on .cell-art { width: 64px; height: 64px; image-rendering: pixelated; align-self: center; }
.album-cell.on .cell-no { font: 24px / 24px var(--font-mono); -webkit-font-smoothing: none; }
.album-cell.on:hover { filter: brightness(1.08); }
.album-cell.on:focus-visible { outline: var(--stroke) dashed var(--focus-ring); outline-offset: var(--focus-offset); }

/* Achievements: centred, at most 1040px: the strip of counters, then a row each in two columns */
.album-achs { min-height: 0; overflow-y: auto; }
.album-achs > * { width: 100%; }   /* the full width: its edges on the head's and the frame's */
.album-achs { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-6); padding-right: var(--space-2); }
.ach-strip { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: baseline; gap: var(--space-4) var(--space-8);
  --motif-1: #fbf236; --motif-2: #d9a066; --motif-3: #8a6f30; --motif-4: #45283c; }
.strip-stat { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.strip-stat > .t-note { font-size: 24px; -webkit-font-smoothing: none; }
.ach-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
/* a row: the badge (a 48px framed square, its icon at 2×), the name and what it asks, the points */
/* everything at twice the 12/14 sizes, on Dosage's 24 grid: a 72px badge (its icon at 3×), the name and what it asks
   in 24, the points in MEKZANTINE 54 */
.ach-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4);
  --edge: color-mix(in srgb, var(--line) 70%, transparent); --fill: transparent; color: var(--text-muted); }
.ach-row-badge { display: grid; place-items: center; width: 72px; height: 72px; color: var(--line); outline: var(--stroke) solid currentColor; outline-offset: -1px; }
.ach-row-badge .icon { width: 45px; height: 45px; }
.ach-row-text { display: grid; gap: 4px; min-width: 0; -webkit-font-smoothing: none; }
.ach-row-name { font-size: 24px; line-height: 28px; color: var(--text); }
.ach-row-desc { font-size: 24px; line-height: 28px; color: var(--text-muted); }
.ach-row-points { font: 54px / 1 var(--font-blackletter); color: var(--line); }
.ach-row.earned { --edge: #8a6f30; }
.ach-row.earned .ach-row-badge, .ach-row.earned .ach-row-points { color: var(--rank-light, #fbf236); }
.ach-row.earned .ach-row-name { color: var(--text-strong); }
.album-relics-title { margin: 0; font: 36px / 1 var(--font-blackletter); color: #d77bba; }
@media (max-width: 760px) {
  /* a phone: the head wraps (the name over the two books), the ledger a compact band over the field, the cells at the
     portrait's own size, the counters smaller */
  .album-head { grid-template-columns: 1fr; gap: var(--space-3); }
  .album-title { font-size: 54px; }
  .album-modes { width: 100%; justify-self: stretch; }
  .album-modes > .btn { flex: 1; justify-content: center; font-size: 16px; }
  .album-modes > .btn .icon { width: 15px; height: 15px; }
  .tally { font-size: 36px; }
  .album-saints { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--space-3); }
  /* the ledger one band: the count with the sort beside it, then the four rarities two to a row, each its name and
     its count; the sort the dropdown, not the long menu */
  .album-ledger { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); }
  .album-sort { display: none; }
  .album-sort-pick { display: inline-flex; grid-row: 1; grid-column: 2; }
  .ledger-tiers { grid-column: 1 / -1; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 4px var(--space-2); }
  .ledger-tiers .tally-of { display: none; }   /* each rarity's count alone: its total doesn't fit a phone's half */
  .ledger-tiers dt { font-size: 14px; margin: 0; }
  .tally.sm { font-size: 14px; }
  .album-cell.on .cell-no { font-size: 12px; line-height: 16px; }
  .album-grid { grid-auto-rows: calc(var(--cell, 64px) + 18px); }
  .album-cell.on { grid-template-rows: minmax(0, 1fr) 16px; gap: 2px; }
  /* achievements: the tally a strip of three that stays at the top while the rows scroll under it */
  .ach-strip { flex-wrap: nowrap; justify-content: space-between; gap: var(--space-2); position: sticky; top: 0; z-index: 1; }
  .strip-stat { display: grid; justify-items: center; gap: 2px; }
  .strip-stat > .tally { font-size: 24px; }
  .strip-stat > .t-note { font-size: 14px; }
  .ach-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
  .ach-row-badge { width: 48px; height: 48px; }
  .ach-row-badge .icon { width: 30px; height: 30px; }
  .ach-row-name { font-size: 16px; line-height: 20px; }
  .ach-row-desc { font-size: 14px; line-height: 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* two lines at most: a touch screen has no tip to show the rest */
  .ach-row-points { font-size: 36px; }
  /* the Relics turned: a case of tiles, four across, each its badge in its metal over its name */
  .ach-rows.relics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
  .relics .ach-row { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 4px; padding: var(--space-2) 4px; }
  .relics .ach-row-desc, .relics .ach-row-points { display: none; }
  .relics .ach-row-name { font-size: 12px; line-height: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
}

/* ---------- Enclose, bigger on a bigger screen ----------
   Not everything doubled (the type would shout, and the card is the one loud thing): the card a step bigger and the
   panel wider to hold it, the words as they are. Over --bp-tablet (900) and 700 tall: the card at 3× (330×480); over
   --bp-desktop (1200) and 760 tall: 4× (440×640), its name a font pixel bigger (MEKZANTINE 54, on its 18 grid). */
@media (min-width: 901px) and (min-height: 700px) {
  .enclose { width: min(832px, 100% - 32px); }
  .enclose-side > .saint { --k: 3; }
}
@media (min-width: 1201px) and (min-height: 760px) {
  .enclose { width: min(960px, 100% - 32px); }
  .enclose-side > .saint { --k: 4; }
  .enclose-name { font-size: 54px; min-height: 54px; }   /* one line kept (a long name wraps) */
  /* the words twice their size too, each on its face's grid (Dosage and Mono at 24, sharp), so the panel reads as
     one size with its card: the facts, the place, the saying, and the stats at the HUD's own 2× (its default) */
  .enclose .loupe-meta, .enclose-where { font-size: 24px; line-height: 32px; -webkit-font-smoothing: none; }
  .enclose-where { min-height: 64px; }
  .enclose-saying { font-size: 24px; line-height: 32px; min-height: calc(4 * 32px); -webkit-font-smoothing: none; }
  .enclose .hud-stat.sm { --hud-bar: 240px; gap: 12px; font: var(--text-lg) / 24px var(--font-mono); --meter-cell: 8px; --meter-gap: 2px; --meter-h: 16px; }
  .enclose .hud-stat.sm > .icon, .saint-stats .icon { width: 30px; height: 30px; }
  .saint-stats .hud-stat { grid-template-columns: 30px minmax(0, 1fr) 6ch; }
  .stat-grid { grid-template-columns: repeat(3, 30px minmax(0, 1fr)); font: 24px / 32px var(--font-mono); }
  .saint-lore { font-size: 24px; line-height: 32px; gap: 0 var(--space-4); -webkit-font-smoothing: none;
  }
  .saint-lore dt .icon { width: 30px; height: 30px; }
}

/* ---------- The tube ----------
   The design system's CRT glass (fx.css "The tube", mekFx.tube in app.js) over the page and over an open dialog. One
   deviation: its scanlines at DOS Age's own pitch, one row in every 3px (the game's line, 0.5 + 0.5*cos(2*pi*y/3), is
   strongest one row in three), the ground at 35% as the system's own, instead of the system's 2px band every 4px: a
   finer, lighter line, closer to the soft-light glass Anchorites had before (which also lit the page with a blur
   glow; the system has no blur, so the page is a little darker than it was). */
.fx-tube { --scanlines: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--100) 35%, transparent) 0 1px, transparent 1px 3px); }