:root {
  --col-max: 430px;
  --green-deep: #020e0c;
  --green-dark: #051c17;
  --green-mid: #0a3d31;
  --green-table: #1a5949;
  --green-accent: #1D9E75;
  --green-light: #5DCAA5;
  --green-pale: #9FE1CB;
  --gold-deep: #6B4D0E;
  --gold-mid: #C8941A;
  --gold-base: #C8941A;
  --gold-light: #F5C04A;
  --gold-pale: #FFD78A;
  --gold-cream: #F5E9C4;
  --tile-warm: #FFFAEB;
  --tile-mid: #F2E5BD;
  --tile-edge: #D9C58A;
  --red-dragon: #791F1F;
  --red-mid: #A62828;
  --red-light: #E24B4A;
  --ink: #1F1A0A;

  --font-ui: 'Inter', sans-serif;
  --font-display: 'Playfair Display', serif;
  --font-mono: 'JetBrains Mono', monospace;

  --section-gap: 6px;
  --portrait-board-chrome: 342px;

  /* ── ONE tile size and ONE gap for the whole page ────────────────────────
     Every tile in every context (rivers, hand, dora, melds, opponent backs)
     renders at --tile-w × --tile-h, separated by --tile-gap.

     The size is solved from the tightest row on the page: an opponent's hand
     in the Hands view, which carries 13 tiles — 11 upright plus 2 laid
     sideways in melds. A laid tile is --tile-h wide (34/24 of a standing
     one), so the row costs ~13.8 tile-widths plus gaps, padding and the meld
     divider. Everything else has slack against that. */
  --ui-w: min(100vw, var(--col-max));
  /* Depth of the two extruded faces a tile draws OUTSIDE its own box. The gap
     is deliberately equal to the side face: each tile's face then exactly
     fills the gap and butts against its neighbour, so a row reads seamless. */
  --tile-cap: calc(var(--tile-h) * 0.14);
  --tile-side: calc(var(--tile-h) * 0.105);
  --tile-gap: var(--tile-side);
  --tile-w: calc((var(--ui-w) - 118px) / 14);
  --tile-h: calc(var(--tile-w) * 34 / 24);
}

@media (max-width: 430px) {
  :root {
    --section-gap: 3px;
  }
}

@media (min-width: 431px) {
  :root {
    --col-max: clamp(430px, 60vh, 100vw);
    --section-gap: clamp(4px, 0.6vh, 10px);
  }
}