:root {
  --bg-deep:     #080808;
  --bg-mid:      #0d0404;
  --bg-accent:   #190606;
  --panel-dark:  #100808;
  --panel-darker:#070404;
  /* --accent-purple repurposed: Royal Crimson */
  --accent-purple: #991212;
  /* --accent-orange repurposed: Royal Gold   */
  --accent-orange: #c9a227;
  --accent-gold:   #f0c040;
  --text-light: #f5ede0;
  --text-dim:   #9a8768;
  --felt:      #7b1212;
  --felt-edge: #380808;
  --green-ok:  #22c55e;
  --red-bad:   #c21c1c;
  /* Super-admin-configurable site design (overridden live from site:config) */
  --site-accent:   #c9a94f;
  --site-felt:     #93855e;
  --site-rail:     #9c5f2a;
  --site-room-bg:  #241834;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text-light);
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(160,12,12,0.18), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(100,8,8,0.22), transparent 55%),
    linear-gradient(160deg, #080808 0%, #0d0404 50%, #080808 100%);
  background-attachment: fixed;
}

.hidden { display: none !important; }

/* ===== Top bar ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(20,10,16,0.9), rgba(20,10,16,0.6));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; }
.brand-mark { color: var(--accent-orange); font-size: 22px; }
.brand-name { letter-spacing: 1px; }
.brand-name .accent { color: var(--site-accent, #e6b422); }

.topbar-center .play-money-badge {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

.topbar-right { display: flex; align-items: center; gap: 16px; }
.player-id { display: flex; align-items: center; gap: 8px; }
.avatar-badge {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-orange);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  border: 2px solid #fff3;
}
.player-meta { display: flex; flex-direction: column; font-size: 12px; }
.stars { color: var(--accent-gold); font-size: 10px; }
.balance-pill { color: var(--accent-gold); font-size: 11px; font-weight: 600; }

/* ===== Auth view ===== */
.auth-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  padding: 40px 20px;
}
.auth-box {
  background: linear-gradient(160deg, rgba(28,29,43,0.95), rgba(20,21,31,0.95));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-box h2 { margin: 0 0 4px; text-align: center; }
.auth-box label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--text-dim);
  gap: 4px;
}
.auth-box input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: var(--text-light);
  padding: 10px;
  font-size: 14px;
}
.auth-box .btn { margin-top: 6px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--text-dim); margin: 4px 0 0; }
.auth-switch a { color: var(--accent-orange); text-decoration: none; margin-left: 4px; }
.auth-note { text-align: center; font-size: 11px; color: var(--text-dim); margin: 0; }
.auth-error {
  background: rgba(224,68,91,0.15);
  border: 1px solid var(--red-bad);
  color: var(--red-bad);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  text-align: center;
  margin: 0;
}

.jackpot-pill {
  background: linear-gradient(135deg, #1c1d2b, #2a1b40);
  border: 1px solid var(--accent-purple);
  border-radius: 10px;
  padding: 6px 14px;
  text-align: center;
  min-width: 150px;
}
.jackpot-label { display: block; font-size: 10px; color: var(--accent-purple); letter-spacing: 1px; }
.jackpot-value { display: block; font-size: 16px; font-weight: 700; color: var(--accent-gold); }

/* ===== Lobby ===== */
.lobby { padding: 16px clamp(12px, 2vw, 40px); max-width: min(1400px, 98vw); margin: 0 auto; }
.lobby-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.tab.active { background: var(--red-bad); color: white; border-color: var(--red-bad); }

.table-list { width: 100%; border-collapse: collapse; background: rgba(20,10,20,0.55); border-radius: 10px; overflow: hidden; }
.table-list thead th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
}
.table-list tbody tr { border-top: 1px solid rgba(255,255,255,0.06); }
.table-list tbody tr.table-row { cursor: pointer; }
.table-list tbody tr:hover { background: rgba(255,255,255,0.08); }
.table-list td { padding: 12px 14px; font-size: 14px; }
.table-list .stakes { color: var(--accent-gold); font-weight: 600; }
.table-list .pot { color: var(--green-ok); }
.table-list th.sortable { cursor: pointer; user-select: none; }
.table-list th.sortable:hover { color: var(--text-light); }
.table-list th.sortable.sorted { color: var(--accent-gold); }
.table-list th.sortable.sorted::after { content: ' \25B2'; font-size: 9px; }
.table-list th.sortable.sorted.sorted-desc::after { content: ' \25BC'; font-size: 9px; }

.btn {
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}
.btn.primary { background: var(--accent-purple); color: white; }
.btn.primary:hover { background: #b01818; }
.btn.ghost { background: rgba(255,255,255,0.08); color: var(--text-light); }
.btn.small { padding: 6px 12px; font-size: 12px; }

/* ===== Modal ===== */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-box { background: var(--panel-dark); padding: 24px; border-radius: 12px; width: 320px; border: 1px solid rgba(255,255,255,0.1); }
.modal-box h3 { margin-top: 0; }
.modal-box label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.modal-box input { width: 100%; margin-top: 6px; padding: 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: var(--panel-darker); color: var(--text-light); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ===== Multi-table switcher ===== */
.table-tabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(20, 10, 26, 0.6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
}
.table-tab {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.table-tab:hover { color: var(--text-light); }
.table-tab.active { background: var(--accent-purple); color: #fff; border-color: var(--accent-purple); }
.table-tab.needs-action { border-color: var(--accent-gold); color: var(--accent-gold); box-shadow: 0 0 8px rgba(240, 196, 25, 0.5); }
.table-tab.active.needs-action { color: #fff; }
.table-tab.add-table-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  background: var(--accent-orange);
  color: #fff;
  border-color: var(--accent-orange);
}
.table-tab.add-table-btn:hover { background: #e0b030; }

/* ===== Table view ===== */
.table-view { padding: 12px clamp(8px, 1.5vw, 24px); max-width: min(1500px, 100%); margin: 0 auto; }
.table-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.table-title { font-weight: 700; }
.hand-number { color: var(--text-dim); font-size: 12px; }

.felt-wrap { display: flex; justify-content: center; padding: 10px 0; overflow-x: auto; }

/* Outer container — includes the seats positioned around the table oval */
.felt-outer {
  position: relative;
  /* fluid: ~345px phone → 1440px ultrawide */
  width: clamp(340px, 92vw, 1440px);
  height: clamp(210px, min(57vw, 74vh), 880px);
  flex-shrink: 0;
}

/* The visible table surface — bigger and centered inside felt-outer */
.felt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 79.3%;   /* 920 ÷ 1160 — scales with felt-outer */
  height: 69.4%;  /* 500 ÷ 720 — scales with felt-outer */
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-edge) 100%);
  border-radius: clamp(40px, 27%, 320px);  /* 27% ≈ 250/920 — scales with width */
  border: clamp(4px, 1%, 14px) solid #230606;
  box-shadow: 0 14px 70px rgba(0,0,0,0.85), inset 0 0 90px rgba(0,0,0,0.55);
}

.board-area {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.pot-label { color: var(--accent-gold); font-weight: 700; margin-bottom: 8px; }
.board-cards { display: flex; gap: 6px; justify-content: center; min-height: 64px; }
.street-label { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

.card {
  position: relative;
  width: 42px; height: 58px;
  background: linear-gradient(160deg, #ffffff 0%, #f2f0ea 100%);
  border-radius: 6px;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.08);
  overflow: hidden;
}
.card.red { color: #d3273e; }
.card.black { color: #1c2330; }
/* Themed deck — corner indices + big centre pip */
.card-corner {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  line-height: 0.92; font-weight: 800;
}
.card-corner.tl { top: 5%; left: 7%; }
.card-corner.br { bottom: 5%; right: 7%; transform: rotate(180deg); }
.card-corner b { font-size: 0.62em; }
.card-corner i { font-style: normal; font-size: 0.52em; margin-top: 0.05em; }
.card-pip {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.55em; opacity: 0.92;
}
/* Court cards (J/Q/K): illustrated artwork filling the card face */
.court-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; pointer-events: none;
  border-radius: 6px;
}

/* ===== Effects layer (muck / chip-collect fly animations) ===== */
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 16; overflow: visible; }
.fx-item { position: absolute; transform: translate(-50%, -50%); will-change: left, top, transform, opacity; }
.fx-cards { display: flex; gap: 3px; }
.fx-cards .card { width: 34px; height: 48px; }

/* Show / muck bar (showdown) */
.showmuck-bar { display: flex; gap: 8px; }
.showmuck-bar .btn { flex: 1; border: none; border-radius: 8px; padding: 12px 10px; font-weight: 800; font-size: 15px; color: #fff; }
/* keep the rank/suit indices readable over the art */
.card.court .card-corner {
  background: rgba(255,255,255,0.82); border-radius: 3px; padding: 0 1px;
  z-index: 2;
}
/* Branded card back — dark base + fine cross-hatch + accent crown emblem */
.card.back {
  color: transparent;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #463878 0%, #2a2050 60%, #1b1436 100%);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.08);
}
.card.back::after {
  content: '\265B'; /* ♛ crown */
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--site-accent, #e6b422); font-size: 1.35em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65); opacity: 0.95;
}

.seats { position: absolute; inset: 0; }
.seat {
  position: absolute;
  width: 130px;
  text-align: center;
  transform: translate(-50%, -50%);
}
.seat-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  margin: 0 auto 4px;
  background: var(--accent-orange);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,0.5);
  position: relative;
}
.seat.acting .seat-avatar { border-color: var(--accent-gold); box-shadow: 0 0 14px var(--accent-gold); }
.seat.folded .seat-avatar { opacity: 0.35; }
.seat-avatar.seat-empty {
  width: 70px; height: 70px;
  background: rgba(255,255,255,0.06);
  border-style: dashed;
}
.seat-sit-btn {
  border: none;
  border-radius: 50%;
  width: 60px; height: 60px;
  background: var(--accent-purple);
  color: white;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.1;
  cursor: pointer;
  padding: 4px;
}
.seat-sit-btn:hover { background: #b01818; }
.seat-name { font-size: 12px; font-weight: 600; }
.seat-stack { font-size: 11px; color: var(--accent-gold); }
.seat-cards { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 4px; max-width: 130px; }
.seat-cards .card { width: 28px; height: 40px; font-size: 12px; }
.seat-cards.four-cards .card { width: 22px; height: 32px; font-size: 10px; }
.game-label { color: var(--accent-gold, #d4af37); font-size: 12px; }
.seat-bet { font-size: 11px; color: var(--green-ok); margin-top: 2px; }
.seat-action-tag {
  position: absolute; top: -6px; right: -6px;
  background: var(--panel-dark);
  border-radius: 8px;
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.2);
}
.seat-hand-label {
  font-size: 10px;
  color: var(--text-light);
  background: rgba(0,0,0,0.5);
  border-radius: 6px;
  padding: 2px 6px;
  margin-top: 3px;
  display: inline-block;
}
.dealer-chip {
  position: absolute;
  top: -10px; left: -10px;
  width: 20px; height: 20px;
  background: white;
  color: #222;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.log-panel {
  max-width: clamp(480px, 74vw, 1100px);
  margin: 8px auto;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-dim);
  max-height: 90px;
  overflow-y: auto;
}

/* ===== Action bar ===== */
.action-bar {
  max-width: clamp(480px, 74vw, 1100px);
  margin: 10px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bet-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bet-controls input[type="range"] {
  flex: 1;
}
.bet-controls input[type="number"] {
  width: 90px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--panel-darker);
  color: var(--text-light);
}
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.action-buttons .btn {
  flex: 1;
  padding: 10px 0;
  font-size: 13px;
}
.btn.fold { background: var(--red-bad); color: #fff; }
.btn.fold:hover { background: #d42020; }
.btn.check { background: rgba(255,255,255,0.12); color: var(--text-light); }
.btn.check:hover { background: rgba(255,255,255,0.2); }
.btn.call { background: var(--green-ok); color: #08231a; }
.btn.call:hover { background: #36d96e; }
.btn.bet { background: var(--accent-orange); color: #fff; }
.btn.bet:hover { background: #e0b030; }
.btn.raise { background: var(--accent-purple); color: #fff; }
.btn.raise:hover { background: #b01818; }

/* @media 1100px removed — clamp() handles intermediate sizes */
@media (max-width: 800px) {
  .table-list th, .table-list td { padding: 8px 8px; font-size: 12px; }
}

/* ===== Straddle toggle ===== */
.straddle-toggle {
  max-width: clamp(480px, 74vw, 1100px);
  margin: 6px auto 0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.straddle-toggle label {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
.straddle-toggle input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--accent-orange);
}
.straddle-badge {
  background: var(--accent-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.03em;
}

/* ===== Rabbit hunt ===== */
.rabbit-hunt-area {
  max-width: clamp(480px, 74vw, 1100px);
  margin: 6px auto 0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rabbit-label {
  color: var(--text-dim);
  font-size: 13px;
}
.rabbit-cards {
  display: flex;
  gap: 5px;
}
.card.rabbit {
  opacity: 0.45;
  border-style: dashed;
}
.btn.rabbit-hunt {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-dim);
  font-size: 12px;
  padding: 6px 14px;
}
.btn.rabbit-hunt:hover {
  background: rgba(255,255,255,0.14);
  color: var(--text-light);
}

/* ===== Action timer ===== */
.timer-arc-wrap {
  position: absolute; bottom: -4px; right: -4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.timer-arc {
  position: absolute; inset: 2px;
  border-radius: 50%;
  color: #22c55e;
  background: conic-gradient(currentColor 360deg, transparent 0deg);
  transition: background 0.2s linear;
}
.timer-badge {
  position: relative; z-index: 2;
  font-size: 9px; font-weight: 700; line-height: 1;
  color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.9);
  min-width: 12px; text-align: center;
}
.timer-badge.t-ok   { color: #22c55e; }
.timer-badge.t-warn { color: #f59e0b; }
.timer-badge.t-crit { color: #ef4444; }
.timer-badge.t-bank { color: #f97316; }

/* Bank-time reserve bar — thin strip at bottom of each seat */
.bank-bar {
  position: absolute; bottom: 0; left: 4px; right: 4px;
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.bank-fill {
  height: 100%; border-radius: 2px;
  transition: width 1s linear;
}
.bank-fill.bank-ok   { background: #22c55e; }
.bank-fill.bank-warn { background: #f59e0b; }
.bank-fill.bank-crit { background: #ef4444; }

@media (max-width: 600px) {
  .timer-arc-wrap { width: 18px; height: 18px; bottom: -3px; right: -3px; }
  .timer-badge { font-size: 7px; }
  .bank-bar { height: 2px; }
}

/* ===== All-in equity badge ===== */
.equity-badge {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
}

/* ===== Animations ===== */

/* Acting seat: orange pulse ring */
@keyframes act-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent-orange), 0 0 8px rgba(201,162,39,0.25); }
  50%       { box-shadow: 0 0 0 4px var(--accent-orange), 0 0 22px rgba(201,162,39,0.55); }
}
.seat.acting { animation: act-pulse 1.1s ease-in-out infinite; }

/* Winner seat: green burst then settle */
@keyframes win-glow {
  0%   { box-shadow: 0 0 0 3px var(--green-ok), 0 0 40px rgba(61,220,151,0.8); transform: scale(1.1); }
  50%  { box-shadow: 0 0 0 2px var(--green-ok), 0 0 15px rgba(61,220,151,0.4); }
  100% { box-shadow: none; transform: scale(1); }
}
.seat.winner { animation: win-glow 1s ease-out both; }

/* Card deal / board reveal: flip in */
@keyframes card-in {
  0%   { opacity: 0; transform: translateY(-18px) rotateY(90deg) scale(0.68); }
  60%  { transform: translateY(0) rotateY(-10deg) scale(1.07); }
  100% { opacity: 1; transform: translateY(0) rotateY(0deg) scale(1); }
}
.card.animate-in {
  animation: card-in 0.4s cubic-bezier(.2,.8,.3,1) both;
  transform-style: preserve-3d;
}

/* Action tag: pop up from seat */
@keyframes tag-pop {
  0%   { opacity: 0; transform: scale(0.3) translateY(6px); }
  65%  { transform: scale(1.18) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.seat-action-tag { /* animation disabled */ }

/* Folded seat: smooth dim */
.seat { transition: opacity 0.35s ease; }
.seat.folded { opacity: 0.35; }

/* Equity badge slide up */
@keyframes eq-up {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.6); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.equity-badge { /* animation disabled */ }

/* Pot flash on increase */
@keyframes pot-flash {
  0%   { color: var(--green-ok); transform: scale(1.28); }
  100% { color: inherit; transform: scale(1); }
}
.pot-label.pot-flash { /* animation disabled */ }

/* Log newest entry slide in */
@keyframes log-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.log-panel .log-new { /* animation disabled */ }

/* Straddle badge gentle throb */
@keyframes str-throb {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}
.straddle-badge { /* animation disabled */ }

/* ===== Chip visuals ===== */

/* Individual chip circle — absolutely positioned inside chip-stack */
.chip {
  position: absolute;
  left: 0;
  border-radius: 50%;
  border: 1px solid var(--chip-bd, #333);
  background: var(--chip-bg, #444);
  box-shadow: 0 3px 5px rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
/* Rim spokes — the classic edge spots, masked to the outer ring only */
.chip::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  background: repeating-conic-gradient(var(--chip-ring, #fff) 0 10deg, transparent 10deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}
/* Inner face disc the denomination sits on */
.chip::after {
  content: ''; position: absolute; inset: 17%; border-radius: 50%;
  background: var(--chip-bg, #444);
  box-shadow: inset 0 0 0 1px var(--chip-ring, #fff),
              inset 0 2px 3px rgba(255,255,255,0.28),
              inset 0 -2px 3px rgba(0,0,0,0.3);
}
.chip-face {
  position: relative; z-index: 2; color: #fff; font-weight: 800;
  font-size: 10px; line-height: 1; letter-spacing: -0.4px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.75);
}
/* Value pill above a bet/pot chip stack */
.chip-total {
  position: absolute; left: 50%; top: -19px; transform: translateX(-50%);
  background: rgba(8,6,14,0.85); color: #fff; font-weight: 800; font-size: 12px;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; z-index: 5;
  border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 2px 7px rgba(0,0,0,0.5);
}
/* Drop-in animation when a stack grows (bet placed / pot won) */
.chip-place .chip { animation: chipDrop 0.34s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes chipDrop {
  0%   { transform: translateY(-24px) scale(0.65); opacity: 0; }
  70%  { transform: translateY(2px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

/* Wrapper that gives the stack its height */
.chip-stack {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

/* ---- Seat chip stack ---- */
/* Replaces the old plain seat-stack number */
.seat-chips {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 28px;
  margin: 2px 0 0;
}
.seat-stack-num {
  font-size: 11px;
  color: var(--accent-gold);
  font-weight: 700;
  align-self: center;
  line-height: 1;
}

/* ---- Bet zone chips (floating on felt between seat and center) ---- */
.bet-zones {
  position: absolute;
  inset: 0;
  pointer-events: none; /* never block card clicks */
  z-index: 2;
}
.bet-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.bet-zone-amt {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-gold);
  white-space: nowrap;
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 2px;
}

/* ---- Pot chips (center board area) ---- */
.pot-chips {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  min-height: 28px;
  margin-bottom: 4px;
}

/* ---- Side pots at showdown ---- */
.side-pots {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.side-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.side-pot-amt {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-gold);
}
.side-pot-label {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ===== My cards (hero hand — center bottom of felt) ===== */
.my-cards-area {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.my-cards-area .card {
  width: 56px;
  height: 78px;
  font-size: 22px;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.12);
}

/* ===== Settings panel ===== */
.settings-btn { margin-left: auto; }

.settings-panel {
  max-width: clamp(480px, 74vw, 1200px);
  margin: 0 auto 8px;
  padding: 10px 18px;
  background: rgba(8,3,3,0.88);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid var(--accent-gold);
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.settings-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.settings-opt input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--accent-gold);
  cursor: pointer;
}
.rebuy-area { display: flex; align-items: center; gap: 6px; }
.rebuy-inputs { display: inline-flex; align-items: center; gap: 5px; }
.rebuy-input {
  width: 80px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: var(--panel-darker);
  color: var(--text-light);
  font-size: 12px;
}

/* Disable all CSS animations when user turns them off */
body.no-animations * {
  animation: none !important;
  transition: none !important;
}

/* ===== Mobile (≤600px) ===== */
@media (max-width: 600px) {

  /* Topbar: hide non-essential, compress */
  .topbar { padding: 8px 10px; gap: 6px; }
  .brand { gap: 5px; font-size: 16px; }
  .brand-mark { font-size: 18px; }
  .topbar-center { display: none; }
  .jackpot-pill { display: none; }
  .topbar-right { gap: 6px; }
  .player-meta { font-size: 10px; }
  .balance-pill { font-size: 10px; }
  .avatar-badge { width: 28px; height: 28px; font-size: 13px; }
  #adminBtn, #logoutBtn { font-size: 10px; padding: 4px 8px; }

  /* Table tabs */
  .table-tabs-bar { padding: 5px 8px; gap: 4px; }
  .table-tab { padding: 4px 10px; font-size: 11px; }

  /* Lobby */
  .lobby { padding: 10px; max-width: 100%; }
  /* Drop "Pot" column on tiny screens */
  .table-list th:nth-child(4),
  .table-list td:nth-child(4) { display: none; }
  .table-list th, .table-list td { padding: 8px 6px; font-size: 12px; }

  /* Table view */
  .table-view { padding: 6px 8px; max-width: 100%; }
  .table-toolbar { gap: 6px; flex-wrap: wrap; }
  .table-title { font-size: 11px; white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis; max-width: 110px; }
  .hand-number { font-size: 10px; }

  /* Felt: fill screen, seats clipped by hidden overflow */
  .felt-wrap { overflow: hidden; padding: 4px 0; }
  .felt-outer { width: 100vw; height: 60vw; }
  .felt { width: 80vw; height: 46vw; border-radius: 42px; border-width: 4px;
          box-shadow: 0 6px 30px rgba(0,0,0,0.8); }

  /* Board */
  .board-area { width: 85%; }
  .pot-label { font-size: 11px; margin-bottom: 4px; }
  .pot-chips { min-height: 14px; }
  .board-cards { gap: 3px; min-height: 36px; }
  .card { width: 28px; height: 40px; font-size: 12px; border-radius: 4px; }
  .street-label { font-size: 9px; margin-top: 3px; }

  /* My cards at bottom */
  .my-cards-area { bottom: 10px; gap: 5px; }
  .my-cards-area .card { width: 36px; height: 50px; font-size: 15px; }

  /* Seats: compact */
  .seat { width: 72px; }
  .seat-avatar { width: 30px; height: 30px; font-size: 11px; }
  .seat-avatar.seat-empty { width: 38px; height: 38px; }
  .seat-sit-btn { width: 34px; height: 34px; font-size: 7px; }
  .seat-name { font-size: 8px; }
  .seat-chips { height: 16px; margin: 1px 0 0; }
  .seat-stack-num { font-size: 8px; }
  .seat-cards .card { width: 16px; height: 24px; font-size: 7px; border-radius: 3px; }
  .seat-cards.four-cards .card { width: 13px; height: 19px; font-size: 6px; }
  .dealer-chip { width: 12px; height: 12px; font-size: 6px; top: -5px; left: -5px; }
  .seat-action-tag { font-size: 7px; padding: 1px 3px; top: -4px; right: -4px; }
  .equity-badge { font-size: 8px; padding: 1px 4px; bottom: -12px; }

  /* Bet zones */
  .bet-zone-amt { font-size: 8px; padding: 1px 3px; }

  /* Log */
  .log-panel { max-width: 100%; margin: 4px 0; font-size: 11px;
               max-height: 56px; padding: 5px 10px; }

  /* Action bar */
  .action-bar { max-width: 100%; margin: 6px 0 0; }
  .action-buttons .btn { padding: 12px 0; font-size: 12px; }
  .bet-controls input[type="number"] { width: 68px; font-size: 12px; }

  /* Settings / straddle / rabbit */
  .settings-panel { max-width: 100%; margin: 0 0 6px;
                    border-radius: 0; gap: 10px; padding: 8px 10px; font-size: 12px; }
  .straddle-toggle { max-width: 100%; padding: 6px 8px; font-size: 12px; }
  .rabbit-hunt-area { max-width: 100%; padding: 6px 8px; }

  /* Auth */
  .auth-box { padding: 24px 20px; }
}

/* Landscape phone: keep felt shorter so action bar fits */
@media (max-width: 812px) and (orientation: landscape) and (max-height: 500px) {
  .felt-outer { width: 96vw; height: 50vw; }
  .felt { width: 75vw; height: 40vw; border-radius: 50px; border-width: 5px; }
  .log-panel { max-height: 40px; }
}

/* ===== Admin panel ===== */
/* Clean fixed square-ish admin box */
.admin-panel { width: 600px; max-width: 94vw; }
.admin-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.admin-toolbar input { flex: 1; padding: 9px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28); color: #fff; }
.admin-count { color: #8a90a6; font-size: 12px; white-space: nowrap; }
.admin-table-wrap { height: 46vh; overflow-y: auto; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.admin-table thead th { position: sticky; top: 0; z-index: 1; text-align: left;
  padding: 9px 12px; background: rgba(20,20,32,0.98); color: #b9c0d4;
  font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 11px; letter-spacing: 0.4px; }
/* Fixed column widths so nothing overflows into the next column */
.admin-table th:nth-child(1), .admin-table td:nth-child(1) { width: 33%; }
.admin-table th:nth-child(2), .admin-table td:nth-child(2) { width: 26%; }
.admin-table th:nth-child(3), .admin-table td:nth-child(3) { width: 41%; }
.admin-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle; }
.admin-table tr:hover td { background: rgba(255,255,255,0.03); }
.admin-name { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.admin-uname { font-weight: 700; }
.admin-name .tag { flex: 0 0 auto; }
.admin-bal { white-space: nowrap; overflow: hidden; }
/* Higher-specificity than the generic `.modal-box input { width:100% }` rule,
   which was making the balance box fill the cell and shove Save into Actions. */
.admin-table .admin-bal-input { width: 72px; padding: 5px 6px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28);
  color: #fff; margin-right: 5px; font-variant-numeric: tabular-nums; box-sizing: border-box; }
.admin-actions { white-space: nowrap; text-align: right; overflow: hidden; }
.admin-actions-col { text-align: right; }
.admin-actions .btn { margin-left: 3px; }
.btn.tiny { padding: 3px 6px; font-size: 11px; line-height: 1.5; border-radius: 6px; }
.btn.danger { background: #b23b47; border-color: #b23b47; color: #fff; }
.btn.danger:hover { background: #c9424f; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.admin-empty { text-align: center; color: #8a90a6; padding: 14px; margin: 0; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.4px; vertical-align: middle; }
.tag-admin { background: rgba(94,140,255,0.2); color: #9db4ff; border: 1px solid rgba(94,140,255,0.4); }
.tag-super { background: rgba(230,180,34,0.22); color: #ffd76a; border: 1px solid rgba(230,180,34,0.5); }

/* Admin panel tabs + site-design controls */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.admin-tab {
  background: rgba(255,255,255,0.05); color: #b7bdd0; border: 1px solid rgba(255,255,255,0.1);
  padding: 7px 16px; border-radius: 8px 8px 0 0; font-weight: 700; font-size: 13px; cursor: pointer;
}
.admin-tab.active { background: #4b47b8; color: #fff; border-color: #4b47b8; }
.admin-tabpane.hidden { display: none; }
.design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
.design-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #c8cde0; font-weight: 600; }
.design-grid input[type="text"] {
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.3); color: #fff;
}
.design-grid input[type="color"] {
  width: 100%; height: 36px; padding: 2px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.3);
}
.tag-banned { background: rgba(200,66,79,0.2); color: #ff9aa4; border: 1px solid rgba(200,66,79,0.5); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.dot-on { background: var(--green-ok, #3ddc97); box-shadow: 0 0 6px rgba(61,220,151,0.7); }
.dot-off { background: #5a5f70; }

/* ===== MegaMax-style table theme =====
   Reskins the felt, rail, seat pods, cards and pot to match the reference
   client: deep-purple room, warm tan felt inside a copper/wood oval rail,
   dark seat pods with name + stack + VIP star row + country flag. */
/* Room / felt / rail colours all derive from the super-admin site config,
   so a super-admin can re-theme the site live. */
.table-view {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.05), rgba(0,0,0,0.55) 90%),
    var(--site-room-bg, #241834);
}
.felt-wrap { background: transparent; }

/* Copper / wood oval rail (base colour = --site-rail) */
.felt-outer {
  border-radius: 46% / 60% !important;
  background: linear-gradient(160deg, rgba(255,235,200,0.35) 0%, rgba(0,0,0,0.28) 100%), var(--site-rail, #9c5f2a) !important;
  padding: 16px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), inset 0 2px 6px rgba(255,225,180,0.35),
              inset 0 -4px 10px rgba(0,0,0,0.45);
  border: none !important;
}
/* Felt (base colour = --site-felt) */
.felt {
  border-radius: 44% / 58% !important;
  background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,0.22) 0%, rgba(0,0,0,0.28) 100%), var(--site-felt, #93855e) !important;
  box-shadow: inset 0 6px 26px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(0,0,0,0.15) !important;
  border: none !important;
}

/* Pot label as a dark pill near the top of the felt */
.pot-label {
  background: rgba(10,8,18,0.72); color: #fff; font-weight: 700;
  padding: 3px 14px; border-radius: 999px; letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08);
}

/* Seat pod: rounded dark plaque with name over stack */
.seat-pod {
  background: linear-gradient(180deg, rgba(28,24,44,0.94), rgba(18,15,30,0.94));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 5px 12px 4px; min-width: 116px; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.seat.acting .seat-pod { box-shadow: 0 0 0 2px #f2c14e, 0 4px 16px rgba(242,193,78,0.5); }
.seat-pod .seat-name {
  color: #fff; font-weight: 700; font-size: 15px; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.seat-flag { font-size: 14px; line-height: 1; }
.seat-pod .seat-chips { justify-content: center; margin-top: 1px; }
.seat-pod .seat-stack-num { color: #ffd76a; font-weight: 700; font-size: 15px; }
.seat-stars { display: flex; justify-content: center; gap: 1px; margin-top: 2px; line-height: 1; }
.seat-stars .star { font-size: 11px; }
.seat-stars .star.on { color: #f2c14e; text-shadow: 0 0 3px rgba(242,193,78,0.6); }
.seat-stars .star.off { color: rgba(255,255,255,0.16); }

/* Avatar as a rounded tile sitting above the pod */
.seat-avatar {
  border-radius: 12px !important;
  background: linear-gradient(160deg, #3a3358, #211b38) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

/* Purple MEGAMAX-style card backs */
/* Branded card back (themed deck) — accent-coloured crown on a dark hatch. */
.card.back {
  color: transparent !important;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #463878 0%, #2a2050 60%, #1b1436 100%) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.08);
}
.dealer-chip {
  background: #fff; color: #1a1230; font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ===== MegaMax-style action bar ===== */
.action-bar { gap: 8px; }
.bet-controls { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.quick-bets { display: flex; gap: 8px; justify-content: center; }
.btn.quickbet {
  background: #4b47b8; color: #fff; border: none; border-radius: 8px;
  padding: 8px 18px; font-weight: 700; min-width: 60px;
}
.btn.quickbet:hover { background: #5a55d6; }
.bet-slider-row { display: flex; align-items: center; gap: 10px; }
.bet-slider-row #betSlider { flex: 1; accent-color: #6f6ae0; }
.btn.step {
  background: #2a2740; color: #fff; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; width: 34px; height: 34px; font-size: 18px; line-height: 1; padding: 0;
}
.btn.step:hover { background: #38344f; }
#betAmount {
  width: 108px; text-align: center; font-weight: 700; font-size: 15px;
  background: rgba(0,0,0,0.3); color: #fff; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 7px 6px;
}
.action-buttons { display: flex; gap: 8px; }
.action-buttons .btn {
  flex: 1; border: none; border-radius: 8px; padding: 12px 10px;
  font-weight: 800; font-size: 15px; color: #fff; letter-spacing: 0.2px;
}
.btn.fold  { background: #a5303c !important; }
.btn.fold:hover  { background: #bd3644 !important; }
.btn.check, .btn.call { background: #2f9d4e !important; }
.btn.check:hover, .btn.call:hover { background: #37b85b !important; }
.btn.bet, .btn.raise { background: #4b47b8 !important; }
.btn.bet:hover, .btn.raise:hover { background: #5a55d6 !important; }
.btn.timebank {
  flex: 0 0 auto; background: #8a7320 !important; color: #f4e4a8 !important;
  font-weight: 700; min-width: 120px;
}

/* ===== Pre-move checkbox bar ===== */
.premove-bar {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 8px 10px; background: rgba(14,11,24,0.85);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.premove-opt {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(40,36,60,0.9); color: #e8e8f2; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  user-select: none;
}
.premove-opt input { accent-color: #6f6ae0; }
.premove-opt.sitout { margin-left: auto; }

/* ===== MegaMax-style lobby ===== */
.lobby { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05), rgba(0,0,0,0.55) 80%), var(--site-room-bg, #1a1228); }
.lobby-subtabs { display: flex; gap: 4px; padding: 0 10px 8px; }
.lobby-subtabs .subtab {
  background: rgba(255,255,255,0.05); color: #b7bdd0; border: 1px solid rgba(255,255,255,0.08);
  padding: 5px 16px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.4px;
}
.lobby-subtabs .subtab.active { background: #c0303a; color: #fff; border-color: #c0303a; }

.table-list th { color: #9aa0b6; font-size: 11px; letter-spacing: 0.6px; }
.table-row { cursor: pointer; transition: filter 0.12s; border-left: 4px solid transparent; }
.table-row:hover { filter: brightness(1.18); }
.table-row td { padding: 9px 12px; }
.table-row .tbl-name { font-weight: 700; color: #fff; }
.table-row .stakes { color: #ffd76a; font-weight: 600; }
.table-row .pot { color: #d7dcec; }
.table-row .players.full { color: #ff8b93; }
.limit-badge {
  font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,0.12); color: #cdd3e6; margin-left: 4px;
}
.table-row .buyin { color: #aeb4c8; font-size: 12px; white-space: nowrap; }
.play-btn {
  background: #4b47b8; color: #fff; border: none; border-radius: 7px;
  padding: 6px 18px; font-weight: 800; font-size: 12px; cursor: pointer;
}
.play-btn:hover { background: #5a55d6; }

/* Stake tier colour bands (left accent + subtle row tint) */
.table-row.tier-green  { border-left-color: #2f9d4e; background: rgba(47,157,78,0.10); }
.table-row.tier-blue   { border-left-color: #3f7bd6; background: rgba(63,123,214,0.12); }
.table-row.tier-orange { border-left-color: #d9822b; background: rgba(217,130,43,0.12); }
.table-row.tier-purple { border-left-color: #8b5cf6; background: rgba(139,92,246,0.12); }
.table-row.tier-red    { border-left-color: #d0434f; background: rgba(208,67,79,0.12); }
.table-row.tier-royal  { border-left-color: #e6b422; background: rgba(230,180,34,0.14); }

.lobby-filterbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; margin-top: 6px;
  background: rgba(10,8,18,0.6); border-top: 1px solid rgba(255,255,255,0.08);
}
.lobby-filterbar input[type="text"] {
  flex: 0 0 260px; padding: 8px 12px; border-radius: 8px; color: #fff;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.14);
}
.lobby-toggle {
  display: inline-flex; align-items: center; gap: 6px; color: #c8cde0;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.lobby-toggle input { accent-color: #6f6ae0; }

/* ===== MegaMax-style settings drawer ===== */
.settings-panel {
  position: absolute; top: 52px; right: 0; z-index: 40;
  width: min(340px, 92vw); max-height: 82vh; overflow-y: auto;
  background: linear-gradient(180deg, #1c1730, #140f24);
  border-left: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px 0 0 12px; padding: 14px 16px;
  box-shadow: -8px 0 30px rgba(0,0,0,0.5);
}
.settings-title { color: #fff; font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.settings-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 2px; color: #dfe3f0; font-size: 13.5px; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer;
}
.settings-opt span:first-child { flex: 1; }
/* Hide the raw checkbox; render a pill switch after it */
.settings-opt input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.settings-opt .switch {
  flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px;
  background: #3a3450; position: relative; transition: background 0.15s;
}
.settings-opt .switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform 0.15s;
}
.settings-opt input[type="checkbox"]:checked + .switch { background: #c0303a; }
.settings-opt input[type="checkbox"]:checked + .switch::after { transform: translateX(18px); }
.settings-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

/* ===== Add-Chips tray (settings drawer) ===== */
.chip-buy {
  background: linear-gradient(180deg, rgba(30,24,48,0.9), rgba(18,14,30,0.9));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 12px;
}
.chip-buy-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.chip-buy-title { color: #fff; font-weight: 800; font-size: 14px; }
.chip-buy-total {
  color: #ffd76a; font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums;
  background: rgba(255,215,106,0.12); border: 1px solid rgba(255,215,106,0.3);
  border-radius: 999px; padding: 2px 12px;
}
.chip-tray {
  display: flex; gap: 10px; justify-content: space-between;
  padding: 4px 2px 12px;
}
/* A round poker chip that doubles as a tap button */
.buy-chip {
  position: relative; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--chip-bd, #333);
  background: var(--chip-bg, #444);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.buy-chip::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  background: repeating-conic-gradient(var(--chip-ring, #fff) 0 10deg, transparent 10deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.buy-chip::after {
  content: ''; position: absolute; inset: 17%; border-radius: 50%;
  background: var(--chip-bg, #444);
  box-shadow: inset 0 0 0 1px var(--chip-ring, #fff),
              inset 0 2px 3px rgba(255,255,255,0.28),
              inset 0 -2px 3px rgba(0,0,0,0.3);
}
.buy-chip .chip-face {
  position: relative; z-index: 2; color: #fff; font-weight: 800;
  font-size: 13px; line-height: 1; letter-spacing: -0.3px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.75);
}
.buy-chip:hover { transform: translateY(-3px); box-shadow: 0 8px 14px rgba(0,0,0,0.55); }
.buy-chip:active { transform: translateY(-1px) scale(0.96); }
.buy-chip.chip-pop { animation: chipPop 0.28s cubic-bezier(.2,1.3,.4,1); }
@keyframes chipPop {
  0% { transform: translateY(-3px) scale(1); }
  45% { transform: translateY(-8px) scale(1.16); }
  100% { transform: translateY(0) scale(1); }
}
.chip-buy-row { display: flex; align-items: center; gap: 6px; }
.chip-buy-row .rebuy-input { flex: 1; width: auto; }

/* Stream mode: blur opponent identities (avatars + names) */
body.stream-mode .seat:not(.hero) .seat-avatar,
body.stream-mode .seat:not(.hero) .seat-name { filter: blur(6px); }

/* ===== Showdown polish ===== */
/* Showdown hand label — floats above the seat so it's never clipped (the old
   below-the-pod position fell off the felt for the bottom player). */
.seat-handlabel {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  z-index: 9; font-size: 13px; font-weight: 800; color: #1a1200;
  background: linear-gradient(180deg, #ffd76a, #e0a324);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 8px; padding: 3px 12px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.win-banner {
  position: absolute; top: 16%; left: 50%; transform: translateX(-50%); z-index: 60;
  background: linear-gradient(180deg, #ffd76a, #e0a324); color: #2a1c00;
  font-weight: 900; font-size: 20px; letter-spacing: 1px;
  padding: 10px 26px; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(230,180,34,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
  animation: winpop 0.35s ease-out;
}
.win-banner span { color: #1a1200; }
@keyframes winpop { from { transform: translateX(-50%) scale(0.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ===== Lobby table preview ===== */
.lobby { position: relative; }
.wait-count { color: #7fd6a0; font-weight: 700; font-size: 12px; }
.table-preview {
  position: absolute; top: 108px; right: 12px; width: 260px; z-index: 30;
  pointer-events: none; /* let clicks pass through to the row's Play button */
  background: linear-gradient(180deg, #201a36, #15102640); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.5);
}
.pv-head { color: #fff; font-weight: 800; font-size: 15px; }
.pv-head span { font-size: 11px; color: #b7bdd0; font-weight: 700;
  background: rgba(255,255,255,0.1); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.pv-stakes { color: #ffd76a; font-size: 12px; margin: 4px 0 8px; }
.pv-seats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.pv-seat { display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,0.03); }
.pv-seatno { color: #7b8198; width: 16px; }
.pv-name { color: #fff; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-stack { color: #ffd76a; font-weight: 600; }
.pv-empty { color: #6b7088; font-style: italic; }
.pv-foot { color: #aeb4c8; font-size: 11px; margin-bottom: 10px; }
.pv-btn { width: 100%; pointer-events: auto; }

/* ===== Transaction history (cashier ledger) ===== */
.tx-modal { width: min(720px, 94vw); max-width: 720px; }
.tx-table-wrap { max-height: 56vh; overflow-y: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); }
.tx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tx-table thead th {
  position: sticky; top: 0; text-align: left; padding: 8px 12px;
  background: rgba(20,20,32,0.96); color: #b9c0d4; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 11px; letter-spacing: 0.5px;
}
.tx-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tx-table tr:hover td { background: rgba(255,255,255,0.03); }
.tx-id { color: #8a90a6; font-variant-numeric: tabular-nums; }
.tx-status {
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 5px;
  background: rgba(47,157,78,0.18); color: #7fd6a0; border: 1px solid rgba(47,157,78,0.4);
}
.tx-amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-amt.pos { color: #4fd18a; }
.tx-amt.neg { color: #ff8b93; }
.tx-note { color: #aeb4c8; }

/* ===== Multi-table tab strip (user-friendly bits) ===== */
.table-tab { display: inline-flex; align-items: center; gap: 6px; }
.tab-name { white-space: nowrap; }
.tab-watch { opacity: 0.6; font-size: 0.85em; }
.tab-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; font-size: 14px; line-height: 1;
  color: #cfd3e2; opacity: 0.55;
}
.tab-close:hover { background: rgba(255,255,255,0.2); opacity: 1; }
.tab-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff5964;
  box-shadow: 0 0 6px rgba(255,89,100,0.9); flex: 0 0 auto;
}
/* Pulse the tab where it's your turn so you can't miss it across tables */
.table-tab.needs-action {
  animation: tabpulse 1s ease-in-out infinite;
  border-color: #ff5964 !important;
}
@keyframes tabpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,89,100,0.0); }
  50% { box-shadow: 0 0 0 3px rgba(255,89,100,0.45); }
}
.add-table-btn { font-weight: 700; opacity: 0.9; }
.add-table-btn:hover { opacity: 1; }

/* ===== Bigger hole cards, overlaying each player's profile ===== */
/* Cards float over the avatar and peek above the nameplate (the pod sits on
   top of the card bottoms, so the name stays readable). */
.seat-avatar { position: relative; z-index: 1; }
.seat-cards {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 2; margin: 0; flex-wrap: nowrap; gap: 4px; max-width: none;
}
.seat-pod { position: relative; z-index: 3; }
.seat-cards .card {
  width: 80px; height: 112px; font-size: 30px; border-radius: 9px;
  box-shadow: 0 7px 16px rgba(0,0,0,0.55);
}
.seat-cards.four-cards .card { width: 58px; height: 82px; font-size: 22px; }
/* Keep the deal animation smooth: cards transform-origin from centre */
.seat-cards .card { transform-origin: center center; will-change: transform, opacity; }

/* Community (board) cards — larger, front and centre. */
.board-cards { gap: 9px; }
.board-cards .card { width: 80px; height: 112px; font-size: 32px; border-radius: 9px; }

/* Small screens: scale everything down so it still fits the seat/board. */
@media (max-width: 768px) {
  .seat-cards { top: 8px; }
  .seat-cards .card { width: 42px; height: 60px; font-size: 16px; }
  .seat-cards.four-cards .card { width: 30px; height: 43px; font-size: 12px; }
  .board-cards .card { width: 50px; height: 70px; font-size: 21px; }
}

/* ===== Fit-to-screen table view (no page scroll) =====
   When seated/watching a table, the whole app fills exactly one viewport and
   the felt flexes to fill the space left between the header and the action bar.
   The lobby and auth screens keep their normal (scrollable) behaviour. */
body.at-table { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.at-table .topbar,
body.at-table #tableTabsBar { flex: 0 0 auto; }
body.at-table #tableView {
  position: relative;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; padding: 6px clamp(8px, 1.5vw, 20px); margin: 0 auto;
  box-sizing: border-box; width: 100%;
}
body.at-table .table-toolbar { flex: 0 0 auto; margin-bottom: 2px; }
body.at-table .felt-wrap {
  flex: 1 1 auto; min-height: 0; padding: 20px 0;
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
/* Size the felt by the available HEIGHT (keeping its aspect ratio). */
body.at-table .felt-outer {
  height: 100%; width: auto; max-width: 100%;
  aspect-ratio: 1160 / 720;
}
/* Chat + action controls OVERLAY the felt (bottom corners) so showing/hiding
   the action bar never changes the table size. */
body.at-table .log-panel {
  position: absolute; left: 12px; bottom: 12px; width: 250px; max-height: 78px;
  margin: 0; z-index: 20; font-size: 11px; padding: 6px 9px;
  background: rgba(8,6,14,0.72); border-radius: 10px; backdrop-filter: blur(3px);
}
body.at-table #preMoveBar,
body.at-table #actionBar {
  position: absolute; right: 12px; bottom: 12px; margin: 0; z-index: 25;
  width: min(430px, 48vw);
  background: rgba(8,6,14,0.72); border-radius: 12px; padding: 10px;
  backdrop-filter: blur(3px); box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
body.at-table #straddleToggle,
body.at-table #rabbitHuntArea {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  margin: 0; z-index: 22;
}

/* On narrow screens, drop the action controls to a full-width bottom bar. */
@media (max-width: 720px) {
  body.at-table #preMoveBar, body.at-table #actionBar {
    right: 6px; left: 6px; width: auto; bottom: 6px;
  }
  body.at-table .log-panel { width: 42%; max-height: 52px; }
}

/* ===== Pre-action buttons ===== */
.premove-bar { display: flex; flex-direction: column; gap: 8px; }
.premove-sitout {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-end;
  color: #c8cde0; font-size: 12px; font-weight: 600; cursor: pointer;
}
.premove-sitout input { accent-color: #6f6ae0; }
.premove-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.premove-btn {
  border: 1px solid rgba(255,255,255,0.18); border-radius: 9px; cursor: pointer;
  background: rgba(40,36,60,0.9); color: #e8e8f2; font-weight: 700; font-size: 14px;
  padding: 11px 8px;
}
.premove-btn:hover { background: rgba(60,54,86,0.95); }
/* Armed = this action will auto-fire on your turn */
.premove-btn.armed {
  background: #2f9d4e; border-color: #7ff0a6; color: #fff;
  box-shadow: 0 0 0 2px rgba(127,240,166,0.5);
}
.premove-btn[data-pre="fold"].armed,
.premove-btn[data-pre="checkfold"].armed { background: #a5303c; border-color: #ff9aa4; }

/* =====================================================================
   REFERENCE-EXACT RESKIN — matched to the MegaMax screen recordings:
   purple room, tan stadium rail, taupe felt with watermark title,
   black seat plaques + character portraits, big translucent SIT circles,
   giant-rank cards, chip + K-notation bets, tabbed chat panel.
   ===================================================================== */

:root {
  --site-felt: #a08a68;
  --site-rail: #b5814c;
  --site-room-bg: #412b57;
}

/* Lobby / global background: near-black night blue like the reference */
body {
  background:
    radial-gradient(ellipse at 25% 0%, rgba(60,60,110,0.25), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(70,40,90,0.2), transparent 55%),
    #0e0d17;
}

/* Purple room, blended chrome */
.table-view {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.055), transparent 55%),
    radial-gradient(ellipse at 50% 115%, rgba(0,0,0,0.4), transparent 60%),
    var(--site-room-bg, #412b57) !important;
}
body.at-table { background: var(--site-room-bg, #412b57); }
body.at-table .topbar { background: rgba(0,0,0,0.16) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; box-shadow: none !important; }
body.at-table #tableTabsBar { background: rgba(0,0,0,0.10) !important; border-bottom: none !important; }
body.at-table .table-toolbar { background: transparent; }

/* ---- Stadium (racetrack) table: tan double-edged rail ---- */
.felt-outer {
  border-radius: 999px !important;
  padding: clamp(10px, 2%, 26px) !important;
  background:
    linear-gradient(178deg,
      color-mix(in srgb, var(--site-rail, #b5814c) 68%, #ffe9c4) 0%,
      var(--site-rail, #b5814c) 42%,
      color-mix(in srgb, var(--site-rail, #b5814c) 62%, #241105) 100%) !important;
  border: 2px solid color-mix(in srgb, var(--site-rail, #b5814c) 50%, #ffedd0) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.55),
    inset 0 3px 8px rgba(255,236,205,0.45),
    inset 0 -7px 16px rgba(0,0,0,0.5) !important;
}
/* Felt: taupe radial, dark-brown inner lip, slim rail band like the ref */
.felt {
  width: 93% !important;
  height: 86% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 36%,
      rgba(255,250,236,0.35) 0%, rgba(255,250,236,0.12) 42%, rgba(0,0,0,0.30) 100%),
    var(--site-felt, #a08a68) !important;
  border: clamp(3px, 0.6vw, 7px) solid rgba(62,34,10,0.55) !important;
  box-shadow: inset 0 14px 48px rgba(0,0,0,0.28) !important;
}

/* ---- Felt watermark: ornament + brand + table title ---- */
.felt-brand { position: absolute; inset: 0; pointer-events: none; text-align: center; z-index: 0; }
.felt-logo {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  font-size: clamp(56px, 11vw, 130px); line-height: 1; color: rgba(255,255,255,0.07);
}
.felt-brandname {
  position: absolute; left: 50%; top: 57%; transform: translateX(-50%);
  font-size: clamp(11px, 1.5vw, 19px); font-weight: 700; letter-spacing: 7px;
  text-transform: uppercase; color: rgba(255,255,255,0.11); white-space: nowrap;
}
.felt-title {
  position: absolute; left: 50%; top: 64%; transform: translateX(-50%);
  font-size: clamp(13px, 2vw, 26px); font-weight: 600;
  color: rgba(255,255,255,0.26); letter-spacing: 0.4px; white-space: nowrap;
}
.board-area { z-index: 1; }

/* Pot: dark pill only (no center chip pile), like the ref */
#potChips.pot-chips { display: none !important; }
.street-label { display: none !important; }
.pot-label {
  font-size: 15px; padding: 5px 22px;
  background: rgba(18,14,26,0.55) !important;
  border: none !important;
}

/* ---- Cards: corner index + giant rank glyph (reference deck) ---- */
.card .card-bigrank {
  position: absolute; right: 5%; bottom: -7%;
  font-weight: 700; font-size: 2.5em; line-height: 1.15;
  letter-spacing: -0.04em;
}
.card .card-corner.tl { top: 4%; left: 6%; }
.card .card-corner.tl b { font-size: 0.66em; }
.card .card-corner.tl i { font-size: 0.55em; }

/* Card backs: medium purple with a white frame, like the ref deck */
.card.back {
  background: linear-gradient(168deg, #6b58a8 0%, #4c3b82 55%, #382a61 100%) !important;
  border: 2px solid #f4f2fa !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.3) !important;
}
.card.back::after {
  content: '\2756';
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.85em !important;
  text-shadow: none !important;
}

/* ---- Seats: character portrait above a near-black plaque ---- */
.seat { width: 150px; }
.seat-avatar {
  width: 76px; height: 84px;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 auto -14px;
  position: relative; z-index: 5;
  font-size: 0; /* hides the old initial-letter fallback */
}
.seat-portrait { width: 100%; height: 100%; object-fit: contain; display: block; }
.seat.acting .seat-avatar { border: none !important; box-shadow: none !important; }

.seat-pod {
  position: relative; z-index: 4;
  background: linear-gradient(180deg, rgba(26,24,32,0.95), rgba(6,5,10,0.97)) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  border-radius: 20px !important;
  padding: 6px 16px 10px !important;
  min-width: 138px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5) !important;
}
.seat.acting .seat-pod {
  box-shadow: 0 0 0 2px rgba(255,236,170,0.9), 0 6px 20px rgba(0,0,0,0.55) !important;
}
.seat-pod .seat-name { font-weight: 600; }
.seat-pod .seat-stack-num { color: #f4f6ff !important; }
.seat-stars {
  position: absolute; left: 0; right: 0; bottom: -7px;
  justify-content: center; margin: 0;
}
.seat-avatar .dealer-chip {
  position: absolute; left: -8px; bottom: 0; width: 22px; height: 22px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; z-index: 7;
}

/* ---- Empty seats: big translucent SIT circles ---- */
.seat-avatar.seat-empty {
  width: clamp(72px, 7.5vw, 102px) !important;
  height: clamp(72px, 7.5vw, 102px) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 38%, rgba(96,76,130,0.32), rgba(26,17,44,0.55)) !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35) !important;
  margin-bottom: 0;
}
.seat-sit-btn, .sit-word {
  width: 100% !important; height: 100% !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: 3px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
}
.seat-sit-btn:hover { background: rgba(255,255,255,0.09) !important; }
.seat-empty-still { opacity: 0.55; }
.sit-word { cursor: default; }

/* ---- Last-action pill floating above the seat (reference style) ---- */
.seat-action-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  z-index: 9; white-space: nowrap;
  background: linear-gradient(180deg, #f3eeff, #c8bcf0); color: #46387e;
  border-radius: 999px; padding: 3px 18px;
  font-size: 13.5px; font-weight: 700; text-transform: capitalize;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}
.seat-action-tag.act-check, .seat-action-tag.act-call {
  background: linear-gradient(180deg, #a4ecb2, #46c369); color: #073d17;
}
.seat-action-tag.act-fold {
  background: linear-gradient(180deg, #e4e2ec, #aaa5bd); color: #38334c;
}
.seat-action-tag.act-allin {
  background: linear-gradient(180deg, #ffd76a, #e0a324); color: #2a1c00;
}

/* ---- Showdown hand text: plain white with shadow, under the seat ---- */
.seat-handlabel {
  top: auto; bottom: -26px; left: 50%; transform: translateX(-50%);
  background: none; border: none; box-shadow: none; padding: 0; border-radius: 0;
  color: #fff; font-size: 14.5px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.55);
  z-index: 9; white-space: nowrap;
}

/* ---- Bets on felt: chip cluster + compact amount pill ---- */
.bet-zone { display: flex; flex-direction: row !important; align-items: center; gap: 6px; }
.bet-zone .bet-amt {
  background: rgba(14,11,20,0.62); color: #fff;
  font-weight: 700; font-size: 13.5px;
  padding: 2px 11px; border-radius: 999px;
  box-shadow: 0 2px 7px rgba(0,0,0,0.4);
  white-space: nowrap;
}

/* ---- Hole cards: small fanned backs behind the avatar; big fan when
       revealed (hero always, opponents at showdown) ---- */
.seat-cards { gap: 0 !important; }
.seat-cards .card { margin: 0 -8px; width: 46px !important; height: 64px !important; }
.seat.revealed .seat-cards { top: -50px; }
.seat.revealed .seat-cards .card {
  width: 78px !important; height: 109px !important; font-size: 29px;
  margin: 0 -12px;
}
.seat-cards .card:nth-child(1) { transform: rotate(-12deg) translateY(6px); }
.seat-cards .card:nth-child(2) { transform: rotate(-4deg); }
.seat-cards .card:nth-child(3) { transform: rotate(4deg); }
.seat-cards .card:nth-child(4) { transform: rotate(12deg) translateY(6px); }
.seat-cards .card:nth-child(5) { transform: rotate(20deg) translateY(15px); }
.seat-cards .card:nth-child(6) { transform: rotate(28deg) translateY(27px); }
.seat-cards .card:first-child:nth-last-child(2) { transform: rotate(-7deg) translateY(2px); }
.seat-cards .card:nth-child(2):nth-last-child(1) { transform: rotate(7deg) translateY(2px); }

/* ---- Chat / log: tabbed panel bottom-left with collapse chevron ---- */
body.at-table .log-wrap {
  position: absolute; left: 12px; bottom: 12px; z-index: 20;
  width: min(430px, 34vw);
}
body.at-table .log-panel {
  position: static !important; width: auto !important; max-height: 76px;
  margin: 0 !important; border-radius: 0 0 10px 10px !important;
}
.log-tabs {
  display: flex; align-items: stretch;
  background: rgba(24,22,40,0.92);
  border-radius: 10px 10px 0 0; overflow: hidden;
}
.log-tab {
  padding: 5px 16px; font-size: 12px; line-height: 1.4; cursor: default;
  color: #fff; opacity: 0.95;
}
.log-tab.tab-chat { background: #c0303a; }
.log-tab.tab-hist { background: #4b47b8; }
.log-collapse {
  margin-left: auto; padding: 5px 12px; cursor: pointer;
  color: #cfd3e2; font-size: 13px; transform: rotate(90deg);
}
.log-wrap.collapsed .log-panel { display: none; }
.log-wrap.collapsed .log-tabs { border-radius: 10px; }
.log-wrap:not(.at-table) { }

/* ---- Lobby rows: variant tints + colored names + buy-in pill ---- */
.table-row.var-omaha { background: rgba(74,82,182,0.30); }
.table-row.var-omaha6 { background: rgba(200,104,28,0.30); }
.table-row.var-omaha .tbl-name { color: #b9c4ff; }
.table-row.var-omaha6 .tbl-name { color: #ffc590; }
.buyin-pill {
  background: rgba(8,8,16,0.5); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; padding: 4px 14px; display: inline-block;
  font-weight: 600; color: #e8ecf8; font-size: 12px;
}
.play-btn { background: #5a55c8 !important; }
.play-btn:hover { background: #6a65dd !important; }

/* =====================================================================
   EXACT-PASS refinements — element-by-element match to the reference
   ===================================================================== */

/* Reference font stack across the table view */
.table-view, .table-view button, .table-view input {
  font-family: Roboto, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Fully immersive table: no site topbar, floating icon chrome */
body.at-table .topbar { display: none !important; }
body.at-table #tableTabsBar { background: transparent !important; padding-top: 8px; }
body.at-table .table-toolbar { padding: 2px 6px; }
.toolbar-spacer { flex: 1; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: #e8e6f2; font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: rgba(255,255,255,0.16); }
.table-title { color: #cfc8e2; font-weight: 600; font-size: 13px; }
.hand-number { color: #9a90b5; font-size: 12px; }
.table-jackpot { text-align: right; line-height: 1.15; margin-left: 6px; }
.table-jackpot b { display: block; font-size: 9px; letter-spacing: 1.5px; color: #d8b13c; font-weight: 700; }
.table-jackpot i { display: block; font-style: normal; font-size: 17px; font-weight: 800; color: #f2cf5c; font-variant-numeric: tabular-nums; }

/* Rail: detached thin outer ring (tan line + purple gap) like the ref */
.felt-outer {
  box-shadow:
    0 0 0 7px var(--site-room-bg, #412b57),
    0 0 0 9px color-mix(in srgb, var(--site-rail, #b5814c) 78%, #ffe9c4),
    0 30px 90px rgba(0,0,0,0.55),
    inset 0 3px 8px rgba(255,236,205,0.45),
    inset 0 -7px 16px rgba(0,0,0,0.5) !important;
}
/* Felt sheen band across the middle */
.felt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 24%, rgba(255,252,240,0.055) 40%, rgba(255,252,240,0.075) 50%,
    rgba(255,252,240,0.045) 60%, transparent 76%);
}

/* Watermark emblem is an ornate line-art SVG now */
svg.felt-logo {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: clamp(70px, 13vw, 150px); height: auto;
  color: rgba(255,255,255,0.10);
}

/* Pot pill: compact, centered */
.pot-label { display: inline-block; }

/* Board cards: serif giant rank like the reference deck */
.card .card-bigrank {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600; font-size: 2.6em; bottom: -9%;
}
.card { border-radius: 9px; }

/* Card backs: darker purple, thin white frame, subtle inner pattern */
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 7px),
    linear-gradient(165deg, #55428e 0%, #372a66 55%, #2a1f52 100%) !important;
  border: 1.5px solid #efedf6 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1.5px rgba(255,255,255,0.22) !important;
}
.card.back::after { content: '\2756'; color: rgba(255,255,255,0.42) !important; font-size: 0.8em !important; }

/* Seat plaques: wider, flatter, subtle outline; soft acting glow */
.seat-pod {
  min-width: 150px !important; border-radius: 22px !important;
  padding: 5px 18px 10px !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.seat.acting .seat-pod {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.75), 0 0 18px rgba(255,246,214,0.35),
              0 6px 20px rgba(0,0,0,0.55) !important;
}
.seat-stars .star { font-size: 8.5px; letter-spacing: 0.5px; }
.seat-stars .star.on { color: #e8bf4c; text-shadow: none; }
.seat-stars .star.off { color: rgba(255,255,255,0.22); }

/* Empty SIT circles: a touch larger and softer */
.seat-avatar.seat-empty {
  width: clamp(78px, 8vw, 112px) !important;
  height: clamp(78px, 8vw, 112px) !important;
  background: radial-gradient(circle at 50% 38%, rgba(110,92,140,0.28), rgba(30,20,48,0.5)) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.seat-sit-btn, .sit-word { font-size: 14px !important; letter-spacing: 3.5px; color: rgba(255,255,255,0.85) !important; }

/* Action bar geometry closer to the ref: flatter corners, taller buttons */
body.at-table #actionBar { border-radius: 8px; }
.action-buttons .btn { border-radius: 5px; padding: 14px 10px; font-size: 15.5px; }
.btn.quickbet { border-radius: 5px; padding: 7px 16px; font-weight: 600; }
.btn.step { border-radius: 5px; }
#betAmount { border-radius: 5px; }
.bet-slider-row #betSlider {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.25); outline: none;
}
.bet-slider-row #betSlider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5); cursor: pointer;
}

/* Bottom-left standalone sit-out checkbox */
.sitout-corner {
  position: absolute; left: 16px; bottom: 116px; z-index: 21;
  display: inline-flex; align-items: center; gap: 8px;
  color: #efecf6; font-size: 13.5px; font-weight: 500; cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.sitout-corner input {
  width: 16px; height: 16px; accent-color: #5a55c8; cursor: pointer;
}

/* Bottom-right square history button */
.hist-btn {
  position: absolute; right: 14px; bottom: 190px; z-index: 21;
  width: 46px; height: 40px; border-radius: 9px; border: none; cursor: pointer;
  background: #4b47b8; color: #fff; font-size: 17px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.hist-btn:hover { background: #5a55d6; }

/* Overlap fixes: stack the left-side controls above the chat panel */
.sitout-corner { bottom: 152px; }
body.at-table #straddleToggle,
body.at-table #rabbitHuntArea {
  left: 16px; right: auto; bottom: 182px; transform: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* =====================================================================
   CLASSIC PREMIUM THEME — refined, adult, casino-grade look.
   Mutes the saturated "toy" palette, swaps cartoon portraits for
   monogram medallions, walnut rail, deep-green felt, gold hairlines.
   ===================================================================== */

:root {
  --site-felt: #2e5c46;
  --site-rail: #5a3a20;
  --site-room-bg: #262033;
  --gold: #c9a227;
  --gold-soft: #d8bd6a;
}

/* Brand mark: gold spade, serif brand */
.brand-mark { color: var(--gold-soft); font-size: 20px; }
.brand-name { font-family: Georgia, 'Times New Roman', serif; letter-spacing: 1px; }

/* Room: near-black aubergine with a soft ceiling light */
.table-view {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255,246,220,0.05), transparent 52%),
    radial-gradient(ellipse at 50% 118%, rgba(0,0,0,0.5), transparent 60%),
    var(--site-room-bg, #262033) !important;
}
body.at-table { background: var(--site-room-bg, #262033); }

/* Rail: dark walnut with a satin sheen and gold hairline rings */
.felt-outer {
  background:
    linear-gradient(176deg,
      color-mix(in srgb, var(--site-rail, #5a3a20) 72%, #e8c894) 0%,
      color-mix(in srgb, var(--site-rail, #5a3a20) 88%, #f2ddb0) 18%,
      var(--site-rail, #5a3a20) 46%,
      color-mix(in srgb, var(--site-rail, #5a3a20) 60%, #120a04) 100%) !important;
  border: 1px solid rgba(216,189,106,0.55) !important;
  box-shadow:
    0 0 0 6px var(--site-room-bg, #262033),
    0 0 0 7px rgba(216,189,106,0.4),
    0 32px 90px rgba(0,0,0,0.65),
    inset 0 2px 6px rgba(255,235,200,0.22),
    inset 0 -8px 18px rgba(0,0,0,0.55) !important;
}
/* Felt: deep green, strong vignette, subdued sheen */
.felt {
  background:
    radial-gradient(ellipse at 50% 38%,
      rgba(255,255,240,0.14) 0%, rgba(255,255,240,0.05) 40%, rgba(0,0,0,0.38) 100%),
    var(--site-felt, #2e5c46) !important;
  border: clamp(2px, 0.5vw, 5px) solid rgba(20,12,4,0.6) !important;
  box-shadow: inset 0 16px 55px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(216,189,106,0.18) !important;
}
.felt::after {
  background: linear-gradient(180deg,
    transparent 26%, rgba(255,252,238,0.035) 42%, rgba(255,252,238,0.05) 50%,
    rgba(255,252,238,0.03) 58%, transparent 74%);
}

/* Felt lettering: understated serif small-caps */
svg.felt-logo { color: rgba(255,252,238,0.06); }
.felt-brandname {
  font-family: Georgia, 'Times New Roman', serif;
  color: rgba(216,189,106,0.14); letter-spacing: 9px;
}
.felt-title {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 500;
  color: rgba(255,252,238,0.17); font-size: clamp(12px, 1.7vw, 22px);
}

/* Pot pill: charcoal with a gold hairline */
.pot-label {
  background: rgba(12,10,18,0.6) !important;
  border: 1px solid rgba(216,189,106,0.3) !important;
  font-size: 14.5px; letter-spacing: 0.4px;
}

/* Board cards: warm ivory, refined shadow */
.card {
  background: linear-gradient(165deg, #fdfcf6 0%, #f1ecdd 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.card.red { color: #b3242f; }
.card.black { color: #23262e; }

/* Card backs: oxblood with a fine gold lattice and double gold frame */
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(216,189,106,0.16) 0 1.5px, transparent 1.5px 7px),
    repeating-linear-gradient(-45deg, rgba(216,189,106,0.16) 0 1.5px, transparent 1.5px 7px),
    linear-gradient(165deg, #571f26 0%, #3d1218 60%, #2e0c11 100%) !important;
  border: 1.5px solid #d8bd6a !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(216,189,106,0.35) !important;
}
.card.back::after {
  content: '\2660';
  color: rgba(216,189,106,0.75) !important;
  font-size: 0.9em !important;
}

/* ---- Seats: monogram medallion + charcoal plaque with gold hairline ---- */
.seat-avatar { width: 62px; height: 66px; margin: 0 auto -12px; }
.seat-medallion {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, #4a4360 0%, #262138 55%, #16121f 100%);
  border: 1px solid rgba(216,189,106,0.65);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(216,189,106,0.16),
              inset 0 2px 5px rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px; font-weight: 600; color: #d8cba6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.seat.acting .seat-medallion {
  border-color: #e8d48a;
  box-shadow: 0 0 14px rgba(216,189,106,0.45), 0 4px 12px rgba(0,0,0,0.5),
              inset 0 0 0 2px rgba(216,189,106,0.3);
}
.seat-pod {
  background: linear-gradient(180deg, rgba(24,22,30,0.96), rgba(8,7,12,0.97)) !important;
  border: 1px solid rgba(216,189,106,0.35) !important;
}
.seat.acting .seat-pod {
  box-shadow: 0 0 0 1.5px rgba(216,189,106,0.8), 0 0 18px rgba(216,189,106,0.25),
              0 6px 20px rgba(0,0,0,0.55) !important;
}
.seat-stars .star.on { color: #b99a3e; }
.seat-stars .star.off { color: rgba(255,255,255,0.14); }

/* Empty seats: graphite circles, quiet */
.seat-avatar.seat-empty {
  background: radial-gradient(circle at 50% 38%, rgba(70,64,90,0.28), rgba(16,13,26,0.5)) !important;
  border: 1px solid rgba(216,189,106,0.28) !important;
}
.seat-sit-btn, .sit-word { color: rgba(232,224,200,0.8) !important; letter-spacing: 3px; }

/* Action pills: dark, bordered, understated */
.seat-action-tag {
  background: rgba(16,13,22,0.88); color: #e6ddc4;
  border: 1px solid rgba(216,189,106,0.4);
  box-shadow: 0 3px 9px rgba(0,0,0,0.5);
  font-weight: 600; font-size: 12.5px; letter-spacing: 0.5px;
}
.seat-action-tag.act-check, .seat-action-tag.act-call {
  background: rgba(14,36,24,0.9); color: #9fdcb4; border-color: rgba(80,180,120,0.5);
}
.seat-action-tag.act-fold {
  background: rgba(20,17,24,0.85); color: #a49da8; border-color: rgba(255,255,255,0.16);
}
.seat-action-tag.act-bet, .seat-action-tag.act-raise, .seat-action-tag.act-allin {
  background: rgba(40,26,8,0.9); color: #ecd28a; border-color: rgba(216,189,106,0.55);
}

/* Showdown hand text: soft parchment */
.seat-handlabel { color: #efe6cc; font-weight: 600; font-size: 14px; letter-spacing: 0.3px; }

/* Bet pills on felt */
.bet-zone .bet-amt {
  background: rgba(12,10,16,0.68); border: 1px solid rgba(216,189,106,0.25);
  font-weight: 600; font-size: 13px;
}

/* ---- Action bar: deep muted buttons, satin finish ---- */
body.at-table #preMoveBar,
body.at-table #actionBar {
  background: linear-gradient(180deg, rgba(18,15,24,0.88), rgba(10,8,14,0.92));
  border: 1px solid rgba(216,189,106,0.22);
}
.btn.fold  { background: linear-gradient(180deg, #8e2f38, #6b1f27) !important; }
.btn.fold:hover  { background: linear-gradient(180deg, #a13641, #7c242e) !important; }
.btn.check, .btn.call { background: linear-gradient(180deg, #23744c, #175134) !important; }
.btn.check:hover, .btn.call:hover { background: linear-gradient(180deg, #2a8759, #1c5f3e) !important; }
.btn.bet, .btn.raise { background: linear-gradient(180deg, #3d4180, #2b2e5e) !important; }
.btn.bet:hover, .btn.raise:hover { background: linear-gradient(180deg, #484d96, #33376e) !important; }
.action-buttons .btn {
  border: 1px solid rgba(255,255,255,0.14);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4); letter-spacing: 0.4px;
}
.btn.quickbet {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  color: #ddd8e8;
}
.btn.quickbet:hover { background: rgba(255,255,255,0.14); }
.btn.timebank {
  background: linear-gradient(180deg, #6e5a1c, #4e3f12) !important;
  border: 1px solid rgba(216,189,106,0.4); color: #ecd9a0 !important;
}
.premove-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }

/* Chat: charcoal tabs with gold hairline, no candy colors */
.log-tabs {
  background: rgba(14,12,20,0.92);
  border-bottom: 1px solid rgba(216,189,106,0.2);
}
.log-tab {
  background: transparent !important;
  color: #b9b2c4; font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px;
}
.log-tab.tab-chat { color: #e6ddc4; box-shadow: inset 0 -2px 0 var(--gold-soft); }
body.at-table .log-panel { background: rgba(10,8,14,0.78); }

/* History button: quiet charcoal square with gold border */
.hist-btn {
  background: rgba(20,17,28,0.85); border: 1px solid rgba(216,189,106,0.35);
  color: #d8cba6; font-size: 18px;
}
.hist-btn:hover { background: rgba(35,30,46,0.9); }

/* Toolbar icons + jackpot: refined */
.icon-btn { background: rgba(255,255,255,0.05); border-color: rgba(216,189,106,0.25); color: #d8d2c2; }
.icon-btn:hover { background: rgba(216,189,106,0.15); }
.table-jackpot b { color: #b99a3e; }
.table-jackpot i { color: var(--gold-soft); font-family: Georgia, serif; font-weight: 700; }

/* Lobby: quieter row tints, gold accents, serif headline feel */
body {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(60,52,86,0.35), transparent 55%),
    #131019;
}
.table-row.var-omaha { background: rgba(58,64,118,0.16); }
.table-row.var-omaha6 { background: rgba(132,84,32,0.15); }
.table-row.var-omaha .tbl-name { color: #aab6e8; }
.table-row.var-omaha6 .tbl-name { color: #dcae7c; }
.table-list tbody tr:hover { background: rgba(216,189,106,0.07); }
.play-btn {
  background: rgba(216,189,106,0.12) !important;
  border: 1px solid rgba(216,189,106,0.5) !important;
  color: #e6d6a2 !important; font-weight: 600;
}
.play-btn:hover { background: rgba(216,189,106,0.24) !important; }
.buyin-pill { border-color: rgba(216,189,106,0.25); color: #d8d2c2; }
.tab.active, .subtab.active {
  background: rgba(216,189,106,0.14) !important; color: #e6d6a2 !important;
  border: 1px solid rgba(216,189,106,0.55) !important;
}
.jackpot-pill { border: 1px solid rgba(216,189,106,0.4); }
.jackpot-value { font-family: Georgia, serif; }

/* Hover preview overlay: removed for a direct, clean entry into rooms */
.table-preview { display: none !important; }

/* Win banner: satin gold, less balloon-like */
.win-banner {
  background: linear-gradient(180deg, #e0c060, #b8912e);
  border: 1px solid rgba(255,240,200,0.6);
  font-size: 18px; letter-spacing: 1.5px; font-family: Georgia, serif;
}

/* Table tabs: quiet charcoal pills with gold accents (no candy red/orange) */
.table-tab {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #b9b2c4 !important;
}
.table-tab.active {
  background: rgba(216,189,106,0.13) !important;
  border-color: rgba(216,189,106,0.55) !important;
  color: #e6d6a2 !important;
}
.table-tab.needs-action { border-color: var(--gold-soft) !important; color: var(--gold-soft) !important; }
.table-tab.add-table-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(216,189,106,0.4) !important;
  color: #d8cba6 !important;
}
.table-tab.add-table-btn:hover { background: rgba(216,189,106,0.2) !important; }
.tab-dot { background: var(--gold-soft); box-shadow: 0 0 6px rgba(216,189,106,0.9); }

/* Linear action timer — thin red bar under the acting player's plaque
   (replaces the old circular clock). Gold when time-bank is draining. */
.timer-line {
  height: 5px; margin: 5px 14px 0; border-radius: 3px;
  background: rgba(255,255,255,0.13); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.timer-line-fill {
  height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #e04b3a, #b3242f);
  box-shadow: 0 0 6px rgba(224,75,58,0.6);
  transition: width 0.2s linear;
}
.timer-line-fill.bank {
  background: linear-gradient(90deg, #e0c060, #b8912e);
  box-shadow: 0 0 6px rgba(216,189,106,0.6);
}
/* Old circular timer: fully retired */
.timer-arc-wrap, .timer-arc, .timer-badge { display: none !important; }

/* One clean bar only: the old always-on bank-bar is retired — the linear
   timer itself turns gold while time-bank drains. */
.bank-bar { display: none !important; }
.timer-line { height: 6px; margin: 6px 12px 0; }

/* =====================================================================
   Center board + pot below it + realistic side-view chip stacks
   ===================================================================== */

/* Board cards: dead-center of the felt, a touch larger */
body.at-table .board-area { top: 50%; }
.board-cards .card { width: 92px; height: 129px; font-size: 36px; border-radius: 10px; }

/* Pot sits UNDER the board: chip pile + amount pill side by side */
.pot-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 14px; min-height: 40px;
}
#potChips.pot-chips {
  display: flex !important;   /* re-enabled (was hidden in an earlier pass) */
  align-items: flex-end; margin: 0; min-height: 0;
}
.pot-label { margin-bottom: 0; }

/* Felt watermark shifts down so the centered board doesn't sit on the text */
.felt-title { top: 72%; }
.felt-brandname { top: 78%; opacity: 0.9; }
svg.felt-logo { top: 34%; opacity: 0.8; }

/* ---- Side-view cylinder chips ---- */
/* Edge layer: striped rim of one chip lying in the pile */
.chip3 {
  position: absolute; left: 0;
  border-radius: 50% / 46%;
  background:
    repeating-linear-gradient(90deg,
      var(--chip-ring, #fff) 0 9%, transparent 9% 24%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--chip-bg, #444) 78%, #fff) 0%,
      var(--chip-bg, #444) 45%,
      color-mix(in srgb, var(--chip-bg, #444) 68%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--chip-bd, #333) 80%, #000);
  box-shadow: 0 2px 3px rgba(0,0,0,0.45);
}
/* Top face: ellipse with edge spots, inner ring and denomination */
.chip3-face {
  position: absolute; left: 0; z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 30%,
      color-mix(in srgb, var(--chip-bg, #444) 70%, #fff) 0%,
      var(--chip-bg, #444) 62%,
      color-mix(in srgb, var(--chip-bg, #444) 75%, #000) 100%);
  border: 1px solid var(--chip-bd, #333);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.35), 0 1px 3px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
/* Edge spots around the face rim */
.chip3-face::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  background: repeating-conic-gradient(var(--chip-ring, #fff) 0 11deg, transparent 11deg 45deg);
  -webkit-mask: radial-gradient(ellipse, transparent 62%, #000 64%);
  mask: radial-gradient(ellipse, transparent 62%, #000 64%);
}
/* Inner dashed ring framing the denomination */
.chip3-face::after {
  content: ''; position: absolute; inset: 18%; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--chip-ring, #fff) 75%, transparent);
  opacity: 0.85;
}
.chip3-face .chip-face {
  position: relative; z-index: 2; color: #fff; font-weight: 800;
  font-size: 0.62em; line-height: 1; letter-spacing: -0.3px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  font-size: 11px;
}
/* Drop-in when a stack grows */
.chip-place .chip3, .chip-place .chip3-face { animation: chipDrop 0.34s cubic-bezier(.2,1.2,.4,1) both; }

/* Old flat chip circles retired (bet zones, pots and fly-fx all use chip3 now) */
.bet-zone .chip-stack { margin-bottom: 2px; }

/* =====================================================================
   Super-admin control center + configurable card backs + announcements
   ===================================================================== */

:root { --site-cardback: #4a1a20; }

/* Card back tint follows the super-admin colour (gold lattice stays) */
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(216,189,106,0.16) 0 1.5px, transparent 1.5px 7px),
    repeating-linear-gradient(-45deg, rgba(216,189,106,0.16) 0 1.5px, transparent 1.5px 7px),
    linear-gradient(165deg,
      color-mix(in srgb, var(--site-cardback, #4a1a20) 78%, #fff) 0%,
      var(--site-cardback, #4a1a20) 55%,
      color-mix(in srgb, var(--site-cardback, #4a1a20) 72%, #000) 100%) !important;
}

/* Announcement banner: gold ribbon under the top bar */
.announce-bar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 300; max-width: min(720px, 92vw);
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #e0c060, #b8912e);
  color: #241a02; font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: 0 0 12px 12px;
  border: 1px solid rgba(255,240,200,0.7); border-top: none;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
}
.announce-bar button {
  background: none; border: none; color: #4a3608; font-size: 15px;
  cursor: pointer; padding: 2px 4px; line-height: 1;
}

/* Admin modal: wider to fit the table manager */
.admin-panel { width: min(880px, 96vw); max-width: 880px; }

/* Create-table card */
.sa-create {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(216,189,106,0.25);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.sa-create-title { color: #e6d6a2; font-weight: 700; font-size: 13px; margin-bottom: 10px; letter-spacing: 0.4px; }
.sa-create-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 10px; margin-bottom: 10px;
}
.sa-create-grid label {
  display: flex; flex-direction: column; gap: 4px;
  color: #b9c0d4; font-size: 11px; font-weight: 600;
}
.sa-create-grid input, .sa-create-grid select {
  padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.3); color: #fff; font-size: 13px; width: 100%;
  box-sizing: border-box;
}

/* Table-manager rows */
.sa-tables-wrap { height: 38vh; }
.sa-table th:nth-child(1), .sa-table td:nth-child(1) { width: 21%; }
.sa-table th:nth-child(2), .sa-table td:nth-child(2) { width: 13%; }
.sa-table th:nth-child(3), .sa-table td:nth-child(3) { width: 16%; }
.sa-table th:nth-child(4), .sa-table td:nth-child(4) { width: 20%; }
.sa-table th:nth-child(5), .sa-table td:nth-child(5) { width: 8%; }
.sa-table th:nth-child(6), .sa-table td:nth-child(6) { width: 8%; }
.sa-table th:nth-child(7), .sa-table td:nth-child(7) { width: 14%; }
.admin-table .sa-in {
  width: 56px; padding: 4px 5px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.28);
  color: #fff; font-size: 12px; font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.admin-table .sa-in.sa-name { width: 78px; }
.admin-table .sa-in.sa-minb, .admin-table .sa-in.sa-maxb { width: 64px; }
.admin-table .sa-in:disabled { opacity: 0.45; }
.sa-players { color: #8a90a6; font-size: 11px; margin-left: 6px; white-space: nowrap; }
.sa-game { color: #cfd3e2; font-size: 12px; white-space: nowrap; }
.sa-actions { white-space: nowrap; text-align: right; }
.sa-actions .btn { margin-left: 3px; }

/* Settings tab */
.sa-settings { display: flex; flex-direction: column; gap: 14px; padding: 6px 2px; }
.sa-set-row { display: flex; align-items: center; gap: 10px; }
.sa-set-row label { flex: 0 0 260px; color: #cfd3e2; font-size: 13px; font-weight: 600; }
.sa-set-row input {
  flex: 0 0 160px; padding: 8px 10px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.3); color: #fff;
}
.sa-announce-row input { flex: 1; }

/* ===== Profile modal (user corner) ===== */
.player-id { cursor: pointer; border-radius: 10px; padding: 3px 8px; transition: background 0.12s; }
.player-id:hover { background: rgba(216,189,106,0.1); }
.profile-box { width: min(420px, 94vw); }
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.profile-medallion {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #4a4360 0%, #262138 55%, #16121f 100%);
  border: 1px solid rgba(216,189,106,0.65);
  box-shadow: inset 0 0 0 2px rgba(216,189,106,0.16), 0 4px 12px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px; font-weight: 600; color: #d8cba6;
}
.profile-name { color: #fff; font-weight: 800; font-size: 20px; }
.profile-since { color: #8a90a6; font-size: 12px; margin-top: 2px; }
.profile-balance {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(216,189,106,0.08); border: 1px solid rgba(216,189,106,0.3);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 12px;
}
.profile-balance-label { color: #b9c0d4; font-size: 13px; font-weight: 600; }
.profile-balance-num { color: #f2cf5c; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.profile-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.profile-actions .btn { flex: 1; }
.profile-pw { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.profile-pw label { display: flex; flex-direction: column; gap: 4px; color: #b9c0d4; font-size: 12px; font-weight: 600; }
.profile-pw input {
  padding: 8px 10px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.3); color: #fff;
}

/* Time-out tag + duration picker in the accounts table */
.tag.tag-timeout {
  background: rgba(216,140,40,0.18); color: #eab668;
  border: 1px solid rgba(216,140,40,0.45);
}
.admin-table .admin-to-min {
  padding: 3px 4px; border-radius: 5px; font-size: 11px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.3); color: #fff;
  margin-left: 3px;
}
/* Regular admins see fewer buttons — give the actions column breathing room */
.admin-table td.admin-actions { overflow: visible; }

/* =====================================================================
   STANDARD CLASSIC DECK — true pip layouts, dual corner indices
   ===================================================================== */

/* Pip area: the printable zone between the two corner indices */
.card-pips {
  position: absolute;
  left: 18%; right: 18%; top: 9%; bottom: 9%;
  pointer-events: none;
}
.card-pips .pip {
  position: absolute; transform: translate(-50%, -50%);
  font-style: normal; line-height: 1;
  font-size: 0.62em;
}
.card-pips .pip.pip-r { transform: translate(-50%, -50%) rotate(180deg); }
.card-pips .pip.pip-ace { font-size: 1.9em; }

/* Corner indices: serif rank over suit, both corners (br rotated) */
.card .card-corner { line-height: 0.9; }
.card .card-corner b {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.60em; font-weight: 700;
}
.card .card-corner i { font-size: 0.46em; margin-top: 0.04em; }
.card .card-corner.tl { top: 3.5%; left: 5%; }
.card .card-corner.br { bottom: 3.5%; right: 5%; transform: rotate(180deg); }

/* The giant-rank style is retired in favour of the standard face */
.card .card-bigrank { display: none !important; }

/* Court cards keep the illustrated figures but get the same standard corners */
.card.court .card-corner { background: none; padding: 0; }
.court-art { inset: 9% 14%; width: auto; height: auto; }

/* Court art: centred figure with room for the corner indices */
.court-art {
  left: 13% !important; right: 13% !important;
  top: 8% !important; bottom: 8% !important;
  width: 74% !important; height: 84% !important;
  object-fit: contain !important;
}
.card.court .card-corner { z-index: 3; }

/* =====================================================================
   REFERENCE TABLE SHAPE — pinched capsule drawn in SVG + clean card faces
   ===================================================================== */

:root { --site-felt: #a8906c; --site-rail: #b9834e; --site-room-bg: #3b2b52; }

/* The SVG *is* the table now: strip every CSS-drawn rail/felt surface */
.table-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  filter: drop-shadow(0 26px 60px rgba(0,0,0,0.55));
  pointer-events: none;
}
.felt-outer {
  background: none !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
}
.felt {
  background: none !important; border: none !important; box-shadow: none !important;
  border-radius: 0 !important;
}
.felt::after { display: none !important; }

/* ---- Reference-exact card faces: white, corner index, one big serif rank ---- */
.card {
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}
.card.red { color: #d0202a; }
.card.black { color: #16181d; }
.card .card-bigrank {
  display: block !important;
  position: absolute; left: 50%; bottom: 0; right: auto;
  transform: translateX(-50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600; font-size: 2.55em; line-height: 1.06;
  letter-spacing: -0.04em;
}
.card .card-bigrank.r10 { font-size: 2.1em; letter-spacing: -0.08em; }
.card .card-corner.tl { top: 3%; left: 6%; }
.card .card-corner.tl b {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.72em; font-weight: 600;
}
.card .card-corner.tl i { font-size: 0.52em; margin-top: 0; }
.card .card-corner.br { display: none !important; }
.card-pips { display: none !important; }
.court-art { display: none !important; }
.card.court .card-corner { background: none !important; }

/* Room matches the reference purple */
.table-view {
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255,246,220,0.05), transparent 55%),
    radial-gradient(ellipse at 50% 118%, rgba(0,0,0,0.5), transparent 60%),
    var(--site-room-bg, #3b2b52) !important;
}
body.at-table { background: var(--site-room-bg, #3b2b52); }

/* =====================================================================
   Card readability pass: stronger corner, centred rank + suit pip below
   ===================================================================== */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.07);
}
/* Corner: larger, tighter — readable even when cards fan and overlap */
.card .card-corner.tl { top: 4%; left: 6.5%; }
.card .card-corner.tl b { font-size: 0.82em; line-height: 0.95; }
.card .card-corner.tl i { font-size: 0.58em; margin-top: 0.06em; }
/* Big rank: centred in the upper-middle of the face */
.card .card-bigrank {
  bottom: auto !important; top: 50%;
  transform: translate(-50%, -46%);
  font-size: 2.15em !important; font-weight: 700;
}
.card .card-bigrank.r10 { font-size: 1.8em !important; letter-spacing: -0.06em; }
/* Suit pip centred under the rank — suit reads at a glance */
.card .card-bigsuit {
  position: absolute; left: 50%; bottom: 5%;
  transform: translateX(-50%);
  font-size: 0.78em; line-height: 1;
}

/* Cleaner means LESS: no extra suit pip — just the corner index and one
   big rank, centred with generous whitespace. */
.card .card-bigsuit { display: none !important; }
.card .card-bigrank { transform: translate(-50%, -42%); }

/* =====================================================================
   Reference chip/pot layout: pot number ABOVE the board, chip piles with
   K-amount BELOW it; one colored pile per denomination, larger chips.
   ===================================================================== */
.chip-stack.chip-row {
  display: inline-flex; align-items: flex-end; gap: 3px;
  width: auto !important;
}
.chip-substack { position: relative; flex: 0 0 auto; }

.pot-label {
  margin-bottom: 12px; display: inline-block;
  font-size: 15px; padding: 6px 24px;
}
.board-cards { gap: 7px; }
.pot-row { margin-top: 14px; gap: 10px; }
.pot-row .bet-amt.pot-amt {
  font-size: 14.5px; padding: 3px 13px;
  background: rgba(12,10,16,0.7);
}
.bet-zone .bet-amt { font-size: 14px; }
.chip3-face .chip-face { font-size: 11.5px; }

/* =====================================================================
   Rank alignment fix: Georgia uses old-style figures (3/5/9 drop below
   the line, 6/8 rise above), which made ranks sit at uneven heights.
   Times New Roman digits are lining (uniform height) — every rank now
   centres identically on every card.
   ===================================================================== */
.card .card-bigrank {
  font-family: 'Times New Roman', 'Liberation Serif', Georgia, serif !important;
  font-variant-numeric: lining-nums;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  line-height: 1 !important;
}
.card .card-corner.tl b {
  font-family: 'Times New Roman', 'Liberation Serif', Georgia, serif !important;
  font-variant-numeric: lining-nums;
}

/* Rank glyph: ONE size for every rank (10 included) and anchored to the
   bottom-right of the face, exactly like the reference. */
.card .card-bigrank {
  top: auto !important; left: auto !important;
  right: 6% !important; bottom: 1% !important;
  transform: none !important;
  font-size: 2.3em !important;
  line-height: 1 !important;
}
.card .card-bigrank.r10 {
  font-size: 2.3em !important;
  letter-spacing: -0.1em;
  right: 4% !important;
}

/* =====================================================================
   PLAYER SKINS — personal table colors + card styles.
   Purely client-side per account: nothing here changes the site default,
   and players who never touch it always see the super-admin design.
   ===================================================================== */

.skin-sec { margin: 12px 0 4px; }
.skin-title {
  color: #cfc8e2; font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; margin: 10px 0 6px;
}
.skin-row { display: flex; gap: 6px; flex-wrap: wrap; }
.skin-swatch {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  color: #d5d0e2; font-size: 11.5px; font-weight: 600;
  border-radius: 8px; padding: 5px 10px 5px 6px; cursor: pointer;
}
.skin-swatch:hover { background: rgba(255,255,255,0.11); }
.skin-swatch.active {
  border-color: rgba(216,189,106,0.8);
  background: rgba(216,189,106,0.13); color: #ecdfae;
}
.skin-swatch .sw {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35); font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
}
.skin-swatch .sw-default {
  background: conic-gradient(#a8906c 0 25%, #2f6b4e 25% 50%, #2a4d7a 50% 75%, #7c2733 75% 100%);
}
.skin-swatch .sw-card {
  border-radius: 4px; background: #fff; color: #16181d;
  font-family: 'Times New Roman', serif; font-size: 12px; font-weight: 700;
}
.skin-swatch .sw-card.sw-4c { color: #1a56c4; }
.skin-swatch .sw-card.sw-dk { background: #23262e; color: #e8eaf0; }
.skin-swatch .sw-card.sw-gd { background: #f6ecd0; color: #7a5a1c; border-color: #c9a227; }

/* ---- Card skin: Pictured (court artwork on J/Q/K) ---- */
body.cardskin-pictured .card .court-art {
  display: block !important;
  position: absolute; left: 14%; right: 14%; top: 10%; bottom: 10%;
  width: 72%; height: 80%; object-fit: contain;
}
body.cardskin-pictured .card.court .card-bigrank { display: none !important; }

/* ---- Card skin: 4-Color (diamonds blue, clubs green) ---- */
body.cardskin-fourcolor .card.suit-d { color: #1a56c4; }
body.cardskin-fourcolor .card.suit-c { color: #1e7d3c; }
body.cardskin-fourcolor .card.suit-h { color: #d0202a; }
body.cardskin-fourcolor .card.suit-s { color: #16181d; }

/* ---- Card skin: Dark ---- */
body.cardskin-dark .card {
  background: linear-gradient(165deg, #262a33, #1b1e25);
  border-color: rgba(255,255,255,0.16);
}
body.cardskin-dark .card.black { color: #e9ecf2; }
body.cardskin-dark .card.red { color: #ff6d76; }

/* ---- Card skin: Gold ---- */
body.cardskin-gold .card {
  background: linear-gradient(160deg, #fffdf2, #f3e9ca);
  border: 1px solid rgba(201,162,39,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(201,162,39,0.18);
}
body.cardskin-gold .card.black { color: #3a2f14; }
body.cardskin-gold .card.red { color: #a8321e; }

/* =====================================================================
   Clean table heading (reference style): big name + dim hand number,
   nothing else. Toolbar is icons only.
   ===================================================================== */
.table-head {
  position: absolute; left: 26px; top: 52px; z-index: 5;
  pointer-events: none; text-align: left;
}
.table-name-big {
  color: #fff; font-size: 27px; font-weight: 600; letter-spacing: 0.4px;
}
.hand-sub { color: rgba(255,255,255,0.32); font-size: 15px; margin-top: 6px; }
body.at-table .table-toolbar { justify-content: flex-end; }
body.at-table .table-toolbar .icon-btn:first-child { margin-right: auto; }

/* Top-left mini hand: your hole cards live in the corner; they pulse gold
   while the action (and your clock) is on you. */
.head-cards { display: flex; gap: 5px; margin-bottom: 7px; pointer-events: none; }
.head-cards .card {
  width: 42px; height: 59px; font-size: 17px; border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.head-cards.turn-blink .card { animation: headblink 0.85s ease-in-out infinite; }
@keyframes headblink {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 0 16px 4px rgba(240,200,90,0.95), 0 2px 6px rgba(0,0,0,0.5); }
}

/* =====================================================================
   Multi-table split view + layout toggle buttons (reference top-right)
   ===================================================================== */
.grid-view {
  display: grid; gap: 8px; padding: 8px; box-sizing: border-box;
  height: calc(100vh - 46px);
  grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;
  background: #131019;
}
.grid-view.grid-2 { grid-template-rows: 1fr; }
.grid-view iframe {
  width: 100%; height: 100%; border: 1px solid rgba(216,189,106,0.28);
  border-radius: 10px; background: #000;
}
.layout-btns { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.lay-btn {
  width: 30px; height: 28px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16);
  color: #b9b2c4; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.lay-btn:hover { background: rgba(255,255,255,0.12); }
.lay-btn.active {
  background: rgba(216,189,106,0.14); border-color: rgba(216,189,106,0.6);
  color: #e6d6a2;
}

/* Mini mode: a tile shows just the table — no site chrome */
body.mini .topbar,
body.mini #tableTabsBar,
body.mini .announce-bar,
body.mini #leaveTableBtn { display: none !important; }
body.mini #lobbyView { display: none !important; }
body.mini.at-table #tableView { padding-top: 2px; }

/* =====================================================================
   Showdown reveal, cleaned up: revealed cards sit flat and large in an
   even row OVER the avatar (no messy fan), with the winning-hand text
   directly below the seat.
   ===================================================================== */
.seat.revealed .seat-cards {
  top: -64px !important;
  z-index: 12 !important;          /* overlay the avatar/medallion */
  gap: 4px !important;
}
.seat.revealed .seat-cards .card,
.seat.revealed .seat-cards .card:nth-child(1),
.seat.revealed .seat-cards .card:nth-child(2),
.seat.revealed .seat-cards .card:nth-child(3),
.seat.revealed .seat-cards .card:nth-child(4),
.seat.revealed .seat-cards .card:nth-child(5),
.seat.revealed .seat-cards .card:nth-child(6) {
  transform: none !important;      /* flat, even row — no fan rotation */
  margin: 0 !important;
  width: 74px !important; height: 104px !important;
  font-size: 27px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
}
/* Omaha reveals (4-6 cards): smaller so the row stays tidy */
.seat.revealed .seat-cards.four-cards .card {
  width: 54px !important; height: 76px !important; font-size: 20px;
}
/* Winning combination in clear text right under the seat */
.seat.revealed .seat-handlabel {
  bottom: -30px; font-size: 15px; font-weight: 700;
  color: #ffe9a8; letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.6);
}

/* The combo text must never hide behind the chat panel */
.seat-handlabel { z-index: 30 !important; }
.seat.revealed .seat-cards { z-index: 25 !important; }

/* Winner pile: chips stacked with the amount UNDER them, landing pop-in */
.bet-zone.win-pile {
  flex-direction: column !important;
  gap: 5px; align-items: center; z-index: 6;
}
.bet-zone.win-pile .win-amt {
  background: rgba(20,14,4,0.8);
  border: 1px solid rgba(216,189,106,0.55);
  color: #ffe9a8; font-weight: 800;
}
.bet-zone.win-arrive { animation: winArrive 0.5s cubic-bezier(.2,1.1,.4,1); }
@keyframes winArrive {
  from { transform: translate(-50%,-50%) scale(0.4); opacity: 0; }
  to   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
/* "+N" above the winner's head */
.win-plus {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  z-index: 31; white-space: nowrap;
  color: #7fe6a0; font-size: 19px; font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 14px rgba(0,0,0,0.6);
  animation: winPlusPop 0.45s cubic-bezier(.2,1.2,.4,1);
}
@keyframes winPlusPop {
  from { transform: translate(-50%, 12px) scale(0.6); opacity: 0; }
  to   { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* When the winner's cards are revealed (big row over the avatar), the +N
   floats clear ABOVE the card row instead of behind it. */
.seat.revealed .win-plus { top: -94px; }

/* =====================================================================
   Slightly wider camera: the table sits at ~86% of the available height,
   leaving breathing room all around — so the bottom-center player's
   revealed cards, pod and winning-hand text all fit on screen.
   ===================================================================== */
body.at-table .felt-outer { height: 86%; }
body.at-table .felt-wrap { padding: 6px 0 34px; }

/* Seats (pods, revealed cards, win text) render above the chat panel but
   below the action bar. */
body.at-table .seats { z-index: 22; }

/* =====================================================================
   Winner presentation, toned down: no green burst / pulsing glow.
   A quiet gold hairline on the pod is enough — the chips moving over,
   the amount and the +N already tell the story.
   ===================================================================== */
.seat.winner { animation: none !important; transform: translate(-50%, -50%) !important; }
.seat.winner .seat-pod {
  border-color: rgba(216,189,106,0.85) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5) !important;
}

/* Won-money displays are static — no pops, no re-triggering blink. (The
   seat re-renders every broadcast restarted these animations, which read
   as flashing.) */
.win-plus { animation: none !important; }
.bet-zone.win-arrive { animation: none !important; }
.win-banner { animation: none !important; }

/* =====================================================================
   MOBILE FIT (≤700px): same design, everything proportionally smaller
   so 6 seats, the board, chips and the action bar all fit a phone.
   ===================================================================== */
@media (max-width: 700px) {
  /* table geometry: width-driven, slightly taller stadium */
  body.at-table .felt-wrap { padding: 2px 0 10px; }
  body.at-table .felt-outer { width: 97vw; height: 56vh; }
  body.at-table .felt { width: 93% !important; height: 86% !important; }

  /* heading + hero mini-cards */
  .table-head { top: 40px; left: 12px; }
  .table-name-big { font-size: 20px; }
  .hand-sub { font-size: 12px; margin-top: 2px; }
  .head-cards .card { width: 34px; height: 48px; font-size: 13px; }

  /* seats: compact pods and medallions */
  .seat { width: 106px; }
  .seat-avatar { width: 46px; height: 50px; margin: 0 auto -10px; }
  .seat-medallion { width: 42px; height: 42px; font-size: 17px; }
  .seat-pod { min-width: 90px !important; padding: 3px 10px 8px !important; border-radius: 13px !important; }
  .seat-pod .seat-name { font-size: 11.5px !important; max-width: 92px; }
  .seat-pod .seat-stack-num { font-size: 11.5px !important; }
  .seat-stars .star { font-size: 6.5px !important; }
  .seat-avatar.seat-empty { width: 56px !important; height: 56px !important; }
  .seat-sit-btn, .sit-word { font-size: 10px !important; letter-spacing: 2px; }
  .seat-action-tag { font-size: 10.5px; padding: 2px 11px; top: -10px; }
  .timer-line { height: 4px; margin: 4px 10px 0; }

  /* hole cards + showdown reveals */
  .seat-cards .card { width: 28px !important; height: 40px !important; margin: 0 -5px; }
  .seat.revealed .seat-cards { top: -38px !important; }
  .seat.revealed .seat-cards .card { width: 44px !important; height: 62px !important; font-size: 16px; margin: 0 !important; }
  .seat.revealed .seat-cards.four-cards .card { width: 32px !important; height: 45px !important; font-size: 11px; }
  .seat-handlabel { font-size: 11px !important; }
  .seat.revealed .seat-handlabel { bottom: -20px; }
  .win-plus { font-size: 14px; top: -28px; }
  .seat.revealed .win-plus { top: -56px; }

  /* board + pot */
  .board-cards { gap: 4px; }
  .board-cards .card { width: 54px !important; height: 76px !important; font-size: 21px !important; }
  .pot-label { font-size: 12px; padding: 4px 16px; margin-bottom: 8px; }
  .pot-row { margin-top: 8px; }
  .pot-row .chip-stack { transform: scale(0.72); transform-origin: bottom center; }
  .pot-row .bet-amt.pot-amt { font-size: 12px; }
  .bet-zone { transform: translate(-50%, -50%) scale(0.7); }

  /* chat + corner controls */
  body.at-table .log-wrap { width: 46vw; left: 8px; bottom: 8px; }
  body.at-table .log-panel { max-height: 52px; font-size: 10px; }
  .log-tab { padding: 3px 10px; font-size: 9.5px; }
  .sitout-corner { bottom: 108px; left: 10px; font-size: 11.5px; }
  body.at-table #straddleToggle, body.at-table #rabbitHuntArea { bottom: 132px; left: 10px; }
  .hist-btn { display: none; }

  /* action bar: full-width bottom sheet */
  body.at-table #preMoveBar, body.at-table #actionBar {
    left: 6px; right: 6px; bottom: 6px; width: auto;
  }
  .action-buttons .btn { padding: 12px 8px; font-size: 14px; }
  .btn.quickbet { padding: 6px 10px; min-width: 0; }

  /* toolbar */
  .icon-btn { width: 34px; height: 34px; font-size: 16px; }
  .table-jackpot b { font-size: 8px; }
  .table-jackpot i { font-size: 14px; }
}

/* Mobile: outrank the desktop nth-child card rules (same specificity, later wins) */
@media (max-width: 700px) {
  .seat-cards .card:nth-child(n) {
    width: 28px !important; height: 40px !important; margin: 0 -5px !important;
  }
  .seat.revealed .seat-cards .card:nth-child(n) {
    width: 44px !important; height: 62px !important; font-size: 16px !important;
    margin: 0 !important;
  }
  .seat.revealed .seat-cards.four-cards .card:nth-child(n) {
    width: 32px !important; height: 45px !important; font-size: 11px !important;
  }
}

/* ── Throwables: player popup + flight/impact effects ─────────────────── */
.player-popup {
  position: fixed; z-index: 60; min-width: 216px;
  background: linear-gradient(180deg, rgba(32,28,50,0.98), rgba(22,19,36,0.98));
  border: 1px solid rgba(201,162,39,0.35);
  border-radius: 12px; padding: 12px 14px 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  animation: pp-in 0.14s ease-out;
}
@keyframes pp-in { from { opacity: 0; transform: translateY(4px) scale(0.97); } to { opacity: 1; } }
.pp-head { display: flex; align-items: center; gap: 10px; }
.pp-medallion {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #3d3564, #241f3e);
  border: 1px solid rgba(201,162,39,0.55);
  color: #e8d9a0; font-family: Georgia, 'Times New Roman', serif; font-size: 17px;
}
.pp-name { color: #f0ead8; font-weight: 600; font-size: 14px; }
.pp-stack { color: #b9b2cc; font-size: 12px; margin-top: 1px; }
.pp-close {
  margin-left: auto; background: none; border: none; color: #8f88a5;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.pp-close:hover { color: #fff; }
.pp-items { display: flex; gap: 6px; margin-top: 11px; justify-content: space-between; }
.throw-item {
  flex: 1; font-size: 21px; line-height: 1; padding: 8px 0 7px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px; cursor: pointer;
  transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease;
}
.throw-item:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.08);
  background: rgba(201,162,39,0.16); border-color: rgba(201,162,39,0.5);
}
.throw-item:disabled { opacity: 0.35; cursor: default; }
.pp-hint { margin-top: 8px; color: #8f88a5; font-size: 11px; text-align: center; }

/* flight */
.fx-throw { font-size: 30px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45)); display: inline-block; }
.fx-bill { font-size: 22px; }

/* impacts (all on the fx layer so table re-renders can't cut them off) */
.fx-splat svg { animation: splat-in 0.22s cubic-bezier(.2,1.6,.4,1) both, fx-fade 0.6s ease 1.6s both; }
@keyframes splat-in { from { transform: scale(0.2); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }
@keyframes fx-fade { to { opacity: 0; } }
.fx-boom-core { font-size: 58px; display: inline-block;
  animation: boom-in 0.28s cubic-bezier(.2,1.5,.4,1) both, fx-fade 0.4s ease 0.65s both; }
@keyframes boom-in { from { transform: scale(0.25); opacity: 0.4; } 70% { transform: scale(1.18); } to { transform: scale(1); opacity: 1; } }
.fx-flash span { display: block; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,170,0.85), rgba(255,150,60,0.35) 55%, transparent 70%);
  animation: flash-out 0.4s ease-out both; }
@keyframes flash-out { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.fx-bonk-h { font-size: 34px; display: inline-block; transform-origin: 80% 85%;
  animation: bonk-hit 0.5s ease both; }
@keyframes bonk-hit { 0% { transform: rotate(-70deg); } 45% { transform: rotate(18deg); } 70% { transform: rotate(-6deg); opacity: 1; } 100% { transform: rotate(0); opacity: 0; } }
.fx-stars-s { color: #ffe084; font-size: 19px; letter-spacing: 4px; white-space: nowrap;
  text-shadow: 0 0 8px rgba(255,210,90,0.75); display: inline-block;
  animation: stars-spin 1.1s ease-out both; }
@keyframes stars-spin { from { transform: rotate(-14deg) scale(0.5); opacity: 0; } 25% { opacity: 1; } to { transform: rotate(10deg) scale(1.15) translateY(-8px); opacity: 0; } }
.fx-money-pop { font-size: 34px; display: inline-block;
  animation: boom-in 0.25s ease both, fx-fade 0.35s ease 0.45s both; }
.fx-poop-e { font-size: 40px; display: inline-block; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
  animation: poop-land 0.3s cubic-bezier(.2,1.6,.4,1) both, poop-wob 0.9s ease 0.3s 2, fx-fade 0.5s ease 2s both; }
@keyframes poop-land { from { transform: translateY(-14px) scale(0.5); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes poop-wob { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 65% { transform: rotate(6deg); } }

/* Above-seat fx layer: throwable flights + impacts land ON the avatars. */
.fx-layer-top { z-index: 30; }

/* joker throw: card slaps on, wobbles, "HA HA HA" floats up (troll style) */
.fx-joker-e { font-size: 44px; display: inline-block; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
  animation: joker-slap 0.28s cubic-bezier(.2,1.6,.4,1) both, joker-wob 0.7s ease 0.3s 3, fx-fade 0.5s ease 2s both; }
@keyframes joker-slap { from { transform: scale(2.1) rotate(-24deg); opacity: 0; } to { transform: scale(1) rotate(-8deg); opacity: 1; } }
@keyframes joker-wob { 0%,100% { transform: rotate(-8deg); } 35% { transform: rotate(9deg) scale(1.06); } 70% { transform: rotate(-10deg); } }
.fx-ha-w { animation: ha-float 1.7s ease-out both; }
.fx-ha { color: #ffd75e; font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: 16px; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.65); }
@keyframes ha-float {
  from { transform: translate(-50%,-50%) scale(0.4) rotate(-6deg); opacity: 0; }
  18% { opacity: 1; }
  to { transform: translate(-50%,-170%) scale(1.25) rotate(8deg); opacity: 0; }
}

/* ── Cashier modal (reference-style wallet) ───────────────────────────── */
.cashier-box { width: min(660px, 94vw); padding: 0 0 14px; overflow: hidden; }
.cashier-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px; }
.cashier-head h3 { margin: 0; font-size: 15px; letter-spacing: 1.5px; color: #f0ead8; }
.cashier-x { background: none; border: none; color: #b9b2cc; font-size: 16px; cursor: pointer; }
.cashier-x:hover { color: #fff; }
.cashier-tabs { display: flex; background: rgba(255,255,255,0.05); }
.cashier-tab {
  flex: 1; padding: 11px 6px; border: none; cursor: pointer;
  background: transparent; color: #d6d1e4; font-size: 12.5px; letter-spacing: 0.6px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.cashier-tab:last-child { border-right: none; }
.cashier-tab.active { background: #c0303a; color: #fff; }
.cashier-tab:hover:not(.active) { background: rgba(255,255,255,0.08); }
.cashier-pane { padding: 16px 18px 6px; min-height: 150px; }
.cashier-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cashier-table th {
  text-align: right; padding: 8px 10px; color: #9d96b5; font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.cashier-table th:first-child { text-align: left; }
.cashier-table td { text-align: right; padding: 11px 10px; color: #f0ead8; }
.cashier-table td.c-cur { text-align: left; font-weight: 600; letter-spacing: 0.5px; }
.cashier-table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.04); }
.cashier-note { color: #b9b2cc; font-size: 13px; line-height: 1.55; margin: 8px 0; }
.cashier-hist { max-height: 260px; overflow-y: auto; }
.cashier-box .modal-actions { padding: 8px 18px 0; }

/* super-admin: rake stats */
.sa-rake { color: #ffd75e; text-align: right; white-space: nowrap; }
.sa-rake-total { margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  background: rgba(201,162,39,0.10); border: 1px solid rgba(201,162,39,0.3);
  color: #e8d9a0; font-size: 13px; }
.sa-rake-total b { color: #ffd75e; }
.sa-rake-note { color: #9d96b5; font-size: 11.5px; margin-left: 8px; }

/* ── Site-wide lobby chat (right of the table list, reference-style) ──── */
.site-chat {
  background: rgba(20,17,34,0.72);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
  margin-top: 14px;
  min-height: 220px; max-height: 340px;
}
.site-chat-head {
  padding: 9px 14px; font-size: 11.5px; letter-spacing: 1.5px; font-weight: 600;
  color: #e8d9a0; background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.site-chat-msgs { flex: 1; overflow-y: auto; padding: 10px 14px; font-size: 12.5px; line-height: 1.5; }
.sc-msg { margin-bottom: 6px; word-wrap: break-word; }
.sc-time { color: #6f6890; font-size: 10.5px; margin-right: 6px; }
.sc-name { color: #e05a64; font-weight: 600; }
.sc-name.sc-super { color: #ffd75e; }
.sc-text { color: #d6d1e4; }
.site-chat-inputrow {
  display: flex; gap: 8px; padding: 9px 10px;
  border-top: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03);
}
.site-chat-inputrow input {
  flex: 1; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #f0ead8; padding: 7px 10px; font-size: 13px;
}
.site-chat-inputrow input:focus { outline: none; border-color: rgba(201,162,39,0.5); }

/* Wide screens: chat becomes a right-hand column beside the table list */
@media (min-width: 1150px) {
  .lobby { display: grid; grid-template-columns: 1fr 320px; column-gap: 18px; align-items: start; }
  .lobby > .lobby-tabs { grid-column: 1; grid-row: 1; }
  .lobby > .lobby-subtabs { grid-column: 1; grid-row: 2; }
  .lobby > .table-list { grid-column: 1; grid-row: 3; }
  .lobby > .lobby-filterbar { grid-column: 1; grid-row: 4; }
  .site-chat { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; position: sticky; top: 12px;
    max-height: calc(100vh - 140px); min-height: 320px; }
}

/* admin form: wide textarea fields */
.design-grid label.design-wide { grid-column: 1 / -1; }
.design-grid textarea {
  width: 100%; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; color: #f0ead8; padding: 8px 10px; font-size: 13px;
  font-family: inherit; resize: vertical;
}

/* ── Throwables v2: bigger, punchier, more physical (no table shake) ──── */
.fx-throw { font-size: 46px; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5)); }
.fx-bill { font-size: 26px; }

/* particles */
.fx-part { animation-name: part-fly; animation-timing-function: cubic-bezier(.2,.7,.5,1); animation-fill-mode: both; pointer-events: none; }
@keyframes part-fly {
  0%   { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.55) rotate(var(--pr, 0deg)); opacity: 0; }
}
.p-drop { display: block; width: 9px; height: 9px; border-radius: 50% 50% 50% 20%;
  background: radial-gradient(circle at 35% 30%, #e8635c, #b02318); }
.p-spark { display: block; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a0, #ff9b2e 65%, transparent);
  box-shadow: 0 0 10px 2px rgba(255,170,60,0.75); }
.p-dust { display: block; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,205,180,0.85), rgba(160,145,120,0.25) 70%, transparent); }
.p-splot { display: block; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a9743a, #6e4718); }
.p-bill { font-size: 24px; display: inline-block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }
.fx-part-flutter { animation-name: part-flutter; animation-timing-function: cubic-bezier(.25,.6,.45,1); }
@keyframes part-flutter {
  0%   { transform: translate(-50%,-50%) scale(0.8) rotate(0deg); opacity: 1; }
  55%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 46px)) scale(0.9) rotate(var(--pr, 0deg)); opacity: 0; }
}
.p-smoke { display: block; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(120,116,128,0.5), rgba(90,86,100,0.22) 60%, transparent 78%);
  filter: blur(2px); }
.fx-part-smoke { animation-name: part-smoke; animation-timing-function: ease-out; }
@keyframes part-smoke {
  0%   { transform: translate(-50%,-50%) scale(0.5); opacity: 0; }
  18%  { opacity: 0.85; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(2.1); opacity: 0; }
}

/* impacts: larger + snappier arrivals */
.fx-splat svg { width: 132px; height: 132px;
  animation: splat-in2 0.26s cubic-bezier(.2,1.75,.4,1) both, fx-fade 0.7s ease 1.8s both; }
@keyframes splat-in2 { 0% { transform: scale(0.15); opacity: 0.5; } 60% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } }
.fx-boom-core { font-size: 96px;
  animation: boom-in2 0.3s cubic-bezier(.2,1.6,.4,1) both, fx-fade 0.4s ease 0.7s both; }
@keyframes boom-in2 { 0% { transform: scale(0.15); opacity: 0.3; } 55% { transform: scale(1.22); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.fx-flash span { width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(255,244,200,0.95), rgba(255,160,60,0.4) 52%, transparent 70%); }
.fx-bonk-h { font-size: 54px; transform-origin: 82% 88%; animation: bonk-hit2 0.55s cubic-bezier(.3,1.4,.4,1) both; }
@keyframes bonk-hit2 {
  0%   { transform: rotate(-95deg) scale(0.8); opacity: 0.9; }
  38%  { transform: rotate(22deg) scale(1.05); opacity: 1; }
  55%  { transform: rotate(-8deg) scale(1); }
  75%  { transform: rotate(4deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 0; }
}
.fx-stars-s { font-size: 26px; letter-spacing: 6px; text-shadow: 0 0 12px rgba(255,210,90,0.85); }
.fx-money-pop { font-size: 52px; animation: boom-in2 0.26s ease both, fx-fade 0.35s ease 0.5s both; }
.fx-poop-e { font-size: 60px;
  animation: poop-land2 0.42s cubic-bezier(.3,1.5,.45,1) both, poop-wob 0.9s ease 0.45s 2, fx-fade 0.55s ease 2.2s both; }
@keyframes poop-land2 {
  0%   { transform: translateY(-46px) scale(0.5); opacity: 0.4; }
  55%  { transform: translateY(2px) scale(1.14, 0.82); opacity: 1; }
  75%  { transform: translateY(-3px) scale(0.96, 1.06); }
  100% { transform: none; opacity: 1; }
}
.fx-joker-e { font-size: 64px;
  animation: joker-slap2 0.3s cubic-bezier(.2,1.6,.4,1) both, joker-wob 0.7s ease 0.34s 3, fx-fade 0.55s ease 2.2s both; }
@keyframes joker-slap2 { 0% { transform: scale(2.6) rotate(-30deg); opacity: 0; } 60% { transform: scale(0.94) rotate(-4deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.fx-ha { font-size: 20px; }

/* ── Cinematic room v3: matched to the reference recording ────────────── */
/* Deep space-purple room with a faint star field and a heavy vignette. */
body.at-table, .room {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.20), transparent 55%),
    radial-gradient(1px 1px at 31% 74%, rgba(255,255,255,0.13), transparent 55%),
    radial-gradient(1.5px 1.5px at 47% 9%, rgba(255,255,255,0.16), transparent 55%),
    radial-gradient(1px 1px at 63% 82%, rgba(255,255,255,0.12), transparent 55%),
    radial-gradient(1.5px 1.5px at 78% 28%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(1px 1px at 90% 64%, rgba(255,255,255,0.12), transparent 55%),
    radial-gradient(1px 1px at 22% 46%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(1.5px 1.5px at 69% 52%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse at 50% 115%, rgba(0,0,0,0.55), transparent 60%),
    var(--site-room-bg, #1a0f27);
}
.lobby {
  background:
    radial-gradient(1.5px 1.5px at 15% 22%, rgba(255,255,255,0.16), transparent 55%),
    radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,0.11), transparent 55%),
    radial-gradient(1.5px 1.5px at 71% 14%, rgba(255,255,255,0.14), transparent 55%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,0.11), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05), rgba(0,0,0,0.6) 85%),
    var(--site-room-bg, #1a0f27);
}
/* page-wide vignette so the corners fall away like a lit room */
body.at-table::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(0,0,0,0.42) 100%);
}

/* Seat pods: near-black glass like the recording, tighter shadow */
.seat-pod {
  background: linear-gradient(180deg, rgba(22,19,32,0.97), rgba(10,8,16,0.97)) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.seat-medallion {
  background: radial-gradient(circle at 34% 28%, #423a68, #191430 70%) !important;
  border-color: rgba(201,162,39,0.45) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.10) !important;
}

/* Empty seats: darker translucent discs like СУУХ in the recording */
.seat-avatar.seat-empty {
  background: radial-gradient(circle at 50% 40%, rgba(30,24,46,0.55), rgba(8,6,16,0.62)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Pot pill: dark, quiet, like the recording */
.pot-label {
  background: rgba(16,13,26,0.82) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #efe9dc !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}

/* Table name / stakes watermark on the felt: bigger, fainter, more elegant */
.felt-brand { opacity: 0.5 !important; }
.felt-title { color: rgba(0,0,0,0.25) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.05) !important; }

/* ── Throwables v3: shaded SVG art replaces the emoji ─────────────────── */
.throw-item svg { width: 26px; height: 26px; display: block; margin: 0 auto; }
.throw-item[data-throw="joker"] svg { width: 22px; height: 29px; }
.fx-throw svg { width: 54px; height: 54px; display: block; filter: drop-shadow(0 9px 11px rgba(0,0,0,0.55)); }
.fx-throw[class] { font-size: 0; }
.fx-boom-core svg { width: 108px; height: 108px; display: block; }
.fx-bonk-h svg { width: 62px; height: 62px; display: block; }
.fx-money-pop svg { width: 60px; height: 60px; display: block; }
.fx-poop-e svg { width: 64px; height: 64px; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45)); }
.fx-joker-e svg { width: 50px; height: 67px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
.p-bill svg { width: 26px; height: 14px; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }

/* ── Hit moment: contact flash + shockwave ring + drips/glints ────────── */
.fx-hitflash i { display: block; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.25) 45%, transparent 65%);
  animation: hitflash 0.26s ease-out both; }
@keyframes hitflash { from { transform: scale(0.35); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.fx-ring i { display: block; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.6); box-shadow: 0 0 12px rgba(255,255,255,0.25);
  animation: ring-out 0.55s cubic-bezier(.2,.7,.4,1) both; }
.fx-ring.ring-hot i { border-color: rgba(255,176,72,0.8); box-shadow: 0 0 16px rgba(255,150,50,0.5); }
@keyframes ring-out { from { transform: scale(0.28); opacity: 0.95; } to { transform: scale(3.6); opacity: 0; } }
.p-runnel { display: block; width: 7px; height: 15px; border-radius: 46% 46% 60% 60%;
  background: linear-gradient(180deg, #c0271a, #8c1206); }
.fx-part-drip { animation-name: drip-fall; animation-timing-function: cubic-bezier(.55,0,.85,.6); }
@keyframes drip-fall {
  0%   { transform: translate(-50%,-50%) scaleY(0.6); opacity: 0; }
  18%  { opacity: 0.95; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scaleY(1.15); opacity: 0; }
}
.p-glint { display: block; width: 9px; height: 9px;
  background: radial-gradient(circle, #fff3c0, #e8c33a 60%, transparent 75%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 6px rgba(232,195,58,0.8)); }

/* ── Full-screen lobby v2: edge-to-edge grid, side panel + corner chat ── */
/* NOTE: scope to :not(.hidden) so this display rule never overrides the
   .hidden { display:none } used to switch to the table view. */
.lobby:not(.hidden) {
  max-width: none !important;
  width: 100%;
  height: calc(100vh - 64px);          /* everything below the topbar */
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 330px !important;
  grid-template-rows: 100% !important;
  column-gap: 0 !important;
  overflow: hidden;
}
.lobby-main {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: 10px 0 0 14px;
}
.lobby-main .lobby-tabs { margin-bottom: 8px; }
.lobby-main .lobby-subtabs { padding: 0 0 8px; }
.tab-count {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px;
  border-radius: 9px; background: rgba(255,255,255,0.12);
  font-size: 10.5px; line-height: 1.5; color: #e8e2d2;
}
.tab.active .tab-count { background: rgba(0,0,0,0.25); }
.lobby-list-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.lobby-list-scroll .table-list { width: 100%; }
.lobby-list-scroll thead th { position: sticky; top: 0; z-index: 3;
  background: #17102a; box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
.lobby-filterbar {
  margin: 0 !important; padding: 9px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(14,10,24,0.85);
}
.table-row { cursor: pointer; }
.table-row.row-selected td { background: rgba(201,162,39,0.14) !important; }
.table-row.row-selected .tbl-name { color: #ffd75e !important; }

/* right column: seated-players panel on top, chat pinned bottom-right */
.lobby-side {
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid rgba(255,255,255,0.08);
  background: rgba(12,9,22,0.55);
}
.side-preview { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.side-preview-empty { padding: 18px 16px; color: #8f88a5; font-size: 13px; }
.sp-head { padding: 12px 14px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sp-title { display: block; color: #ffd75e; font-weight: 700; letter-spacing: 0.6px; font-size: 15px; }
.sp-game { display: block; margin-top: 2px; color: #9d96b5; font-size: 11.5px; letter-spacing: 0.4px; }
.sp-cols {
  display: flex; justify-content: space-between; padding: 7px 14px 5px;
  color: #8f88a5; font-size: 10.5px; letter-spacing: 1.2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }
.sp-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 14px;
  font-size: 13px;
}
.sp-row:nth-child(odd) { background: rgba(255,255,255,0.03); }
.sp-medal {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #3d3564, #241f3e);
  border: 1px solid rgba(201,162,39,0.4);
  color: #e8d9a0; font-size: 11px; font-family: Georgia, serif;
}
.sp-name { flex: 1; color: #eae4d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-stack { color: #ffd75e; font-variant-numeric: tabular-nums; }
.sp-nobody { padding: 14px; color: #8f88a5; font-size: 12.5px; }
.sp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 14px; border-top: 1px solid rgba(255,255,255,0.08);
  color: #9d96b5; font-size: 12px;
}

/* chat lives at the bottom-right corner of the screen */
.lobby-side .site-chat {
  margin: 0; border-radius: 0; border: none;
  border-top: 1px solid rgba(255,255,255,0.10);
  position: static !important; max-height: none !important;
  height: 285px; min-height: 285px; flex: 0 0 auto;
}

/* narrow screens: stack — list first, then players, chat at the very bottom */
@media (max-width: 980px) {
  .lobby { grid-template-columns: 1fr !important; grid-template-rows: auto !important;
    height: auto; overflow: visible; }
  .lobby-main { padding: 8px 8px 0; }
  .lobby-list-scroll { max-height: 52vh; }
  .lobby-side { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); }
  .side-preview { max-height: 300px; }
  .lobby-side .site-chat { height: 240px; min-height: 240px; }
}

/* stretch both lobby columns to the full viewport height (overrides the
   older align-items:start rule from the first chat layout) */
.lobby { align-items: stretch !important; }
.lobby > .lobby-side { grid-column: 2; grid-row: 1; height: 100%; }
.lobby > .lobby-main { grid-column: 1; grid-row: 1; height: 100%; }

/* ── Lobby top rows: full-width segmented bars (reference layout) ─────── */
.lobby-main .lobby-tabs { display: flex; width: 100%; gap: 6px; padding-right: 14px; }
.lobby-main .lobby-tabs .tab { flex: 1; text-align: center; }
.lobby-main .lobby-subtabs { display: flex; width: 100%; gap: 6px; padding-right: 14px; }
.lobby-main .lobby-subtabs .subtab { flex: 1; text-align: center; }

/* ── Site chat: open/close from the header ────────────────────────────── */
.site-chat-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.site-chat-toggle {
  background: none; border: none; color: #cfc9de; font-size: 13px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.site-chat-toggle:hover { color: #fff; }
.lobby-side .site-chat.collapsed { height: auto; min-height: 0; }
.site-chat.collapsed .site-chat-msgs, .site-chat.collapsed .site-chat-inputrow { display: none; }

/* ── Classic lobby rows: muted stake-tier accents, restrained colour bands ── */
/* Hold'em rows stay dark; only the name carries a soft tier tint (no glow). */
.table-row td { transition: background 0.12s ease; }
.table-row.tier-green  .tbl-name { color: #8fc9a0; }
.table-row.tier-blue   .tbl-name { color: #96b4e0; }
.table-row.tier-orange .tbl-name { color: #d9b083; }
.table-row.tier-purple .tbl-name { color: #b79ad6; }
.table-row.tier-red    .tbl-name { color: #d69199; }
.table-row.tier-royal  .tbl-name { color: #e6c877; }
.table-row .stakes { color: #d8cdb4; }
.table-row .pot { color: #cbbf9f; }
.table-row .players { color: #b9c0cf; }
.table-row .players.full { color: #c99097; }

/* Omaha rows: quiet translucent colour bands over the dark felt, light text */
.table-row.var-omaha td, .table-row.var-omaha6 td { text-shadow: none; }
.table-row.var-omaha.tier-green td  { background: rgba(46,120,72,0.26) !important; }
.table-row.var-omaha.tier-blue td   { background: rgba(42,110,140,0.26) !important; }
.table-row.var-omaha.tier-orange td { background: rgba(150,86,140,0.24) !important; }
.table-row.var-omaha.tier-purple td { background: rgba(120,80,150,0.26) !important; }
.table-row.var-omaha.tier-red td, .table-row.var-omaha.tier-royal td { background: rgba(150,60,96,0.26) !important; }
.table-row.var-omaha6 td { background: rgba(150,90,40,0.24) !important; }
.table-row.var-omaha .tbl-name { color: #cdbfe6 !important; font-weight: 700; }
.table-row.var-omaha6 .tbl-name { color: #e6c39a !important; font-weight: 700; }
.table-row.var-omaha .stakes, .table-row.var-omaha6 .stakes { color: #d8cdb4 !important; }

/* selection: a quiet gold hairline, consistent everywhere */
.table-row.row-selected td { background: rgba(201,162,39,0.10) !important; }
.table-row.var-omaha.row-selected td, .table-row.var-omaha6.row-selected td {
  box-shadow: inset 0 1px 0 rgba(230,200,120,0.35), inset 0 -1px 0 rgba(230,200,120,0.35);
}

/* Play button: classic gold-outlined dark chip, like the site's other CTAs */
.table-row .play-btn {
  background: linear-gradient(180deg, rgba(60,52,40,0.9), rgba(34,28,20,0.9)); color: #f0e6cf;
  border: 1px solid rgba(201,162,39,0.5); border-radius: 7px;
}
.table-row .play-btn:hover { background: linear-gradient(180deg, rgba(80,68,44,0.95), rgba(48,40,26,0.95)); border-color: rgba(230,200,120,0.7); }

/* hover: a gentle lift only */
.table-row:hover td { background: rgba(255,255,255,0.035); }
.table-row.var-omaha:hover td, .table-row.var-omaha6:hover td { filter: brightness(1.05); }

/* ── Super-admin balance-integrity alert panel ───────────────────────── */
.security-panel {
  position: fixed; right: 14px; bottom: 14px; z-index: 80; width: min(440px, 92vw);
  background: linear-gradient(180deg, rgba(46,20,22,0.98), rgba(28,14,16,0.98));
  border: 1px solid rgba(220,80,80,0.55); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}
.security-panel.sec-flash { animation: sec-flash 0.6s ease 2; }
@keyframes sec-flash { 0%,100% { box-shadow: 0 14px 40px rgba(0,0,0,0.6); } 50% { box-shadow: 0 0 0 3px rgba(230,70,70,0.6), 0 14px 40px rgba(0,0,0,0.6); } }
.security-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid rgba(220,80,80,0.3);
  color: #ff9a9a; font-size: 12px; letter-spacing: 0.8px; font-weight: 700;
}
.security-actions { display: flex; align-items: center; gap: 6px; }
.security-x { background: none; border: none; color: #c99; font-size: 15px; cursor: pointer; padding: 0 2px; }
.security-x:hover { color: #fff; }
.security-list { max-height: 260px; overflow-y: auto; padding: 6px 12px 10px; }
.sec-row { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 12.5px; line-height: 1.5; }
.sec-row:last-child { border-bottom: none; }
.sec-time { color: #8f88a5; font-size: 10.5px; display: block; }
.sec-user { color: #ffd75e; font-weight: 700; margin-right: 6px; }
.sec-detail { color: #e8d0d0; }

/* ── Mobile lobby: single column — list on top, players + chat below.
   (Placed last so it beats the desktop full-screen grid rules above.) ── */
@media (max-width: 980px) {
  .lobby:not(.hidden) {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important; min-height: calc(100vh - 64px);
    overflow: visible !important;
  }
  .lobby > .lobby-main { grid-column: 1 !important; grid-row: 1 !important; height: auto !important; padding: 8px 8px 0; }
  .lobby > .lobby-side { grid-column: 1 !important; grid-row: 2 !important; height: auto !important;
    border-left: none; border-top: 1px solid rgba(255,255,255,0.10); }
  .lobby-main .lobby-tabs, .lobby-main .lobby-subtabs { padding-right: 0; flex-wrap: wrap; }
  .lobby-main .lobby-tabs .tab, .lobby-main .lobby-subtabs .subtab { flex: 1 1 45%; font-size: 11px; padding: 7px 4px; }
  .lobby-list-scroll { max-height: 55vh; }
  .side-preview { max-height: 260px; }
  .lobby-side .site-chat { height: 220px; min-height: 220px; }
}

/* ── Admin: keep the classic gold accent (no blue tabs), tidy blinds cells ── */
.admin-tab.active { background: rgba(201,162,39,0.16) !important; color: #ffe9a8 !important; border-color: rgba(201,162,39,0.6) !important; }
.sa-table td { white-space: nowrap; }
.sa-table .sa-sb, .sa-table .sa-bb { width: 58px; display: inline-block; }
.sa-table .sa-minb, .sa-table .sa-maxb { width: 68px; display: inline-block; }

/* ── Phone portrait, 7/9-seat tables: tall oval + compact board so nothing
   overlaps. (Seats use MOBILE_SEAT_LAYOUTS in app.js.) ─────────────────── */
@media (max-width: 700px) {
  body.at-table.big-table .felt-outer { width: 96vw; height: 64vh; }
  body.at-table.big-table .felt { width: 90% !important; height: 88% !important; }
  body.big-table .seat { width: 92px; }
  body.big-table .seat-pod { min-width: 78px !important; padding: 2px 7px 6px !important; }
  body.big-table .seat-pod .seat-name { font-size: 10.5px !important; max-width: 78px; }
  body.big-table .seat-pod .seat-stack-num { font-size: 10.5px !important; }
  body.big-table .seat-avatar { width: 40px; height: 44px; }
  body.big-table .seat-medallion { width: 36px; height: 36px; font-size: 15px; }
  body.big-table .seat-avatar.seat-empty { width: 48px !important; height: 48px !important; }
  /* board: 5 cards must fit between the two seat columns */
  body.big-table .board-cards { gap: 3px; }
  body.big-table .board-cards .card { width: 42px !important; height: 60px !important; font-size: 17px !important; }
  body.big-table .pot-label { font-size: 11px; padding: 3px 12px; margin-bottom: 4px; }
  body.big-table .pot-row .chip-stack { transform: scale(0.6); }
  /* showdown reveals: smaller and hero's stay readable */
  body.big-table .seat.revealed .seat-cards { top: -34px !important; }
  body.big-table .seat.revealed .seat-cards .card:nth-child(n) { width: 38px !important; height: 54px !important; font-size: 14px; }
  body.big-table .seat.revealed .seat-cards.four-cards .card:nth-child(n) { width: 27px !important; height: 38px !important; font-size: 10px; }
  body.big-table .seat.hero.revealed .seat-cards .card:nth-child(n) { width: 46px !important; height: 65px !important; font-size: 17px; }
  body.big-table .seat-handlabel { font-size: 10px !important; }
  body.big-table .bet-zone { transform: translate(-50%, -50%) scale(0.6); }
  body.big-table .win-plus { font-size: 12px; }
  /* chat shrinks a bit more so the bottom seats never touch it */
  body.at-table.big-table .log-wrap { width: 44vw; }
  body.at-table.big-table .log-panel { max-height: 44px; }
}
/* phone + big table: keep the pot number, drop the centre chip pile (it sat on the board) */
@media (max-width: 700px) {
  body.big-table .pot-row #potChips { display: none; }
  body.big-table .pot-row .bet-amt.pot-amt { display: none; }
  body.big-table .bet-zone .bet-amt { font-size: 11px; padding: 1px 6px; }
}
/* phone + big table: lift the oval so the hero pod clears the action bar */
@media (max-width: 700px) {
  body.at-table.big-table .felt-wrap { align-items: flex-start; padding: 0 0 150px; }
  body.at-table.big-table .felt-outer { height: 60vh; margin-top: 4vh; }
}

/* ── Rank system: stars everywhere, Royal (6★+) accent ───────────────── */
.seat-stars .star.on.royal { color: #ffd75e; text-shadow: 0 0 5px rgba(255,215,94,0.55); }
.header-stars { display: block; line-height: 1; margin: 1px 0 2px; }
.header-stars .star { font-size: 9px; letter-spacing: 0.5px; }
.header-stars .star.on { color: #e8bf4c; }
.header-stars .star.on.royal { color: #ffd75e; text-shadow: 0 0 5px rgba(255,215,94,0.5); }
.header-stars .star.off { color: rgba(255,255,255,0.18); }
.profile-rank { margin: 10px 0 2px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
.pr-stars .star { font-size: 15px; letter-spacing: 1px; }
.pr-stars .star.on { color: #e8bf4c; }
.pr-stars .star.on.royal { color: #ffd75e; text-shadow: 0 0 6px rgba(255,215,94,0.55); }
.pr-stars .star.off { color: rgba(255,255,255,0.16); }
.pr-name { margin-top: 4px; font-weight: 700; color: #f0ead8; letter-spacing: 0.5px; }
.pr-name.royal { color: #ffd75e; }
.pr-sub { color: #9d96b5; font-weight: 400; font-size: 11.5px; margin-left: 6px; }
.pr-next { color: #b9b2cc; font-size: 12px; margin-top: 3px; }
.pr-perk { color: #9d96b5; font-size: 11.5px; margin-top: 3px; }
.site-chat-lock { padding: 8px 12px; color: #8f88a5; font-size: 11.5px; line-height: 1.4;
  border-top: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); }
.site-chat.collapsed .site-chat-lock { display: none; }
.sc-name.sc-admin { color: #e0b64e; }
.sc-name.sc-royal { color: #d9b8ff; }
.sc-stars { display: inline-block; margin-right: 4px; vertical-align: 1px; }
.sc-stars .star { font-size: 8px; }
.sc-stars .star.on { color: #e8bf4c; }
.sc-stars .star.on.royal { color: #ffd75e; }
.sc-stars .star.off { display: none; }
.sp-stars { display: block; line-height: 1; margin-top: 1px; }
.sp-stars .star { font-size: 7.5px; letter-spacing: 0.4px; }
.sp-stars .star.on { color: #e8bf4c; }
.sp-stars .star.on.royal { color: #ffd75e; }
.sp-stars .star.off { color: rgba(255,255,255,0.14); }

/* ═════════════════════════════════════════════════════════════════════
   EYE-COMFORT LAYER — long-session friendly.
   Softer, less saturated gold; no permanent glows; slower, subtler
   attention cues. Applied last so it wins everywhere.
   ═════════════════════════════════════════════════════════════════════ */
:root {
  --gold-soft: #d8bd72;      /* replaces the hot #ffd75e almost everywhere */
  --gold-dim:  #b89c55;      /* secondary gold (labels, borders) */
  --gold-text: #e6d5a8;      /* readable warm text on dark */
}

/* 1) Stars: matte, no glow. Royal stays distinguishable by tone, not light. */
.seat-stars .star.on, .header-stars .star.on, .pr-stars .star.on, .sc-stars .star.on, .sp-stars .star.on
  { color: #c9ad63 !important; text-shadow: none !important; }
.seat-stars .star.on.royal, .header-stars .star.on.royal, .pr-stars .star.on.royal, .sc-stars .star.on.royal, .sp-stars .star.on.royal
  { color: #e2c77b !important; text-shadow: none !important; }
.seat-stars .star.off, .header-stars .star.off, .pr-stars .star.off, .sp-stars .star.off { color: rgba(255,255,255,0.12) !important; }

/* 2) Lobby: names / stakes / stacks / selected row — calmer gold, no glow */
.table-row .tbl-name, .table-row .stakes { text-shadow: none !important; }
.table-row.tier-royal .tbl-name { color: #d8bd72 !important; }
.table-row.row-selected .tbl-name { color: #e2c77b !important; }
.sp-title, .sp-stack, .pr-name.royal, .sc-name.sc-super { color: var(--gold-soft) !important; text-shadow: none !important; }
.sc-name.sc-admin { color: #cdb46a !important; }
.sc-name.sc-royal { color: #b9a5d6 !important; }
.tab.active, .subtab.active { box-shadow: none !important; }
.tab.active { border-color: rgba(201,162,39,0.55) !important; color: #e6d5a8 !important; }
.tab-count { background: rgba(255,255,255,0.08) !important; color: #d8d2c4 !important; }
.play-btn { border-color: rgba(201,162,39,0.35) !important; }

/* 3) Header / jackpot: the jackpot number was the brightest thing on screen */
.jackpot-pill { box-shadow: none !important; border-color: rgba(201,162,39,0.35) !important; }
.jackpot-value, .table-jackpot i { color: var(--gold-soft) !important; text-shadow: none !important; }
.jackpot-label, .table-jackpot b { color: var(--gold-dim) !important; }
.balance-pill { color: #cfc6a9 !important; }
.brand-name .accent { color: #c9a94f !important; }

/* 4) Table: pot / hand label / +N / seat borders */
.pot-label { color: #ece6d8 !important; box-shadow: none !important; }
.seat-handlabel { color: #e6d5a8 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important; }
.win-plus { color: #8fcf9c !important; text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important; }
.seat.winner .seat-pod { border-color: rgba(216,189,114,0.55) !important; box-shadow: 0 8px 22px rgba(0,0,0,0.55) !important; }
.seat.hero .seat-pod { border-color: rgba(216,189,114,0.35) !important; }
.table-tab.active { border-color: rgba(201,162,39,0.5) !important; box-shadow: none !important; }
.table-title-big, .table-name-big { text-shadow: none !important; }
.sa-rake, .sa-rake-total b, .profile-balance-num { color: var(--gold-soft) !important; }

/* 5) Attention cues: keep them, but slow + soft (no strobing) */
@keyframes act-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 2px rgba(216,189,114,0.55); }
  50%       { box-shadow: 0 0 0 2px rgba(216,189,114,0.9); }
}
.seat.acting { animation: act-pulse-soft 2.2s ease-in-out infinite !important; }
@keyframes tabpulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,189,114,0); }
  50%       { box-shadow: 0 0 0 2px rgba(216,189,114,0.5); }
}
.table-tab.needs-action { animation: tabpulse-soft 2.2s ease-in-out infinite !important; border-color: rgba(216,189,114,0.8) !important; }
@keyframes headblink-soft {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
  50%       { box-shadow: 0 0 0 2px rgba(216,189,114,0.75), 0 2px 6px rgba(0,0,0,0.5); }
}
.head-cards.turn-blink .card { animation: headblink-soft 2s ease-in-out infinite !important; }
/* the red action timer bar stays red (it's information), just a touch less neon */
.timer-line-fill { background: linear-gradient(90deg, #c8433f, #e0655e) !important; box-shadow: none !important; }
.timer-line-fill.bank { background: linear-gradient(90deg, #b8973f, #d8bd72) !important; }
.pot-label.pot-flash { animation: none !important; }
.log-new { animation: none !important; }

/* 6) Card faces: pure white is harsh at night — warm the paper very slightly */
.card:not(.back) { background: #f7f4ec !important; }
.board-cards .card:not(.back) { background: #f8f5ee !important; }

/* 7) Room / felt: pull overall brightness of the felt centre down a hair */
.felt-outer svg #feltGlow stop:first-child { stop-opacity: 0.14; }

/* 8) Respect the OS "reduce motion" preference completely */
@media (prefers-reduced-motion: reduce) {
  .seat.acting, .table-tab.needs-action, .head-cards.turn-blink .card { animation: none !important; }
  .fx-item, .fx-part { animation-duration: 0.01ms !important; }
}
/* type column: no need for it to be yellow — neutral warm grey reads calmer */
.table-row .game-label { color: #d3cbb9 !important; text-shadow: none !important; }
.table-row .limit-badge { background: rgba(255,255,255,0.08) !important; color: #cfc8ba !important; }

/* comeback button: sits just above the action-bar corner */
.comeback-btn {
  position: absolute; right: 16px; bottom: 84px; z-index: 26;
  padding: 12px 22px; font-size: 14px; letter-spacing: 0.5px;
  border-radius: 10px;
}
@media (max-width: 700px) {
  .comeback-btn { left: 50%; right: auto; transform: translateX(-50%); bottom: 120px; }
}

/* =====================================================================
   PHONE POLISH LAYER — fixes found in the 390px audit
   (lobby rows must fit the screen with no sideways scroll; the filter
   bar must not clip; the table oval sits higher so the dead space above
   it goes to the action area instead)
   ===================================================================== */
@media (max-width: 600px) {
  /* Lobby: also drop the AVG POT column (PLAYERS is already hidden), so
     TABLE / STAKES / TYPE / BUY-IN fit a 390px screen with no overflow. */
  .table-list th:nth-child(3),
  .table-list td:nth-child(3) { display: none; }
  .table-list th, .table-list td { padding: 8px 5px; font-size: 12px; }
  .table-list td.buyin { text-align: right; }
  .buyin-pill { padding: 3px 7px; font-size: 11px; white-space: nowrap; }
  .limit-badge { font-size: 9px; padding: 1px 5px; }
  .game-label { font-size: 11px; }
  .play-btn { padding: 5px 8px; font-size: 11px; }

  /* Filter bar: search on its own line, toggles wrap below — nothing clips. */
  .lobby-filterbar { flex-wrap: wrap; gap: 8px 14px; padding: 8px 10px; }
  .lobby-filterbar input[type="text"] { flex: 1 1 100%; }
  .lobby-toggle { font-size: 12px; white-space: nowrap; }
}
@media (max-width: 700px) {
  /* Regular (6-max) tables on phones: lift the oval toward the header like
     the big-table layer already does, instead of floating it mid-screen. */
  body.at-table:not(.big-table) .felt-wrap { align-items: flex-start; }
  body.at-table:not(.big-table) .felt-outer { margin-top: 6vh; }
}


/* =====================================================================
   PHONE: no auto-zoom on input focus.
   Mobile browsers zoom the page when a focused input's font-size is under
   16px. Force 16px on every text-entry control at phone widths (the
   viewport meta also caps scale, belt and braces).
   ===================================================================== */
@media (max-width: 700px) {
  input[type="text"], input[type="number"], input[type="password"],
  select, textarea {
    font-size: 16px !important;
  }
  .bet-controls input[type="number"] { width: 84px; }
}

/* =====================================================================
   TABS NEXT TO HOME + BIGGER CARDS & SUIT PIPS
   1. While at a table, the multi-table switcher (open-table tabs and the
      "+" add button) sits in the toolbar right beside the home button.
   2. Card faces are a touch larger everywhere, and every card now carries
      a BIG suit pip (bottom-left) so the suit reads at a glance.
   ===================================================================== */

/* --- 1. tabs bar inside the table toolbar --- */
.table-tabs-bar.in-toolbar {
  background: transparent; border-bottom: none;
  padding: 0; margin: 0; gap: 6px;
  max-width: 55vw; overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none;
}
.table-tabs-bar.in-toolbar::-webkit-scrollbar { display: none; }
@media (max-width: 700px) {
  .table-tabs-bar.in-toolbar { max-width: 46vw; }
  .table-tabs-bar.in-toolbar .table-tab { padding: 4px 9px; font-size: 11px; }
}

/* --- 2a. big suit pip on every card face --- */
.card .card-bigsuit {
  display: block !important;
  position: absolute; left: 6%; bottom: 3%;
  font-size: 1.45em; line-height: 1;
}
.card.court .card-bigsuit { display: none !important; } /* court art fills the face */
.card .card-corner.tl i { font-size: 0.68em; }

/* --- 2b. slightly larger cards, every context --- */
.board-cards .card { width: 100px; height: 140px; font-size: 39px; }
.seat-cards .card { margin: 0 -8px; width: 50px !important; height: 70px !important; }
.seat.revealed .seat-cards .card { font-size: 17px; }
@media (max-width: 700px) {
  .board-cards .card { width: 58px !important; height: 82px !important; font-size: 23px !important; }
  body.big-table .board-cards .card { width: 46px !important; height: 66px !important; font-size: 19px !important; }
  .seat.revealed .seat-cards .card { width: 48px !important; height: 68px !important; font-size: 17px; }
  body.big-table .seat.revealed .seat-cards .card:nth-child(n) { width: 42px !important; height: 60px !important; font-size: 15px; }
  body.big-table .seat.hero.revealed .seat-cards .card:nth-child(n) { width: 50px !important; height: 71px !important; font-size: 18px; }
}