:root {
  --bg: #070b14;
  --felt: #0f4a32;
  --felt-edge: #5c3a1e;
  --card: #121a2a;
  --red: #e11d2e;
  --green: #16a34a;
  --orange: #ea580c;
  --line: #2a3550;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --gold: #fde68a;
  --neon-c: #22d3ee;
  --neon-p: #a855f7;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
.hidden { display: none !important; }

/* ── Lobby ── */
/* Welcome / name screen — fixed look (NOT game table themes) */
.lobby {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(ellipse at 30% 20%, #7c3aed55, transparent 50%),
    radial-gradient(ellipse at 70% 80%, #0891b255, transparent 45%),
    radial-gradient(ellipse at 50% 80%, #0f172a, #050814 70%),
    var(--bg);
}
.lobby-card {
  width: min(400px, 100%);
  padding: 28px 22px;
  background: #0c1220ee;
  border: 1px solid #3b4568;
  border-radius: 20px;
  box-shadow: 0 20px 60px #000a, 0 0 40px #7c3aed33;
  text-align: center;
}
/* Sign-in card: a bit more space above the pic */
#lobby .lobby-card {
  padding-top: 22px;
  padding-bottom: 20px;
}
/*
 * Banner is wide (not square). Forcing aspect-ratio:1 left huge empty
 * bands above/below — keep natural aspect, full card width, tight gaps.
 */
.lobby-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  margin: 0 auto 3px; /* half of prior 6px under pic → title */
  filter: drop-shadow(0 0 12px #22d3ee88);
  vertical-align: middle;
}
.lobby-card h1 {
  margin: 0;
  letter-spacing: 0.14em;
  font-size: 1.5rem;
  font-weight: 900;
}
#lobby .lobby-card h1 {
  margin-top: 0;
  margin-bottom: 0;
}
#lobby .lobby-card .hint {
  margin-top: 6px;
}
.lobby-card h1 span { color: var(--red); }
.tag {
  color: #fbbf24;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin: 8px 0 4px;
  text-shadow: 0 0 12px #f59e0b88;
}
.hint { color: var(--muted); font-size: 0.9rem; margin: 0 0 18px; }
label {
  display: block;
  text-align: left;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 12px;
}
input[type="text"], input:not([type]), input[type="file"], select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0a0f18;
  color: var(--text);
  font-size: 1rem;
}
select {
  cursor: pointer;
  appearance: auto;
}
.avatar-preview {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #1a2233 center/cover;
  margin: 0 auto 14px;
  border: 2px solid var(--neon-c);
  box-shadow: 0 0 16px #22d3ee55;
}
.btn {
  border: none;
  background: #243044;
  color: var(--text);
  font-weight: 800;
  padding: 14px 18px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.btn.primary {
  width: 100%;
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  box-shadow: 0 6px 20px #ef444455;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.meta { color: var(--muted); font-size: 0.85rem; margin-top: 14px; }

/* ── Table view ── */
#tableView {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
}
/* Desktop: a bit more width, more table room */
@media (min-width: 768px) {
  #tableView {
    max-width: 560px;
  }
  #tableView.layout-zinu-1,
  #tableView.layout-zinu-2,
  #tableView.layout-zinu-3,
  #tableView.layout-zinu-4 {
    max-width: 640px;
  }
  #tableView.layout-zinu-5 {
    max-width: 480px;
  }
}

.top-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  /* Phone default: slightly roomier header */
  padding: 10px 14px;
  min-height: 3.1rem;
  background: linear-gradient(180deg, #121820, #0a0e14);
  border-bottom: 1px solid #222a3a;
  z-index: 5;
  position: relative;
  flex-shrink: 0;
}
/* Compact mic — top left of header border */
.btn-mic {
  justify-self: start;
  border: 1px solid #3a4558;
  background: #1a2230;
  color: #94a3b8;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 56px;
  line-height: 1;
}
.btn-mic.mic-on {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 0 12px #ef444466;
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.mini-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand {
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.brand em { font-style: normal; color: var(--muted); font-weight: 600; }
.top-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stack-hud {
  background: #1a2230;
  border: 1px solid #3a4558;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  /* Not a control — stop phones selecting text / opening Google search */
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  cursor: default;
  -webkit-touch-callout: none;
}
.stack-hud.spec {
  color: #22d3ee;
  border-color: #0e7490;
}
/* Tiny leave — top right, out of the way */
.btn-leave {
  border: 1px solid #3a455888;
  background: transparent;
  color: #64748b;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.85;
}
/* Desktop: smaller header so table gets more height */
@media (min-width: 768px) {
  .top-bar {
    padding: 5px 12px;
    min-height: 2.4rem;
    gap: 6px;
  }
  .btn-mic {
    font-size: 0.62rem;
    padding: 4px 8px;
    min-width: 48px;
  }
  .mini-logo {
    width: 24px;
    height: 24px;
  }
  .brand {
    font-size: 0.8rem;
  }
  .stack-hud {
    font-size: 0.68rem;
    padding: 3px 8px;
  }
  .btn-leave {
    font-size: 0.58rem;
    padding: 3px 7px;
  }
}
.btn-leave:hover {
  color: #f87171;
  border-color: #f8717188;
  opacity: 1;
}
.btn-leave.hidden {
  display: none !important;
}

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #050814;
}
/*
 * Game stage layers (no UI placeholders in art):
 *   1) .stage-bg     — room BACKGROUND only
 *   2) .table-rail   — TABLE wood rim
 *   3) .table-felt   — FELT surface
 * Seats / cards / buttons come from gameplay HTML only.
 */
.stage-bg {
  position: absolute;
  inset: 0;
  background: #050814;
  pointer-events: none;
  z-index: 0;
}
/* ZINU style room — neon street night, NO table / seats / UI in this layer */
.stage-bg.bg-zinu-city {
  background:
    /* soft street lamps */
    radial-gradient(ellipse 40% 30% at 18% 22%, #f59e0b33, transparent 60%),
    radial-gradient(ellipse 35% 28% at 82% 25%, #22d3ee33, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 70%, #7c3aed22, transparent 65%),
    /* neon haze */
    radial-gradient(ellipse at 30% 40%, #a855f644, transparent 45%),
    radial-gradient(ellipse at 70% 55%, #06b6d444, transparent 40%),
    /* city depth */
    linear-gradient(180deg, #1a1035 0%, #0c1228 38%, #080f1c 62%, #050814 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 48px,
      rgba(255, 255, 255, 0.015) 48px,
      rgba(255, 255, 255, 0.015) 50px
    );
}
.stage-bg.bg-zinu-city::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 78%, #111827 0 18px, transparent 19px),
    radial-gradient(circle at 88% 76%, #111827 0 22px, transparent 23px),
    radial-gradient(circle at 50% 100%, #0f172a 0 35%, transparent 55%);
  opacity: 0.55;
  pointer-events: none;
}
.stage-bg.bg-zinu-city::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 20, 0.15) 0%, transparent 30%, transparent 55%, rgba(5, 8, 20, 0.75) 100%);
  pointer-events: none;
}
.stage-bg.bg-void {
  background:
    radial-gradient(ellipse at 50% 40%, #1a1030 0%, #050814 55%, #020308 100%);
}
.stage-bg.bg-neon {
  background:
    radial-gradient(ellipse at 20% 20%, #7c3aed66, transparent 45%),
    radial-gradient(ellipse at 80% 70%, #0891b266, transparent 40%),
    radial-gradient(ellipse at 50% 50%, #0f172a, #020617 80%);
}
.stage-bg.bg-smoke {
  background:
    radial-gradient(ellipse at 50% 30%, #33415588, transparent 50%),
    linear-gradient(160deg, #0f172a, #020617 60%, #111827);
}
/* Soft vignette so action bar stays clean */
.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, #050814ee 90%);
  pointer-events: none;
  z-index: 1;
}

/* Positioning layer — seats sit on this oval footprint */
.table-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(99%, 520px);
  aspect-ratio: 1.72 / 1;
  z-index: 2;
  background: transparent;
  pointer-events: none;
}
/* —— Layer 2: TABLE rail (wood rim only) —— */
.table-rail {
  position: absolute;
  inset: 2% 0;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, #8b6914 0%, #5c3d1e 35%, #3d2914 70%, #1c1208 100%);
  box-shadow:
    0 10px 28px #000a,
    inset 0 2px 0 #c4a35a55,
    inset 0 -4px 12px #0008;
}
.table-rail.rail-zinu {
  background:
    radial-gradient(ellipse at 50% 35%, #a67c2a 0%, #6b4423 40%, #3d2914 75%, #1a1008 100%);
  box-shadow:
    0 14px 36px #000c,
    inset 0 2px 1px #e8c87866,
    inset 0 -6px 16px #0009;
}
/* —— Layer 3: FELT (clean — no seats/logos painted on) —— */
.table-felt {
  position: absolute;
  inset: 7% 5%;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.06), transparent 55%),
    radial-gradient(ellipse at 50% 50%, #1a5c3a 0%, #0d3d26 55%, #082818 100%);
  box-shadow:
    inset 0 0 40px #0008,
    inset 0 0 0 2px #0a2014;
}
.table-felt.felt-green {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(ellipse at 50% 50%, #1b6b42 0%, #0d4028 55%, #082818 100%);
}
/* ZINU felt — mockup-inspired green, empty surface */
.table-felt.felt-zinu {
  inset: 7.5% 5.5%;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.09), transparent 48%),
    radial-gradient(ellipse at 50% 50%, #1a7a45 0%, #0f5c32 42%, #0a3d22 72%, #062816 100%);
  box-shadow:
    inset 0 0 50px #0009,
    inset 0 0 0 3px #0a2818;
}
.table-felt.felt-red {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.06), transparent 55%),
    radial-gradient(ellipse at 50% 50%, #8b1e2d 0%, #5c101c 55%, #3a0a12 100%);
}
.table-felt.felt-purple {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(ellipse at 50% 50%, #5b21b6 0%, #3b0764 55%, #1e0538 100%);
}
.table-felt.felt-black {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.05), transparent 55%),
    radial-gradient(ellipse at 50% 50%, #27272a 0%, #18181b 55%, #09090b 100%);
  box-shadow:
    0 0 0 10px #1c1917,
    0 0 0 12px #a8a29eaa,
    0 0 0 18px #0c0a09,
    inset 0 0 40px #000a,
    0 16px 40px #000a;
}
.table-felt.felt-blue {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(ellipse at 50% 50%, #1d4ed8 0%, #1e3a8a 55%, #0f172a 100%);
}
.table-felt.felt-texture {
  background-size: cover;
  background-position: center;
}
/* Layered presets: show rail + felt. Classic baked: hide them (image has the table). */
.table-rail,
.table-felt {
  display: block;
}
.stage.baked-table .table-rail,
.stage.baked-table .table-felt {
  display: none !important;
}
.table-rail.rail-default {
  /* base wood rail styles already on .table-rail */
}
.seats { position: absolute; inset: 0; z-index: 2; }
.seat {
  position: absolute;
  width: 92px;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
/*
 * 6 seats on racetrack oval (default):
 * 0 TL, 1 TR, 2 mid-L, 3 mid-R, 4 BL, 5 BR
 */
.seat[data-i="0"] { left: 26%; top: 16%; }
.seat[data-i="1"] { left: 74%; top: 16%; }
.seat[data-i="2"] { left: 4%;  top: 50%; }
.seat[data-i="3"] { left: 96%; top: 50%; }
.seat[data-i="4"] { left: 26%; top: 84%; }
.seat[data-i="5"] { left: 74%; top: 84%; }

/* Player avatars only — no empty circle placeholders */
.seat .pic {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 3px solid #4ade80;
  background: #0f172a center/cover no-repeat;
  margin: 0 auto;
  box-shadow: 0 0 18px #22c55e66, 0 4px 14px #000a;
}
.seat.empty {
  display: none !important;
}

/* ── ZINU 1 layout (mockup arrangement, layered art) ── */
.stage.layout-zinu-1 .table-layer {
  width: min(102%, 560px);
  aspect-ratio: 1.65 / 1;
  top: 48%;
}
.stage.layout-zinu-1 .table-rail {
  inset: 1% 0;
}
.stage.layout-zinu-1 .table-felt.felt-zinu {
  inset: 8% 6%;
}
/* Seats like mockup: top pair, side empties, bottom pair */
.stage.layout-zinu-1 .seat[data-i="0"] { left: 28%; top: 14%; }
.stage.layout-zinu-1 .seat[data-i="1"] { left: 72%; top: 14%; }
.stage.layout-zinu-1 .seat[data-i="2"] { left: 6%;  top: 50%; }
.stage.layout-zinu-1 .seat[data-i="3"] { left: 94%; top: 50%; }
.stage.layout-zinu-1 .seat[data-i="4"] { left: 28%; top: 86%; }
.stage.layout-zinu-1 .seat[data-i="5"] { left: 72%; top: 86%; }
.stage.layout-zinu-1 .seat {
  width: 86px;
}
.stage.layout-zinu-1 .seat .pic {
  width: 68px;
  height: 68px;
  border-width: 3px;
  border-color: #4ade80;
  box-shadow: 0 0 0 2px #14532d88, 0 0 20px #22c55e88, 0 4px 14px #000a;
}
.stage.layout-zinu-1 .seat.you .pic {
  border-color: var(--red);
  box-shadow: 0 0 0 2px #c8102e66, 0 0 20px #ef444466;
}
.stage.layout-zinu-1 .seat .nm {
  background: #0f172acc;
  border-radius: 6px;
  padding: 1px 6px;
  margin-top: 4px;
  font-size: 0.58rem;
}
.stage.layout-zinu-1 .seat .ch {
  background: #1e1030ee;
  border: 1px solid #a855f688;
  font-size: 0.6rem;
}
/* Empty seat rings (gameplay slots, not baked art) */
.stage.layout-zinu-1 .seat-empty-ring {
  pointer-events: none;
  opacity: 0.85;
}
.stage.layout-zinu-1 .empty-ring {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px dashed #4ade8088;
  box-shadow: 0 0 16px #22c55e44, inset 0 0 12px #22c55e22;
  background: #0f172a44;
}
.stage.layout-zinu-1 .empty-nm {
  color: #64748b;
  font-size: 0.55rem;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stage.layout-zinu-1 .center {
  top: 50%;
  width: 78%;
}
.stage.layout-zinu-1 .pot {
  font-size: 1.05rem;
  color: #fbbf24;
  text-shadow: 0 0 12px #f59e0b99, 0 2px 4px #000;
  letter-spacing: 0.08em;
}
.stage.layout-zinu-1 .blinds-label {
  font-size: 0.62rem;
  opacity: 0.85;
}
.stage.layout-zinu-1 .community {
  gap: 6px;
  min-height: 62px;
  margin-top: 4px;
}
.stage.layout-zinu-1 .community .pcard {
  --cw: 42px;
  --ch: 60px;
}
/* ZINU 1 action bar — mockup-style Fold / Call / Raise strip */
#tableView.layout-zinu-1 .action-bar {
  background: linear-gradient(180deg, #1a1f2e 0%, #0c1018 100%);
  border-top: 1px solid #2a3348;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
}
#tableView.layout-zinu-1 .hole .pcard {
  --cw: 42px;
  --ch: 58px;
}
#tableView.layout-zinu-1 .options .btn.fold {
  background: linear-gradient(180deg, #475569, #1e293b 55%, #0f172a);
  border-radius: 12px;
}
#tableView.layout-zinu-1 .options .btn.call {
  background: linear-gradient(180deg, #4ade80, #16a34a 40%, #15803d);
  border-radius: 12px;
  box-shadow: 0 0 18px #22c55e55, 0 4px 0 #14532d;
}
#tableView.layout-zinu-1 .options .btn.raise {
  background: linear-gradient(180deg, #fb923c, #ea580c 40%, #c2410c);
  border-radius: 12px;
  box-shadow: 0 0 18px #f9731655, 0 4px 0 #7c2d12;
}
#tableView.layout-zinu-1 .options .btn.check {
  background: linear-gradient(180deg, #60a5fa, #2563eb 40%, #1d4ed8);
  border-radius: 12px;
}
@media (min-width: 768px) {
  .stage.layout-zinu-1 .table-layer {
    width: min(96%, 600px);
  }
  .stage.layout-zinu-1 .seat .pic {
    width: 72px;
    height: 72px;
  }
}

/* ═══════════════════════════════════════════
   ZINU 2 — Hi-tech octagon (carbon + cyan/purple LEDs)
   ═══════════════════════════════════════════ */
.stage-bg.bg-zinu-2 {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, #06b6d422, transparent 50%),
    radial-gradient(ellipse 40% 35% at 15% 20%, #a855f633, transparent 55%),
    radial-gradient(ellipse 40% 35% at 85% 25%, #22d3ee33, transparent 55%),
    linear-gradient(165deg, #0a0a12 0%, #12101c 40%, #0b1220 70%, #050508 100%);
}
.stage-bg.bg-zinu-2::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(34, 211, 238, 0.02) 3px 4px
    );
  pointer-events: none;
  opacity: 0.6;
}
.table-rail.rail-zinu-2 {
  /* Octagon-ish via clip + carbon look */
  border-radius: 18% / 22%;
  background:
    repeating-linear-gradient(
      45deg,
      #1a1a1e 0 2px,
      #0d0d10 2px 4px
    ),
    linear-gradient(145deg, #2a2a32, #0a0a0c);
  box-shadow:
    0 0 0 2px #22d3ee99,
    0 0 0 4px #a855f666,
    0 0 28px #22d3ee44,
    0 0 40px #a855f633,
    inset 0 0 20px #000a,
    0 16px 40px #000c;
}
.table-felt.felt-zinu-2 {
  border-radius: 16% / 20%;
  inset: 8% 6%;
  background:
    /* geometric dealer lines */
    linear-gradient(90deg, transparent 48.5%, #22d3ee22 49%, #22d3ee22 51%, transparent 51.5%),
    linear-gradient(0deg, transparent 48.5%, #a855f622 49%, #a855f622 51%, transparent 51.5%),
    radial-gradient(ellipse at 50% 50%, #2a2a32 0%, #1a1a22 45%, #0e0e14 100%);
  box-shadow:
    inset 0 0 60px #000a,
    inset 0 0 0 1px #22d3ee33,
    0 0 40px #22d3ee18;
}
.stage.layout-zinu-2 .table-layer {
  width: min(100%, 540px);
  aspect-ratio: 1.55 / 1;
}
.stage.layout-zinu-2 .seat[data-i="0"] { left: 22%; top: 12%; }
.stage.layout-zinu-2 .seat[data-i="1"] { left: 78%; top: 12%; }
.stage.layout-zinu-2 .seat[data-i="2"] { left: 5%;  top: 50%; }
.stage.layout-zinu-2 .seat[data-i="3"] { left: 95%; top: 50%; }
.stage.layout-zinu-2 .seat[data-i="4"] { left: 22%; top: 88%; }
.stage.layout-zinu-2 .seat[data-i="5"] { left: 78%; top: 88%; }
/* Holographic seat HUD */
.stage.layout-zinu-2 .seat-hud {
  padding: 6px 8px 8px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(34, 211, 238, 0.12), rgba(168, 85, 246, 0.1));
  border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow:
    0 0 20px #22d3ee33,
    inset 0 0 12px #a855f622;
  backdrop-filter: blur(6px);
}
.stage.layout-zinu-2 .seat .pic {
  width: 62px;
  height: 62px;
  border: 2px solid #22d3ee;
  box-shadow: 0 0 16px #22d3ee66, 0 0 8px #a855f644;
  border-radius: 14px; /* slightly squared = holo panel */
}
.stage.layout-zinu-2 .seat.you .pic {
  border-color: #e879f9;
  box-shadow: 0 0 18px #e879f988;
}
.stage.layout-zinu-2 .seat .nm {
  color: #e0f2fe;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px #22d3ee88;
}
.stage.layout-zinu-2 .seat .ch {
  background: transparent;
  border: 1px solid #22d3ee55;
  color: #a5f3fc;
  font-size: 0.58rem;
  border-radius: 6px;
}
.stage.layout-zinu-2 .chip-orb {
  color: #22d3ee;
  text-shadow: 0 0 8px #22d3ee;
}
.stage.layout-zinu-2 .empty-ring {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  border: 2px dashed #22d3ee66;
  box-shadow: 0 0 14px #22d3ee33;
  background: #0ea5e908;
}
.stage.layout-zinu-2 .center .pot {
  color: #22d3ee;
  text-shadow: 0 0 16px #22d3ee99, 0 0 8px #a855f666;
  font-size: 1rem;
  letter-spacing: 0.12em;
}
.stage.layout-zinu-2 .community {
  padding: 8px 12px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 50%, #22d3ee18, transparent 70%);
  box-shadow: 0 0 24px #22d3ee22, inset 0 0 20px #a855f612;
}
#tableView.layout-zinu-2 .action-bar {
  background: linear-gradient(180deg, #0f172a, #050508);
  border-top: 1px solid #22d3ee44;
}
#tableView.layout-zinu-2 .options .btn.call {
  background: linear-gradient(180deg, #22d3ee, #0891b2 50%, #0e7490);
  box-shadow: 0 0 20px #22d3ee55;
}
#tableView.layout-zinu-2 .options .btn.raise {
  background: linear-gradient(180deg, #e879f9, #a855f6 50%, #7c3aed);
  box-shadow: 0 0 20px #a855f655;
}
#tableView.layout-zinu-2 .options .btn.fold {
  background: linear-gradient(180deg, #334155, #1e293b);
}

/* ═══════════════════════════════════════════
   ZINU 3 — Obsidian VIP lounge (gold + wine, classy ZMSS)
   ═══════════════════════════════════════════ */
.stage-bg.bg-zinu-3 {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, #42200644, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 100%, #450a0a33, transparent 50%),
    linear-gradient(180deg, #140f0c 0%, #1c1210 35%, #0c0a09 100%);
}
.stage-bg.bg-zinu-3::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, #b4530922, transparent 30%),
    radial-gradient(circle at 80% 35%, #b4530918, transparent 28%);
  pointer-events: none;
}
.table-rail.rail-zinu-3 {
  border-radius: 48% / 50%;
  background:
    linear-gradient(145deg, #3f3f46 0%, #18181b 40%, #09090b 100%);
  box-shadow:
    0 0 0 2px #d4a017,
    0 0 0 5px #1c1917,
    0 0 0 6px #a1620788,
    inset 0 2px 0 #fef3c733,
    0 18px 40px #000c;
}
.table-felt.felt-zinu-3 {
  inset: 8% 6%;
  border-radius: 48% / 50%;
  background:
    radial-gradient(ellipse at 50% 40%, #7f1d1d44, transparent 50%),
    radial-gradient(ellipse at 50% 50%, #4c0519 0%, #2a0a12 50%, #1a0508 100%);
  box-shadow:
    inset 0 0 50px #000a,
    inset 0 0 0 1px #d4a01744;
}
.stage.layout-zinu-3 .table-layer {
  width: min(100%, 530px);
  aspect-ratio: 1.7 / 1;
}
.stage.layout-zinu-3 .seat[data-i="0"] { left: 26%; top: 13%; }
.stage.layout-zinu-3 .seat[data-i="1"] { left: 74%; top: 13%; }
.stage.layout-zinu-3 .seat[data-i="2"] { left: 4%;  top: 50%; }
.stage.layout-zinu-3 .seat[data-i="3"] { left: 96%; top: 50%; }
.stage.layout-zinu-3 .seat[data-i="4"] { left: 26%; top: 87%; }
.stage.layout-zinu-3 .seat[data-i="5"] { left: 74%; top: 87%; }
.stage.layout-zinu-3 .seat-hud {
  padding: 4px 6px 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, #27272aee, #18181bee);
  border: 1px solid #d4a01766;
  box-shadow: 0 8px 20px #000a, inset 0 1px 0 #fef3c722;
}
.stage.layout-zinu-3 .seat .pic {
  width: 66px;
  height: 66px;
  border: 2px solid #d4a017;
  box-shadow: 0 0 0 1px #713f12, 0 0 14px #d4a01744;
  border-radius: 50%;
}
.stage.layout-zinu-3 .seat.you .pic {
  border-color: #fbbf24;
  box-shadow: 0 0 18px #fbbf2466;
}
.stage.layout-zinu-3 .seat .nm {
  color: #fef3c7;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}
.stage.layout-zinu-3 .seat .ch {
  background: #1c1917;
  border: 1px solid #a16207;
  color: #fde68a;
  font-size: 0.58rem;
  border-radius: 999px;
}
.stage.layout-zinu-3 .chip-orb {
  color: #fbbf24;
}
.stage.layout-zinu-3 .empty-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #d4a01755;
  box-shadow: inset 0 0 12px #d4a01722;
  background: #18181b88;
}
.stage.layout-zinu-3 .center .pot {
  color: #fde68a;
  text-shadow: 0 0 12px #d4a01788, 0 2px 4px #000;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
}
.stage.layout-zinu-3 .community {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #d4a01733;
  background: #1c191766;
}
/* Subtle ZMSS monogram watermark (classy, not cartoon) */
.stage.layout-zinu-3 .table-felt::after {
  content: "ZMSS";
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.35em;
  color: #d4a01722;
  pointer-events: none;
}
#tableView.layout-zinu-3 .action-bar {
  background: linear-gradient(180deg, #1c1917, #0c0a09);
  border-top: 1px solid #d4a01744;
}
#tableView.layout-zinu-3 .options .btn.call {
  background: linear-gradient(180deg, #fbbf24, #d97706 50%, #b45309);
  color: #1c1917;
  box-shadow: 0 0 16px #d4a01755;
}
#tableView.layout-zinu-3 .options .btn.raise {
  background: linear-gradient(180deg, #f87171, #b91c1c 50%, #7f1d1d);
}
#tableView.layout-zinu-3 .options .btn.fold {
  background: linear-gradient(180deg, #3f3f46, #18181b);
}

/* ═══════════════════════════════════════════
   ZINU 4 — Aurora vault (teal / magenta esports polish)
   ═══════════════════════════════════════════ */
.stage-bg.bg-zinu-4 {
  background:
    radial-gradient(ellipse 70% 50% at 50% 110%, #14b8a633, transparent 55%),
    radial-gradient(ellipse 45% 40% at 10% 30%, #db277733, transparent 50%),
    radial-gradient(ellipse 45% 40% at 90% 25%, #2dd4bf33, transparent 50%),
    linear-gradient(160deg, #042f2e 0%, #0f172a 40%, #1e1b4b 75%, #0c0a1a 100%);
}
.stage-bg.bg-zinu-4::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, #0006 100%);
  pointer-events: none;
}
.table-rail.rail-zinu-4 {
  border-radius: 50%;
  background:
    linear-gradient(135deg, #134e4a 0%, #164e63 40%, #312e81 100%);
  box-shadow:
    0 0 0 3px #2dd4bfaa,
    0 0 0 6px #0f172a,
    0 0 32px #2dd4bf55,
    0 0 48px #db277744,
    inset 0 0 16px #0008,
    0 16px 36px #000b;
}
.table-felt.felt-zinu-4 {
  inset: 8% 6%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%, #5eead422, transparent 45%),
    radial-gradient(ellipse at 50% 50%, #0f766e 0%, #115e59 40%, #134e4a 70%, #042f2e 100%);
  box-shadow:
    inset 0 0 55px #0009,
    inset 0 0 0 2px #2dd4bf44,
    0 0 30px #14b8a622;
}
.stage.layout-zinu-4 .table-layer {
  width: min(100%, 550px);
  aspect-ratio: 1.68 / 1;
}
.stage.layout-zinu-4 .seat[data-i="0"] { left: 24%; top: 12%; }
.stage.layout-zinu-4 .seat[data-i="1"] { left: 76%; top: 12%; }
.stage.layout-zinu-4 .seat[data-i="2"] { left: 3%;  top: 50%; }
.stage.layout-zinu-4 .seat[data-i="3"] { left: 97%; top: 50%; }
.stage.layout-zinu-4 .seat[data-i="4"] { left: 24%; top: 88%; }
.stage.layout-zinu-4 .seat[data-i="5"] { left: 76%; top: 88%; }
.stage.layout-zinu-4 .seat-hud {
  padding: 5px 7px 7px;
  border-radius: 20px;
  background: linear-gradient(160deg, #134e4acc, #1e1b4bcc);
  border: 1px solid #2dd4bf66;
  box-shadow: 0 0 24px #14b8a633, 0 8px 16px #0008;
}
.stage.layout-zinu-4 .seat .pic {
  width: 64px;
  height: 64px;
  border: 2px solid #2dd4bf;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #0f766e55, 0 0 18px #2dd4bf66;
}
.stage.layout-zinu-4 .seat.you .pic {
  border-color: #f472b6;
  box-shadow: 0 0 0 3px #db277755, 0 0 20px #f472b688;
}
.stage.layout-zinu-4 .seat .nm {
  color: #ccfbf1;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px #2dd4bf88;
}
.stage.layout-zinu-4 .seat .ch {
  background: #042f2e;
  border: 1px solid #2dd4bf88;
  color: #99f6e4;
  border-radius: 999px;
  font-size: 0.58rem;
}
.stage.layout-zinu-4 .chip-orb {
  color: #f472b6;
  text-shadow: 0 0 10px #f472b6;
  display: inline-block;
  animation: chipPulse 2.2s ease-in-out infinite;
}
@keyframes chipPulse {
  50% { filter: brightness(1.25); transform: scale(1.08); }
}
.stage.layout-zinu-4 .empty-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #2dd4bf55;
  box-shadow: 0 0 16px #14b8a633;
  background: #042f2e55;
}
.stage.layout-zinu-4 .center .pot {
  color: #5eead4;
  text-shadow: 0 0 16px #2dd4bf99, 0 0 8px #f472b644;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
}
.stage.layout-zinu-4 .community {
  padding: 8px 14px;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 50%, #2dd4bf22, transparent 70%);
  box-shadow: 0 0 28px #14b8a628;
}
/* Soft ZMSS wordmark */
.stage.layout-zinu-4 .table-felt::after {
  content: "ZMSS";
  position: absolute;
  left: 50%;
  top: 78%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.4em;
  color: #2dd4bf18;
  pointer-events: none;
}
#tableView.layout-zinu-4 .action-bar {
  background: linear-gradient(180deg, #134e4a, #0c0a1a);
  border-top: 1px solid #2dd4bf44;
}
#tableView.layout-zinu-4 .options .btn.call {
  background: linear-gradient(180deg, #2dd4bf, #0d9488 50%, #0f766e);
  box-shadow: 0 0 18px #2dd4bf55;
}
#tableView.layout-zinu-4 .options .btn.raise {
  background: linear-gradient(180deg, #f472b6, #db2777 50%, #9d174d);
  box-shadow: 0 0 18px #f472b655;
}
#tableView.layout-zinu-4 .options .btn.fold {
  background: linear-gradient(180deg, #475569, #1e293b);
}
@media (min-width: 768px) {
  #tableView.layout-zinu-2,
  #tableView.layout-zinu-3,
  #tableView.layout-zinu-4,
  #tableView.layout-zinu-5 {
    max-width: 640px;
  }
  .stage.layout-zinu-2 .table-layer,
  .stage.layout-zinu-3 .table-layer,
  .stage.layout-zinu-4 .table-layer,
  .stage.layout-zinu-5 .table-layer {
    width: min(96%, 600px);
  }
}

/* ═══════════════════════════════════════════
   ZINU 5 — Neon-rim forest oval + casino street night
   Layers only: bg + green tube rail + dark forest felt
   No seats / cards / chips / text in art
   ═══════════════════════════════════════════ */
.stage-bg.bg-zinu-5 {
  background:
    /* soft purple / red neon ambient (no logos, no figures drawn sharp) */
    radial-gradient(ellipse 55% 40% at 18% 28%, #7c3aed44, transparent 58%),
    radial-gradient(ellipse 50% 38% at 82% 32%, #ef444433, transparent 55%),
    radial-gradient(ellipse 70% 45% at 50% 100%, #450a0a33, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 15%, #581c8744, transparent 50%),
    /* moody street depth */
    linear-gradient(180deg, #120818 0%, #0c0a12 28%, #0a0a10 55%, #050508 100%);
}
.stage-bg.bg-zinu-5::before {
  content: "";
  position: absolute;
  inset: 0;
  /* out-of-focus street silhouettes — soft blobs only, not characters/zombies */
  background:
    radial-gradient(ellipse 8% 22% at 12% 78%, #1a1a22cc, transparent 70%),
    radial-gradient(ellipse 7% 20% at 22% 80%, #1f1f28bb, transparent 70%),
    radial-gradient(ellipse 9% 24% at 78% 79%, #1a1a22cc, transparent 70%),
    radial-gradient(ellipse 7% 18% at 88% 81%, #22222cbb, transparent 70%),
    radial-gradient(ellipse 12% 8% at 50% 92%, #111118ee, transparent 70%);
  filter: blur(6px);
  opacity: 0.85;
  pointer-events: none;
}
.stage-bg.bg-zinu-5::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* faint sign glows */
    radial-gradient(ellipse 14% 6% at 25% 22%, #c084fc55, transparent 70%),
    radial-gradient(ellipse 12% 5% at 75% 26%, #f8717155, transparent 70%),
    linear-gradient(180deg, rgba(5, 5, 8, 0.2) 0%, transparent 25%, transparent 50%, rgba(5, 5, 8, 0.75) 100%);
  pointer-events: none;
}
/* Neon green light tube rim */
.table-rail.rail-zinu-5 {
  border-radius: 50%;
  background: #0a0a0c;
  box-shadow:
    0 0 0 3px #22c55e,
    0 0 0 5px #052e16,
    0 0 18px #22c55ecc,
    0 0 36px #4ade8088,
    0 0 56px #16a34a55,
    inset 0 0 12px #000a,
    0 14px 36px #000c;
}
.table-felt.felt-zinu-5 {
  inset: 7% 5.5%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(74, 222, 128, 0.06), transparent 50%),
    radial-gradient(ellipse at 50% 50%, #14532d 0%, #0f3d24 40%, #0a2918 70%, #05140c 100%);
  box-shadow:
    inset 0 0 55px #000a,
    inset 0 0 0 1px #16653455,
    0 0 28px #22c55e18;
}
.stage.layout-zinu-5 .table-layer {
  width: min(100%, 520px);
  aspect-ratio: 1.55 / 1;
  top: 46%;
}
.stage.layout-zinu-5 .seat[data-i="0"] { left: 26%; top: 12%; }
.stage.layout-zinu-5 .seat[data-i="1"] { left: 74%; top: 12%; }
.stage.layout-zinu-5 .seat[data-i="2"] { left: 5%;  top: 50%; }
.stage.layout-zinu-5 .seat[data-i="3"] { left: 95%; top: 50%; }
.stage.layout-zinu-5 .seat[data-i="4"] { left: 26%; top: 88%; }
.stage.layout-zinu-5 .seat[data-i="5"] { left: 74%; top: 88%; }
.stage.layout-zinu-5 .seat-hud {
  padding: 4px 6px 6px;
  border-radius: 14px;
  background: #0a0a0cee;
  border: 1px solid #22c55e44;
  box-shadow: 0 0 16px #22c55e22;
}
.stage.layout-zinu-5 .seat .pic {
  width: 64px;
  height: 64px;
  border: 2px solid #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 14px #22c55e66;
}
.stage.layout-zinu-5 .seat.you .pic {
  border-color: #86efac;
  box-shadow: 0 0 18px #4ade8088;
}
.stage.layout-zinu-5 .seat .nm {
  color: #bbf7d0;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}
.stage.layout-zinu-5 .seat .ch {
  background: #052e16;
  border: 1px solid #22c55e66;
  color: #86efac;
  border-radius: 999px;
  font-size: 0.58rem;
}
.stage.layout-zinu-5 .chip-orb {
  color: #4ade80;
  text-shadow: 0 0 8px #22c55e;
}
.stage.layout-zinu-5 .empty-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #22c55e55;
  box-shadow: 0 0 14px #22c55e33;
  background: #052e1644;
}
.stage.layout-zinu-5 .center .pot {
  color: #4ade80;
  text-shadow: 0 0 14px #22c55e99;
  font-size: 1.02rem;
  letter-spacing: 0.1em;
}
.stage.layout-zinu-5 .community {
  padding: 8px 12px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 50%, #22c55e18, transparent 70%);
  box-shadow: 0 0 24px #22c55e22;
}
#tableView.layout-zinu-5 .action-bar {
  background: linear-gradient(180deg, #0a0a0c, #050508);
  border-top: 1px solid #22c55e44;
}
#tableView.layout-zinu-5 .options .btn.call {
  background: linear-gradient(180deg, #4ade80, #16a34a 50%, #15803d);
  box-shadow: 0 0 18px #22c55e55;
}
#tableView.layout-zinu-5 .options .btn.raise {
  background: linear-gradient(180deg, #f87171, #dc2626 50%, #991b1b);
}
#tableView.layout-zinu-5 .options .btn.fold {
  background: linear-gradient(180deg, #27272a, #18181b);
}
#tableView.layout-zinu-5 {
  max-width: 430px;
}
@media (min-width: 768px) {
  #tableView.layout-zinu-5 {
    max-width: 480px;
  }
}

.seat.you .pic {
  border-color: var(--red);
  box-shadow: 0 0 0 2px #c8102e66, 0 0 18px #ef444466;
}
.seat.turn .pic {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px #fbbf2488, 0 0 22px #f59e0b99;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 5px #fbbf2444, 0 0 28px #f59e0bcc; }
}
.seat.folded { opacity: 0.4; filter: grayscale(0.6); }
.seat .mini-hole {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 3px;
}
.spectate-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}
.spectate-bar .btn {
  width: auto;
  min-width: 120px;
  margin: 0;
  padding: 10px 12px;
  font-size: 0.72rem;
}
.seat .nm {
  font-size: 0.62rem;
  font-weight: 800;
  margin-top: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 3px #000;
}
.seat .ch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #e9d5ff;
  background: #1e1030cc;
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 2px;
  border: 1px solid #7c3aed66;
}
.seat .bet {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gold);
  background: #000a;
  border-radius: 6px;
  padding: 2px 6px;
  margin-top: 3px;
  display: inline-block;
}
.seat .badge {
  position: absolute;
  top: -2px;
  right: 12px;
  font-size: 0.55rem;
  font-weight: 900;
  background: var(--red);
  border-radius: 4px;
  padding: 2px 4px;
  z-index: 3;
}


.center {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 72%;
  z-index: 1;
  pointer-events: none;
}
.pot {
  font-weight: 900;
  font-size: 1rem;
  color: var(--gold);
  text-shadow: 0 1px 4px #000, 0 0 14px #fbbf2466, 0 0 2px #000;
  margin-bottom: 6px;
  letter-spacing: 0.06em;
}
.community {
  display: flex;
  gap: 6px;
  justify-content: center;
  min-height: 72px;
  flex-wrap: wrap;
}

/* —— Classic playing cards (standard face look) —— */
.pcard {
  --cw: 48px;
  --ch: 68px;
  position: relative;
  width: var(--cw);
  height: var(--ch);
  border-radius: 5px;
  background: #fff;
  color: #111;
  border: 1px solid #c5c9d0;
  box-shadow:
    0 1px 0 #fff inset,
    0 3px 8px #0007,
    0 0 0 1px #0001;
  font-family: "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  user-select: none;
  flex-shrink: 0;
  overflow: hidden;
}
.pcard.red { color: #c41e3a; }
.pcard.black { color: #111; }
.pcard-idx {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  z-index: 2;
}
.pcard-idx.top { top: 3px; left: 3px; }
.pcard-idx.bot {
  bottom: 3px;
  right: 3px;
  transform: rotate(180deg);
}
.pcard-r {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pcard-s {
  font-size: 0.58rem;
  margin-top: -1px;
}
.pcard-ace {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  opacity: 0.95;
}
.pcard-face-mark {
  position: absolute;
  inset: 14% 18%;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fafafa, #f0f0f0);
  box-shadow: inset 0 0 0 1px #fff8;
}
.fm-letter {
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}
.fm-suit {
  font-size: 0.7rem;
  margin-top: 1px;
}
/* Pip layouts for 2–10 (standard-ish) */
.pcard-pips {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58%;
  height: 68%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  line-height: 1;
}
.pcard-pips .pip { display: block; }
.pips-2 { grid-template-rows: 1fr 1fr; }
.pips-2 .pip:nth-child(2) { transform: rotate(180deg); }
.pips-3 { grid-template-rows: 1fr 1fr 1fr; }
.pips-3 .pip:nth-child(3) { transform: rotate(180deg); }
.pips-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.pips-4 .pip:nth-child(n+3) { transform: rotate(180deg); }
.pips-5 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.pips-5 .pip:nth-child(3) { grid-column: 1 / -1; }
.pips-5 .pip:nth-child(n+4) { transform: rotate(180deg); }
.pips-6 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.pips-6 .pip:nth-child(n+5) { transform: rotate(180deg); }
.pips-7 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}
.pips-7 .pip:nth-child(3) { grid-column: 1 / -1; }
.pips-7 .pip:nth-child(n+5) { transform: rotate(180deg); }
.pips-8 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
}
.pips-8 .pip:nth-child(n+5) { transform: rotate(180deg); }
.pips-9 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  font-size: 0.62rem;
}
.pips-9 .pip:nth-child(5) { grid-column: 1 / -1; }
.pips-9 .pip:nth-child(n+6) { transform: rotate(180deg); }
.pips-10 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  font-size: 0.58rem;
}
.pips-10 .pip:nth-child(3),
.pips-10 .pip:nth-child(4) { /* mid-top pair */ }
.pips-10 .pip:nth-child(n+7) { transform: rotate(180deg); }

/* Card back — Zinu on patterned poker back */
.pcard.back {
  background:
    linear-gradient(145deg, rgba(8, 12, 28, 0.55), rgba(4, 8, 20, 0.75)),
    url("/card-back-zinu.jfif") center 42% / cover no-repeat,
    #0b1224;
  border: 1.5px solid #3b82f6aa;
  box-shadow:
    0 0 0 2px #0f172a inset,
    0 0 0 4px #1e3a5f55 inset,
    0 4px 12px #000a;
  color: transparent;
}
.pcard.back::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.25);
  pointer-events: none;
  z-index: 1;
}
.pcard.back::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, transparent 28%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgba(59, 130, 246, 0.06) 5px,
      rgba(59, 130, 246, 0.06) 6px
    );
  pointer-events: none;
  z-index: 0;
}
.pcard-back-inner {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Mini cards (other seats) */
.pcard.mini {
  --cw: 24px;
  --ch: 34px;
  border-radius: 3px;
}
.pcard.mini .pcard-r { font-size: 0.42rem; }
.pcard.mini .pcard-s { font-size: 0.36rem; }
.pcard.mini .pcard-idx.top { top: 1px; left: 1px; }
.pcard.mini .pcard-idx.bot { bottom: 1px; right: 1px; }
.pcard.mini .pcard-ace { font-size: 0.75rem; }
.pcard.mini .pcard-face-mark { inset: 18% 16%; border-width: 1px; }
.pcard.mini .fm-letter { font-size: 0.55rem; }
.pcard.mini .fm-suit { font-size: 0.4rem; }
.pcard.mini .pcard-pips { font-size: 0.38rem; width: 55%; height: 60%; }
.pcard.mini.back::before { inset: 2px; }
.msg {
  margin-top: 8px;
  font-size: 0.75rem;
  color: #e2e8f0;
  text-shadow: 0 1px 4px #000;
  min-height: 1.2em;
}
.blinds-label {
  font-size: 0.65rem;
  color: #94a3b8;
  margin: -4px 0 6px;
  letter-spacing: 0.04em;
}
.seat.winner .pic {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px #fbbf24aa, 0 0 28px #f59e0bcc;
  animation: pulse 0.8s ease-in-out infinite;
}
.seat.winner .nm {
  color: #fbbf24;
}

/* Tournament queue */
.queue-card { max-width: 440px; text-align: left; }
.queue-card h1 { text-align: center; }
.queue-card .tag, .queue-card .hint { text-align: center; }
.host-setup {
  margin: 12px 0 16px;
  padding: 12px;
  background: #0a1020;
  border: 1px solid #3a4560;
  border-radius: 14px;
}
.host-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}
.stakes-banner {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fde68a;
  background: #1a1408;
  border: 1px solid #854d0e;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.queue-box {
  background: #0a1020;
  border: 1px solid #2a3550;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
  max-height: 240px;
  overflow-y: auto;
}
.queue-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.queue-head strong {
  color: #22d3ee;
  font-size: 1.1rem;
}
.queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.queue-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid #1e293b;
  font-size: 0.9rem;
}
.queue-list li:last-child { border-bottom: none; }
.q-pos {
  color: #a855f7;
  font-weight: 800;
  min-width: 2.2em;
  font-size: 0.8rem;
}
.q-name { font-weight: 700; }
.queue-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.queue-actions .btn { width: 100%; margin: 0; }
.table-summary {
  text-align: center;
  font-weight: 800;
  color: #fde68a;
  margin-bottom: 10px;
  font-size: 0.95rem;
}
/* Only visible ~3s after blinds double — keeps background clear otherwise */
.tourney-hud {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  background: linear-gradient(90deg, #4c1d95, #0e7490);
  color: #fff;
  text-transform: uppercase;
  position: relative;
  z-index: 5;
  animation: tourneyHudIn 0.25s ease;
}
.tourney-hud.hidden {
  display: none !important;
}
@keyframes tourneyHudIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.mode-hint {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  margin: 0 0 10px;
}
.join-code-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.join-code-row input {
  flex: 1;
  margin: 0;
  text-transform: uppercase;
}
.join-code-row .btn {
  width: auto;
  margin: 0;
  min-width: 100px;
}
.timer-overlay {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 50;
  pointer-events: none;
}
.timer-overlay span {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  background: #ef4444ee;
  box-shadow: 0 0 40px #ef4444aa, 0 0 0 4px #fff3;
  animation: pulse 0.6s ease-in-out infinite;
}
/* Chat sits under fold/check/raise in the action bar */
.action-bar .chat-box {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  border: 1px solid #2a3550;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0f18;
}
.chat-toggle {
  width: 100%;
  border: none;
  border-bottom: 1px solid #1e293b;
  background: #121a28;
  color: #94a3b8;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.chat-toggle.collapsed {
  border-bottom: none;
}
.chat-toggle.has-unread {
  color: #fde68a;
  background: #1a1408;
  box-shadow: inset 0 0 0 1px #f59e0b88, 0 0 16px #f59e0b44;
  animation: chat-glow 1.2s ease-in-out infinite;
}
@keyframes chat-glow {
  50% { box-shadow: inset 0 0 0 1px #fbbf24, 0 0 22px #f59e0b88; }
}
.chat-unread {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}
.chat-body.hidden {
  display: none !important;
}
.chat-log {
  overflow-y: auto;
  max-height: 64px;
  min-height: 36px;
  padding: 6px 8px;
  font-size: 0.72rem;
}
.chat-line { margin-bottom: 3px; color: #e2e8f0; }
.chat-line.rail b { color: #94a3b8; }
.chat-line b { color: #22d3ee; margin-right: 4px; }
.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-top: 1px solid #1e293b;
}
.chat-input-row input {
  flex: 1;
  margin: 0;
  padding: 8px 10px;
  font-size: 0.85rem;
}
.chat-input-row .btn {
  width: auto;
  margin: 0;
  padding: 8px 12px;
}
.claim-panel {
  background: #1a1408;
  border-bottom: 1px solid #854d0e;
  padding: 8px 10px;
  font-size: 0.8rem;
  text-align: center;
  z-index: 6;
}
.claim-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.claim-btns .btn { flex: 1; margin: 0; }
.seat.auto .pic {
  border-color: #f59e0b;
  opacity: 0.85;
  filter: grayscale(0.3);
  box-shadow: 0 0 0 2px #f59e0b88;
}
.seat.auto.claimable {
  outline: 2px dashed #fbbf24;
  outline-offset: 3px;
  border-radius: 12px;
}
.auto-pill {
  display: block;
  margin: 0 auto 2px;
  width: fit-content;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #0f172a;
  background: #fbbf24;
  border-radius: 4px;
  padding: 1px 6px;
  z-index: 4;
  user-select: none;
}
.claim-auto-btn {
  display: block;
  width: 100%;
  max-width: 88px;
  margin: 4px auto 0;
  padding: 4px 6px;
  border: none;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0f172a;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  cursor: pointer;
  z-index: 6;
  pointer-events: auto;
  box-shadow: 0 2px 8px #0008;
}
.claim-auto-btn:active {
  transform: scale(0.97);
}
#btnTakeBack {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  color: #0f172a !important;
  font-weight: 900;
  border: none;
}
.seat-mute {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  background: #000a;
  border-radius: 999px;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0 4px;
  z-index: 5;
  pointer-events: auto;
}
.raise-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.raise-row .btn {
  flex: 1;
  margin: 0;
  padding: 8px;
  font-size: 0.7rem;
}
#tableView {
  display: flex;
  flex-direction: column;
}
.preset-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.preset-btn {
  border: 1px solid #3a4560;
  background: #151c2a;
  color: var(--text);
  border-radius: 10px;
  padding: 8px 6px;
  cursor: pointer;
  text-align: left;
  font-size: 0.72rem;
  line-height: 1.25;
}
.preset-btn strong {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 2px;
}
.preset-btn span { color: var(--muted); font-size: 0.68rem; }
.preset-btn.active {
  border-color: #22d3ee;
  background: #0c2a33;
  box-shadow: 0 0 0 1px #22d3ee66;
}
.custom-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.custom-row label {
  margin: 0;
  font-size: 0.65rem;
}
.custom-row input {
  margin-top: 4px;
  padding: 8px;
  font-size: 0.9rem;
}
.fresh-check,
.privacy-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.fresh-check input,
.privacy-check input {
  width: auto;
  margin: 0;
  accent-color: #22d3ee;
}

/* Celebration overlay */
.celebration {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #000a;
  backdrop-filter: blur(4px);
  padding: 20px;
}
.celebration.hidden { display: none !important; }
.celebration.show .cele-card {
  animation: cele-pop 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes cele-pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.cele-card {
  position: relative;
  width: min(360px, 100%);
  background: linear-gradient(160deg, #1a1030, #0c1220 55%, #0a1f18);
  border: 2px solid #fbbf24;
  border-radius: 22px;
  padding: 28px 20px 20px;
  text-align: center;
  box-shadow: 0 0 40px #fbbf2466, 0 20px 60px #000c;
  z-index: 2;
}
.cele-emoji {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 8px;
  animation: bounce 0.7s ease infinite alternate;
}
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}
.cele-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: #fde68a;
  text-shadow: 0 0 20px #f59e0b88, 0 2px 0 #000;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.cele-sub {
  font-size: 0.9rem;
  color: #cbd5e1;
  margin-bottom: 12px;
}
.cele-names {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.cele-name-chip {
  background: linear-gradient(180deg, #7c3aed, #4c1d95);
  border: 1px solid #c4b5fd;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 0 16px #a855f766;
  text-transform: none;
  letter-spacing: 0.03em;
}
.cele-btn { width: 100%; max-width: 200px; margin: 0 auto; }

.cele-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.cele-confetti i {
  position: absolute;
  top: -12px;
  border-radius: 2px;
  opacity: 0.95;
  animation-name: fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes fall {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0.2;
  }
}

/* Hole cards — compact so the table keeps vertical space */
.hero-hole {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: 1;
  display: flex;
  justify-content: center;
  min-height: 0;
  margin-bottom: 4px;
}
.hero-hole:has(.hole:empty),
.hole:empty {
  display: none;
  margin: 0;
  min-height: 0;
}
.hole {
  display: flex;
  gap: 5px;
  justify-content: center;
  pointer-events: none; /* cards never block clicks */
}
.hole .pcard {
  --cw: 36px;
  --ch: 50px;
  transform: rotate(-5deg);
  box-shadow: 0 4px 10px #000a;
  border-radius: 4px;
}
.hole .pcard:last-child { transform: rotate(5deg); }
.hole .pcard .pcard-r { font-size: 0.58rem; }
.hole .pcard .pcard-s { font-size: 0.48rem; }
.hole .pcard .pcard-idx.top { top: 2px; left: 2px; }
.hole .pcard .pcard-idx.bot { bottom: 2px; right: 2px; }
.hole .pcard .pcard-ace { font-size: 1.15rem; }
.hole .pcard .fm-letter { font-size: 0.75rem; }
.hole .pcard .fm-suit { font-size: 0.55rem; }
.hole .pcard .pcard-pips { font-size: 0.48rem; }
.hole .pcard .pcard-face-mark { inset: 16% 14%; }

/* Action bar — real clickable Fold / Check / Call / Raise */
.action-bar {
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  background: linear-gradient(180deg, #1a2230 0%, #0c1018 100%);
  border-top: 2px solid #334155;
  box-shadow: 0 -12px 40px #000c;
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
  /* fully opaque so concept-art fake buttons cannot show through */
  isolation: isolate;
}
.btn.start {
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 14px;
  font-size: 0.82rem;
  background: linear-gradient(180deg, #334155, #1e293b);
  border: 1px solid #475569;
}
.options {
  display: flex;
  gap: 8px;
  justify-content: stretch;
  align-items: stretch;
  min-height: 48px;
  position: relative;
  z-index: 2;
}
.options .btn {
  flex: 1;
  min-width: 0;
  padding: 12px 6px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  border-radius: 12px;
  border: none;
  white-space: pre-line;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.options .btn:active {
  transform: scale(0.97);
}
.options .btn.fold {
  background: linear-gradient(180deg, #64748b, #334155 55%, #1e293b);
  color: #f1f5f9;
  box-shadow: 0 4px 0 #0f172a, 0 6px 16px #0008;
}
.options .btn.call {
  background: linear-gradient(180deg, #4ade80, #16a34a 45%, #15803d);
  color: #fff;
  box-shadow: 0 4px 0 #14532d, 0 6px 18px #16a34a66;
  text-shadow: 0 1px 2px #0006;
}
.options .btn.raise {
  background: linear-gradient(180deg, #fb923c, #ea580c 40%, #c2410c);
  color: #fff;
  box-shadow:
    0 4px 0 #7c2d12,
    0 0 20px #f9731666,
    0 6px 18px #0008;
  text-shadow: 0 1px 2px #0006;
}
.options .btn.check {
  background: linear-gradient(180deg, #60a5fa, #2563eb 45%, #1d4ed8);
  color: #fff;
  box-shadow: 0 4px 0 #1e3a8a, 0 6px 18px #3b82f666;
}
.options .wait {
  flex: 1;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  align-self: center;
  padding: 12px;
  pointer-events: none;
}

@media (min-height: 780px) {
  .table-layer { width: min(100%, 510px); }
  .seat .pic { width: 80px; height: 80px; }
}