/* =========================================================================
   SORTALIS — /how-to-play

   THE SECOND HALF OF `site.css`, NOT A SECOND COPY OF IT.

   `/site.css` loads first and supplies the whole ground floor: the palette
   rungs, the vault ground, the scanline veil, the masthead, `.panel`, `.btn`,
   `.eyebrow`, the footer. Everything here is the furniture that only a rules
   guide needs — the jump rail, the step lists, the scoring table — plus one
   thing neither of the other two public pages has:

   ── THE MOCK-UPS, AND WHY THE PIXEL FACE COMES BACK FOR THEM ─────────────

   A guide that explains a die, a card and the Chips x Mult readout has to SHOW
   them. The game's own components cannot be imported — this is a static
   document in `public/`, and `src/ui/` is built around `--s`, the scale unit
   that resizes the whole interface as one object. So the parts the guide
   quotes are rebuilt here at document scale, from the same rungs, against the
   real artwork: `tools/art/howtobake.mjs` writes `art/` out of `dieFaceTextures`
   and `iconURL`, so the dice and the card glyphs on this page are the game's
   own pixels rather than a drawing of them.

   `site.css` argues at length that the game's faces do not come to these pages,
   and that rule holds for every word of PROSE here. It does not hold inside a
   mock-up: a card plate lettered in the reader's system UI face is a picture of
   a card that does not exist. Jersey 25 is therefore declared below and spent
   ONLY inside `.mock` — card names, chip readouts, button labels, HUD figures.
   Nothing outside a mock-up may use it, and no lowercase prose may be set in
   it: this is the same face at the same job it does in the game, and nowhere
   else.
   ========================================================================= */

@font-face {
  font-family: 'Display';
  src: url('/fonts/Jersey25.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* The rungs the mock-ups need that `site.css` does not carry, because only
     the game uses them. Same hexes as `src/ui/style.css`. */
  --r0: #2b0d14; --r2: #7d2436;
  --v6-ink: #8598bf;
  --chip: var(--b5);
  --mult: var(--r4);
  --money: var(--y5);

  --r4-rgb: 232 73 100;
  --b4-rgb: 61 176 245;
  --g5-rgb: 72 214 162;
  --y5-rgb: 255 240 160;

  /* Rarity, from `--rar-*`. Only the tiers the guide actually prints. */
  --rar-common: var(--v5);
  --rar-uncommon: var(--g5);
  --rar-rare: var(--b4);
  --rar-legendary: var(--y4);

  /* Card plate edges, from `--card-*-edge`. */
  --card-charm-edge: var(--b3);
  --card-action-edge: var(--v6);
  --card-pattern-edge: var(--g4);
  --card-face-edge: var(--y3);
  --card-permit-edge: var(--y2);
}

/* =========================================================================
   THE PAGE'S OWN SPINE
   ========================================================================= */

/* ------------------------------------------------------------------ hero */
.ghero {
  position: relative;
  padding: clamp(36px, 5.5vw, 72px) 0 clamp(28px, 4vw, 44px);
  overflow: hidden;
  text-align: center;
}
.ghero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 44% at 50% 0%, rgb(var(--y4-rgb) / .13) 0%, transparent 74%),
    radial-gradient(84% 58% at 50% 100%, rgb(var(--g4-rgb) / .16) 0%, transparent 80%);
}
/* The rail — the wooden band the felt ends in, as the hero's floor. Same
   three-step gradient the press hero uses. */
.ghero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: linear-gradient(to bottom, var(--l3) 0 2px, var(--l2) 2px 4px, var(--l0) 4px);
}
.ghero__mark {
  display: block;
  width: min(420px, 74%);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .55));
}
.ghero__h {
  margin: clamp(16px, 2.6vw, 26px) 0 0;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
/* The tagline, verbatim, between the title and the lede. Gold and spaced like
   the game's own subtitles, so the eye takes it as the line under the mark. */
.ghero__tag {
  margin: .5em auto 0;
  max-width: 52ch;
  font-size: clamp(15px, .4vw + 13px, 18px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--y4);
}
.ghero__lede {
  margin: .7em auto 0;
  max-width: 56ch;
  font-size: clamp(17px, .7vw + 14px, 21px);
  line-height: 1.5;
  color: var(--n6);
}
.ghero__note {
  margin: 1.1em auto 0;
  max-width: 56ch;
  font-size: .92em;
  color: var(--ink-faint);
}
.ghero__cta { justify-content: center; margin-top: clamp(22px, 3vw, 30px); }

/* --------------------------------------------------------------- the rail */
/**
 * Seven sections is more than a reader holds in their head, so the contents
 * are a sticky rail rather than a list at the top they have to scroll back to.
 * It parks under the masthead — `top` is the masthead's own 56px floor — and
 * scrolls sideways on a phone rather than wrapping to three lines of chips.
 */
.jump {
  position: sticky;
  top: 56px;
  z-index: 9;
  background: rgb(var(--v0-rgb) / .95);
  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--v2);
  backdrop-filter: blur(6px);
}
.jump__in {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 8px;
  padding-bottom: 8px;
}
.jump__in::-webkit-scrollbar { display: none; }
/* Seven items in 1080px of frame, and they are tight enough that the tracking
   and the padding are both measured rather than chosen: at the masthead nav's
   12.5px/.08em they need 1166px and the last one hangs off the edge on a
   desktop. It still scrolls when it has to — see `.jump__in` — but a rail that
   scrolls on a 1440px monitor reads as broken, not as scrollable. */
.jump a {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 6px;
  color: var(--ink-faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  box-shadow: inset 0 0 0 var(--px) transparent;
}
.jump a:hover, .jump a:focus-visible {
  color: var(--n7);
  background: var(--v1);
  box-shadow: inset 0 0 0 var(--px) var(--v3);
}
.jump b {
  font-variant-numeric: tabular-nums;
  color: var(--y3);
  font-size: 11px;
}
.jump a:hover b, .jump a:focus-visible b { color: var(--y4); }

/* ------------------------------------------------------------- sections */
/* `scroll-margin-top` clears the masthead AND the jump rail, or every anchor
   lands with its own heading hidden behind the two sticky bars. */
.step { scroll-margin-top: 108px; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 12px;
  background: var(--y3);
  color: var(--v0);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.step__h { margin-bottom: .35em; }
.step__lede {
  font-size: clamp(17px, .5vw + 15px, 19px);
  color: var(--n6);
  line-height: 1.5;
}

/* A run of prose and mock-ups, laid out as one column with real air in it. */
.flow { display: grid; gap: clamp(20px, 2.6vw, 30px); margin-top: clamp(22px, 3vw, 34px); }
.flow > * { margin: 0; }

/* Prose beside a mock-up. Stacks under 780px, where a half column is neither
   wide enough to set text in nor wide enough to show a card row. */
.split { display: grid; gap: clamp(18px, 2.6vw, 30px); align-items: start; }

/**
 * A GRID ITEM'S FLOOR IS ITS CONTENT, AND THIS PAGE'S WIDEST CONTENT IS 560px
 * OF TABLE.
 *
 * `.spec` carries `min-width: 560px` so a wide table stays readable and scrolls
 * inside `.tablewrap`. That works everywhere except inside a grid, where a
 * track's default `min-width: auto` refuses to shrink below its content — so on
 * a 390px phone the scoring table stopped scrolling in its own box and instead
 * stretched `.flow` to 560px, taking every section it holds sideways with it.
 * The page body must never scroll horizontally (see `.path` in site.css for the
 * same rule stated about long strings). Zero the floor and the overflow goes
 * back inside the box that owns it.
 */
.flow > *, .split > * { min-width: 0; }
@media (min-width: 780px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
}

.note {
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.2vw, 22px);
  background: rgb(var(--v1-rgb) / .8);
  box-shadow: inset 3px 0 0 var(--y3), inset 0 0 0 var(--px) var(--v3);
  font-size: .95em;
  color: var(--ink-dim);
}
.note strong { color: var(--y4); }
.note--warn { box-shadow: inset 3px 0 0 var(--r3), inset 0 0 0 var(--px) var(--v3); }
.note--warn strong { color: var(--r5); }
.note--good { box-shadow: inset 3px 0 0 var(--g4), inset 0 0 0 var(--px) var(--v3); }
.note--good strong { color: var(--g6); }
.note p { max-width: none; }

/* The vocabulary strip — the words the rest of the page then uses freely. */
.terms {
  display: grid;
  /* 260, not 200: at the frame's usable width 200 fits four across and leaves
     the six-term strip as a 4+2 row with two holes in it. 260 lands on three,
     which divides six evenly. `.terms--pairs` is for the four-term strip. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 2px;
  margin: 0;
  background: var(--v3);
  box-shadow: 0 0 0 2px var(--v0);
}
/* Four terms, not six. 380 lands on two across the frame, which divides four. */
.terms--pairs { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.terms > div {
  padding: 14px 16px;
  background: var(--v1);
}
.terms dt {
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--y4);
  margin-bottom: 5px;
}
.terms dd { margin: 0; font-size: .9em; color: var(--ink-dim); line-height: 1.45; }

/* ------------------------------------------------------------- bullets */
/**
 * The guide's default body shape. A rules page is READ BY SOMEONE LOOKING FOR
 * ONE RULE, so prose is the exception here and a list of one-line rules with a
 * bold lead-in is the norm. The marker is a square lot in the same gold the
 * section numbers use, not a disc: nothing else on this page is round.
 */
.bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bul li {
  position: relative;
  padding-left: 18px;
  font-size: .95em;
  line-height: 1.5;
  color: var(--ink-dim);
}
.bul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px; height: 5px;
  background: var(--y3);
}
.bul strong { color: var(--n7); }
/* A list standing on its own across the frame rather than in a `.split` column
   carries the prose size, or it reads as a footnote to nothing. */
.bul--wide li { font-size: 1em; }

/* --------------------------------------------------------- inline tokens */
/* The game colour-codes these four nouns everywhere it prints them; the guide
   does the same so a reader who learns the colour on this page arrives at the
   table already reading it. */
.t { font-weight: 700; }
.t--chip { color: var(--chip); }
.t--mult { color: var(--mult); }
.t--money { color: var(--money); }
.t--hot { color: var(--y4); }
.t--bad { color: var(--r5); }
.t--good { color: var(--g6); }

/* =========================================================================
   THE MOCK-UPS — the game's own parts, rebuilt at document scale.
   Everything below is inside `.mock`; see the header.
   ========================================================================= */

.mock {
  font-family: 'Display', var(--font-sans);
  /* Jersey 25 is a tall, narrow face drawn small inside its box. Every size
     below is chosen against THAT metric, not against the system face, which is
     why nothing here shares a number with the prose ramp. */
  line-height: 1;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* A stage for a mock-up: the felt-lined well the game's own panels sit in. */
.stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 18px);
  padding: clamp(16px, 2.6vw, 26px);
  background:
    radial-gradient(90% 120% at 50% 100%, rgb(var(--g4-rgb) / .16), transparent 72%),
    var(--v0);
  box-shadow:
    inset 0 0 0 var(--px) var(--v3),
    inset 0 3px 8px rgba(0, 0, 0, .7),
    0 0 0 2px var(--v0);
}
.stage--felt {
  background:
    radial-gradient(80% 110% at 50% 110%, rgb(var(--g4-rgb) / .32), transparent 70%),
    var(--g0);
  box-shadow:
    inset 0 0 0 var(--px) var(--g3),
    inset 0 3px 8px rgba(0, 0, 0, .6),
    0 0 0 2px var(--v0);
}
.stage__cap {
  flex: 1 0 100%;
  margin-top: 4px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: .84em;
  line-height: 1.45;
  color: var(--ink-faint);
}
.stage__cap strong { color: var(--n6); }

/* ------------------------------------------------------------ die faces */
/**
 * 64 authored texels, whatever size the box is — the same contract
 * `src/ui/dieface.css` states. `pixelated` is not a nicety: without it the
 * game's art arrives through a bilinear filter and reads as a photograph of a
 * die. The sizes below are whole multiples of 64 wherever the layout allows.
 */
.die {
  display: block;
  width: var(--die, 64px);
  height: var(--die, 64px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 0 0 var(--px) var(--v0), 0 3px 0 rgba(0, 0, 0, .5);
}
.die--sm { --die: 44px; }
.die--lg { --die: 96px; }

/* A die in a row that is being read as a hand: the ones that score step
   forward and take the committed gold edge the table gives a Set die. */
.hand { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: center; }
.hand figure { margin: 0; display: grid; gap: 6px; justify-items: center; }
.hand figcaption {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hand .is-set .die {
  box-shadow: 0 0 0 2px var(--y4), 0 0 10px rgb(var(--y4-rgb) / .5), 0 3px 0 rgba(0, 0, 0, .5);
  transform: translateY(-5px);
}
.hand .is-set figcaption { color: var(--y4); }
.hand .is-dead .die { filter: grayscale(.7) brightness(.62); }

/* -------------------------------------------------------- the calc box */
/**
 * `.calc` from `src/ui/game.css` — the felt-lined slot the two chip tiles sit
 * in. The blue and red washes climb from the corners those tiles occupy, which
 * is what makes the panel read as chip-blue over mult-red before the eye has
 * resolved a single digit.
 */
.calc {
  display: grid;
  gap: 7px;
  justify-items: center;
  min-width: 200px;
  padding: 12px 14px;
  background:
    radial-gradient(90% 140% at 0% 100%, rgb(var(--b4-rgb) / .4), transparent 70%),
    radial-gradient(90% 140% at 100% 100%, rgb(var(--r4-rgb) / .4), transparent 70%),
    var(--v0);
  box-shadow:
    inset 0 0 0 var(--px) var(--v5),
    inset 0 3px 5px rgb(0 0 0 / .7),
    0 0 0 2px var(--v0);
}
.calc__pattern {
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-align: center;
  color: var(--n7);
}
.calc__lvl { font-size: 13px; color: var(--v6); }
.calc__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; width: 100%; }
.calc__chips, .calc__mult {
  font-size: 30px;
  line-height: 1.1;
  color: var(--n7);
  padding: 2px 8px;
}
.calc__chips {
  text-align: right;
  background: linear-gradient(180deg, var(--b3), var(--b1));
  box-shadow:
    inset 0 var(--px) 0 rgb(255 255 255 / .4),
    inset 0 -2px 0 rgb(0 0 0 / .35),
    inset 0 0 0 var(--px) var(--b4),
    0 2px 0 var(--b0),
    0 0 8px rgb(var(--b4-rgb) / .55);
}
.calc__mult {
  text-align: left;
  background: linear-gradient(180deg, var(--r3), var(--r1));
  box-shadow:
    inset 0 var(--px) 0 rgb(255 255 255 / .35),
    inset 0 -2px 0 rgb(0 0 0 / .35),
    inset 0 0 0 var(--px) var(--r4),
    0 2px 0 var(--r0),
    0 0 8px rgb(var(--r4-rgb) / .5);
}
.calc__x { font-size: 20px; color: var(--r4); text-align: center; }
.calc__out {
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--y4);
}
.calc__out b { font-size: 22px; }

/* An arrow between two states of the same readout — the before/after the
   Mult section is built on. Rotates upright when the pair stacks. */
.becomes {
  align-self: center;
  font-size: 26px;
  color: var(--y3);
  line-height: 1;
}
@media (max-width: 560px) { .becomes { transform: rotate(90deg); } }

/* ---------------------------------------------------------- the readout */
/* The four figures a player checks before choosing to roll or bank, in the
   shallow recess `.stat` gives them on the table screen. */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr));
  gap: 2px;
  width: 100%;
  background: var(--v3);
  box-shadow: 0 0 0 2px var(--v0);
}
.readout > div {
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: 11px 6px;
  background: var(--v1);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .45);
}
.readout dt {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.readout dd { margin: 0; font-size: 24px; line-height: 1; color: var(--n7); }
.readout .v-money { color: var(--money); }
.readout .v-chip { color: var(--chip); }
.readout .v-hot { color: var(--y4); }
.readout .v-bad { color: var(--r5); }

/* -------------------------------------------------------- action buttons */
/* Not links. These are pictures of the three presses a Turn offers, so they
   are `<span>`s in the markup and nothing here may look clickable. */
.press {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 10px 16px;
  font-size: 17px;
  letter-spacing: .08em;
  color: var(--n7);
  background: var(--v3);
  box-shadow:
    inset 0 0 0 var(--px) var(--v5),
    inset 0 -3px 0 rgba(0, 0, 0, .35),
    0 3px 0 var(--v0),
    var(--shadow-hard);
}
.press--set { background: var(--b2); box-shadow:
  inset 0 0 0 var(--px) var(--b4), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 3px 0 var(--b0), var(--shadow-hard); }
.press--bank { background: var(--g3); box-shadow:
  inset 0 0 0 var(--px) var(--g5), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 3px 0 var(--g0), var(--shadow-hard); }
.press--off { background: var(--v2); color: var(--v5); box-shadow:
  inset 0 0 0 var(--px) var(--v3), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 3px 0 var(--v0); }

/* ------------------------------------------------------------ the cards */
/**
 * `.card` from `src/ui/game.css`, at 108px instead of the rail's 64: this is a
 * page that is READ, and the sentence on a card is the thing the shop section
 * is about. The bevel, the rarity strip, the price tag and the clipped corners
 * are the same shapes at the same proportions.
 */
/* 280, not 150: the shelf has SIX cards on it, and at 150 they land five
   across with a sixth stranded on a row of its own. 280 lands on three, which
   divides six evenly, and gives the sentence under each card a column it can
   actually be set in. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(18px, 2.6vw, 28px);
}
.ware { display: grid; gap: 10px; justify-items: center; align-content: start; text-align: center; }

.card {
  position: relative;
  width: 108px;
  height: 132px;
  flex: 0 0 auto;
}
.card__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--card-fill, var(--v2));
  box-shadow:
    inset 0 0 0 var(--px) var(--card-rim, var(--card-edge, var(--v5))),
    inset -2px -2px 0 rgba(0, 0, 0, .38),
    inset 2px 2px 0 rgb(255 255 255 / .12),
    0 0 0 2px var(--v0),
    var(--card-glow, 0 0 0 transparent),
    0 3px 4px rgb(0 0 0 / .45),
    var(--shadow-hard);
  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
  );
  overflow: hidden;
}
.card__art {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .10), inset 0 -3px 0 rgba(0, 0, 0, .3);
}
.card__glyph {
  width: 72%; height: 72%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45));
}
.card__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}
.card__name {
  flex: 0 0 auto;
  padding: 3px 2px 6px;
  background: var(--v0);
  color: var(--n6);
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: .02em;
  text-align: center;
}
.card__rarity {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  box-shadow: inset 0 var(--px) 0 rgb(255 255 255 / .3);
}
.card__price {
  position: absolute;
  top: -7px; right: -4px;
  padding: 0 6px;
  background: var(--y3);
  color: var(--v0);
  font-size: 17px;
  line-height: 1.25;
  box-shadow: 0 0 0 var(--px) var(--y5), 2px 2px 0 rgba(0, 0, 0, .5);
}

.card--charm   { --card-fill: var(--b0); --card-edge: var(--card-charm-edge); }
.card--action  { --card-fill: var(--v4); --card-edge: var(--card-action-edge); }
.card--pattern { --card-fill: var(--g1); --card-edge: var(--card-pattern-edge); }
.card--face    { --card-fill: var(--y1); --card-edge: var(--card-face-edge); }
.card--permit  { --card-fill: var(--l1); --card-edge: var(--card-permit-edge); }
.card--common  { --card-rim: var(--rar-common); }

/* The words under a card. Prose voice, not the plate's. */
.ware__kind {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--y3);
}
.ware__text {
  font-family: var(--font-sans);
  font-size: .84em;
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: 24ch;
}
.ware__where {
  font-family: var(--font-sans);
  font-size: .78em;
  line-height: 1.4;
  color: var(--ink-faint);
  max-width: 24ch;
}

/* ----------------------------------------------------------- the ladder */
/* The three Bouts of an Ante, as the plates Bout Select deals them. */
.bouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: clamp(12px, 2vw, 18px); }
.bout {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: clamp(14px, 2vw, 20px) 12px;
  text-align: center;
  background: var(--v1);
  box-shadow: inset 0 0 0 var(--px) var(--bout-edge, var(--v3)), 0 0 0 2px var(--v0);
}
.bout__kind {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bout-edge, var(--v5));
}
.bout__target { font-size: 34px; line-height: 1; color: var(--n7); font-variant-numeric: tabular-nums; }
.bout__mult { font-size: 14px; color: var(--v6); }
.bout__pay {
  font-family: var(--font-sans);
  font-size: .82em;
  line-height: 1.4;
  color: var(--ink-faint);
}
.bout--small { --bout-edge: var(--b4); }
.bout--big   { --bout-edge: var(--g5); }
.bout--house { --bout-edge: var(--r4); background: linear-gradient(180deg, var(--r1), var(--v1) 70%); }

/* ------------------------------------------------------------ the loop */
/**
 * The Turn, as a ring of four presses. It is a LIST in the markup, because it
 * is a sequence and a reader on a screen reader gets a sequence; the arrows are
 * generated between items and vanish at the wrap so no row ends pointing at
 * nothing.
 */
.loop { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: loop; }
@media (min-width: 620px) { .loop { grid-template-columns: repeat(2, 1fr); } }
.loop li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: var(--v1);
  box-shadow: inset 0 0 0 var(--px) var(--v3), 0 0 0 2px var(--v0);
}
.loop li::before {
  counter-increment: loop;
  content: counter(loop);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  background: var(--v3);
  color: var(--n7);
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.loop h3 { font-size: 15px; margin-bottom: 4px; color: var(--y4); }
.loop p { font-size: .9em; color: var(--ink-dim); max-width: none; }
.loop--end li::before { background: var(--y3); color: var(--v0); }

/* ----------------------------------------------------------- strategies */
/* Three across, because there are exactly three of them and a row of three is
   the shape that says "this is the whole list" rather than "here is a sample". */
.tips { display: grid; gap: clamp(12px, 1.8vw, 16px); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.tip {
  padding: clamp(16px, 2.2vw, 22px);
  background: var(--v1);
  box-shadow: inset 0 0 0 var(--px) var(--v3), inset 2px 2px 0 -1px var(--v2), 0 0 0 2px var(--v0);
}
.tip h3 { margin-bottom: 8px; color: var(--b5); }
.tip p { font-size: .93em; color: var(--ink-dim); max-width: none; }
.tip__lot {
  display: block;
  width: 5px; height: 5px;
  margin-bottom: 12px;
  background: var(--y3);
}

/* ------------------------------------------------------------ the table */
/* `.spec` from site.css does the heavy lifting; these are the numeric columns
   the scoring and Ante tables need. */
.spec td.num, .spec th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* `.spec`'s 560px floor is sized for a column of prose. The Ante ladder is four
   columns of short numerals in half the frame's width, and at 560 its last
   column sat off the edge of its own scroller on a desktop with room to spare. */
.spec--nums { min-width: 340px; }
.spec .chips { color: var(--b5); }
/* A Pattern shown as the hand that makes it. Six dice at 26px plus their gaps
   is ~180px, so this table needs far less floor than `.spec`'s prose default —
   and the dice must not shrink, or the pips they are there to show go to mush. */
.spec--hands { min-width: 430px; }
/**
 * INLINE-BLOCK, NOT FLEX, AND THE REASON IS A LINE ACROSS THE MIDDLE OF THE
 * TABLE.
 *
 * `display: flex` on a `<td>` takes the cell out of table layout, so it stops
 * stretching to its row's height: against the two rows carrying a
 * `.spec__rider` the dice cell measured 55px inside a 76px row and drew its
 * `border-bottom` two thirds of the way up, as a hairline through the column.
 * A normal table cell with inline-block children lays out identically and
 * keeps the row.
 */
.spec .cell-die { white-space: nowrap; line-height: 0; }
.spec .cell-die img {
  display: inline-block;
  vertical-align: middle;
  width: 30px; height: 30px;
  margin-right: 3px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 0 0 var(--px) var(--v0);
}
.spec .cell-die img:last-child { margin-right: 0; }
/* The one fact per row the dice cannot show: that a Triplet scales with its
   face, and that a 1 counts as ten. Set under the name rather than in a fourth
   column, which would have been two words wide and nine tenths empty. */
.spec__rider {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-faint);
  white-space: nowrap;
}
.spec tbody tr:hover { background: rgb(var(--v2-rgb) / .55); }

/* ----------------------------------------------------------- screenshots */
/* `.shot` in site.css draws the bevelled frame; the guide only has to keep a
   1389x642 cut from spanning wider than the prose it is illustrating. */
.gshot { max-width: 820px; margin-inline: auto; }
.gshot figcaption { max-width: none; text-align: center; }
.gshot--out { margin-bottom: clamp(22px, 3vw, 34px); }

/* ------------------------------------------------------- the halfway mark */
/* Sections 1-4 are the whole game; 5-7 are depth. This is the panel that says
   so, and it carries a PLAY button because the point of saying it is that the
   reader may leave here without having skipped anything. */
.enough {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: clamp(24px, 3.4vw, 38px) clamp(18px, 3vw, 32px);
}
.enough h2 { font-size: clamp(22px, 2.4vw, 30px); color: var(--n7); }
.enough p { max-width: 58ch; color: var(--g6); }
.enough .btnrow { margin-top: 6px; justify-content: center; }
/* `--ink-faint` is a violet ash and goes muddy on felt; the Lot keeps its gold. */
.enough .eyebrow { color: var(--g6); }
.enough .eyebrow::before { background: var(--y4); }

/* ------------------------------------------------------------ page foot */
.gnext {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  padding: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 32px);
}
.gnext p { max-width: 52ch; }