/* ═══════════════════════════════════════════════════════════════════
   RAILBIRD — one advanced poker table, orbited.
   A CSS 3D scene: the table is real, scroll flies you 360° around it.
   Base styles are the flat fallback; the 3D world mounts on top for
   wide screens with motion allowed.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #05070c;
  --text: #edf2ef;
  --dim: #96a09b;
  --faint: #767f7a;

  --signal: #2bff9e;
  --signal-dim: rgba(43, 255, 158, 0.55);
  --signal-line: rgba(43, 255, 158, 0.28);
  --signal-glow: rgba(43, 255, 158, 0.12);
  --amber: #ffb224;

  --stock: #efe6cf;
  --stock-2: #ddd0ae;
  --ink: #241d10;
  --ox: #8c3130;

  --font-x: "Archivo", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --wide: "wdth" 125;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
  --noise-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23s)'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background:
    radial-gradient(80% 55% at 50% -8%, rgba(120, 175, 255, 0.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-x);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
strong {
  font-weight: 600;
  color: var(--text);
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--signal);
  color: #041008;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #1d2422;
  border: 2px solid var(--bg);
  border-radius: 6px;
}
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.serif-note {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--dim);
}
.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 900;
  background: var(--signal);
  color: #041008;
  padding: 10px 18px;
  font-weight: 600;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 16px;
}

/* ── boot ─────────────────────────────────────────────────────────── */
.boot {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: transform 0.65s var(--ease), visibility 0.65s;
}
.js .boot {
  display: flex;
}
.boot.done {
  transform: translateY(-100%);
  visibility: hidden;
}
.boot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.4;
  mix-blend-mode: overlay;
}
.pre-inner {
  text-align: center;
}
.pre-deal {
  position: relative;
  width: 150px;
  height: 92px;
  margin: 0 auto 28px;
}
.pre-slip {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 56px;
  height: 78px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(150, 255, 205, 0.15) 0 1.5px, transparent 1.5px 9px),
    repeating-linear-gradient(-45deg, rgba(150, 255, 205, 0.15) 0 1.5px, transparent 1.5px 9px),
    linear-gradient(150deg, #1f8a5e, #12563b 60%, #062519);
  border: 1px solid rgba(150, 255, 205, 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(4, 8, 6, 0.28);
  animation: slip 1.9s var(--ease-snap) infinite;
}
.pre-slip.s1 { margin-left: -62px; --to: -14deg; }
.pre-slip.s2 { margin-left: 4px; --to: 12deg; animation-delay: 0.18s; }
@keyframes slip {
  0% { transform: translate(30px, -70px) rotate(24deg); opacity: 0; }
  38%, 78% { transform: translate(0, 0) rotate(var(--to)); opacity: 1; }
  100% { transform: translate(0, 0) rotate(var(--to)); opacity: 0; }
}
.pre-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.42em;
  color: var(--signal);
}
.pre-dots i {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--signal);
  animation: dot 1.2s infinite;
}
.pre-dots i:nth-child(2) { animation-delay: 0.2s; }
.pre-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

/* ── the room behind everything ───────────────────────────────────── */
.room {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  animation: bokeh-drift 26s ease-in-out infinite alternate;
}
.bokeh.b1 { left: 8%; top: 12%; width: 150px; height: 150px; background: #6fb7ff; opacity: 0.1; }
.bokeh.b2 { left: 80%; top: 8%; width: 120px; height: 120px; background: var(--signal); opacity: 0.06; animation-delay: -8s; }
.bokeh.b3 { left: 62%; top: 4%; width: 90px; height: 90px; background: #6fb7ff; opacity: 0.08; animation-delay: -14s; }
.bokeh.b4 { left: 28%; top: 6%; width: 70px; height: 70px; background: #d6e2d8; opacity: 0.05; animation-delay: -20s; }
.bokeh.b5 { left: 92%; top: 30%; width: 110px; height: 110px; background: #6fb7ff; opacity: 0.07; animation-delay: -4s; }
@keyframes bokeh-drift {
  to { transform: translate(26px, 14px) scale(1.12); }
}
.smoke {
  position: absolute;
  width: 58vw;
  height: 24vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 226, 216, 0.05), transparent 72%);
  filter: blur(28px);
  animation: smoke-drift 80s ease-in-out infinite alternate;
}
.smoke.s1 { left: -14%; top: 16%; }
.smoke.s2 { left: 34%; top: 26%; animation-duration: 95s; animation-delay: -40s; }
@keyframes smoke-drift {
  from { transform: translateX(-10vw); }
  to { transform: translateX(24vw); }
}

/* ── fixed chrome ─────────────────────────────────────────────────── */
#motes {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 44%, transparent 52%, rgba(1, 3, 2, 0.62) 100%);
}
.grain {
  position: fixed;
  inset: -100px;
  z-index: 500;
  pointer-events: none;
  opacity: 0.032;
  background-image: var(--noise-fine);
  animation: grain 0.85s steps(4) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-38px, 26px); }
  50% { transform: translate(28px, -44px); }
  75% { transform: translate(-24px, -18px); }
}
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 3.5vw, 44px);
  background: linear-gradient(180deg, rgba(6, 8, 7, 0.85), rgba(6, 8, 7, 0.4) 60%, transparent);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.brand-reticle {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235, 245, 240, 0.2);
}
.brand-reticle svg {
  width: 18px;
  height: 18px;
  stroke: var(--signal);
  stroke-width: 6;
  fill: none;
}
.brand-word {
  font-variation-settings: var(--wide);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.22em;
}
.orbit-read {
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--faint);
}
.connect {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  border: 1px solid rgba(235, 245, 240, 0.2);
  background: rgba(6, 8, 7, 0.6);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.connect:hover {
  border-color: var(--signal);
  box-shadow: 0 0 20px -6px var(--signal-dim);
}
.connect-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
  transition: background 0.3s, box-shadow 0.3s;
}
.connect.connecting .connect-led {
  background: var(--amber);
  animation: led-blink 0.6s steps(1) infinite;
}
.connect.connected .connect-led {
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal-dim);
}
@keyframes led-blink {
  50% { opacity: 0.2; }
}
.led {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal-dim);
  animation: led-blink 1.6s steps(1) infinite;
}

.seat-dots {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.seat-dots button {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(235, 245, 240, 0.35);
  rotate: 45deg;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.seat-dots button.on {
  background: var(--signal);
  border-color: var(--signal);
  box-shadow: 0 0 10px var(--signal-dim);
}

.rail-tick {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 590;
  border-top: 1px solid rgba(235, 245, 240, 0.09);
  background: rgba(4, 6, 5, 0.82);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.rail-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: rail-roll 56s linear infinite;
}
@keyframes rail-roll {
  to { transform: translateX(-50%); }
}
.rail-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 24px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dim);
  white-space: nowrap;
  text-transform: uppercase;
}
.rail-item .r-amt {
  color: var(--signal);
}
.rail-item .r-pay {
  color: var(--signal);
  border: 1px solid var(--signal-line);
  padding: 1px 6px;
}
.rail-sep {
  color: var(--signal-dim);
  font-size: 10px;
}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn-signal {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 24px;
  background: var(--signal);
  color: #041008;
  font-variation-settings: var(--wide);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  border: 1px solid var(--signal);
  transition: box-shadow 0.25s, transform 0.25s var(--ease);
}
.btn-signal i {
  font-style: normal;
  transition: transform 0.25s var(--ease);
}
.btn-signal:hover {
  box-shadow: 0 0 30px -4px var(--signal-dim);
  transform: translateY(-1px);
}
.btn-signal:hover i {
  transform: translateX(4px);
}
.btn-signal.wide {
  width: 100%;
  justify-content: center;
}
.btn-ghost {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dim);
  padding: 14px 4px;
  transition: color 0.25s;
}
.btn-ghost:hover {
  color: var(--signal);
}

/* ── playing cards (paper) ────────────────────────────────────────── */
.board-card {
  position: relative;
  display: inline-block;
  width: 54px;
  aspect-ratio: 63 / 88;
  border-radius: 5px;
  background:
    var(--noise),
    linear-gradient(152deg, #f7efdb 0%, var(--stock) 55%, var(--stock-2) 100%);
  background-blend-mode: multiply, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, 0.55),
    inset 0 -2px 6px rgba(120, 96, 44, 0.18),
    0 6px 14px -4px rgba(0, 0, 0, 0.7);
}
.board-card::before {
  content: "";
  position: absolute;
  inset: 4.5%;
  border: 1px solid rgba(36, 29, 16, 0.16);
  border-radius: 3px;
  pointer-events: none;
}
[data-suit="spade"], [data-suit="club"] { color: var(--ink); }
[data-suit="heart"], [data-suit="diamond"] { color: var(--ox); }
[data-suit] svg {
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0.5px 1px 0 rgba(36, 29, 16, 0.14));
}
.cc-tl,
.cc-br {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 0.9;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}
.cc-tl { top: 7%; left: 9%; }
.cc-br { bottom: 7%; right: 9%; transform: rotate(180deg); }
.cc-tl svg,
.cc-br svg { width: 0.6em; height: 0.6em; }
.cc-pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-pip svg {
  width: 46%;
  height: 46%;
}

/* ── stations: base = flat readable panels (fallback) ─────────────── */
.scene {
  position: relative;
  z-index: 10;
}
.world {
  position: relative;
}
.floor3d,
.tbl-shadow,
.tbl-skirt,
.tbl-wall,
.tbl-rail,
.tbl-race,
.tbl-neon,
.tbl-felt {
  display: none;
}
.station {
  position: relative;
  width: min(660px, calc(100vw - 36px));
  margin: 90px auto;
  padding: clamp(24px, 3.4vw, 40px);
  background:
    linear-gradient(172deg, rgba(160, 205, 255, 0.04), transparent 30%),
    linear-gradient(180deg, rgba(12, 17, 14, 0.94), rgba(7, 11, 9, 0.96));
  border: 1px solid rgba(235, 245, 240, 0.1);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(180, 212, 250, 0.1),
    0 30px 60px -24px rgba(0, 0, 0, 0.85);
}
.station::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.22;
  mix-blend-mode: overlay;
}
.orbit-spacer {
  height: 0;
}

/* station innards */
.s-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--signal);
  margin-bottom: 18px;
}
.s-title {
  font-variation-settings: var(--wide);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: rgba(240, 234, 214, 0.92);
  margin-bottom: 18px;
}
.s-title.sm {
  font-size: clamp(28px, 3.6vw, 44px);
}
.neon {
  font-style: normal;
  color: rgba(77, 216, 255, 0.12);
  -webkit-text-stroke: 2px var(--signal);
  text-shadow: 0 0 30px var(--signal-glow);
}
.dt-caret {
  display: inline-block;
  width: 0.08em;
  height: 0.72em;
  margin-left: 0.06em;
  background: var(--signal);
  -webkit-text-stroke: 0;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret {
  50% { opacity: 0; }
}
.s-sub {
  max-width: 46ch;
  font-weight: 300;
  color: var(--dim);
  margin-bottom: 22px;
}
.s-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.s-hint {
  margin-top: 26px;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  color: var(--faint);
}
.s-head {
  margin-bottom: 20px;
}
.s-state {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--faint);
  margin-bottom: 8px;
}
.s-state span {
  color: var(--signal);
}
.s-h2 {
  font-variation-settings: var(--wide);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.03em;
}

/* protocol mini-cards */
.proto-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pcard3 {
  position: relative;
  padding: 40px 16px 16px;
  border-radius: 6px;
  background:
    var(--noise),
    linear-gradient(158deg, #f6eeda 0%, var(--stock) 58%, #e6dabb 100%);
  background-blend-mode: multiply, normal;
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, 0.6),
    0 14px 26px -10px rgba(0, 0, 0, 0.75);
  rotate: var(--pr, 0deg);
}
.proto-cards .pcard3:nth-child(1) { --pr: -1.4deg; }
.proto-cards .pcard3:nth-child(3) { --pr: 1.2deg; }
.pc-num {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 22px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(36, 29, 16, 0.4);
}
.pcard3 h3 {
  font-variation-settings: var(--wide);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.pcard3 p {
  font-size: 12px;
  font-weight: 400;
  color: rgba(36, 29, 16, 0.78);
}
.pc-fn {
  margin-top: 12px;
  font-size: 10px;
  color: var(--ox);
  border-top: 1px dashed rgba(36, 29, 16, 0.3);
  padding-top: 8px;
}

/* seat list */
.seat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.seat-row {
  display: grid;
  grid-template-columns: 30px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px dashed rgba(235, 245, 240, 0.12);
}
.seat-row:last-child {
  border-bottom: 0;
}
.sr-idx {
  font-size: 10px;
  color: var(--faint);
}
.sr-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sr-name b {
  font-variation-settings: var(--wide);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
  white-space: nowrap;
}
.sr-name i {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--faint);
  font-family: var(--font-mono);
}
.sr-roi {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--signal);
}
.sr-fill {
  width: 90px;
  height: 5px;
  border-radius: 4px;
  background: rgba(235, 245, 240, 0.1);
  overflow: hidden;
}
.sr-fill i {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal-glow);
}
.sr-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--signal);
  padding: 7px 11px;
  border: 1px solid var(--signal-line);
  transition: all 0.25s var(--ease);
}
.sr-btn:hover {
  background: var(--signal);
  color: #041008;
}

/* math desk */
.math-desk .stack-stage {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 84px;
  margin-bottom: 4px;
}
.stack-col {
  display: flex;
  flex-direction: column-reverse;
}
.stack-chip {
  width: 26px;
  height: 8px;
  margin-top: -3px;
  border-radius: 50% / 46%;
  background: linear-gradient(180deg, #bcd6f8 0%, #4f83d1 45%, #274f9e 100%);
  box-shadow: inset 0 1.5px 0 rgba(240, 248, 255, 0.7), inset 0 -1px 1px rgba(12, 26, 56, 0.6);
  animation: chip-set 0.3s var(--ease-snap) backwards;
}
.stack-chip.ox {
  background: linear-gradient(180deg, #ad5a57 0%, var(--ox) 45%, #4c1918 100%);
}
@keyframes chip-set {
  from { transform: translateY(-14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  cursor: pointer;
  margin-bottom: 10px;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--signal) var(--fill, 12%), rgba(235, 245, 240, 0.16) var(--fill, 12%));
}
input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(235, 245, 240, 0.16);
}
input[type="range"]::-moz-range-progress {
  height: 3px;
  background: var(--signal);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d6e8ff, #4f83d1 52%, #1d3a6b 96%);
  border: 2px solid #0c1830;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s var(--ease-snap);
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}
input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d6e8ff, #4f83d1 52%, #1d3a6b 96%);
  border: 2px solid #0c1830;
}
.desk-nums {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.desk-stake {
  font-size: 24px;
  font-weight: 600;
}
.desk-stake em {
  font-style: normal;
  font-size: 11px;
  color: var(--faint);
  margin-left: 8px;
}
.desk-equity {
  text-align: right;
  font-size: 24px;
  font-weight: 600;
  color: var(--signal);
}
.desk-equity i {
  font-style: normal;
  font-size: 0.6em;
}
.desk-equity em {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dim);
  margin-top: 4px;
}
.mx {
  list-style: none;
  border-top: 1px dashed rgba(235, 245, 240, 0.14);
}
.mx li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px dashed rgba(235, 245, 240, 0.14);
}
.mx li span {
  font-variation-settings: var(--wide);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.1em;
}
.mx li i {
  flex: 1;
  border-bottom: 1px dotted rgba(235, 245, 240, 0.18);
  transform: translateY(-3px);
}
.mx li b {
  font-weight: 500;
  font-size: 12.5px;
}
.mx li u {
  text-decoration: none;
  color: var(--text);
}
.mx li .pl {
  font-style: normal;
  color: var(--signal);
  font-size: 11px;
  margin-left: 6px;
}
.mx li.max span {
  color: var(--signal);
}
.mx li.max u {
  color: var(--signal);
}
.desk-terms {
  margin-top: 12px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* rails */
.rails-pts {
  display: flex;
  flex-direction: column;
}
.rails-pts div {
  padding: 12px 0;
  border-top: 1px dashed rgba(235, 245, 240, 0.12);
}
.rails-pts dt {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--signal);
  margin-bottom: 4px;
}
.rails-pts dd {
  font-size: 13px;
  font-weight: 300;
  color: var(--dim);
}
.rails-note {
  margin-top: 16px;
  font-size: 15px;
}

/* showdown station */
.show-stamp {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--signal);
  border: 1px solid var(--signal-line);
  padding: 8px 14px;
  margin-bottom: 18px;
  background: rgba(77, 216, 255, 0.05);
}
.fig-row {
  display: flex;
  gap: 26px;
  margin: 20px 0 24px;
}
.fig-row div {
  flex: 1;
}
.fig-row dt {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--faint);
  margin-bottom: 5px;
}
.fig-row dd {
  font-size: 16px;
  color: var(--signal);
}
.s-legal {
  margin-top: 24px;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--faint);
}

/* ── the order ticket ─────────────────────────────────────────────── */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 5, 4, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  overflow-y: auto;
  transition: opacity 0.35s var(--ease);
}
.modal-scrim.in {
  opacity: 1;
}
.ticket {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  margin: auto 0;
  padding: 20px 18px;
  background:
    var(--noise),
    linear-gradient(165deg, #f8f1de 0%, var(--stock) 55%, #e8dcc0 100%);
  background-blend-mode: multiply, normal;
  color: var(--ink);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 252, 240, 0.7), 0 50px 110px -18px rgba(0, 0, 0, 0.9);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.4s var(--ease-snap);
}
.modal-scrim.in .ticket {
  transform: translateY(0) scale(1);
}
.ticket-close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10px;
  color: rgba(36, 29, 16, 0.55);
  padding: 6px;
}
.ticket-close:hover {
  color: var(--ox);
}
.ticket-head {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ox);
  margin-bottom: 8px;
}
.ticket-title {
  font-variation-settings: var(--wide);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 18px;
}
.ticket-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.ticket-amounts button {
  padding: 11px 4px;
  font-size: 12px;
  color: rgba(36, 29, 16, 0.7);
  border: 1px solid rgba(36, 29, 16, 0.32);
  transition: all 0.2s var(--ease);
}
.ticket-amounts button:hover {
  border-color: var(--ox);
  color: var(--ox);
}
.ticket-amounts button.active {
  background: var(--ox);
  border-color: var(--ox);
  color: #f8f1de;
  font-weight: 700;
}
.ticket-lines {
  border: 1px solid rgba(36, 29, 16, 0.22);
  margin-bottom: 16px;
}
.ticket-lines div {
  display: flex;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px dashed rgba(36, 29, 16, 0.28);
  font-size: 11px;
}
.ticket-lines div:last-child {
  border-bottom: 0;
}
.ticket-lines dt {
  color: rgba(36, 29, 16, 0.55);
  letter-spacing: 0.14em;
  font-size: 9.5px;
}
.ticket-lines dd {
  font-weight: 600;
}
.ticket-fine {
  margin-top: 12px;
  text-align: center;
  font-size: 9px;
  color: rgba(36, 29, 16, 0.55);
}
.ticket-success {
  text-align: center;
  padding: 20px 0;
}
.filled-stamp {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #0c7a4e;
  border: 1px solid #0c7a4e;
  padding: 8px 16px;
  margin-bottom: 14px;
  animation: stamp 0.5s var(--ease-snap);
}
@keyframes stamp {
  0% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.ticket-success h4 {
  font-variation-settings: var(--wide);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 8px;
}
.ticket-success .mono {
  color: var(--ox);
  font-size: 11.5px;
}
.px {
  position: fixed;
  z-index: 720;
  width: var(--sz, 5px);
  height: var(--sz, 5px);
  background: var(--signal);
  pointer-events: none;
  animation: px-fly var(--dur, 1.4s) var(--ease) forwards;
}
@keyframes px-fly {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 200px)); opacity: 0; }
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 44px;
  z-index: 710;
  transform: translate(-50%, 80px);
  padding: 12px 22px;
  border: 1px solid var(--signal-line);
  background: rgba(5, 7, 8, 0.92);
  color: var(--signal);
  font-size: 11px;
  letter-spacing: 0.1em;
  box-shadow: 0 0 30px -8px var(--signal-glow);
  opacity: 0;
  transition: transform 0.45s var(--ease-snap), opacity 0.45s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ── mobile table — the room's postcard view ─────────────────────── */
.mobile-table {
  display: none;
}
@media (max-width: 900px) {
  .mobile-table {
    display: block;
    position: relative;
    z-index: 5;
    padding: 84px 14px 8px;
  }
  .mt-felt {
    position: relative;
    height: 300px;
    border-radius: 50% / 42%;
    background:
      radial-gradient(46% 36% at 50% 30%, rgba(185, 218, 255, 0.13), transparent 70%),
      var(--noise),
      radial-gradient(closest-side, #155089 0%, #0e3a68 44%, #092647 74%, #051629 100%);
    background-blend-mode: screen, multiply, normal;
    box-shadow:
      inset 0 0 0 7px #12182a,
      inset 0 0 0 9px rgba(195, 218, 250, 0.08),
      inset 0 0 60px 18px rgba(2, 8, 18, 0.55),
      0 26px 50px -20px rgba(0, 0, 0, 0.9);
  }
  .mt-neon {
    position: absolute;
    inset: 15px;
    border-radius: 50% / 42%;
    border: 2px solid #9fe4ff;
    opacity: 0.7;
    box-shadow:
      0 0 6px rgba(200, 235, 255, 0.8),
      0 0 18px rgba(77, 216, 255, 0.5),
      inset 0 0 12px rgba(77, 216, 255, 0.3);
  }
  .mt-word {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    font-variation-settings: var(--wide);
    font-weight: 800;
    font-size: 21px;
    letter-spacing: 0.3em;
    color: rgba(215, 230, 250, 0.35);
  }
  .mt-board {
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 7px;
  }
  .mt-board .board-card {
    width: 40px;
  }
  .mt-slot {
    width: 40px;
    aspect-ratio: 63 / 88;
    border: 1.5px dashed rgba(215, 230, 250, 0.25);
    border-radius: 4px;
  }
  .mt-hole {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    display: flex;
  }
  .mt-hole .board-card {
    width: 46px;
  }
  .mt-hole .board-card:first-child {
    rotate: -8deg;
  }
  .mt-hole .board-card:last-child {
    rotate: 7deg;
    margin-left: -12px;
  }
  .mt-chip {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #d6e8ff, #4f83d1 56%, #1d3a6b 98%);
    box-shadow: inset 0 0 0 2.5px rgba(5, 7, 12, 0.28), 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .mt-chip.c1 { left: 17%; top: 56%; }
  .mt-chip.c2 { left: 21%; top: 63%; }
  .mt-chip.c3 { right: 15%; top: 38%; }
  .mt-chip.iv {
    background: radial-gradient(circle at 38% 32%, #ffffff, #dcd6c4 56%, #98917c 98%);
  }
  .mt-chip.ox {
    background: radial-gradient(circle at 38% 32%, #b46866, var(--ox) 56%, #4e1a19 98%);
  }
  .carousel .station:first-of-type {
    margin-top: 30px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   THE 3D WORLD — wide screens, motion allowed
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .orbit-spacer {
    height: 760vh;
  }
  .scene {
    position: fixed;
    inset: 0;
    z-index: 10;
    perspective: 1400px;
    perspective-origin: 50% 26%;
    pointer-events: none;
    overflow: hidden;
  }
  .world {
    position: absolute;
    left: 50%;
    top: 70%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: translate3d(0, var(--bob, 0px), var(--zoom, -200px)) rotateX(64deg) rotateZ(var(--orbit, 0deg));
    will-change: transform;
  }
  .world > * {
    position: absolute;
    transform-style: preserve-3d;
  }

  /* room floor + table */
  /* no giant floor layer — a 4400px texture thrashes GPU memory and flickers */
  .tbl-shadow {
    display: block;
    left: -920px;
    top: -580px;
    width: 1840px;
    height: 1160px;
    border-radius: 50%;
    transform: translateZ(-146px);
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 58%, transparent 74%);
  }
  /* the extruded rim wall — 28 true 3D planes, lit per-frame by the room */
  .tbl-wall {
    display: block;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
  }
  .tbl-wall i {
    position: absolute;
    left: -104px;
    top: -38px;
    width: 208px;
    height: 76px;
    background: #0d1322;
    backface-visibility: hidden;
  }
  .tbl-rail {
    display: block;
    left: -880px;
    top: -552px;
    width: 1760px;
    height: 1104px;
    border-radius: 50%;
    background:
      radial-gradient(120% 100% at 50% 18%, rgba(190, 216, 250, 0.13), rgba(190, 216, 250, 0.03) 40%, transparent 60%),
      radial-gradient(closest-side, #1e2837 0%, #121828 58%, #070a12 100%);
  }
  .tbl-rail.r3 {
    transform: translateZ(10px);
    box-shadow: inset 0 0 0 2px rgba(195, 218, 250, 0.08);
  }
  /* racetrack — lacquered ring with cupholders, like a real card table */
  .tbl-race {
    display: block;
    left: -812px;
    top: -502px;
    width: 1624px;
    height: 1004px;
    border-radius: 50%;
    transform: translateZ(10.5px);
    background:
      radial-gradient(circle 30px at 50% 7%, #05070d 58%, rgba(5, 7, 13, 0) 62%),
      radial-gradient(circle 30px at 79% 16%, #05070d 58%, rgba(5, 7, 13, 0) 62%),
      radial-gradient(circle 30px at 95% 46%, #05070d 58%, rgba(5, 7, 13, 0) 62%),
      radial-gradient(circle 30px at 84% 80%, #05070d 58%, rgba(5, 7, 13, 0) 62%),
      radial-gradient(circle 30px at 58% 94%, #05070d 58%, rgba(5, 7, 13, 0) 62%),
      radial-gradient(circle 30px at 30% 92%, #05070d 58%, rgba(5, 7, 13, 0) 62%),
      radial-gradient(circle 30px at 8% 68%, #05070d 58%, rgba(5, 7, 13, 0) 62%),
      radial-gradient(circle 30px at 12% 28%, #05070d 58%, rgba(5, 7, 13, 0) 62%),
      radial-gradient(120% 100% at 50% 14%, rgba(140, 180, 240, 0.1), transparent 52%),
      radial-gradient(closest-side, #232f42 0%, #16202f 55%, #0b1220 100%);
    box-shadow: inset 0 0 0 2px rgba(195, 218, 250, 0.06);
  }
  .tbl-neon {
    display: block;
    left: -790px;
    top: -488px;
    width: 1580px;
    height: 976px;
    border-radius: 50%;
    transform: translateZ(12px);
    border: 2.5px solid #9fe4ff;
    opacity: 0.8;
    box-shadow:
      0 0 6px rgba(200, 235, 255, 0.8),
      0 0 18px rgba(77, 216, 255, 0.5),
      0 0 44px rgba(77, 216, 255, 0.25),
      inset 0 0 10px rgba(77, 216, 255, 0.35);
  }
  .tbl-felt {
    display: block;
    left: -760px;
    top: -470px;
    width: 1520px;
    height: 940px;
    border-radius: 50%;
    transform: translateZ(11px);
    background:
      radial-gradient(42% 34% at 50% 30%, rgba(185, 218, 255, 0.14), rgba(185, 218, 255, 0.03) 52%, transparent 74%),
      var(--noise-soft),
      radial-gradient(closest-side, #155089 0%, #0e3a68 44%, #092647 74%, #051629 100%);
    background-blend-mode: screen, multiply, normal;
    box-shadow:
      inset 0 0 0 2px rgba(233, 240, 230, 0.05),
      inset 0 0 120px 30px rgba(2, 12, 7, 0.55);
  }
  /* the lamp stays in the room while the table turns under it */
  .felt-glare {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: rotateZ(calc(var(--orbit, 0deg) * -1));
    background: radial-gradient(56% 44% at 50% 26%, rgba(205, 230, 255, 0.17), rgba(205, 230, 255, 0.04) 50%, transparent 72%);
  }
  .felt-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1150px;
    height: 640px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px dashed rgba(233, 240, 230, 0.16);
  }
  .felt-print {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0.5;
  }
  .fp-mark {
    width: 60px;
    height: 60px;
    margin: 0 auto 8px;
    stroke: rgba(233, 240, 230, 0.5);
    stroke-width: 4;
    fill: none;
  }
  .fp-word {
    font-variation-settings: var(--wide);
    font-weight: 800;
    font-size: 44px;
    letter-spacing: 0.34em;
    color: rgba(233, 240, 230, 0.4);
  }
  .fp-sub {
    font-size: 10px;
    letter-spacing: 0.3em;
    color: rgba(233, 240, 230, 0.3);
  }
  .pot-print {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%) rotateZ(calc(var(--orbit, 0deg) * -1));
    font-size: 13px;
    letter-spacing: 0.24em;
    color: rgba(233, 240, 230, 0.65);
  }
  .pot-print b {
    color: var(--signal);
    font-weight: 600;
  }
  .board-line {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 12px;
  }
  .b-slot {
    position: relative;
    width: 58px;
    height: 82px;
    border: 1.5px dashed rgba(233, 240, 230, 0.22);
    border-radius: 5px;
  }
  .b-slot .board-card {
    position: absolute;
    inset: -1.5px;
    width: calc(100% + 3px);
  }
  .deal3d {
    animation: deal3d 0.55s cubic-bezier(0.05, 0.7, 0.1, 1) backwards;
  }
  @keyframes deal3d {
    0% { transform: translate(-120px, -60px) rotate(-24deg); opacity: 0; }
    12% { opacity: 1; }
    58% { transform: translate(4px, 2px) rotate(2.4deg); }
    100% { transform: translate(0, 0) rotate(0); }
  }
  .board-line.nuts .board-card {
    box-shadow:
      inset 0 1px 0 rgba(255, 252, 240, 0.55),
      0 0 26px -2px rgba(77, 216, 255, 0.55),
      0 6px 14px -4px rgba(0, 0, 0, 0.7);
  }
  .hole3d {
    position: absolute;
    left: 47%;
    top: 76%;
  }
  .hole3d .board-card {
    position: absolute;
    width: 62px;
  }
  .hole3d .h1 { rotate: -9deg; }
  .hole3d .h2 { left: 34px; top: 4px; rotate: 7deg; }
  .stack3d {
    position: absolute;
    left: calc(50% + var(--sx, 0px));
    top: calc(50% + var(--sy, 0px));
    width: 54px;
    height: 54px;
  }
  .stack3d span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle at 38% 32%, #d6e8ff, #4f83d1 56%, #1d3a6b 98%);
    box-shadow:
      inset 0 0 0 4px rgba(5, 7, 8, 0.25),
      inset 0 0 0 7px rgba(205, 228, 255, 0.4),
      0 1px 2px rgba(0, 0, 0, 0.5);
    transform: translateZ(calc(var(--i, 0) * 5px)) rotate(var(--r, 0deg));
  }
  .stack3d.ox span {
    background: radial-gradient(circle at 38% 32%, #b46866, var(--ox) 56%, #4e1a19 98%);
    box-shadow:
      inset 0 0 0 4px rgba(5, 7, 8, 0.3),
      inset 0 0 0 7px rgba(255, 220, 214, 0.35),
      0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .puck3d {
    position: absolute;
    left: 66%;
    top: 68%;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    transform: translateZ(4px) rotate(-12deg);
    background: radial-gradient(circle at 34% 28%, #ffffff, #e8e4d8 55%, #b8b2a0 100%);
    color: var(--ink);
    font-family: var(--font-x);
    font-variation-settings: var(--wide);
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 0.18em;
    box-shadow:
      inset 0 0 0 3px rgba(36, 29, 16, 0.14),
      0 2px 3px rgba(0, 0, 0, 0.5);
  }
  .cut3d {
    position: absolute;
    left: 26%;
    top: 22%;
    width: 60px;
    height: 84px;
    border-radius: 5px;
    transform: translateZ(2px) rotate(24deg);
    background: linear-gradient(155deg, #3f6cc4, #2a4a8c 60%, #16294f);
    box-shadow: inset 0 1px 0 rgba(225, 238, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.55);
  }
  /* the pot grows in the middle of the felt */
  .pot-pile {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 0;
    height: 0;
  }
  .pot-pile span {
    position: absolute;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #d6e8ff, #4f83d1 56%, #1d3a6b 98%);
    box-shadow:
      inset 0 0 0 3px rgba(5, 7, 12, 0.28),
      inset 0 0 0 5px rgba(220, 235, 255, 0.4),
      0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .pot-pile span.ox {
    background: radial-gradient(circle at 38% 32%, #b46866, var(--ox) 56%, #4e1a19 98%);
  }
  .pot-pile span.iv {
    background: radial-gradient(circle at 38% 32%, #ffffff, #dcd6c4 56%, #98917c 98%);
  }
  /* the deck, cut and waiting by the dealer */
  .deck3d {
    position: absolute;
    left: 60%;
    top: 60%;
  }
  .deck3d i {
    position: absolute;
    width: 56px;
    height: 78px;
    border-radius: 5px;
    background:
      repeating-linear-gradient(45deg, rgba(205, 228, 255, 0.14) 0 1.5px, transparent 1.5px 8px),
      linear-gradient(150deg, #3a63b8, #2a4a8c 60%, #16294f);
    border: 1px solid rgba(205, 228, 255, 0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .deck3d i:nth-child(1) { transform: translateZ(0px) rotate(3deg); }
  .deck3d i:nth-child(2) { transform: translateZ(3px) rotate(1deg); }
  .deck3d i:nth-child(3) { transform: translateZ(6px) rotate(-2deg); }
  /* opponents in the hand: face-down cards + their stacks */
  .opseat {
    position: absolute;
    width: 0;
    height: 0;
    transform: rotate(var(--rot, 0deg));
  }
  .opseat .ob {
    position: absolute;
    width: 38px;
    height: 54px;
    border-radius: 4px;
    background:
      repeating-linear-gradient(45deg, rgba(205, 228, 255, 0.14) 0 1.5px, transparent 1.5px 7px),
      linear-gradient(150deg, #3a63b8, #2a4a8c 60%, #16294f);
    border: 1px solid rgba(205, 228, 255, 0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .opseat .ob:nth-child(1) { transform: rotate(-7deg); }
  .opseat .ob:nth-child(2) { left: 22px; top: 2px; transform: rotate(8deg); }
  .opseat b {
    position: absolute;
    left: 76px;
    top: 8px;
  }
  .opseat b u {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #d6e8ff, #4f83d1 56%, #1d3a6b 98%);
    box-shadow: inset 0 0 0 2.5px rgba(5, 7, 12, 0.28), 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .opseat b u:nth-child(2) { left: 8px; top: 14px; background: radial-gradient(circle at 38% 32%, #ffffff, #dcd6c4 56%, #98917c 98%); }
  .opseat b u:nth-child(3) { left: -12px; top: 18px; background: radial-gradient(circle at 38% 32%, #b46866, var(--ox) 56%, #4e1a19 98%); }
  .stack3d.iv span {
    background: radial-gradient(circle at 38% 32%, #ffffff, #dcd6c4 56%, #98917c 98%);
    box-shadow:
      inset 0 0 0 4px rgba(5, 7, 12, 0.2),
      inset 0 0 0 7px rgba(120, 145, 190, 0.35),
      0 1px 2px rgba(0, 0, 0, 0.5);
  }

  /* stations: a ring of standing cards circling the table */
  .carousel {
    position: absolute;
    left: 50%;
    top: 37%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: translateZ(-1150px) rotateY(var(--orbit, 0deg));
    pointer-events: none;
    will-change: transform;
  }
  .station {
    position: absolute;
    left: -310px;
    top: -250px;
    margin: 0;
    width: 620px;
    pointer-events: auto;
    backface-visibility: hidden;
    transform: rotateY(calc(var(--a, 0deg) * -1)) translateZ(1150px);
    opacity: var(--near, 1);
  }
  .station[style*="--near: 0."] {
    pointer-events: none;
  }
  .st-deal { --a: 0deg; }
  .st-proto { --a: 60deg; }
  .st-floor { --a: 120deg; }
  .st-math { --a: 180deg; }
  .st-rails { --a: 240deg; }
  .st-show { --a: 300deg; }
}

/* narrow screens: hide 3D chrome that makes no sense */
@media (max-width: 900px) {
  .orbit-read,
  .seat-dots {
    display: none;
  }
  .proto-cards {
    grid-template-columns: 1fr;
  }
  .seat-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name btn" "roi btn" "fill btn";
    row-gap: 6px;
  }
  .sr-idx { display: none; }
  .sr-name { grid-area: name; }
  .sr-roi { grid-area: roi; }
  .sr-fill { grid-area: fill; }
  .sr-btn { grid-area: btn; }
  .fig-row {
    flex-direction: column;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .grain,
  #motes {
    display: none;
  }
  .smoke,
  .bokeh {
    animation: none;
  }
}

/* ── WebGL hyper-real layer: claims the frame when the GPU can carry it ── */
#gl {
  display: none;
}
html.webgl3d #gl {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
html.webgl3d .room,
html.webgl3d #motes,
html.webgl3d .world {
  display: none !important;
}

/* webgl mode owns EVERY width — phones boot the LITE profile in webgl.js
   (no bloom, capped DPR), so the DOM stations and the CSS mobile table
   stay hidden and the scroll runway exists on phones too. Reduced-motion
   users still get the DOM room (webgl.js never boots for them). */
html.webgl3d .carousel,
html.webgl3d .mobile-table {
  display: none !important;
}
html.webgl3d .orbit-spacer {
  height: 760vh;
}

/* scroll progress hairline — webgl mode only */
.progress-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 760;
  background: linear-gradient(90deg, var(--signal), rgba(43, 255, 158, 0.55));
  box-shadow: 0 0 12px var(--signal-glow);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
html:not(.webgl3d) .progress-line {
  display: none;
}

/* topbar: the always-visible door into the trading floor */
.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.trade-link {
  text-decoration: none;
  color: #03130a;
  background: var(--signal);
  border-color: var(--signal);
  font-weight: 700;
}
.trade-link:hover {
  box-shadow: 0 0 26px -4px var(--signal);
}