:root {
  --room: #11151d;
  --panel: #1b2230;
  --panel-line: #303a4d;
  --ink: #f5f2eb;
  --ink-soft: #b8c0ce;
  --ink-dim: #8b96a7;
  --felt-hi: #21806f;
  --felt: #145f57;
  --felt-lo: #0a3d3a;
  --rail-hi: #3a4250;
  --rail: #171b22;
  --rail-lo: #090b0e;
  --brass: #ff6b5e;
  --brass-deep: #d94f45;
  --fold: #a8453f;
  --call: #176b62;
  --raise: #e05a4d;
  --outline: #0b0e11;
  --card-w: 56px;
  --tile-w: 154px;
  --cam-scale: 1.18;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 560px at 50% -120px, #243040 0%, rgba(36,48,64,0) 62%),
    radial-gradient(760px 380px at 85% 8%, rgba(255,107,94,0.08), rgba(255,107,94,0) 68%),
    linear-gradient(180deg, #141a24 0%, var(--room) 46%, #0c1016 100%);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
h1, h2 { font-family: "Inter", system-ui, sans-serif; letter-spacing: -0.025em; }
h2 { font-size: 17px; margin: 0 0 10px; }
kbd {
  font: 700 11px/1 "Inter", sans-serif;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  padding: 2px 5px;
  margin-left: 6px;
  opacity: 0.85;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1320px; margin: 0 auto; padding: 10px 20px 6px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand h1 { font-size: 24px; margin: 0; line-height: 1.05; }
.brand p { margin: 2px 0 0; color: var(--ink-soft); font-size: 12.5px; }
.brand-mark {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9a3438, var(--felt-lo) 72%);
  border: 2px solid var(--brass);
  box-shadow: 0 2px 0 var(--outline), inset 0 1px 0 rgba(255,255,255,0.35);
  font-family: "Fraunces", serif; font-weight: 700; font-size: 15px; color: #fff8e8;
}
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.icon-btn, .text-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 13px;
  border: 1px solid var(--panel-line); border-radius: 999px;
  background: var(--panel); cursor: pointer; font-weight: 600; font-size: 13px;
}
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[aria-pressed="true"] { border-color: var(--brass); background: #2a2417; color: #f5e3b8; }
.icon-btn:hover, .text-btn:hover { border-color: #485365; }

.notice {
  max-width: 1320px; margin: 6px auto 0; padding: 9px 20px;
  display: flex; gap: 8px; flex-wrap: wrap;
  color: var(--ink-soft); font-size: 13px;
}
.notice strong { color: #f0d9a6; }

.layout {
  max-width: 1320px; margin: 0 auto; padding: 8px 20px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start;
}
.side { display: grid; gap: 12px; }
.panel {
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 14px; padding: 14px 16px;
}
.panel-note { color: var(--ink-soft); font-size: 12.5px; margin: 10px 0 0; }
.scope-list { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 13px; display: grid; gap: 5px; }
.footer { text-align: center; color: var(--ink-dim); font-size: 12.5px; padding: 4px 16px 26px; }

/* ---- Stage & dimensional table ---- */
.stage-wrap { min-width: 0; }
.stage {
  position: relative;
  aspect-ratio: 16 / 9.9;
  min-height: 540px;
  border-radius: 22px;
  background:
    radial-gradient(720px 400px at 50% 42%, rgba(255,214,150,0.10), rgba(201,168,106,0) 65%),
    radial-gradient(520px 320px at 12% 0%, rgba(64,110,170,0.22), rgba(64,110,170,0) 70%),
    radial-gradient(520px 320px at 88% 0%, rgba(64,110,170,0.22), rgba(64,110,170,0) 70%),
    linear-gradient(180deg, #182635 0%, #10161f 52%, #0b0e13 100%);
  border: 1px solid #2b333f;
  overflow: hidden;
}
.room-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 300px at 50% 38%, rgba(255,226,160,0.10), rgba(0,0,0,0) 70%);
}
/* Abstract dark studio screens behind the top seats (no branding). */
.studio-backdrop { position: absolute; inset: 0; pointer-events: none; }
.studio-backdrop::before, .studio-backdrop::after {
  content: ""; position: absolute; top: 5%; width: 24%; height: 17%;
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(38,64,98,0.34), rgba(12,18,28,0.52));
  border: 1px solid rgba(140,180,225,0.10);
  box-shadow: inset 0 1px 0 rgba(190,220,255,0.10), 0 10px 24px rgba(0,0,0,0.35);
}
.studio-backdrop::before { left: 17%; }
.studio-backdrop::after { right: 17%; }
.table-shadow {
  position: absolute; left: 50%; top: 53%;
  width: 68%; height: 58%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0,0,0,0.55); filter: blur(22px);
}
.table {
  position: absolute; left: 50%; top: 50%;
  width: 66%; height: 56%;
  transform: translate(-50%, -50%) rotateX(9deg);
  transform-style: preserve-3d;
}
.table-rail {
  position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(165deg, var(--rail-hi) 0%, var(--rail) 42%, var(--rail-lo) 100%);
  border: 2px solid #000;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.20),
    inset 0 -12px 24px rgba(0,0,0,0.65),
    0 22px 36px rgba(0,0,0,0.45);
}
/* Stitching ring suggests the padded leather armrest. */
.table-rail::after {
  content: ""; position: absolute; inset: 5px; border-radius: 999px;
  border: 1.5px dashed rgba(255,255,255,0.13);
}
.table-felt {
  position: absolute; inset: 10.5% 5%; border-radius: 999px;
  background:
    radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1.4px),
    radial-gradient(rgba(0,0,0,0.10) 1px, transparent 1.4px),
    radial-gradient(ellipse at 50% 38%, var(--felt-hi) 0%, var(--felt) 52%, var(--felt-lo) 100%);
  background-size: 7px 7px, 9px 9px, auto;
  background-position: 0 0, 3px 4px, 0 0;
  border: 1px solid rgba(201,168,106,0.30);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -18px 30px rgba(0,0,0,0.38),
    inset 0 0 0 6px rgba(40, 8, 10, 0.35);
  display: grid; place-items: center;
}
.felt-word {
  font-family: "Inter", sans-serif; font-weight: 900;
  letter-spacing: 0.3em; font-size: clamp(10px, 1.6vw, 16px);
  color: rgba(245, 236, 210, 0.13); transform: translateY(88px); white-space: nowrap;
}

.board {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 3; pointer-events: none; width: min(92%, 460px);
}
.board-top { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.street-pill, .pot-pill, .blinds-pill {
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 700;
  border: 1px solid rgba(0,0,0,0.45);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.street-pill { background: #efe6cf; color: #3a2c12; }
.pot-pill { background: #3a2c12; color: #f5e3b8; border-color: var(--brass-deep); }
.blinds-pill { background: rgba(16, 18, 22, 0.88); color: #e9e2cd; }
/* Printed betting boxes in front of each seat, as on a broadcast table. */
.bet-zone {
  position: absolute; width: 56px; height: 30px; border-radius: 6px;
  border: 1.5px solid rgba(245, 236, 210, 0.28); transform: translate(-50%, -50%);
}
.bz-0 { left: 50%; top: 83%; } .bz-1 { left: 21%; top: 68%; }
.bz-2 { left: 21%; top: 32%; } .bz-3 { left: 50%; top: 17%; }
.bz-4 { left: 79%; top: 32%; } .bz-5 { left: 79%; top: 68%; }
.community { display: flex; gap: 7px; min-height: calc(var(--card-w) * 1.42); align-items: center; }
.board-line {
  margin: 0; color: #e9e2cd; font-size: 13px; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); max-width: 420px;
}

/* ---- Cards ---- */
.card {
  width: var(--card-w); aspect-ratio: 0.705; flex: none;
  border-radius: 7px; background: #fffdf6; color: #1c1c1c;
  border: 1px solid #b9b0a0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4px 5px; font-weight: 800; line-height: 0.95; user-select: none;
}
.card .card-rank { font-size: 16px; }
.card .card-suit { font-size: 20px; text-align: center; }
.card .card-foot { font-size: 11px; text-align: right; transform: rotate(180deg); }
.card.is-red { color: #b3261e; }
.card.is-back {
  /* NFG chip on charcoal: brand mark centre, fine guilloché rings, coral pinline. */
  background:
    url("./chip.svg") center / 62% no-repeat,
    repeating-radial-gradient(circle at 50% 50%, rgba(143,224,212,0.07) 0 2px, rgba(143,224,212,0) 2px 7px),
    radial-gradient(120% 90% at 50% 18%, #232d42 0%, #161c29 55%, #0d1119 100%);
  border-color: #0a0e15; color: transparent;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45),
    inset 0 0 0 2px rgba(245,242,235,0.16),
    inset 0 0 0 4px #121722,
    inset 0 0 0 5px rgba(255,107,94,0.55);
}
.card.is-empty {
  background: rgba(255,255,255,0.07); border: 1px dashed rgba(255,244,214,0.4);
  box-shadow: none; color: transparent;
}
.card.is-dim { opacity: 0.45; filter: grayscale(0.4); }
@keyframes deal-in {
  from { transform: translateY(-10px) scale(0.92); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.card.is-dealing { animation: deal-in 280ms ease-out both; }

/* ---- Seats with anchored camera tiles ---- */
.seats { position: absolute; inset: 0; z-index: 4; }
.seat {
  position: absolute; width: var(--tile-w);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.seat-0 { left: 50%; top: 84%; --bet-shift: 0 -58px; --hole-scale: 1.12; }
.seat-1 { left: 13%; top: 73%; --bet-shift: 44px -30px; }
.seat-2 { left: 13%; top: 25%; --bet-shift: 44px 30px; }
.seat-3 { left: 50%; top: 16%; --bet-shift: 0 62px; }
.seat-4 { left: 87%; top: 25%; --bet-shift: -44px 30px; }
.seat-5 { left: 87%; top: 73%; --bet-shift: -44px -30px; }

.cam-tile {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  border: 2px solid #39424f; background: #232a35;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.cam-tile video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.cam-tile .avatar {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Fraunces", serif; font-weight: 700; font-size: 30px; color: #fff6e0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  background:
    radial-gradient(90px 60px at 30% 20%, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%),
    linear-gradient(150deg, var(--tile-a, #3d5a4c), var(--tile-b, #22332b));
}
.cam-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: linear-gradient(180deg, rgba(10, 13, 17, 0.55), rgba(10, 13, 17, 0.88));
  border-top: 2px solid var(--brass-deep); padding: 4px 8px 5px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.cam-tile .avatar svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cam-name > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cam-name .sim-tag { color: #f0d9a6; font-weight: 600; font-size: 10px; letter-spacing: 0.04em; }
.cam-mic {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,13,17,0.75); border: 1px solid rgba(255,255,255,0.25);
}
.cam-mic svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.cam-mic.is-muted { background: #7a2f2b; }
.cam-off-note {
  position: absolute; top: 6px; left: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  background: rgba(10,13,17,0.72); border-radius: 999px; padding: 2px 7px; color: #e9e2cd;
}

/* Spotlight on the player to act: halo behind the face tile plus a warm
   pool of light on the felt where their bet sits. */
.seat.is-turn::before {
  content: ""; position: absolute; top: 36%; left: 50%;
  width: 200px; height: 200px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 214, 140, 0.30), rgba(255, 214, 140, 0) 65%);
  pointer-events: none; z-index: -1;
}
.seat.is-turn::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 88px; height: 46px;
  transform: translate(-50%, -50%) translate(var(--bet-shift, 0 0));
  background: radial-gradient(ellipse, rgba(255, 214, 140, 0.35), rgba(255, 214, 140, 0) 70%);
  filter: blur(4px); pointer-events: none;
}
.seat.is-turn .cam-tile {
  border-color: var(--brass);
  box-shadow:
    0 0 0 4px rgba(201,168,106,0.28),
    0 0 34px 8px rgba(255, 214, 140, 0.28),
    0 10px 22px rgba(0,0,0,0.5);
  transform: scale(1.04);
}
.seat.is-folded { opacity: 0.62; }
.seat.is-folded .cam-tile { filter: saturate(0.55); }
.seat.is-eliminated { opacity: 0.42; }
.seat.is-eliminated .cam-tile { filter: grayscale(0.9) saturate(0.35); border-style: dashed; }
.seat.is-winner .cam-tile { border-color: #f2cf7e; box-shadow: 0 0 0 4px rgba(242,207,126,0.35), 0 0 36px 10px rgba(255,214,140,0.35); }

.seat-meta { text-align: center; line-height: 1.25; }
.seat-meta .seat-stack { font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.seat-meta .seat-action { font-size: 11.5px; color: #f0d9a6; min-height: 15px; font-weight: 600; }
.hole { display: flex; gap: 4px; transform: scale(var(--hole-scale, 0.82)); transform-origin: center top; margin-top: -4px; }
.hole .card { --card-w: 44px; }

.bet-pill {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(var(--bet-shift, 0 0));
  display: inline-flex; align-items: center; gap: 7px;
  background: #171d26; border: 1px solid var(--brass-deep);
  border-radius: 999px; padding: 4px 10px 4px 5px;
  font-size: 12.5px; font-weight: 800; color: #f5e3b8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45); z-index: 5; white-space: nowrap;
}
.chips { display: flex; }
.chip {
  width: 16px; height: 16px; border-radius: 50%; margin-left: -7px; flex: none;
  border: 2px dashed rgba(255,255,255,0.85);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.5);
}
.chip:first-child { margin-left: 0; }
.chip.c-red { background: #b23a38; } .chip.c-blue { background: #2f5f8f; }
.chip.c-green { background: #2e7d5b; } .chip.c-black { background: #2a2a2e; }
.chip.c-gold { background: #b8862e; }

.dealer-btn {
  position: absolute; top: -8px; right: -6px; z-index: 6;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fffdf6; color: #20242a; font-weight: 800; font-size: 13px;
  border: 2px solid var(--brass-deep); box-shadow: 0 3px 7px rgba(0,0,0,0.45);
}

.winner-banner {
  position: absolute; left: 50%; top: 64%; transform: translateX(-50%);
  z-index: 8; max-width: min(92%, 520px); text-align: center;
  background: #3a2c12; color: #fbeec8; border: 1px solid var(--brass);
  border-radius: 12px; padding: 10px 18px; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}

/* ---- Betting controls ---- */
.controls {
  margin-top: 12px; background: linear-gradient(180deg, #1d232e, #151a22);
  border: 1px solid var(--panel-line); border-top: 2px solid var(--brass-deep);
  border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.controls-status { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.turn-status { margin: 0; font-weight: 700; font-size: 15px; }
.turn-status .turn-who { color: #f0d9a6; }
.turn-track { height: 5px; border-radius: 999px; background: #2a313d; overflow: hidden; }
.turn-track span { display: block; height: 100%; width: 0%; background: var(--brass); border-radius: inherit; }
.controls-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.controls-row.is-hand { align-items: center; margin-top: 10px; }
.reaction-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(255,255,255,0.045); }
.reaction-label { flex: none; color: #ffd9d4; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.phrase-row { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.phrase-row button, .emoji-row button { flex: none; border: 1px solid #3a475f; background: #111722; color: var(--ink); border-radius: 999px; cursor: pointer; font-weight: 800; }
.phrase-row button { padding: 7px 11px; font-size: 12px; white-space: nowrap; }
.phrase-row button:hover, .emoji-row button:hover { border-color: var(--brass); background: rgba(255,107,94,0.14); transform: translateY(-1px); }
.emoji-row { display: flex; gap: 5px; flex: none; }
.emoji-row button { width: 36px; height: 32px; display: grid; place-items: center; font-size: 17px; padding: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.speech-bubble { position: absolute; left: 50%; top: -14px; z-index: 9; width: max-content; max-width: 210px; transform: translateX(-50%); padding: 8px 11px; border-radius: 15px 15px 15px 4px; background: #f5f2eb; color: #171b22; box-shadow: 0 12px 24px rgba(0,0,0,0.38); font-family: "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 13px; line-height: 1.25; font-weight: 900; text-align: center; pointer-events: none; animation: bubble-pop 180ms ease-out; }
.speech-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: #f5f2eb; }
.seat.has-reaction { z-index: 8; }
@keyframes bubble-pop { from { opacity: 0; transform: translate(-50%, 5px) scale(0.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.walkout-box { display: grid; gap: 8px; padding: 11px; border: 1px solid #354158; border-radius: 14px; background: rgba(255,107,94,0.07); }
.auto-action-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(20,95,87,0.16); }
.auto-action-label { color: #9fe8dd; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.auto-action-options { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-action-options button { border: 1px solid #3a475f; background: #111722; color: var(--ink); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 900; cursor: pointer; }
.auto-action-options button:hover:not(:disabled) { border-color: #64c8ba; }
.auto-action-options button.is-active { background: #176b62; border-color: #64c8ba; color: #eafffb; }
.auto-action-options button:disabled { opacity: 0.42; cursor: not-allowed; }
.auto-action-status { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.chat-panel { margin-top: 12px; border: 1px solid var(--panel-line); border-radius: 16px; background: rgba(27,34,48,0.92); padding: 12px; }
.chat-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 9px; }
.chat-head h2 { font-size: 16px; margin: 0; }
.chat-head span { color: var(--ink-dim); font-size: 11px; font-weight: 700; text-align: right; }
.chat-messages { list-style: none; margin: 0; padding: 8px; display: grid; gap: 7px; max-height: 190px; overflow: auto; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(8,12,17,0.55); }
.chat-messages li { display: grid; gap: 1px; justify-items: start; color: var(--ink-soft); font-size: 13px; line-height: 1.35; }
.chat-messages li strong { color: var(--ink); font-size: 11px; letter-spacing: 0.02em; }
.chat-messages li > span { padding: 6px 9px; border-radius: 12px 12px 12px 4px; background: #232d40; color: #eef3f8; max-width: min(92%, 620px); overflow-wrap: anywhere; }
.chat-messages li.is-hero { justify-items: end; text-align: right; }
.chat-messages li.is-hero > span { background: rgba(255,107,94,0.22); border: 1px solid rgba(255,107,94,0.35); border-radius: 12px 12px 4px 12px; }
.chat-messages li.is-system { justify-items: center; text-align: center; }
.chat-messages li.is-system > span { background: transparent; color: var(--ink-dim); font-size: 12px; padding: 2px 4px; }
.chat-form { display: flex; gap: 8px; margin-top: 9px; }
.chat-form input { flex: 1; min-width: 0; }
.chat-form button { flex: none; }
.walkout-box .panel-note { margin-top: 0; }
.action-btn {
  min-height: 48px; padding: 10px 20px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.5); font-weight: 800; font-size: 15px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
.action-btn:not(:disabled):hover { filter: brightness(1.1); }
.action-btn:not(:disabled):active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.45); }
.action-btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }
.action-btn.is-fold { background: linear-gradient(180deg, #bd534e, var(--fold)); color: #fff; }
.action-btn.is-call { background: linear-gradient(180deg, #3a8570, var(--call)); color: #fff; }
.action-btn.is-raise { background: linear-gradient(180deg, #c39a48, var(--raise)); color: #fff8e8; }
.raise-box {
  flex: 1 1 220px; display: flex; flex-direction: column; gap: 5px;
  background: #141a22; border: 1px solid var(--panel-line); border-radius: 10px; padding: 7px 10px;
}
.raise-quick { display: flex; gap: 5px; flex-wrap: wrap; }
.quick-btn {
  min-height: 30px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid #3a4453; background: #202833; font-size: 12px; font-weight: 700; cursor: pointer;
}
.quick-btn:not(:disabled):hover { border-color: var(--brass-deep); color: #f5e3b8; }
.quick-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.raise-slider-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.raise-slider-label output { color: #f5e3b8; font-weight: 800; font-size: 13px; }
input[type="range"] { width: 100%; accent-color: var(--brass); min-height: 28px; }
.deal-btn {
  min-height: 46px; padding: 10px 22px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #f3e3ba, #d9bd7d); color: #3a2c12;
  border: 1px solid #8a6a2d; font-weight: 800; font-size: 15px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4);
}
.controls-hint { margin: 0; color: var(--ink-soft); font-size: 12.5px; }

/* ---- Side panels ---- */
.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.roster li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 9px; background: #141a22; border: 1px solid #252d39;
  font-size: 13px;
}
.roster li.is-turn { border-color: var(--brass-deep); background: #26200f; }
.roster li.is-folded { opacity: 0.55; }
.roster .r-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #5a6b5e; }
.roster li.is-turn .r-dot { background: var(--brass); box-shadow: 0 0 8px rgba(201,168,106,0.9); }
.roster .r-name { font-weight: 700; }
.roster .r-sim { color: #d8bf8a; font-size: 11px; font-weight: 600; }
.roster .r-stack { margin-left: auto; font-weight: 800; white-space: nowrap; }
.roster .r-hand { color: var(--ink-soft); font-size: 12px; }

.log { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-soft); max-height: 300px; overflow: auto; }
.log li strong { color: var(--ink); }
.log li.is-street { color: #f0d9a6; font-weight: 700; list-style: none; margin-left: -20px; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .side { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --tile-w: 102px; --card-w: 38px; }
  .topbar { padding: 12px 12px 4px; flex-direction: column; align-items: stretch; gap: 10px; }
  .brand h1 { font-size: 21px; white-space: nowrap; }
  .topbar-actions { justify-content: flex-start; }
  .icon-btn, .text-btn { min-height: 38px; padding: 7px 11px; font-size: 12.5px; }
  .notice, .layout { padding-left: 12px; padding-right: 12px; }
  .stage { aspect-ratio: 4 / 5.2; min-height: 560px; border-radius: 16px; }
  .table { width: 92%; height: 52%; }
  .seat-0 { top: 86%; }
  .seat-1 { left: 20%; top: 72%; }
  .seat-2 { left: 20%; top: 26%; }
  .seat-3 { top: 14%; }
  .seat-4 { left: 80%; top: 26%; }
  .seat-5 { left: 80%; top: 72%; }
  .hole .card { --card-w: 32px; }
  .cam-tile .avatar { font-size: 20px; }
  .cam-name { font-size: 9px; padding: 3px 6px 4px; left: 0; right: 0; bottom: 0; gap: 4px; }
  .bet-zone { width: 40px; height: 22px; }
  .cam-name .sim-tag { font-size: 7.5px; }
  .cam-name > span:first-child { flex: none; }
  .cam-off-note { font-size: 8px; padding: 1px 5px; top: 4px; left: 4px; }
  .cam-mic { width: 20px; height: 20px; top: 4px; right: 4px; }
  .seat-meta .seat-stack { font-size: 11.5px; }
  .seat-meta .seat-action { font-size: 10.5px; }
  .board-line { font-size: 12px; }
  .action-btn { flex: 1 1 30%; padding: 10px 8px; }
  .action-btn kbd { display: none; }
  .raise-box { flex-basis: 100%; order: 3; }
  .winner-banner { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ================= V2: broadcast website ================= */
[hidden] { display: none !important; }
.invite-entry { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.invite-entry-card { width: min(100%, 480px); padding: 32px; border: 1px solid var(--panel-line); border-radius: 22px; background: var(--panel); box-shadow: 0 24px 70px #0005; }
.invite-entry-card h1 { font-size: 28px; margin: 20px 0 10px; }
.invite-entry-card p { color: var(--ink-soft); line-height: 1.65; }
.invite-entry-actions, .entry-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.invite-entry-actions { margin-top: 24px; }
.entry-controls { margin: 10px 0; padding: 14px; border: 1px solid #516e72; border-radius: 12px; background: #172e32; }
.entry-controls p { margin: 0 0 10px; }
.entry-controls .entry-bomb-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); }
.waiting-room .cta-btn { width: 100%; margin-top: 10px; }
.live-word { color: #f0524a; letter-spacing: 0.06em; }
.grow { flex: 1; }
.wide { width: 100%; justify-content: center; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft); min-width: 0; }
.field input, .field select {
  min-height: 40px; padding: 8px 10px; border-radius: 9px; width: 100%;
  border: 1px solid #354052; background: #11161e; color: var(--ink); font: inherit; font-size: 14px;
}
.field-row { display: flex; gap: 8px; }
.field-row .field { flex: 1; }
.cta-btn {
  min-height: 50px; width: 100%; margin-top: 12px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, #f3e3ba, #d9bd7d); color: #33250e;
  border: 1px solid #8a6a2d; font-weight: 800; font-size: 15.5px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.4);
}
.ghost-btn {
  min-height: 42px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: #1b222d; color: var(--ink); border: 1px solid #37445a; font-weight: 700; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ghost-btn:hover, .cta-btn:hover { filter: brightness(1.08); }
.form-error { color: #ff9d94; font-size: 13px; font-weight: 600; margin: 10px 0 0; }

.home-view { max-width: 1240px; margin: 0 auto; padding: 18px 20px 30px; min-height: 100dvh; }
.home-nav { display: flex; align-items: center; gap: 10px; font-family: "Fraunces", serif; font-size: 19px; }
.home-nav-note { margin-left: auto; font-family: "Libre Franklin", sans-serif; font-size: 12.5px; color: var(--ink-soft); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr); gap: 28px; margin-top: 34px; align-items: start; }
.home-eyebrow { color: #f0d9a6; font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.home-copy h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; margin: 10px 0 12px; }
.home-lede { font-size: 16.5px; color: #e4dcc9; max-width: 560px; margin: 0; }
.home-points { margin: 18px 0 0; padding-left: 19px; color: var(--ink-soft); display: grid; gap: 7px; font-size: 14px; }
.home-deco { margin-top: 26px; height: 120px; position: relative; }
.home-deco-table {
  position: absolute; left: 4%; right: 18%; bottom: 0; height: 105px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, var(--felt-hi), var(--felt) 55%, var(--felt-lo));
  border: 10px solid #14161a;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.18), 0 22px 34px rgba(0,0,0,0.5);
}
.home-honest { color: var(--ink-dim); font-size: 12.5px; max-width: 540px; }
.home-card {
  background: linear-gradient(180deg, #1e252f, #151a22);
  border: 1px solid #323d4f; border-top: 2px solid var(--brass-deep);
  border-radius: 16px; padding: 18px; display: grid; gap: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.home-card h2 { margin: 0; font-size: 20px; }
.join-row { display: flex; gap: 8px; align-items: end; border-top: 1px solid #2a3342; padding-top: 12px; }
.join-btn { flex: none; }
#join-code { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 800; }

/* Table view goes full-bleed; panels move into a drawer. */
#table-view .layout { grid-template-columns: minmax(0, 1fr); max-width: 1460px; }
#table-view .stage { height: calc(100dvh - 292px); min-height: 480px; aspect-ratio: auto; }
@media (min-width: 721px) and (max-height: 860px) {
  #table-view .stage { --tile-w: 126px; }
  .dealer { width: 92px; }
  .controls { padding: 9px 12px; }
  .action-btn { min-height: 42px; }
}
.world { position: absolute; inset: 0; transition: transform 950ms cubic-bezier(0.22, 0.8, 0.24, 1); transform-origin: 50% 50%; will-change: transform; perspective: 1100px; }
.stage[data-camera="top"] .table { transform: translate(-50%, -50%) rotateX(0deg) scale(1.04); }
.stage[data-camera="rail"] .table { transform: translate(-50%, -47%) rotateX(17deg) scale(1.07); }
.stage[data-camera="close"] .table { transform: translate(-50%, -50%) rotateX(11deg); }

.dealer {
  position: absolute; left: 50%; top: 33%; width: 96px; z-index: 2;
  transform: translate(-50%, -50%); pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.5));
}
.dealer svg { width: 100%; height: auto; display: block; }
.dealer-tag {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  background: #10141a; color: #f5e3b8; border: 1px solid var(--brass-deep);
  border-radius: 999px; padding: 2px 9px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap;
}

.featured-cam {
  position: absolute; left: 60.5%; top: 12px; width: 198px; z-index: 9;
  background: #10151d; border: 1px solid #3a4658; border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 34px rgba(0,0,0,0.55);
}
.featured-label {
  display: block; padding: 6px 10px 0; color: #f0524a; font-size: 10.5px;
  font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
}
.featured-media { position: relative; aspect-ratio: 16 / 9.5; margin: 6px 8px 0; border-radius: 9px; overflow: hidden; background: #232a35; }
.featured-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.featured-avatar { position: absolute; inset: 0; }
.featured-avatar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.featured-meta { display: flex; flex-direction: column; padding: 7px 10px 9px; line-height: 1.25; }
.featured-meta strong { font-size: 14.5px; }
.featured-meta span { color: #f0d9a6; font-size: 12px; font-weight: 600; }

.lower-third {
  position: absolute; left: 14px; bottom: 52px; z-index: 9; max-width: min(72%, 520px);
  display: flex; gap: 10px; align-items: baseline;
  background: linear-gradient(90deg, rgba(9,12,17,0.92), rgba(9,12,17,0.55) 80%, rgba(9,12,17,0));
  border-left: 3px solid var(--brass); padding: 8px 26px 8px 12px; border-radius: 0 8px 8px 0;
}
.lower-third strong { font-family: "Fraunces", serif; font-size: 19px; white-space: nowrap; }
.lower-third span { color: #f0d9a6; font-weight: 700; font-size: 13px; }

.camera-bar {
  position: absolute; left: 12px; top: 12px; z-index: 10;
  display: flex; gap: 4px; align-items: center;
  background: rgba(10, 14, 20, 0.82); border: 1px solid #37445a; border-radius: 999px; padding: 4px;
}
.camera-bar-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #b9c2cf; padding: 0 6px 0 8px; }
.camera-bar button {
  min-height: 30px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: #d7dde6; font-size: 12px; font-weight: 700;
}
.camera-bar button.is-active { background: #f3e3ba; color: #33250e; }
.deal-stage-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 11;
  min-height: 48px; padding: 10px 20px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, #f3e3ba, #d9bd7d); color: #33250e;
  border: 1px solid #8a6a2d; font-weight: 800; font-size: 15px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}
.stage[data-camera="close"] .featured-cam { width: 300px; }
.stage[data-variant="omaha"] { --felt-hi: #7c2d3e; --felt: #5e2130; --felt-lo: #3c1420; }
.stage[data-variant="omaha5"] { --felt-hi: #6e3550; --felt: #52263d; --felt-lo: #341826; }
.stage[data-variant="shortdeck"] { --felt-hi: #7a3a2c; --felt: #5c2a20; --felt-lo: #3a1a12; }
.invite-btn strong { letter-spacing: 0.14em; color: #f5e3b8; }
.studio-sign {
  position: absolute; top: 5%; width: 24%; height: 17%;
  display: grid; place-items: center; text-align: center;
  font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: 0.08em;
  font-size: clamp(11px, 1.5vw, 19px); color: rgba(205, 228, 250, 0.5);
}
.studio-sign.ss-a { left: 17%; }
.studio-sign.ss-b { right: 17%; }
.seat.meta-side .seat-meta { transform: translate(96px, -64px); text-align: left; width: max-content; }
.stack-chips { display: inline-flex; vertical-align: -3px; margin-right: 6px; }
.stack-chips i {
  width: 13px; height: 13px; border-radius: 50%; margin-left: -6px;
  border: 2px dashed rgba(255,255,255,0.8); display: block;
}
.stack-chips i:first-child { margin-left: 0; background: #2a2a2e; }
.stack-chips i:nth-child(2) { background: #b23a38; }
.stack-chips i:nth-child(3) { background: #b8862e; }
@keyframes chip-in { from { transform: translate(-50%, -50%) translate(var(--bet-shift, 0 0)) scale(0.6); opacity: 0; } to { transform: translate(-50%, -50%) translate(var(--bet-shift, 0 0)) scale(1); opacity: 1; } }
.bet-pill { animation: chip-in 240ms ease-out both; }
.seat-0 .hole.many .card { --card-w: 37px; margin-left: -8px; }
.seat-0 .hole.many .card:first-child { margin-left: 0; }
.home-dealer { position: absolute; right: 7%; bottom: 34px; width: 86px; }
.home-dealer svg { width: 100%; height: auto; display: block; }
.home-dealer .dealer-tag { display: none; }
.home-deco-card {
  position: absolute; bottom: 52px; width: 42px; height: 58px; border-radius: 6px;
  background: #fffdf6; color: #222; font-weight: 800; font-size: 15px; padding: 4px 5px;
  border: 1px solid #b9b0a0; box-shadow: 0 8px 16px rgba(0,0,0,0.45);
}
.home-deco-card.dc-a { left: 34%; transform: rotate(-7deg); color: #b3261e; }
.home-deco-card.dc-b { left: calc(34% + 34px); transform: rotate(6deg); }
.home-deco-chips { position: absolute; left: 24%; bottom: 30px; display: flex; }
.home-deco-chips i { width: 24px; height: 24px; border-radius: 50%; margin-left: -9px; border: 3px dashed rgba(255,255,255,0.85); }
.home-deco-chips i:first-child { margin-left: 0; background: #2a2a2e; }
.home-deco-chips i:nth-child(2) { background: #b23a38; }
.home-deco-chips i:nth-child(3) { background: #b8862e; }

.drawer {
  position: fixed; top: 64px; right: 0; bottom: 0; width: min(360px, 92vw); z-index: 70;
  overflow-y: auto; padding: 14px; align-content: start;
  background: #12171f; border-left: 1px solid #323d4f;
  box-shadow: -18px 0 44px rgba(0,0,0,0.55);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head h2 { margin: 0; font-size: 19px; }
.media-status { font-size: 13px; color: #e4dcc9; margin: 0 0 8px; }
.media-status.is-error { color: #ff9d94; }
.media-status.is-on { color: #9fd8b4; }
.mic-meter { height: 9px; border-radius: 999px; background: #232b38; overflow: hidden; margin-bottom: 8px; }
.mic-meter span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #57b47c, #f0c85e, #e05a4d); transition: width 90ms linear; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ledger-table th, .ledger-table td { padding: 5px 6px; text-align: right; border-bottom: 1px solid #26303f; white-space: nowrap; }
.ledger-table th:first-child, .ledger-table td:first-child { text-align: left; }
.ledger-table th { color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.ledger-net-pos { color: #9fd8b4; font-weight: 800; }
.ledger-net-neg { color: #ff9d94; font-weight: 800; }
.toast {
  position: fixed; right: 14px; top: 76px; z-index: 60; pointer-events: none;
  width: min(92vw, 380px); text-align: left;
  background: #10151d; color: #f2ede1; border: 1px solid var(--brass-deep);
  border-radius: 11px; padding: 10px 16px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
}
.toast.is-error { border-color: #b0453f; color: #ffc9c2; }

/* Cinematic seat tiles: softer frame, home-room portrait backdrop. */
.cam-tile { border-radius: 16px; border-color: rgba(255,255,255,0.16); }
.cam-tile video { position: absolute; inset: 0; }
.cam-name { background: linear-gradient(180deg, rgba(8,10,14,0), rgba(8,10,14,0.88) 38%); border-top: none; padding: 14px 9px 5px; }
.seat .hole { z-index: 3; }
.stage[data-players="8"] { --tile-w: 128px; }
.stage[data-players="9"] { --tile-w: 116px; }
.stage[data-players="8"] .featured-cam, .stage[data-players="9"] .featured-cam { display: none; }
.stage[data-players="2"] { --tile-w: 176px; }
.stage[data-players="3"] { --tile-w: 166px; }
.hole .card { --card-w: 42px; }
.hole.many .card { --card-w: 30px; margin-left: -9px; }
.hole.many .card:first-child { margin-left: 0; }

@media (max-width: 980px) {
  .home-grid { grid-template-columns: 1fr; }
  .featured-cam { width: 168px; }
}
@media (max-width: 720px) {
  .home-view { padding: 14px 12px 22px; }
  .home-nav-note { display: none; }
  .home-grid { margin-top: 20px; gap: 18px; }
  .field-row { flex-wrap: wrap; }
  .field-row .field { flex: 1 1 44%; }
  #table-view .stage { height: min(74dvh, 660px); min-height: 560px; aspect-ratio: auto; }
  .toast { left: 10px; right: 10px; width: auto; }
  .featured-cam { display: none; }
  .lower-third { display: none; }
  .lower-third { bottom: 48px; left: 8px; padding: 6px 16px 6px 9px; }
  .lower-third strong { font-size: 15px; }
  .lower-third span { font-size: 11px; }
  .dealer { width: 82px; top: 33%; }
  .camera-bar { max-width: 96%; overflow-x: auto; }
  .camera-bar-label { display: none; }
  .camera-bar button { padding: 4px 8px; font-size: 11px; white-space: nowrap; }
  .stage[data-players="8"] { --tile-w: 88px; }
  .stage[data-players="9"] { --tile-w: 80px; }
}

/* ================= V3: NoFoldsGiven ================= */
.logo-img { width: 46px; height: 46px; flex: none; border-radius: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.word-pop { font-style: normal; color: #ffc53d; }
.home-socials { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.home-socials a, .footer a { color: #7dd8d2; font-weight: 700; }
.footer a { text-decoration: none; }
.seat { cursor: pointer; }
.coach-line { margin: 0; color: #9fe8dd; font-size: 13px; font-weight: 700; }
.drawer-sub { margin: 14px 0 6px; font-size: 13.5px; font-family: "Libre Franklin", sans-serif; }
.profile-stats, .coach-box, .hand-history {
  margin-top: 10px; background: #141a22; border: 1px solid #26303f;
  border-radius: 10px; padding: 10px 11px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55;
}
.coach-box { color: #bfe9e1; }
.profile-stats strong { color: var(--ink); }
.hand-history { display: grid; gap: 7px; max-height: 260px; overflow-y: auto; }
.hand-history .hh-row { border-bottom: 1px solid #26303f; padding-bottom: 6px; }
.hand-history .hh-row:last-child { border-bottom: none; padding-bottom: 0; }
.hh-win { color: #9fd8b4; font-weight: 800; }
.hh-loss { color: #ff9d94; font-weight: 800; }

.featured-cam, .lower-third { pointer-events: none; }
/* Star Cam: the acting player fills most of the stage; table becomes inset. */
.stage[data-camera="star"] .featured-cam {
  left: 12px; top: 56px; width: min(56%, 620px);
  border-color: #ffc53d; box-shadow: 0 22px 50px rgba(0,0,0,0.65);
}
.stage[data-camera="star"] .featured-cam .featured-media { aspect-ratio: 16 / 10; }
.stage[data-camera="star"] .featured-meta strong { font-size: 19px; }
.stage[data-camera="star"] .featured-meta span { font-size: 13.5px; }
.stage[data-camera="star"] .lower-third { display: none; }
@media (max-width: 720px) {
  .stage[data-camera="star"] .featured-cam {
    display: block; left: 8px; right: 8px; width: auto; top: 50px;
  }
  .logo-img { width: 40px; height: 40px; }
}

/* ================= V4: No Folds Given broadcast room ================= */
.home-view { max-width: 1200px; padding: 20px 24px 34px; }
.home-nav { justify-content: space-between; font-family: "Inter", sans-serif; }
.home-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 20px; letter-spacing: -0.03em; }
.home-join-link { flex: none; }
.hero-grid { display: grid; grid-template-columns: minmax(300px, 0.88fr) minmax(500px, 1.12fr); gap: 38px; align-items: center; margin-top: 42px; }
.home-eyebrow { color: var(--brass); font-size: 12px; letter-spacing: 0.16em; }
.home-copy h1 { font-size: clamp(44px, 5.4vw, 72px); line-height: 0.98; font-weight: 900; margin: 14px 0 18px; }
.home-lede { color: #d7dde6; font-size: 18px; line-height: 1.55; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-cta { width: auto; margin: 0; padding: 0 24px; }
.hero-secondary { min-height: 50px; padding: 0 22px; }
.hero-support { color: var(--ink-soft); font-weight: 700; font-size: 13px; margin: 15px 0 0; }
.return-table { margin-top: 16px; }
.prototype-note { margin-top: 22px; max-width: 520px; color: var(--ink-dim); font-size: 13px; line-height: 1.55; border-left: 3px solid var(--brass); padding-left: 12px; }
.prototype-note strong { color: var(--ink); }
.cta-btn, .deal-btn, .deal-stage-btn { background: linear-gradient(180deg, #ff7a6d, var(--brass-deep)); color: #fff8f2; border-color: #a93c35; }
.ghost-btn, .text-btn, .icon-btn { background: #1b2230; border-color: #354158; }
.ghost-btn:hover, .text-btn:hover, .icon-btn:hover { border-color: #64748e; }
.hero-preview { min-width: 0; }
.preview-head { display: flex; justify-content: space-between; gap: 14px; align-items: end; margin-bottom: 10px; }
.preview-head div { display: grid; gap: 2px; }
.preview-kicker { color: var(--brass); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 900; }
.preview-private, .private-pill { display: inline-flex; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800; color: #cfeee9; background: rgba(23,107,98,0.28); }
.preview-stage { position: relative; aspect-ratio: 16/10.2; min-height: 430px; overflow: hidden; border-radius: 26px; border: 1px solid #344158; background: radial-gradient(520px 300px at 50% 32%, rgba(93,170,210,0.2), transparent 70%), radial-gradient(420px 240px at 8% 0%, rgba(255,107,94,0.13), transparent 70%), linear-gradient(180deg, #182635, #0d1219 72%); box-shadow: 0 28px 70px rgba(0,0,0,0.45); }
.preview-backdrop { position: absolute; inset: 0; pointer-events: none; }
.preview-backdrop span { position: absolute; top: 6%; width: 27%; padding: 20px 8px; text-align: center; border: 1px solid rgba(150,190,235,0.14); border-radius: 10px; background: linear-gradient(160deg, rgba(38,64,98,0.36), rgba(10,16,25,0.6)); color: rgba(205,228,250,0.52); font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: 0.08em; font-size: clamp(10px, 1.3vw, 16px); }
.preview-backdrop span:first-child { left: 18%; } .preview-backdrop span:last-child { right: 18%; }
.preview-world { position: absolute; inset: 0; transition: transform 800ms cubic-bezier(.22,.8,.24,1); }
.preview-stage[data-preview-shot="player"] .preview-world { transform: translate(17%, 8%) scale(.78); }
.preview-stage[data-preview-shot="auto"] .preview-world { transform: translate(4%, 2%) scale(.94); }
.preview-table { position: absolute; left: 50%; top: 52%; width: 68%; height: 55%; transform: translate(-50%,-50%) rotateX(10deg); border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, var(--felt-hi), var(--felt) 56%, var(--felt-lo)); border: 16px solid #15181e; box-shadow: inset 0 2px 0 rgba(255,255,255,.16), inset 0 -22px 32px rgba(0,0,0,.38), 0 28px 42px rgba(0,0,0,.5); }
.preview-table::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.preview-felt-word { position: absolute; left: 50%; top: 69%; transform: translateX(-50%); color: rgba(245,242,235,.14); font-weight: 900; letter-spacing: .28em; white-space: nowrap; font-size: clamp(9px,1.2vw,14px); }
.preview-pot { position: absolute; left: 50%; top: 27%; transform: translateX(-50%); display: inline-flex; gap: 7px; align-items: center; background: rgba(8,12,17,.82); border: 1px solid rgba(255,255,255,.18); color: #fff1d7; border-radius: 999px; padding: 5px 12px; font-weight: 900; font-size: 13px; }
.preview-pot i { width: 13px; height: 13px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.8); margin-left: -7px; background: #23272f; }
.preview-pot i:first-child { margin-left: 0; } .preview-pot i:nth-child(2) { background: #b23a38; } .preview-pot i:nth-child(3) { background: #b8862e; }
.preview-board { position: absolute; left: 50%; top: 43%; transform: translateX(-50%); display: flex; gap: 6px; }
.preview-board b { width: 42px; height: 59px; border-radius: 7px; background: #fffdf6; color: #20242a; padding: 5px; box-shadow: 0 6px 14px rgba(0,0,0,.35); font-size: 15px; }
.preview-board b.red { color: #b3261e; }
.preview-seats { position: absolute; inset: 0; }
.preview-seat { position: absolute; width: 132px; transform: translate(-50%,-50%); }
.preview-seat-media { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 15px; border: 2px solid rgba(255,255,255,.18); box-shadow: 0 12px 24px rgba(0,0,0,.45); background: #26303f; }
.preview-seat-media svg { width: 100%; height: 100%; display: block; }
.preview-photo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 34%; }
.preview-seat.is-active .preview-seat-media { border-color: var(--brass); box-shadow: 0 0 0 4px rgba(255,107,94,.22), 0 0 34px rgba(255,107,94,.32), 0 14px 26px rgba(0,0,0,.5); }
.preview-seat-meta { margin-top: 5px; text-align: center; font-size: 12px; font-weight: 900; text-shadow: 0 2px 5px #000; }
.preview-seat-meta span { display: block; color: #d8efe9; font-size: 11px; }
.preview-cards { display: flex; justify-content: center; gap: 3px; margin-top: 3px; }
.preview-cards i { width: 25px; height: 35px; border-radius: 4px; background: url("./chip.svg") center / 56% no-repeat, radial-gradient(120% 90% at 50% 18%, #232d42, #0d1119); border: 1px solid #0a0e15; box-shadow: inset 0 0 0 1px rgba(255,107,94,.5); }
.preview-cards i.face { background: #fffdf6; color: #20242a; font-style: normal; font-size: 10px; font-weight: 900; padding: 2px; }
.preview-featured { position: absolute; left: 14px; top: 54px; width: 196px; z-index: 5; background: rgba(13,18,27,.96); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 9px; box-shadow: 0 20px 44px rgba(0,0,0,.55); transition: all 500ms ease; }
.preview-featured > span { color: var(--brass); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.preview-featured-avatar { aspect-ratio: 16/10; overflow: hidden; border-radius: 10px; margin: 6px 0; }
.preview-featured-avatar svg { width: 100%; height: 100%; }
.preview-featured strong, .preview-featured small { display: block; }
.preview-featured small { color: #ffd9d4; margin-top: 2px; }
.preview-quote { display: inline-block; margin-top: 7px; padding: 5px 8px; border-radius: 999px; background: #f5f2eb; color: #171b22; font-size: 11px; font-style: normal; font-weight: 900; }
.preview-stage[data-preview-shot="table"] .preview-featured { opacity: 0; transform: translateX(-16px); pointer-events: none; }
.preview-stage[data-preview-shot="player"] .preview-featured { width: min(48%, 330px); top: 42px; }
.preview-lower { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: flex; gap: 10px; align-items: baseline; border-left: 3px solid var(--brass); background: linear-gradient(90deg, rgba(8,11,16,.94), rgba(8,11,16,.35)); padding: 7px 22px 7px 11px; }
.preview-lower strong { font-size: 18px; } .preview-lower span { color: #ffd9d4; font-weight: 700; font-size: 12px; }
.preview-stage[data-preview-shot="player"] .preview-lower { display: none; }
.preview-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.preview-controls button { border: 1px solid #354158; background: #1b2230; color: var(--ink); border-radius: 999px; padding: 8px 13px; font-weight: 800; cursor: pointer; }
.preview-controls button.is-active { background: var(--brass); color: #fff8f2; border-color: var(--brass); }
.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 34px; }
.benefit-grid article { background: rgba(27,34,48,.72); border: 1px solid #303a4d; border-radius: 18px; padding: 20px; }
.benefit-grid h2 { font-size: 18px; margin-bottom: 7px; }
.benefit-grid p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.home-footer { display: flex; justify-content: space-between; align-items: start; gap: 14px 22px; flex-wrap: wrap; border-top: 1px solid #2c3648; margin-top: 34px; padding-top: 22px; color: var(--ink-soft); font-size: 13px; }
.home-footer div { display: grid; gap: 3px; } .home-footer strong { color: var(--ink); font-size: 16px; }
.home-footer p { margin: 0; } .home-footer a { color: #8fe0d4; font-weight: 700; }
.home-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.home-socials a { border: 1px solid #354158; background: #151c29; color: var(--ink); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 800; text-decoration: none; }
.home-socials a:hover { border-color: var(--brass); color: #fff8f2; }
.home-legal-links { flex-basis: 100%; color: var(--ink-dim); }
.home-legal-links a { color: var(--ink-soft); }
.faq { margin-top: 40px; max-width: 820px; }
.faq h2 { font-size: 24px; margin-bottom: 14px; }
.faq details { border: 1px solid #303a4d; background: rgba(27,34,48,.72); border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 15.5px; }
.faq details p { color: var(--ink-soft); line-height: 1.6; margin: 10px 0 2px; }
.rebuy-controls { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rebuy-controls[hidden] { display: none; }
.rebuy-amount input { width: 104px; background: #111722; border: 1px solid #3a475f; color: var(--ink); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Standalone legal pages (terms.html / privacy.html) */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 26px 20px 60px; }
.legal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.legal-head a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 18px; }
.legal-head .logo-img { width: 34px; height: 34px; }
.legal-wrap h1 { font-size: 34px; margin: 18px 0 6px; }
.legal-updated { color: var(--ink-dim); font-size: 13px; margin: 0 0 22px; }
.legal-wrap h2 { font-size: 18px; margin: 26px 0 8px; }
.legal-wrap p, .legal-wrap li { color: var(--ink-soft); line-height: 1.65; font-size: 14.5px; }
.legal-wrap ul { padding-left: 20px; display: grid; gap: 4px; }
.legal-wrap a { color: #8fe0d4; font-weight: 700; }
.legal-foot { border-top: 1px solid #2c3648; margin-top: 38px; padding-top: 18px; color: var(--ink-dim); font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; }
.entry-dialog { width: min(560px, calc(100vw - 28px)); max-height: min(92dvh, 880px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.entry-dialog::backdrop { background: rgba(5,8,12,.72); backdrop-filter: blur(8px); }
.dialog-card { display: grid; gap: 14px; max-height: min(92dvh, 880px); overflow-y: auto; background: linear-gradient(180deg, #20293a, #151b27); border: 1px solid #3a475f; border-radius: 22px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.dialog-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.dialog-head h2 { font-size: 27px; margin: 0 0 5px; }
.dialog-head p, .dialog-note { color: var(--ink-soft); margin: 0; line-height: 1.5; }
.dialog-note { font-size: 12.5px; }
.field-help { color: var(--ink-dim); font-weight: 500; line-height: 1.4; }
.mode-choice { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.mode-choice legend { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; }
.mode-choice label { display: flex; gap: 10px; align-items: start; border: 1px solid #354158; background: #111722; border-radius: 14px; padding: 12px; cursor: pointer; }
.mode-choice label:has(input:checked) { border-color: var(--brass); background: rgba(255,107,94,.1); }
.mode-choice input { margin-top: 3px; accent-color: var(--brass); }
.mode-choice span { display: grid; gap: 2px; } .mode-choice small { color: var(--ink-soft); line-height: 1.4; }
.settings-details { border: 1px solid #354158; border-radius: 14px; padding: 12px; background: #111722; display: grid; gap: 10px; }
.settings-details summary { cursor: pointer; display: flex; justify-content: space-between; gap: 12px; font-weight: 900; }
.settings-details summary span:last-child { color: var(--ink-soft); font-weight: 600; text-align: right; }
.settings-details:not([open]) > :not(summary) { display: none; }
.topbar { max-width: 1460px; }
.brand h1 { font-size: 23px; font-weight: 900; }
.brand p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.private-pill { padding: 2px 8px; }
.notice { max-width: 1460px; }
.notice strong { color: #ffb2aa; }
#table-view .layout { max-width: 1460px; }
.stage { background: radial-gradient(720px 400px at 50% 36%, rgba(255,219,170,.09), transparent 65%), radial-gradient(520px 320px at 8% 0%, rgba(64,110,170,.22), transparent 70%), radial-gradient(520px 320px at 92% 0%, rgba(255,107,94,.1), transparent 70%), linear-gradient(180deg, #182635, #10161f 54%, #0a0e14); border-color: #334158; }
.table-felt { border-color: rgba(180,255,240,.22); box-shadow: inset 0 2px 0 rgba(255,255,255,.13), inset 0 -18px 30px rgba(0,0,0,.38), inset 0 0 0 6px rgba(4,42,39,.4); }
.felt-word { font-family: "Inter", sans-serif; font-weight: 900; }
.pot-pill { background: #102d2a; color: #d8fff7; border-color: #2f8a7d; }
.bet-pill { border-color: rgba(255,255,255,.22); color: #fff1d7; }
.seat { filter: drop-shadow(0 12px 12px rgba(0,0,0,.28)); }
.seat .cam-tile { aspect-ratio: 16/10; border-radius: 17px; border-color: rgba(255,255,255,.18); box-shadow: 0 14px 26px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.14); }
.cam-tile::after { content: ""; position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.28)); pointer-events: none; }
.cam-tile video, .featured-media video { transform: scale(var(--cam-scale)); transform-origin: center; }
.cam-tile video.is-local-video, .featured-media video.is-local-video { transform: scaleX(-1) scale(var(--cam-scale)); }
.media-join-btn { border-color: #5a918b; }
.media-unlock-btn { background: var(--coral); color: #fff; font-weight: 800; }
.cam-name .sim-tag { color: #ffd9d4; }
.seat-meta { background: rgba(8,12,17,.58); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(5px); }
.seat.is-turn .cam-tile { border-color: var(--brass); box-shadow: 0 0 0 4px rgba(255,107,94,.22), 0 0 34px 8px rgba(255,107,94,.24), 0 12px 24px rgba(0,0,0,.5); }
.seat.is-winner .cam-tile { border-color: #9fe8dd; box-shadow: 0 0 0 4px rgba(159,232,221,.28), 0 0 36px 10px rgba(159,232,221,.24); }
.empty-seat { cursor: default; opacity: .78; }
.empty-seat .cam-tile { display: grid; place-items: center; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), #202939; border-style: dashed; }
.empty-seat-icon { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: var(--ink-soft); font-size: 25px; }
.empty-seat .seat-meta { color: var(--ink-soft); }
.waiting-room { position: absolute; left: 14px; top: 58px; z-index: 12; width: min(350px, calc(100% - 28px)); background: rgba(13,18,27,.94); border: 1px solid #3c4a63; border-radius: 18px; padding: 16px; box-shadow: 0 20px 48px rgba(0,0,0,.55); }
.waiting-kicker { color: var(--brass); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.waiting-room h2 { font-size: 22px; margin: 4px 0 6px; }
.waiting-room p { color: var(--ink-soft); margin: 7px 0; line-height: 1.45; font-size: 13px; }
.waiting-code-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 11px; }
.waiting-code-row strong { letter-spacing: .16em; color: #fff1d7; }
.waiting-occupancy { color: #d8fff7 !important; font-weight: 800; }
.camera-status { color: #d8fff7; font-size: 11px; font-weight: 800; padding: 0 7px; white-space: nowrap; }
.camera-bar button.is-active { background: var(--brass); color: #fff8f2; }
.featured-label { color: var(--brass); }
.featured-meta span { color: #ffd9d4; }
.lower-third strong { font-family: "Inter", sans-serif; }
.lower-third span { color: #ffd9d4; }
.stage[data-shot="wide"] .featured-cam, .stage[data-shot="rail"] .featured-cam, .stage[data-shot="top"] .featured-cam { display: none !important; }
.stage[data-shot="player"] .featured-cam { left: auto; right: 14px; top: 58px; width: 250px; }
.stage[data-camera="player"][data-shot="player"] .featured-cam { left: 14px; right: auto; top: 58px; width: min(46%, 560px); border-color: var(--brass); }
.stage[data-camera="player"][data-shot="player"] .featured-media { aspect-ratio: 16/10; }
.stage[data-camera="player"][data-shot="player"] .lower-third { display: none; }
.stage[data-shot="showdown"] .featured-cam { left: auto; right: 14px; top: 58px; width: 290px; border-color: #64c8ba; }
.stage[data-shot="showdown"] .seat.is-winner { z-index: 7; }
.stage[data-shot="top"] .dealer, .stage[data-shot="top"] .studio-sign { display: none; }
.stage[data-shot="top"] .table { transform: translate(-50%,-50%) rotateX(0deg) scale(1.08); }
.stage[data-shot="top"] .seat { --tile-w: 118px; }
.stage[data-shot="top"] .board { transform: translate(-50%,-50%) scale(1.08); }
.stage[data-shot="rail"] .table { transform: translate(-50%,-42%) rotateX(22deg) scale(1.16); }
.stage[data-shot="rail"] .board { transform: translate(-50%,-34%) scale(.96); }
.stage[data-shot="rail"] .dealer { top: 27%; width: 82px; opacity: .92; }
.stage[data-shot="rail"] .seat-0 { transform: translate(-50%,-66%) scale(.86); opacity: .96; z-index: 6; }
.stage[data-shot="rail"] .seat-1, .stage[data-shot="rail"] .seat-5 { transform: translate(-50%,-52%) scale(.94); }
.stage[data-shot="rail"] .seat-2, .stage[data-shot="rail"] .seat-3, .stage[data-shot="rail"] .seat-4 { transform: translate(-50%,-44%) scale(1.06); }
.stage[data-shot="rail"] .seat-0 .hole { transform: scale(1.02); }
.rail-foreground { position: absolute; left: -4%; right: -4%; bottom: -48px; height: 96px; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(24px); transition: all 600ms ease; background: linear-gradient(180deg, rgba(32,38,48,.12), #11151c 62%); border-top: 10px solid #242a34; border-radius: 50% 50% 0 0; box-shadow: 0 -18px 34px rgba(0,0,0,.35); }
.rail-foreground span { position: absolute; bottom: 34px; width: 34px; height: 34px; border-radius: 50%; border: 4px dashed rgba(255,255,255,.75); background: #176b62; box-shadow: 0 5px 8px rgba(0,0,0,.45); }
.rail-foreground span:nth-child(1) { left: 18%; } .rail-foreground span:nth-child(2) { left: 22%; background: #b23a38; } .rail-foreground span:nth-child(3) { right: 17%; background: #b8862e; }
.stage[data-shot="rail"] .rail-foreground { opacity: 1; transform: translateY(0); }
.stage[data-variant="omaha"] { --felt-hi: #257b76; --felt: #17615e; --felt-lo: #0b423f; }
.stage[data-variant="omaha5"] { --felt-hi: #27776b; --felt: #195f55; --felt-lo: #0c4039; }
.stage[data-variant="shortdeck"] { --felt-hi: #20766b; --felt: #14594f; --felt-lo: #083831; }
.controls { border-top-color: var(--brass-deep); }
.action-btn.is-raise { background: linear-gradient(180deg, #ff7a6d, var(--raise)); }
.drawer-sub { font-family: "Inter", sans-serif; }
.word-pop { color: #ffc53d; }
.appearance-panel { display: grid; gap: 12px; }
.look-preview { aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; border: 1px solid #3a475f; background: #20293a; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.look-preview svg { width: 100%; height: 100%; display: block; }
.look-mode-choice { margin-top: 2px; }
.look-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.look-tabs button { border: 1px solid #354158; background: #111722; color: var(--ink-soft); border-radius: 999px; padding: 7px 10px; cursor: pointer; font-size: 12px; font-weight: 800; }
.look-tabs button.is-active { background: var(--brass); color: #fff8f2; border-color: var(--brass); }
.look-pane { display: grid; gap: 9px; }
.look-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.look-actions .ghost-btn { flex: 1; justify-content: center; }
.compact-mode { margin: 10px 0; }
.roster .r-empty { color: var(--ink-dim); font-size: 11px; font-weight: 700; }
.roster li.is-empty { opacity: .62; border-style: dashed; }
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; margin-top: 30px; }
  .home-copy { max-width: 680px; }
  .benefit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .home-view { padding: 14px 12px 24px; }
  .home-brand { font-size: 18px; }
  .home-join-link { padding: 7px 10px; }
  .hero-grid { gap: 24px; }
  .home-copy h1 { font-size: 43px; }
  .home-lede { font-size: 16px; }
  .hero-actions .cta-btn, .hero-actions .ghost-btn { width: 100%; justify-content: center; }
  .preview-stage { min-height: 390px; aspect-ratio: 4/4.4; border-radius: 20px; }
  .preview-table { width: 88%; height: 48%; top: 52%; }
  .preview-seat { width: 96px; }
  .preview-board b { width: 31px; height: 44px; font-size: 11px; }
  .preview-featured { width: 156px; top: 42px; }
  .preview-stage[data-preview-shot="player"] .preview-featured { width: calc(100% - 20px); left: 10px; }
  .preview-lower { max-width: calc(100% - 20px); }
  .benefit-grid article { padding: 16px; }
  .dialog-card { padding: 17px; border-radius: 18px; }
  .waiting-room { top: 52px; max-height: calc(100% - 66px); overflow-y: auto; }
  .stage[data-camera="player"][data-shot="player"] .featured-cam { display: block; left: 8px; right: 8px; width: auto; top: 50px; }
  .stage[data-shot="showdown"] .featured-cam { display: block; left: auto; right: 8px; width: 190px; top: 50px; }
  .camera-status { display: none; }
  .seat-meta { padding: 3px 6px; }
  .topbar { gap: 8px; }
  .brand { gap: 9px; }
  .brand h1 { font-size: 20px; }
  .brand p { font-size: 11px; }
  .topbar-actions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions > button { flex: none; }
  .notice { font-size: 12px; line-height: 1.4; }
  .toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
  .controls { position: static; }
  .reaction-bar { flex-wrap: wrap; }
  .reaction-label { width: 100%; }
  .phrase-row { order: 2; flex-basis: 100%; }
  .emoji-row { order: 1; margin-left: auto; }
  .speech-bubble { max-width: 150px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-world, .preview-featured, .rail-foreground { transition-duration: .01ms !important; }
}





/* Coach checkbox + gender choice in look/settings forms */
.check-field .check-row { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.check-field input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--brass); flex: none; }
.look-gender-choice { margin: 10px 0; }

/* The table and its action rail share one viewport. Secondary controls open
   deliberately above the rail, so they never push a live decision offscreen. */
#table-view {
  height: 100dvh; min-height: 540px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
#table-view .topbar { width: 100%; max-width: 1460px; padding: 8px 20px 4px; gap: 12px; }
#table-view .brand { gap: 9px; }
#table-view .brand .logo-img { width: 38px; height: 38px; border-radius: 10px; }
#table-view .brand h1 { font-size: 20px; white-space: nowrap; }
#table-view .brand p { margin-top: 2px; font-size: 10.5px; gap: 4px; }
#table-view .topbar-actions { min-width: 0; gap: 5px; }
#table-view .topbar-actions button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
#table-view .notice { width: 100%; margin: 0 auto; padding: 3px 20px 5px; font-size: 11px; gap: 6px; }
#table-view .layout { width: 100%; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; padding: 0 20px max(4px, env(safe-area-inset-bottom)); }
#table-view .stage-wrap { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
#table-view .stage { height: auto; min-height: 0; aspect-ratio: auto; border-radius: 20px 20px 0 0; }
#table-view .seats { inset: 32px 0 32px; }
#table-view .seat:not(.seat-0) { gap: 3px; }
#table-view .seat:not(.seat-0) .hole .card { --card-w: 32px; }
#table-view .seat .stack-chips { display: none; }
#table-view .seat .stack-player-name { display: none; }
#table-view .seat .seat-stack { white-space: nowrap; }
#table-view .seat .seat-meta { padding: 3px 8px; }
#table-view .table-tools-hint { display: none; }
#table-view .table { width: 72%; height: 62%; }
#table-view .controls { position: relative; margin: 0; padding: 0; border-radius: 0 0 14px 14px; border-top: 1px solid #4b5a70; box-shadow: none; }
.controls-row.action-dock {
  position: relative; width: 100%;
  display: grid; flex-wrap: nowrap;
  grid-template-columns: minmax(104px, 1fr) minmax(104px, 1fr) minmax(270px, 1.6fr) minmax(104px, 1fr);
  grid-template-areas: "status status status status" "fold call box raise" "timing timing timing timing";
  gap: 5px 10px; align-items: stretch; padding: 7px 12px 6px;
}
.action-dock .dock-status { grid-area: status; min-height: 18px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-dock #btn-fold { grid-area: fold; }
.action-dock #btn-call { grid-area: call; }
.action-dock .raise-box { grid-area: box; flex: none; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 10px; padding: 5px 8px; }
.action-dock .raise-quick { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.action-dock .raise-quick button { min-height: 26px; padding: 2px 6px; font-size: 11px; }
.action-dock .raise-slider-label { gap: 7px; align-items: center; font-size: 11px; white-space: nowrap; }
.action-dock input[type="range"] { min-width: 0; height: 26px; min-height: 26px; margin: 0; }
.action-dock #btn-raise { grid-area: raise; }
.action-dock .action-btn { width: 100%; min-height: 54px; }
.action-dock .controls-status { grid-area: timing; margin: 0; gap: 4px; }
.action-dock .turn-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.action-dock .coach-line { font-size: 11px; line-height: 1.35; }
.action-dock .turn-track { height: 3px; }
.controls-row.action-dock.is-observing { display: block; }
.action-dock.is-observing > :not(.entry-controls) { display: none; }
.action-dock .entry-controls { margin: 0; border: 0; border-radius: 8px; padding: 6px; background: transparent; }
.action-dock .entry-buttons { display: grid; grid-template-columns: 1fr 1fr; }
.action-dock .entry-buttons button { min-width: 0; min-height: 46px; white-space: normal; }
.action-dock .entry-controls p { line-height: 1.4; }
.table-extras { min-width: 0; }
.table-extras > summary { width: fit-content; margin: 0 auto; padding: 5px 14px; font-size: 11px; font-weight: 700; color: var(--ink-soft); cursor: pointer; border-radius: 0 0 10px 10px; }
.table-extras > summary:hover, .table-extras[open] > summary { color: var(--ink); background: #263245; }
.table-extras-body { position: absolute; z-index: 35; right: 0; bottom: calc(100% + 8px); width: min(100%, 740px); max-height: min(58dvh, 540px); overflow: auto; padding: 14px; border: 1px solid #53637b; border-radius: 16px; background: #17202e; box-shadow: 0 -18px 55px #0008; }
.table-extras[open] { z-index: 36; }
.table-extras .controls-hint { flex-basis: 100%; }
.table-extras .reaction-bar { flex-wrap: wrap; }
.table-extras .phrase-row { flex-basis: 100%; }
.table-extras .chat-panel { margin-top: 12px; }
.invite-entry-form { display: grid; gap: 16px; margin-top: 22px; }
.invite-entry-form .field { gap: 7px; }
.invite-entry-form .field input { min-height: 48px; font-size: 16px; }
.invite-entry-form input[readonly] { color: #c9d4e4; border-style: dashed; background: #1a2432; }
.entry-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.invite-entry-card .entry-profile-note { margin: 14px 0 0; font-size: 13px; color: #a7e1d5; }
.invite-entry-card .entry-buyin-policy { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.invite-entry-card .form-error { color: #ffaaa2; }
.invite-entry-form .cta-btn { margin: 0; }
.entry-signin { margin-top: 22px; border-top: 1px solid #354052; padding-top: 14px; font-size: 13px; }
.entry-signin summary { cursor: pointer; color: var(--ink-soft); }
.entry-signin .field { margin-top: 14px; }
.entry-signin .ghost-btn { margin-top: 10px; }
.home-account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.home-account-actions .ghost-btn { min-height: 42px; }
.account-entry-link { margin: 0 0 12px; text-align: left; color: var(--accent, #a7e1d5); }
.account-dialog .dialog-card { display: grid; gap: 12px; }
.account-dialog .media-status { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.account-dialog .panel-note { margin: 0; line-height: 1.5; }
.account-dialog .wide { min-height: 48px; width: 100%; }
@media (max-width: 520px) {
  .home-nav { flex-wrap: wrap; gap: 12px; }
  .home-account-actions { width: 100%; justify-content: stretch; }
  .home-account-actions button { flex: 1; font-size: 12px; padding: 8px; }
}
.buyin-range-fields { padding: 10px; border: 1px solid #354052; border-radius: 10px; background: #121b27; }
@media (min-width: 721px) and (max-width: 1200px) {
  #table-view .topbar { flex-wrap: wrap; gap: 4px; }
  #table-view .brand p { display: none; }
  #table-view .brand h1 { font-size: 17px; }
  #table-view .brand .logo-img { width: 30px; height: 30px; }
  #table-view .topbar-actions { flex: 1; }
  #table-view .topbar-actions button { padding: 6px 8px; font-size: 11px; }
}
@media (max-width: 720px) {
  #table-view { min-height: 600px; }
  #table-view .topbar { padding: 5px 8px 2px; gap: 5px; }
  #table-view .brand { gap: 7px; }
  #table-view .brand { width: 100%; }
  #table-view .table-tools-hint { display: block; margin-left: auto; color: var(--ink-dim); font-size: 9px; white-space: nowrap; }
  #table-view .brand .logo-img { width: 28px; height: 28px; border-radius: 7px; }
  #table-view .brand h1 { font-size: 16px; }
  #table-view .brand p { display: none; }
  #table-view .topbar-actions { width: 100%; padding: 0 0 2px; gap: 5px; }
  #table-view .topbar-actions button { min-height: 34px; padding: 5px 9px; font-size: 11px; }
  #table-view .notice { font-size: 10px; line-height: 1.35; padding: 2px 8px 5px; }
  #table-view .notice #notice-text { display: none; }
  #table-view .layout { padding-left: 6px; padding-right: 6px; }
  #table-view .stage { --tile-w: 92px; border-radius: 14px 14px 0 0; }
  #table-view .stage[data-players="2"], #table-view .stage[data-players="3"] { --tile-w: 112px; }
  #table-view .stage[data-players="8"] { --tile-w: 80px; }
  #table-view .stage[data-players="9"] { --tile-w: 74px; }
  #table-view .seats { inset: 30px 0 22px; }
  #table-view .seat:not(.seat-0) .hole .card { --card-w: 28px; }
  #table-view .seat:not(.seat-0) .hole { transform: none; gap: 2px; }
  #table-view .seat .stack-chips { display: none; }
  #table-view .seat .stack-player-name { display: none; }
  #table-view .seat .seat-meta { max-width: 100%; padding: 3px 5px; border-radius: 9px; }
  #table-view .seat .seat-stack { font-size: 11px; }
  #table-view .seat .seat-action { font-size: 9px; min-height: 11px; line-height: 1.2; }
  #table-view .stage:is([data-players="8"], [data-players="9"]) .seat:not(.seat-0) { gap: 3px; }
  #table-view .stage:is([data-players="8"], [data-players="9"]) .seat:not(.seat-0) .hole .card { --card-w: 24px; }
  #table-view .stage:is([data-players="8"], [data-players="9"]) .seat:not(.seat-0) .cam-off-note { display: none; }
  #table-view .table { width: 92%; height: 60%; }
  #table-view .camera-bar { left: 6px; top: 6px; gap: 1px; padding: 2px; }
  #table-view .camera-bar button { min-height: 28px; padding: 4px 7px; font-size: 10px; }
  #table-view .camera-status { display: none; }
  #table-view .waiting-room { left: 8px; top: 45px; width: min(330px, calc(100% - 16px)); padding: 12px; }
  #table-view .waiting-room h2 { font-size: 20px; }
  #table-view .waiting-room p { font-size: 12px; margin: 6px 0; }
  #table-view .waiting-room .cta-btn { min-height: 44px; }
  .controls-row.action-dock {
    padding: 6px 7px 5px; gap: 4px 6px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "status status status" "fold call raise" "box box box" "timing timing timing";
  }
  .action-dock .action-btn { min-height: 44px; padding: 8px 6px; font-size: 13px; }
  .action-dock .dock-status { font-size: 11px; min-height: 16px; }
  .action-dock .raise-box { padding: 3px 6px; gap: 0 8px; }
  .action-dock .raise-quick { gap: 6px; }
  .action-dock .raise-quick button { min-height: 25px; }
  .action-dock .coach-line { font-size: 10px; }
  .action-dock .entry-controls { padding: 2px; }
  .action-dock .entry-controls p { margin: 0 0 6px; font-size: 12px; }
  .action-dock .entry-buttons { gap: 7px; }
  .action-dock .entry-buttons button { min-height: 44px; padding: 6px 9px; font-size: 12px; }
  .table-extras-body { max-height: 58dvh; padding: 10px; }
  .invite-entry { padding: 16px; }
  .invite-entry-card { padding: 24px; }
  .entry-field-row { grid-template-columns: 1fr; }
}
/* At high browser zoom or in a short landscape window, keep readable cards
   and let the whole table scroll instead of clipping seats or controls. */
@media (max-height: 650px) {
  #table-view { min-height: 740px; }
}