/* PokerThangs design tokens v2 — graphite & chip red */
:root {
  /* Surfaces, dark to light */
  --bg: #0b0c10;
  --bg-raise: #0f1117;
  --surface: #14161e;
  --surface-2: #1a1d27;
  --surface-3: #222634;

  /* Hairlines */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  /* Interactive-control edges only. 0.34 composites to ~3.05:1 on the control
     fills, clearing WCAG 1.4.11. --line-strong stays for decorative panel edges. */
  --line-control: rgba(255, 255, 255, 0.34);

  /* Ink */
  --text: #f2f3f7;
  --text-2: #a8aebc;
  /* AA on all five surfaces: 6.26 / 6.05 / 5.78 / 5.39 / 4.82 */
  --text-3: #8a92a4;

  /* Accent — the chip */
  --red: #ff4655;
  --red-hot: #ff6b77;
  --red-deep: #d93641;
  --red-glow: rgba(255, 70, 85, 0.3);
  --red-tint: rgba(255, 70, 85, 0.09);
  --red-line: rgba(255, 70, 85, 0.35);

  /* States (reserved) */
  --green: #2ed47e;
  --green-tint: rgba(46, 212, 126, 0.1);
  --green-line: rgba(46, 212, 126, 0.4);
  --amber: #ffb224;

  /* Card faces */
  --card-face: #ffffff;
  --suit-red: #e5484d;
  --suit-black: #1a1c22;

  /* Type */
  --font-display: "Space Grotesk", "Avenir Next", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Layout */
  --maxw: 1140px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.4);
  --shadow-deep: 0 24px 64px rgba(0, 0, 0, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }

html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Suit glyphs (♠♥♦♣) in prose must never render as color emoji. Newer
     engines honor this; card renders also carry U+FE0E for older ones. */
  font-variant-emoji: text;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--text);
  margin: 0 0 0.4em;
}

.money, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--red-hot); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--red); color: var(--bg); }

/* Eyebrow labels */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--bg) 0 32%, transparent 33%),
    repeating-conic-gradient(#fff 0 14deg, var(--red) 14deg 60deg);
  box-shadow: 0 0 12px var(--red-glow);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 15px/1 var(--font-body);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* 44px is the WCAG/HIG floor for anything tapped with a finger; mouse users
   keep the compact metrics. Height only — widths stay content-sized. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
}
/* Graphite label on chip red: 5.83:1 on --red, 7.09:1 on --red-hot.
   White was 3.36 / 2.76 and failed. The red itself is unchanged. */
.btn-primary {
  background: linear-gradient(180deg, var(--red-hot), var(--red) 60%);
  color: var(--bg);
  box-shadow: 0 8px 24px var(--red-glow), inset 0 1px 0 rgba(0, 0, 0, 0.16);
}
.btn-primary:hover { color: var(--bg); box-shadow: 0 12px 32px var(--red-glow), inset 0 1px 0 rgba(0, 0, 0, 0.16); }
.btn-outline {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--line-control);
  color: var(--text);
}
.btn-outline:hover { border-color: rgba(255, 255, 255, 0.48); background: rgba(255, 255, 255, 0.05); color: var(--text); }

/* Panels */
.panel {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Playing cards — mobile-first four-color deck: huge rank, one suit mark */
.pcard {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 78px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  user-select: none;
}
.pcard .rank { font-size: 33px; letter-spacing: -0.05em; }
.pcard .suit { font-size: 15px; opacity: 0.95; }
.pcard.s-s { background: linear-gradient(170deg, #333947, #21242e); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.pcard.s-h { background: linear-gradient(170deg, #ff5b66, #d63440); }
.pcard.s-d { background: linear-gradient(170deg, #4b83ff, #2c5cd8); }
.pcard.s-c { background: linear-gradient(170deg, #2cc072, #1a9a55); }
.pcard.back {
  background:
    repeating-linear-gradient(-45deg, rgba(255, 70, 85, 0.18) 0 4px, transparent 4px 9px),
    linear-gradient(170deg, #1c1f29, #14161e);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line-strong);
}
.pcard.md { width: 48px; height: 66px; border-radius: 8px; }
.pcard.md .rank { font-size: 27px; }
.pcard.md .suit { font-size: 12px; }
.pcard.sm { width: 40px; height: 56px; border-radius: 7px; }
.pcard.sm .rank { font-size: 22px; }
.pcard.sm .suit { font-size: 11px; }

/* ---------------------------------------------------------------------------
   Casino chip stacks (side view) for bets and pots.

   These are DENOMINATION colours, not brand colours. They exist so a learner
   reads a stack the way they would read it on the felt: $1 white, $5 red,
   $25 green, $100 black, $500 purple. They are scoped to .cstack and must
   never be used on a button, a panel or any other brand surface. The brand
   stays graphite plus chip red.

   Every shade below is a literal value: no color-mix(), no oklch(), no
   relative colour syntax, so the chips render identically on iOS 15 and on
   current engines.

   The chips themselves are inline SVG, built by PT.chipSVG in js/app.js. Every
   part of a chip is a hard-edged filled path or a stroked line, so there is no
   gradient stop landing on a fractional pixel and no per-chip drop shadow. The
   five roles below are what those paths paint with:

     --cc     the top face of a chip, and the flat inlay the number sits on
     --edge   the side wall you see on every chip buried in the stack, one
              shade down from the face because it is not facing the light
     --spot   the hard rectangular edge spots, "dice" style
     --seam   the 1px line between one chip and the next. Chosen so it reads
              against BOTH the body colour and a white spot, which is why the
              black chip's seam is lighter than its body and everybody else's
              is darker
     --rim    the outline of the whole stack against the felt
     --ink    the printed number
   --------------------------------------------------------------------------- */
:root {
  --chip-1: #eef0f4;        /* $1  white */
  --chip-1-edge: #d5d9e2;
  --chip-1-spot: #2a2e3a;
  --chip-1-seam: #8f96a6;
  --chip-1-rim: #6d7484;
  --chip-1-ink: #14161e;

  --chip-5: #d0202f;        /* $5  red */
  --chip-5-edge: #ab1826;
  --chip-5-spot: #f3f5f9;
  --chip-5-seam: #5e0d16;
  --chip-5-rim: #490910;
  --chip-5-ink: #ffffff;

  --chip-25: #0f7a44;       /* $25 green */
  --chip-25-edge: #0b6238;
  --chip-25-spot: #f3f5f9;
  --chip-25-seam: #05341c;
  --chip-25-rim: #042a17;
  --chip-25-ink: #ffffff;

  --chip-100: #23262f;      /* $100 black */
  --chip-100-edge: #16181f;
  --chip-100-spot: #eef0f5;
  --chip-100-seam: #565d70;
  --chip-100-rim: #4a5164;
  --chip-100-ink: #ffffff;

  --chip-500: #5b2a8c;      /* $500 purple */
  --chip-500-edge: #492071;
  --chip-500-spot: #f3f5f9;
  --chip-500-seam: #24103a;
  --chip-500-rim: #1d0d2f;
  --chip-500-ink: #ffffff;
}

/* Geometry lives in custom properties so a tight slot can shrink the chips
   without the renderer knowing anything about the layout around it.

   ONLY --chip-w is ever set by a caller. The face and the step are derived from
   it with the two ratios PT.chipSVG also uses (0.4375 and 0.171875), which is
   what makes the viewBox map onto the element with an identical scale on both
   axes. Override --chip-face or --chip-step on their own and the chips start
   getting stretched, so do not. */
.chipset {
  --chip-w: 30px;      /* disc width: the one knob */
  --chip-face: calc(var(--chip-w) * 0.4375);      /* the ellipse seen edge-on */
  --chip-step: calc(var(--chip-w) * 0.171875);    /* rise of one chip over the next */
  --chip-gap: 5px;     /* space between two stacks */
  --chip-num: 9px;     /* printed number on a chip face */
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: var(--chip-gap);
  vertical-align: bottom;
  -webkit-user-select: none;
  user-select: none;
}

.cstack {
  position: relative;
  display: block;
  flex: none;
  width: var(--chip-w);
  /* One band per chip, plus the top face: the same FACE + n * STEP that
     PT.chipSVG puts in its viewBox, so the box and the artwork are the same
     shape. It was (n - 1) here and in the renderer, which drew every stack one
     chip short: a 20-barrel you could only count 19 bands on. */
  height: calc(var(--chip-face) + var(--n, 1) * var(--chip-step));
  /* ONE shadow for the whole stack, on the felt underneath it. There is no
     per-chip shadow anywhere: twenty stacked soft shadows 4px apart were the
     single biggest reason the old chips looked hazy. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

/* The stack itself. preserveAspectRatio is none because the element box and the
   viewBox are the same shape by construction, and "none" removes any chance of
   a sub-pixel gap between the artwork and the box. */
.cstack .cs-svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cstack .cs-body { fill: var(--edge, #ab1826); }
.cstack .cs-top { fill: var(--cc, #d0202f); }
.cstack .cs-spot { fill: var(--spot, #f3f5f9); }
.cstack .cs-inlay { fill: var(--cc, #d0202f); stroke: var(--seam, #5e0d16); stroke-width: 1; }
.cstack .cs-seam { fill: none; stroke: var(--seam, #5e0d16); stroke-width: 1; stroke-linecap: butt; }
.cstack .cs-rim { fill: none; stroke: var(--rim, #490910); stroke-width: 1; }

/* The number on the top chip stays HTML text, centred over the face the SVG
   drew. Text rendered by the text engine is sharper at 7px than any glyph
   pushed through a scaled viewBox, and it keeps --chip-num, tabular figures
   and the two shrink-to-fit classes below working exactly as they did.

   top: 0 rather than a bottom offset counted in chip steps. The top face is the
   top of the viewBox at every count from 1 to 20, so there is no arithmetic to
   get wrong: this used to be bottom: calc(var(--i) * var(--chip-step)) with --i
   set to n - 1 by the renderer, which meant the numeral floated a whole step
   above the stack the moment the wall was given its missing band. */
.cstack .cs-face {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--chip-w);
  height: var(--chip-face);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  color: var(--ink, #ffffff);
  font: 700 var(--chip-num) / 1 var(--font-mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* Long totals shrink rather than spill off the chip. */
.cstack .cs-face.long { font-size: calc(var(--chip-num) * 0.86); letter-spacing: -0.05em; }
.cstack .cs-face.xlong { font-size: calc(var(--chip-num) * 0.72); letter-spacing: -0.07em; }

/* Shown only when a stack is drawn short for space. The count stays honest. */
.cstack .cs-x {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  font: 700 calc(var(--chip-num) * 1.05) / 1 var(--font-mono);
  color: var(--text-2);
  white-space: nowrap;
}

.cstack.d1 { --cc: var(--chip-1); --edge: var(--chip-1-edge); --spot: var(--chip-1-spot); --seam: var(--chip-1-seam); --rim: var(--chip-1-rim); --ink: var(--chip-1-ink); }
.cstack.d5 { --cc: var(--chip-5); --edge: var(--chip-5-edge); --spot: var(--chip-5-spot); --seam: var(--chip-5-seam); --rim: var(--chip-5-rim); --ink: var(--chip-5-ink); }
.cstack.d25 { --cc: var(--chip-25); --edge: var(--chip-25-edge); --spot: var(--chip-25-spot); --seam: var(--chip-25-seam); --rim: var(--chip-25-rim); --ink: var(--chip-25-ink); }
.cstack.d100 { --cc: var(--chip-100); --edge: var(--chip-100-edge); --spot: var(--chip-100-spot); --seam: var(--chip-100-seam); --rim: var(--chip-100-rim); --ink: var(--chip-100-ink); }
.cstack.d500 { --cc: var(--chip-500); --edge: var(--chip-500-edge); --spot: var(--chip-500-spot); --seam: var(--chip-500-seam); --rim: var(--chip-500-rim); --ink: var(--chip-500-ink); }

/* The discs are decoration. This is the value, for screen readers. */
.chip-read {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Explicit compact mode, for a caller that asks for it. */
.chipset.compact {
  --chip-w: 22px;
  --chip-gap: 3px;
  --chip-num: 7.5px;
}

/* Bet chips sit in a fixed slot beside a seat on the racetrack and already
   carry their own amount pill, so they run one size down from the pot. */
.bet-spot .chipset {
  --chip-w: 24px;
  --chip-gap: 4px;
  --chip-num: 8px;
}

@media (max-width: 620px) {
  .chipset {
    --chip-w: 26px;
    --chip-gap: 4px;
    --chip-num: 8px;
  }
}

/* CSS chips */
.chip {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.28), transparent 42%),
    radial-gradient(circle at center, var(--c, var(--red)) 0 56%, transparent 57%),
    repeating-conic-gradient(#fff 0 16deg, var(--c, var(--red)) 16deg 60deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.chip.green { --c: #1faf68; }
.chip.black { --c: #2b2e3a; }
.chip.white { --c: #d7d9df; }
.chip.gold { --c: var(--red); } /* legacy alias — brand chip */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html { scroll-behavior: auto; }
}