/* ═══════════════════════════════════════════════════════════
   All in — index.html.
   Poker in four acts: the history, reading people, the bet,
   and the one move that ends every argument at the table.

   Four grounds and white panels — the table. Each act is a
   full-bleed band that sets its own --ground / --suit-mark pair, so
   the page changes colour as it scrolls with no script involved
   and scripting-off gets the identical page.

   Shares nothing with style.css, stamp.css, baraja.css, neon.css,
   sumi.css, console.css, fortune.css, hello.css, palm.css,
   love.css or sky.css — and shouldn't.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Every one of these is measured, not picked by eye: white holds
     8.06 / 6.85 / 8.53 / 18.73 on felt / red / blue / night, and the
     red suit holds 6.85 on a white card. There is no yellow here, so
     there is no --mark-yellow-style exception either. */
  --felt:  #0F5C36;
  --red:   #B5121B;
  --blue:  #1E4A94;
  --night: #121212;

  --ink:   #121212;   /* prose on white; also the black suits */
  --card:  #FFFFFF;
  --rim:   #B9B4A8;   /* the card's edge; decorative, not text */
  --faint: #5E5A55;   /* stat labels — 6.84 on white */
  --card-shadow: 0 3px 10px rgba(0,0,0,.28);

  --disp: "Playfair Display", "Times New Roman", Georgia, serif;
  --body: "Commissioner", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --ground is overridden per band; --on stays white on every one. */
  --ground: var(--felt);
  --on:     #fff;

  color-scheme: light;
}

*{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  background: var(--felt);        /* what a top overscroll shows */
  overscroll-behavior: none;
}

body{
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink);
  background: var(--felt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── language ─────────────────────────────────────────────────
   Two real radios drive everything through :has(), so the switch
   works with scripting off. Only elements carrying .t are swapped;
   the switch's own labels keep their lang attributes and stay
   visible in both. */
.t[lang="uk"]{ display: none; }
:root:has(#lang-uk:checked) .t[lang="uk"]{ display: revert; }
:root:has(#lang-uk:checked) .t[lang|="es"]{ display: none; }

/* The chip crosses felt, red, blue and black grounds, so it must not
   inherit any of them — it is a self-contained near-black object,
   the same call baraja.css and fortune.css made. */
.lang{
  position: fixed;
  top: max(.75rem, env(safe-area-inset-top));
  right: max(.75rem, env(safe-area-inset-right));
  z-index: 20;
  display: flex; gap: 2px;
  margin: 0; padding: 3px; border: 0;
  border-radius: 999px;
  background: rgba(18, 18, 18, .86);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .3s ease;
}
.lang-radio{
  position: absolute; opacity: 0;
  width: 1px; height: 1px; margin: 0;
}
.lang-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 38px;      /* 38 + 3px padding either side = 44 */
  padding: 0 .5rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--body);
  font-weight: 500;
  font-size: .72rem; letter-spacing: .1em;
  color: rgba(255,255,255,.62);
  transition: color .25s ease, background-color .25s ease;
}
.lang-btn:hover{ color: #fff; }
.lang-radio:checked + .lang-btn{ background: #fff; color: var(--night); }
.lang-radio:focus-visible + .lang-btn{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Dims while she scrolls, because prose passes underneath. Scoped to .js
   so scripting-off can never leave the switch faint and unreachable. */
.js .lang[data-dim]{ opacity: .2; }
.js .lang[data-dim]:hover,
.js .lang[data-dim]:focus-within{ opacity: 1; }

/* ── the bands ────────────────────────────────────────────── */
.act{
  background: var(--ground);
  color: var(--on);
  padding: 0 max(1.15rem, env(safe-area-inset-left))
           4.5rem max(1.15rem, env(safe-area-inset-right));
}
.act[data-ground="felt"] { --ground: var(--felt);  --suit-mark: var(--felt); }
.act[data-ground="red"]  { --ground: var(--red);   --suit-mark: var(--red); }
.act[data-ground="blue"] { --ground: var(--blue);  --suit-mark: var(--blue); }
/* Black numerals on white would read as body text, so Act IV marks in red. */
.act[data-ground="night"]{ --ground: var(--night); --suit-mark: var(--red); }

/* ── act markers ──────────────────────────────────────────── */
.marker{
  max-width: 34rem;
  margin: 0 auto;
  padding: 4.75rem 0 1.5rem;
  text-align: center;
  position: relative;
}
/* Decorative only, aria-hidden, and deliberately low-contrast: it is a
   watermark, never a label. Everything informational stays solid. */
.marker-glyph{
  font-family: var(--disp);
  font-weight: 900;
  font-variant-numeric: lining-nums;
  font-size: var(--g, clamp(3.6rem, 19vw, 8rem));
  line-height: .82;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.30);
  letter-spacing: -.04em;
}
.marker-glyph--chip{ display: flex; justify-content: center; }
.mk{
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.15rem, 5vw, 1.55rem);
  letter-spacing: .01em;
  margin: .7rem 0 .3rem;
}
.mk-sub{
  margin: 0;
  font-size: .95rem;
  opacity: .88;
}

/* ── panels: each one is a card laid on the table ─────────── */
.panel{
  max-width: 34rem;
  margin: 2.25rem auto;
  padding: 2rem clamp(1.15rem, 5vw, 2.25rem) 2.25rem;
  background: var(--card);
  color: var(--ink);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.10),
    0 10px 26px rgba(0,0,0,.20),
    0 22px 60px rgba(0,0,0,.12);
  position: relative;
  rotate: var(--tilt, -.5deg);
  /* A card laid on the table has nothing hanging off it: the folded pair
     slides 40px right at opacity 0, and on a phone that reached past the
     viewport and made the page 2px scrollable. clip (not hidden) so no
     scroll container is created; engines without it fall back to visible. */
  overflow: clip;
}
.panel:nth-of-type(even){ --tilt: .6deg; }

/* The panel number, set as a card rank rather than a mono label —
   this page has no mono at all. Real HTML, like every other mark here. */
.num{
  font-family: var(--disp);
  font-weight: 900;
  font-variant-numeric: lining-nums;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0 0 .35rem;
  color: var(--suit-mark, var(--red));
}
.ph{
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.3rem, 5.6vw, 1.72rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 1.15rem;
  color: var(--ink);
}
.bd{
  margin: 1.15rem 0 0;
  font-size: 1.02rem;
}
.bd em{ font-style: italic; }

/* ── figures ──────────────────────────────────────────────── */
.fig{
  margin: 0 0 .35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 1px;
}
.fig--wide{ gap: 2rem; }
/* Five cards in one row on a phone: smaller cards, tighter gap. */
.fig--five{ --cw: clamp(44px, 12.5vw, 58px); gap: .3rem; flex-wrap: nowrap; }
/* Two cards side by side, leaning into each other. */
.hand{ display: flex; align-items: center; }
.hand .card + .card{ margin-left: calc(var(--cw, 74px) * -.3); }

/* Big stated numbers: the 86 and the 2,500,000. */
.stat{
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
}
.stat + .stat{ margin-top: .35rem; }
.stat p{ margin: 0; }
.stat-n{
  font-family: var(--disp);
  font-weight: 900;
  font-variant-numeric: lining-nums;
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--suit-mark, var(--red));
  display: block;
}
.stat-k{
  display: block;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: .4rem;
}

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 4.5rem;
  padding-bottom: 3rem;
}
.kicker{
  font-family: var(--body);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .72;
  margin: 0 0 1.5rem;
}
.title{
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(3.4rem, 19vw, 8rem);
  line-height: .92;
  letter-spacing: -.03em;
  margin: 1.9rem 0 0;
}
.standfirst{
  max-width: 27rem;
  margin: 1.15rem auto 0;
  font-size: 1.05rem;
  opacity: .88;
}

/* Five cards pivoting about a point below. */
.fan{
  position: relative;
  width: min(92vw, 24rem);
  height: clamp(112px, 28vw, 152px);
  --cw: clamp(62px, 16vw, 88px);
}
.fan .card{
  position: absolute;
  left: 50%; top: 0;
  margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 175%;
  rotate: calc((var(--i) - 2) * 13deg);
}

/* ── close ────────────────────────────────────────────────── */
.close{
  min-height: 92vh;
  min-height: 92dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 4rem;
}
/* Five chips at the edges, gathered to the middle. Resting state is
   a loose pile in the middle: with scripting off the pot is already in. */
.pot{
  position: relative;
  width: min(88vw, 22rem);
  height: clamp(150px, 34vw, 200px);
  margin-bottom: 2.25rem;
  --ch: clamp(48px, 13vw, 64px);
}
.pot .chip{
  position: absolute;
  left: 50%; top: 50%;
  margin: calc(var(--ch) / -2) 0 0 calc(var(--ch) / -2);
  rotate: calc(var(--i) * 17deg);
  translate: var(--rx) var(--ry);
}
.closing{
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(2.4rem, 11vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 auto;
  color: #fff;
}

/* ── the drawn card ───────────────────────────────────────────
   A white field with a thin rim, a rank at top-left with its pip
   under it, the same pair turned 180° at bottom-right, one large
   pip in the middle. Ranks are real HTML; every pip is a <use> of
   a symbol at the top of <body>. The suit sets --mark. */
.card{
  --mark: var(--ink);
  position: relative;
  width: var(--cw, 74px);
  aspect-ratio: 5 / 7;
  background: var(--card);
  border: 1px solid var(--rim);
  border-radius: calc(var(--cw, 74px) * .08);
  box-shadow: var(--card-shadow);
  color: var(--mark);
  overflow: hidden;
  font-family: var(--disp);
  font-weight: 900;
  font-variant-numeric: lining-nums;
  flex: none;
}
.card[data-suit="h"],
.card[data-suit="d"]{ --mark: var(--red); }

.ix{
  position: absolute;
  top: 5%; left: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.ix b{ font-size: calc(var(--cw, 74px) * .22); letter-spacing: -.04em; }
.ix svg{
  width: calc(var(--cw, 74px) * .14);
  aspect-ratio: 1;
  margin-top: calc(var(--cw, 74px) * .02);
  fill: currentColor;
  display: block;
}
.ix--br{ top: auto; left: auto; bottom: 5%; right: 8%; rotate: 180deg; }
.big{
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: calc(var(--cw, 74px) * .42);
  aspect-ratio: 1;
  fill: currentColor;
}

/* Face down: the chip-blue field, a diamond lattice, a white inner rim.
   The inset shadow paints over the lattice, so the rim stays clean. */
.card[data-suit="back"]{
  background:
    repeating-linear-gradient( 45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 9px),
    var(--blue);
  box-shadow:
    inset 0 0 0 calc(var(--cw, 74px) * .07) #fff,
    var(--card-shadow);
}

/* Two cards leaning into each other. */
.tilt-l{ rotate: -7deg; }
.tilt-r{ rotate:  7deg; }

/* ── the chip ─────────────────────────────────────────────────
   A circle: solid centre, a thin lighter ring, and a rim of six white
   edge spots from a repeating conic. The stack lays them upward with
   a dark lower edge so each one reads as having thickness. */
.chip{
  --chip: var(--red);
  width: var(--ch, 46px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      var(--chip) 0 50%,
      rgba(255,255,255,.55) 50.5% 54%,
      var(--chip) 54.5% 58%,
      transparent 58.5%),
    repeating-conic-gradient(from -15deg, #fff 0 30deg, var(--chip) 30deg 60deg);
  background-origin: border-box;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.18),
    0 2px 5px rgba(0,0,0,.30);
  flex: none;
}
.chip[data-chip="felt"] { --chip: var(--felt); }
.chip[data-chip="red"]  { --chip: var(--red); }
.chip[data-chip="blue"] { --chip: var(--blue); }
.chip[data-chip="night"]{ --chip: #2A2A2A; }

/* The Act IV watermark is the same object, large and faint. It only ever
   sits on the night band, so its ground is the night colour and every
   mark on it is the same 30% white as the other markers' glyphs. */
.chip--ghost{
  --chip: var(--night);
  --ch: clamp(4.6rem, 25vw, 10rem);
  background:
    radial-gradient(circle,
      var(--chip) 0 50%,
      rgba(255,255,255,.30) 50.5% 54%,
      var(--chip) 54.5% 58%,
      transparent 58.5%),
    repeating-conic-gradient(from -15deg, rgba(255,255,255,.30) 0 30deg, var(--chip) 30deg 60deg);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.30);
}

.stack{
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.stack .chip{ position: relative; border-bottom: 3px solid rgba(0,0,0,.35); }
.stack .chip + .chip{ margin-bottom: calc(var(--ch, 46px) * -.80); }

/* Explicit paint order: the top of the stack is painted last. Chrome
   has been seen painting a column-reverse flex row first-child-on-top,
   and this page is opened in webviews, so don't lean on the engine. */
.stack .chip:nth-child(2){ z-index: 2; }
.stack .chip:nth-child(3){ z-index: 3; }
.stack .chip:nth-child(4){ z-index: 4; }
.stack .chip:nth-child(5){ z-index: 5; }
.stack .chip:nth-child(6){ z-index: 6; }
.stack .chip:nth-child(7){ z-index: 7; }
.stack .chip:nth-child(8){ z-index: 8; }
.stack .chip:nth-child(9){ z-index: 9; }
.stack--tall{ --ch: 54px; }

/* Two stacks of different heights sit on the same line. */
.fig--wide:has(.stack){ align-items: flex-end; }

/* ── ink drawings ─────────────────────────────────────────────
   The steamer and the sunglasses. No <text> in any viewBox — every
   label on this page is real HTML. Each figure spends its red exactly
   once, on the thing the panel is about — and it is always --red, never
   the band's --suit-mark: the steamer sits on felt, and its smoke is red. */
.ink{
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ink .fill-accent{ fill: var(--red); stroke: none; opacity: .9; }

/* ══ motion ═══════════════════════════════════════════════════
   Every animated state below is gated on .js, which is set in <head>
   before first paint. With scripting off nothing here applies: each
   panel is simply present, the hand is already dealt, the pot is
   already in the middle. Nothing is load-bearing. */

.js .panel,
.js .marker,
.js .close{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .62s ease, transform .62s cubic-bezier(.2,.8,.25,1);
}
.js .panel.in,
.js .marker.in,
.js .close.in{
  opacity: 1;
  transform: none;
}

/* The hand deals itself out. `to` is omitted so each card animates to
   its own resting rotation; `backwards` holds the from-state during
   the stagger delay. */
.js .fan .card{
  animation: deal .62s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--i) * 78ms + 220ms);
}
@keyframes deal{
  from{ opacity: 0; translate: 0 34px; rotate: 0deg; }
}

/* Strokes draw themselves. pathLength="1" everywhere makes one rule fit
   every path regardless of its real length. */
.js .s{
  stroke-dasharray: 1 2;   /* gap > path: a dash-scaling epsilon at offset 1 can't reach the next dash */
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease .25s;
}
.js .panel.in .s{ stroke-dashoffset: 0; }
/* Scoped under .ink so this outranks `.ink .fill-accent` by specificity,
   not merely by source order. */
.js .ink .fill-accent{ opacity: 0; transition: opacity .5s ease .8s; }
.js .panel.in .ink .fill-accent{ opacity: .9; }

/* 02: the fifth card arrives after the four, from the right. */
.js .arrives{
  opacity: 0;
  translate: 40px 0;
  transition: opacity .5s ease .4s, translate .5s cubic-bezier(.2,.8,.25,1) .4s;
}
.js .panel.in .arrives{ opacity: 1; translate: 0 0; }

/* 08: the pair thinks for a beat, then folds — slides off and fades. */
.js .folds{ transition: opacity .5s ease 1.6s, translate .6s cubic-bezier(.4,0,.6,1) 1.6s; }
.js .panel.in .folds{ opacity: 0; translate: 40px 0; }

/* The close: chips travel from the edges into the middle, then the
   two words come up after the last one lands. */
.js .pot .chip{
  translate: var(--dx) var(--dy);
  transition: translate .75s cubic-bezier(.2,.8,.25,1);
  transition-delay: calc(var(--i) * 60ms + .3s);
}
/* Lands on the resting pile (--rx / --ry), not on a single point. */
.js .close.in .pot .chip{ translate: var(--rx) var(--ry); }
.js .closing{ opacity: 0; transition: opacity .6s ease 1.15s; }
.js .close.in .closing{ opacity: 1; }

/* ── reduced motion ───────────────────────────────────────────
   Everything at its resting state, nothing moving. felt.js also skips
   the observer entirely and reveals in one pass. The pair in 08 stays
   on the table: a static reader should see the confrontation, and the
   prose tells the fold. */
@media (prefers-reduced-motion: reduce){
  .js .panel, .js .marker, .js .close{ opacity: 1; transform: none; transition: none; }
  .js .fan .card{ animation: none; }
  .js .s{ stroke-dashoffset: 0; transition: none; }
  .js .ink .fill-accent{ opacity: .9; transition: none; }
  .js .arrives{ opacity: 1; translate: none; transition: none; }
  .js .folds, .js .panel.in .folds{ opacity: 1; translate: none; transition: none; }
  .js .pot .chip{ translate: var(--rx) var(--ry); transition: none; }
  .js .closing{ opacity: 1; transition: none; }
  .lang{ transition: none; }
}

/* ── wider than a phone ───────────────────────────────────── */
@media (min-width: 46rem){
  .panel{ padding: 2.5rem 2.75rem 2.75rem; }
  .marker{ padding-top: 6rem; }
  .bd{ font-size: 1.06rem; }
}