: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,
.site-chat.collapsed .site-chat-pinned { 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; }
}

/* =====================================================================
   PHONE: the browser's own URL bar must not cover the bottom of the site.
   100vh on mobile includes the space BEHIND the collapsing address bar, so
   bottom-anchored UI (action bar, chat) could hide beneath it. Dynamic
   viewport units (dvh) track the ACTUAL visible area; older browsers keep
   the vh fallback. Bottom-anchored controls also respect the safe area.
   ===================================================================== */
body.at-table { height: 100vh; height: 100dvh; }
.grid-view { height: calc(100vh - 46px); height: calc(100dvh - 46px); }
.lobby:not(.hidden) { height: calc(100vh - 64px); height: calc(100dvh - 64px); }
@media (max-width: 700px) {
  .lobby:not(.hidden) { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); }
  body.at-table #preMoveBar,
  body.at-table #actionBar { bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  body.at-table .log-panel { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  body.at-table #straddleToggle,
  body.at-table #rabbitHuntArea { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .comeback-btn { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== Cashier: "user information" box on the Withdraw tab ===== */
.userinfo-box { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); }
.userinfo-box b { color: var(--accent-gold, #c9a94f); font-size: 13px; letter-spacing: 0.4px; }
.userinfo-box textarea { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; color: #eee; padding: 8px 10px; font-size: 13px; resize: vertical; }
.userinfo-actions { display: flex; align-items: center; gap: 10px; }
#wdUserInfoStatus { color: #7fc97f; font-size: 12px; }
/* auth view: the user-info textarea matches the other inputs */
#authUserInfoWrap textarea, #authUserInfoWrap input { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; color: #eee; padding: 10px 12px; font-size: 16px; box-sizing: border-box; resize: vertical; }

/* user info: read-only view (set once at registration, never editable) */
.userinfo-view { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; color: #eee; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.userinfo-note { color: rgba(255,255,255,0.4); font-size: 11px; margin: 0; }

/* =====================================================================
   PORTRAIT PHONE TABLE — tall vertical oval, seats on the ring,
   board in the upper middle, full-width action bar.
   ===================================================================== */
.table-svg-portrait { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  .table-svg-landscape { display: none; }
  .table-svg-portrait { display: block; }
  /* Tall oval geometry — one shape for every table size */
  body.at-table .felt-wrap,
  body.at-table.big-table .felt-wrap { align-items: flex-start; padding: 0 0 120px; overflow: visible; }
  body.at-table .felt-outer,
  body.at-table.big-table .felt-outer {
    width: min(88vw, 420px) !important;
    height: min(64vh, 66vh) !important;
    margin-top: 7vh !important;
    aspect-ratio: auto;
  }
  body.at-table .felt,
  body.at-table.big-table .felt {
    width: 72% !important; height: 88% !important;
  }
  /* Board block sits in the UPPER middle of the tall felt */
  .felt { display: flex; flex-direction: column; }
  .board-area { margin-top: 12%; }
  /* Brand watermark: table name + stakes centred lower */
  .felt-brand { top: auto !important; bottom: 34% !important; }
  /* Seat pods: compact, MegaMax-like — avatar over dark pill */
  .seat { width: 96px; }
  .seat-pod { min-width: 84px !important; padding: 2px 8px 5px !important; }
  .seat-pod .seat-name { font-size: 11px !important; max-width: 84px; }
  .seat-pod .seat-stack-num { font-size: 11px !important; }
  .seat-avatar { width: 42px; height: 46px; }
  .seat-medallion { width: 38px; height: 38px; font-size: 16px; }
  .seat-avatar.seat-empty { width: 52px !important; height: 52px !important; }
  /* Board cards sized to the narrower portrait felt */
  .board-cards { gap: 3px; }
  .board-cards .card { width: 52px !important; height: 74px !important; font-size: 21px !important; }
  .pot-label { font-size: 12px; padding: 3px 14px; margin-bottom: 5px; }
  .pot-row .chip-stack { transform: scale(0.62); }
}

/* Portrait action bar: full-width bottom row — Хаях (red) / Чек-Дагах
   (green) / Өсгөх (violet); presets + slider + amount above; numpad grid. */
.bet-numpad { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  body.at-table #actionBar {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; border-radius: 14px 14px 0 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(10,8,16,0.94);
  }
  .action-buttons { display: flex; gap: 6px; }
  .action-buttons .btn { flex: 1; padding: 14px 4px; font-size: 15px; font-weight: 700; border-radius: 8px; }
  .action-buttons .btn.fold  { background: #b3372f; color: #fff; }
  .action-buttons .btn.check, .action-buttons .btn.call { background: #2e8b57; color: #fff; }
  .action-buttons .btn.bet, .action-buttons .btn.raise { background: #5a55c8; color: #fff; }
  .quick-bets { display: flex; gap: 6px; }
  .quick-bets .btn { flex: 1; padding: 8px 2px; font-size: 13px; background: #4a46a8; color: #fff; border-radius: 8px; }
  .bet-slider-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
  .bet-slider-row input[type=range] { flex: 1; }
  #betAmount { width: 92px; text-align: right; font-weight: 700; }
  .bet-numpad.hidden { display: none !important; }
  .bet-numpad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0;
  }
  .bet-numpad button {
    padding: 13px 0; font-size: 19px; font-weight: 700; border: none; border-radius: 9px;
    background: linear-gradient(180deg, #f2f2f2, #c9c9c9); color: #222;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  }
  .bet-numpad button:active { filter: brightness(0.85); }
}

/* Portrait: hero's own hole cards — compact, tucked just above the pod
   (they were covering the whole bottom seat). */
@media (max-width: 700px) and (orientation: portrait) {
  .seat.hero .seat-cards .card:nth-child(n) { width: 44px !important; height: 62px !important; font-size: 16px !important; }
  .seat.hero .seat-cards { top: -50px !important; }
  .seat.hero.revealed .seat-cards .card:nth-child(n) { width: 44px !important; height: 62px !important; font-size: 16px !important; }
  /* empty seats: slightly smaller ring circles */
  .seat-avatar.seat-empty { width: 46px !important; height: 46px !important; }
  /* watermark: keep clear of the centre bet zone */
  .felt-brand { bottom: 30% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Lobby v4 — search bar on top (no scrolling), big front-page chat,
   mobile full-screen chat view opened by the floating "Чат" button.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) The search/filter bar moves to the TOP of the table list, so search is
      always visible without scrolling — on every screen size. */
.lobby-main .lobby-filterbar {
  order: -1;
  border-top: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent !important;
  padding: 6px 12px 10px 0 !important;
}
.lobby-main .lobby-filterbar input[type="text"] { max-width: 340px; }

/* 2) Desktop: wider right column, chat fills almost the whole column height
      — the seated-players preview stays compact above it. */
@media (min-width: 981px) {
  .lobby:not(.hidden) { grid-template-columns: 1fr clamp(360px, 30vw, 480px) !important; }
  .lobby-side .side-preview { flex: 0 0 auto; max-height: 34vh; }
  .lobby-side .site-chat {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .lobby-side .site-chat.collapsed { flex: 0 0 auto !important; }
  .site-chat-head { padding: 11px 16px; font-size: 13px; }
  .site-chat-msgs { font-size: 14px; line-height: 1.55; padding: 12px 16px; }
  .site-chat-inputrow input { font-size: 14px; padding: 9px 12px; }
}

/* 3) Mobile: the inline chat is hidden; a floating "Чат" button opens a
      dedicated full-screen chat-only view with a close (✕) button. */
.site-chat-close {
  display: none;
  background: none; border: none; cursor: pointer;
  color: #cfc8e0; font-size: 20px; line-height: 1; padding: 2px 8px;
}
.site-chat-close:active { color: #fff; }
.mobile-chat-btn { display: none; }

@media (max-width: 700px) {
  .lobby-side .site-chat { display: none; }

  .mobile-chat-btn {
    display: flex; align-items: center; gap: 7px;
    position: fixed; right: 14px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 400;
    padding: 12px 22px; border-radius: 999px;
    border: 1px solid rgba(201,162,39,0.55);
    background: linear-gradient(180deg, #2c2246, #191230);
    color: #ffd75e; font-size: 15px; font-weight: 700; letter-spacing: 0.4px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.55);
    cursor: pointer;
  }
  .mobile-chat-btn:active { transform: scale(0.96); }

  /* full-screen chat view */
  body.mobile-chat-open .lobby-side .site-chat {
    display: flex !important; flex-direction: column;
    position: fixed !important; inset: 0;
    z-index: 500;
    height: 100dvh !important; max-height: none !important; min-height: 0 !important;
    margin: 0 !important; border-radius: 0 !important; border: none !important;
    background: #130d21 !important;
  }
  body.mobile-chat-open .site-chat-head {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    font-size: 14px; letter-spacing: 2px;
    display: flex; align-items: center; justify-content: space-between;
  }
  body.mobile-chat-open .site-chat-toggle { display: none !important; }
  body.mobile-chat-open .site-chat-close { display: block; }
  body.mobile-chat-open .site-chat-msgs { font-size: 14.5px; line-height: 1.6; padding: 12px 14px; }
  body.mobile-chat-open .site-chat-inputrow {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  body.mobile-chat-open .site-chat-inputrow input { font-size: 16px; padding: 10px 12px; }
  body.mobile-chat-open .mobile-chat-btn { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Lobby v5 — chat input always on screen, admin-only chat, pinned message.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Desktop: the whole lobby is locked to the viewport as a flex column —
      whatever height the topbar actually takes (wrapping, zoom), the lobby
      gets exactly the rest, so the chat send row can never fall off screen. */
@media (min-width: 981px) {
  body.in-lobby {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.in-lobby .topbar { flex: 0 0 auto; }
  body.in-lobby #lobbyView:not(.hidden) {
    flex: 1 1 auto;
    height: auto !important;   /* replaces the old calc(100vh - 64px) guess */
    min-height: 0;
  }
}

/* 2) Pinned/highlighted admin message at the very top of the chat. */
.site-chat-pinned {
  flex: 0 0 auto;
  padding: 11px 16px;
  background: linear-gradient(180deg, rgba(201,162,39,0.20), rgba(201,162,39,0.10));
  border-bottom: 1px solid rgba(201,162,39,0.45);
  box-shadow: inset 0 1px 0 rgba(255,215,94,0.18);
}
.site-chat-pinned .pin-flag {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  color: #1a1230;
  background: linear-gradient(180deg, #ffd75e, #c9a227);
  border-radius: 4px; padding: 2px 7px; margin-bottom: 6px;
}
.site-chat-pinned .pin-text {
  color: #ffe9ad;
  font-size: 15px; font-weight: 600; line-height: 1.5;
  white-space: pre-line;
  word-wrap: break-word;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
@media (max-width: 700px) {
  body.mobile-chat-open .site-chat-pinned .pin-text { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Card face v2 — no extra pip in the bottom corner; instead the suit symbol
   sitting directly UNDER the rank number (corner index) is enlarged.
   ═══════════════════════════════════════════════════════════════════════ */
.card .card-bigsuit { display: none !important; }
.card .card-corner.tl i { font-size: 0.95em; margin-top: 0.02em; }

/* Corner suit under the rank: bumped larger again (user request). */
.card .card-corner.tl i { font-size: 1.15em; margin-top: 0.03em; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phone lobby fix — the PLAYERS (сууж байгаа / нийт суудал) column was being
   hidden on phones by mistake. Show it again; the TYPE column goes instead
   (variant is already on the tabs and the row tint), so rows still fit 390px.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .table-list th:nth-child(4),
  .table-list td:nth-child(4) { display: table-cell; }
  .table-list th:nth-child(5),
  .table-list td:nth-child(5) { display: none; }
  .table-row .players { white-space: nowrap; font-weight: 700; }
}
@media (max-width: 600px) {
  /* Tighten row spacing so TABLE/STAKES/PLAYERS/BUY-IN/Play all fit 390px. */
  .table-list th, .table-list td { padding: 8px 4px; }
  .table-list td:first-child, .table-list th:first-child { padding-left: 8px; }
  .buyin-pill { padding: 3px 6px; font-size: 10.5px; }
  .play-btn { padding: 5px 7px; font-size: 10.5px; }
  .table-list td:last-child { padding-right: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hand history viewer — table hands + "my hands" modal.
   ═══════════════════════════════════════════════════════════════════════ */
.hist-box {
  width: min(700px, 94vw);
  max-height: 84vh;
  display: flex; flex-direction: column;
}
.hist-tabs { flex: 0 0 auto; }
.hist-list {
  flex: 1 1 auto; min-height: 140px; overflow-y: auto;
  margin-top: 10px; padding-right: 2px;
}
.hist-empty { padding: 22px 10px; color: #8f88a5; font-size: 13px; text-align: center; }
.hist-hand {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px; margin-bottom: 8px;
  background: rgba(255,255,255,0.03); overflow: hidden;
}
.hist-hrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; cursor: pointer; user-select: none;
}
.hist-hrow:hover { background: rgba(255,255,255,0.04); }
.hh-no { color: #ffd75e; font-weight: 700; font-size: 12.5px; min-width: 34px; }
.hh-tbl { color: #cfc8e0; font-size: 12.5px; font-weight: 600; }
.hh-time { color: #8f88a5; font-size: 11.5px; }
.hh-board { display: flex; gap: 3px; }
.hh-nofl { color: #6f6890; font-size: 11.5px; font-style: normal; }
.hh-pot { margin-left: auto; color: #e8e2d2; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hh-net { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.hh-net.pos, .hp-net.pos { color: #58c97a; }
.hh-net.neg, .hp-net.neg { color: #e0707a; }
.hh-arrow { color: #6f6890; font-size: 11px; }
.hist-detail { padding: 4px 12px 10px; border-top: 1px solid rgba(255,255,255,0.07); }
.hist-winline { padding: 7px 0 8px; color: #e8d9a0; font-size: 12.5px; line-height: 1.55; }
.hist-prow {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; font-size: 12.5px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.hist-prow.me .hp-name { color: #ffd75e; font-weight: 700; }
.hp-name { flex: 1; color: #d6d1e4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-fold { color: #8f88a5; font-style: normal; font-size: 11px; }
.hp-cards { display: flex; gap: 3px; }
.hp-net { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.hist-log {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.3); color: #9d96b5;
  font-size: 11px; line-height: 1.6; max-height: 180px; overflow-y: auto;
}
/* mini card chips */
.hcard {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 3px;
  border-radius: 4px; background: #f4efe1;
  font-size: 12px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.hcard.hred { color: #c22b35; }
.hcard.hblk { color: #1c1a24; }
.hcard.hback {
  background: linear-gradient(135deg, #4a1a20, #2c1015);
  color: rgba(255,255,255,0.35); font-size: 9px;
}
@media (max-width: 600px) {
  .hist-hrow { gap: 7px; padding: 8px 9px; }
  .hh-pot { flex-basis: auto; }
  .hcard { min-width: 22px; height: 21px; font-size: 11px; }
  .hp-net { min-width: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hand replay — step through a recorded hand like a video.
   ═══════════════════════════════════════════════════════════════════════ */
.hist-replay { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 300px; margin-top: 10px; }
.hist-replay.hidden { display: none; }
.hr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hr-title { color: #ffd75e; font-weight: 700; font-size: 13.5px; letter-spacing: 0.5px; }
.hr-stage {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 12px;
  background: radial-gradient(ellipse at 50% 30%, rgba(38,84,58,0.35), rgba(10,8,16,0.6)),
              rgba(255,255,255,0.02);
  padding: 14px;
}
.hr-players { display: flex; flex-direction: column; gap: 4px; }
.hr-p {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.25s, opacity 0.25s;
}
.hr-p.folded { opacity: 0.38; }
.hr-p.acting { background: rgba(201,162,39,0.14); border-color: rgba(201,162,39,0.5); }
.hr-p.winner { background: rgba(88,201,122,0.14); border-color: rgba(88,201,122,0.55); }
.hr-p.me .hr-pname { color: #ffd75e; }
.hr-pname { flex: 1; color: #e8e2d2; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 6px; }
.hr-dealer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: #f4efe1; color: #1c1a24; font-size: 10px; font-weight: 800;
}
.hr-pcards { display: flex; gap: 3px; }
.hr-bet {
  min-width: 44px; text-align: right;
  color: #ffd75e; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hr-center { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 6px 0; }
.hr-board { display: flex; gap: 5px; }
.hr-board .hcard { min-width: 32px; height: 42px; font-size: 15px; border-radius: 6px; }
.hcard.hslot { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }
.hr-pot { color: #e8d9a0; font-size: 14px; font-weight: 700; white-space: nowrap; }
.hr-actiontext {
  min-height: 34px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 7px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.35); color: #f0ead8; font-size: 13.5px;
}
.hr-controls {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 0 2px; flex-wrap: wrap;
}
.hr-step { color: #8f88a5; font-size: 12px; min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.hr-open { margin: 6px 0 8px; }
@media (max-width: 600px) {
  .hr-stage { padding: 10px; }
  .hr-board .hcard { min-width: 27px; height: 36px; font-size: 13px; }
  .hr-controls .btn { padding: 7px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Table toolbar actions: Босох / Мөнгө нэмэх / Бичлэг as clear labeled
   buttons; add-chips modal quick buttons.
   ═══════════════════════════════════════════════════════════════════════ */
.tb-act {
  white-space: nowrap;
  border-color: rgba(201,162,39,0.4) !important;
  color: #ffd75e !important;
  font-weight: 700;
}
.tb-act:hover { background: rgba(201,162,39,0.12) !important; }
#standUpBtn.tb-act { color: #f0b6bc !important; border-color: rgba(224,112,122,0.45) !important; }
#standUpBtn.tb-act:hover { background: rgba(224,112,122,0.12) !important; }
.ac-quick { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.ac-quick .btn { flex: 1 1 auto; }
@media (max-width: 700px) {
  .tb-act { padding: 5px 8px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Multi-table polish: the tabs bar (with the "1 ширээ / Зэрэг харах" switch)
   stays visible in split view; labeled layout buttons; no lone "+" bar.
   ═══════════════════════════════════════════════════════════════════════ */
body.in-grid { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.in-grid .topbar { flex: 0 0 auto; }
body.in-grid #tableTabsBar { flex: 0 0 auto; display: flex; align-items: center; }
body.in-grid #gridView { flex: 1 1 auto; height: auto !important; min-height: 0; }
.lay-btn {
  padding: 4px 12px !important;
  font-size: 12px !important;
  white-space: nowrap;
}
.lay-btn.active {
  background: rgba(201,162,39,0.2) !important;
  color: #ffd75e !important;
  border-color: rgba(201,162,39,0.6) !important;
}
/* labeled layout buttons: let the text size the button */
.lay-btn { width: auto !important; height: 28px; }
.layout-btns { padding-right: 10px; }

/* Layout switch is ALWAYS on screen while 2+ tables are open: it sticks to
   the right edge of the (scrollable) tabs bar instead of scrolling away. */
.table-tabs-bar .layout-btns {
  position: sticky; right: 0; margin-left: auto;
  background: rgba(19,14,31,0.96);
  border-radius: 8px; padding: 2px 4px 2px 8px;
  box-shadow: -8px 0 10px rgba(19,14,31,0.8);
  z-index: 2;
}
.lay-short { display: none; }
@media (max-width: 700px) {
  .lay-full { display: none; }
  .lay-short { display: inline; }
  .lay-btn { padding: 4px 8px !important; font-size: 11px !important; }
  /* leave more room for the tabs + the always-visible switch on phones */
  .table-tabs-bar.in-toolbar { max-width: 62vw; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Buy-in dialog v2 — MegaMax-style "ОРОХ ДҮН": info rows with icons, amount
   + slider with −/+, MIN/xBB/MAX presets, ТИЙМ / ЦУЦЛАХ.
   ═══════════════════════════════════════════════════════════════════════ */
.buyin-box { width: min(460px, 94vw); }
.buyin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.buyin-head h3 { margin: 0; font-size: 16px; letter-spacing: 2px; color: #f0ead8; }
.bi-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 2px; font-size: 14.5px; color: #d6d1e4;
}
.bi-row b { color: #fff; font-weight: 600; }
.bi-ico { display: inline-flex; flex: 0 0 auto; }
.bi-note { margin: 6px 2px 0; color: #9d96b5; font-size: 12px; }
.bi-amtrow { display: flex; gap: 10px; margin-top: 16px; }
.bi-amtrow input {
  flex: 1 1 40%; min-width: 0;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; color: #fff; font-size: 19px; font-weight: 600;
  text-align: center; padding: 12px 8px;
}
.bi-amtrow input:focus { outline: none; border-color: rgba(201,162,39,0.55); }
.bi-auto {
  flex: 1 1 55%; border: none; border-radius: 10px; cursor: pointer;
  background: #6c1f27; color: rgba(255,255,255,0.55);
  font-size: 12.5px; font-weight: 700; line-height: 1.25; padding: 8px 10px;
}
.bi-auto.active { background: #c22b35; color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.25) inset; }
.bi-sliderrow { display: flex; align-items: center; gap: 12px; margin: 18px 2px 6px; }
.bi-step {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: none; border: none; color: #cfc8e0; font-size: 24px; line-height: 1;
  cursor: pointer;
}
.bi-step:active { color: #fff; }
.bi-sliderrow input[type=range] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px;
  background: #5a52d6; outline: none;
}
.bi-sliderrow input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 6px solid rgba(90,82,214,0.35); background-clip: padding-box;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5); cursor: pointer;
}
.bi-sliderrow input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff; border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5); cursor: pointer;
}
.bi-quick { display: flex; gap: 10px; margin: 12px 0 4px; }
.bi-quick button {
  flex: 1; padding: 13px 4px; border-radius: 10px; border: 1px solid transparent;
  background: #4f48b8; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.bi-quick button.active { background: #7a74d9; border-color: #cfd0ff; }
.bi-actions { display: flex; gap: 12px; margin-top: 22px; }
.bi-actions button {
  flex: 1; padding: 14px 8px; border-radius: 10px; border: none; cursor: pointer;
  font-size: 16px; font-weight: 700; letter-spacing: 0.5px; color: #fff;
}
.bi-yes { background: #c22b35; }
.bi-yes:active { background: #a92028; }
.bi-no { background: #4f48b8; }
.bi-no:active { background: #423ba0; }
@media (max-width: 700px) {
  .buyin-box { width: min(420px, 96vw); }
  .bi-amtrow { flex-direction: row; }
  .bi-auto { font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Logo = home button; animated "Админтай холбогдох" Telegram button.
   ═══════════════════════════════════════════════════════════════════════ */
.brand { cursor: pointer; user-select: none; transition: transform 0.15s, filter 0.15s; }
.brand:hover { filter: brightness(1.15); }
.brand:active { transform: scale(0.97); }

.contact-admin {
  position: fixed; left: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 400;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #2aa8e8, #1e7fc4);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
  box-shadow: 0 10px 26px rgba(30,127,196,0.45), 0 2px 6px rgba(0,0,0,0.45);
  animation: ca-float 3s ease-in-out infinite;
}
.contact-admin.hidden { display: none; }
.contact-admin:hover { filter: brightness(1.1); }
.contact-admin:active { transform: scale(0.96); }
.ca-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  position: relative; z-index: 1;
}
.ca-ico svg { display: block; animation: ca-plane 3s ease-in-out infinite; }
.ca-text { position: relative; z-index: 1; white-space: nowrap; }
/* expanding pulse ring behind the button */
.ca-ring {
  position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid rgba(42,168,232,0.9);
  animation: ca-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes ca-pulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes ca-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes ca-plane {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(2px, -2px) rotate(-8deg); }
}
@media (max-width: 700px) {
  .contact-admin { left: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 9px 14px 9px 10px; font-size: 13px; }
  .ca-ico { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-admin, .ca-ico svg, .ca-ring { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Topbar v2 — big centered ROYAL POKER logo (home button), the play-money
   note tucked under it, "Админтай холбогдох" at the top-left on desktop.
   ═══════════════════════════════════════════════════════════════════════ */
.topbar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
}
.topbar-left { display: flex; align-items: center; justify-self: start; }
.topbar-center {
  display: flex !important; flex-direction: column; align-items: center;
  justify-self: center; gap: 2px;
}
.topbar-right { justify-self: end; }
.topbar-center .brand { font-size: 30px; gap: 10px; }
.topbar-center .brand-mark { font-size: 32px; }
.topbar-center .brand-name { letter-spacing: 2px; }
.topbar-center .play-money-badge { font-size: 9.5px; padding: 2px 9px; opacity: 0.85; }

/* desktop contact button: same Telegram look, compact */
.contact-admin-top {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #2aa8e8, #1e7fc4);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 13px;
  box-shadow: 0 6px 18px rgba(30,127,196,0.4);
  animation: ca-float 3s ease-in-out infinite;
}
.contact-admin-top.hidden { display: none; }
.contact-admin-top .ca-ico { width: 28px; height: 28px; }
.contact-admin-top:hover { filter: brightness(1.1); }

/* phones: logo centered but smaller, badge hidden, no room for the top
   contact button (the floating pill takes over) */
@media (max-width: 600px) {
  .topbar { padding: 6px 10px; column-gap: 6px; }
  .topbar-center { display: flex !important; }
  .topbar-center .brand { font-size: 19px; gap: 5px; }
  .topbar-center .brand-mark { font-size: 21px; }
  .topbar-center .play-money-badge { display: none; }
  .contact-admin-top { display: none !important; }
}
@media (min-width: 601px) {
  /* desktop uses the topbar button — hide the floating pill */
  .contact-admin { display: none !important; }
}
/* true centering: side columns share space equally regardless of content */
.topbar { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.topbar-right { flex-wrap: wrap; justify-content: flex-end; }
@media (min-width: 601px) and (max-width: 1500px) {
  .topbar-right { gap: 8px; }
  .topbar-right .btn.small { padding: 5px 9px; font-size: 12px; white-space: nowrap; }
  .jackpot-pill { padding: 4px 10px; }
  .jackpot-label { font-size: 9px; }
}
@media (min-width: 601px) and (max-width: 1500px) {
  .jackpot-pill { padding: 3px 8px; min-width: 0; }
  .jackpot-value { font-size: 14px; }
  .player-meta { font-size: 11px; }
  .topbar-right .btn.small { padding: 5px 8px; font-size: 11.5px; }
}

/* Telegram "contact admin" icon in the table toolbar (next to home) */
.tg-btn {
  display: inline-flex !important; align-items: center; justify-content: center;
  color: #fff !important; text-decoration: none;
  background: linear-gradient(135deg, #2aa8e8, #1e7fc4) !important;
  border-color: rgba(42,168,232,0.6) !important;
  box-shadow: 0 0 0 0 rgba(42,168,232,0.6);
  animation: tg-glow 2s ease-out infinite;
}
.tg-btn.hidden { display: none !important; }
@keyframes tg-glow {
  0%   { box-shadow: 0 0 0 0 rgba(42,168,232,0.6); }
  100% { box-shadow: 0 0 0 10px rgba(42,168,232,0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modals always scroll INSIDE themselves — the page body is locked to the
   viewport on desktop (lobby/grid), so a tall dialog (Admin → Design) must
   scroll on its own or its bottom (Save!) becomes unreachable.
   ═══════════════════════════════════════════════════════════════════════ */
.modal { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal > .modal-box {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Super-admin chat moderation + GPU-only fx items.
   ═══════════════════════════════════════════════════════════════════════ */
.sc-msg { position: relative; }
.sc-del {
  display: none; position: absolute; right: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(224,112,122,0.5); background: rgba(224,112,122,0.12);
  color: #f0b6bc; font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.sc-del:hover { background: #c22b35; color: #fff; }
body.is-super .sc-msg { padding-right: 26px; }
body.is-super .sc-del { display: inline-flex; align-items: center; justify-content: center; }
.site-chat-clear {
  display: none; margin-left: auto; margin-right: 8px;
  background: none; border: 1px solid rgba(224,112,122,0.45); border-radius: 6px;
  color: #f0b6bc; font-size: 10.5px; letter-spacing: 0.5px; padding: 2px 8px; cursor: pointer;
}
body.is-super .site-chat-clear { display: inline-block; }
.site-chat-clear:hover { background: rgba(224,112,122,0.15); }
body.mobile-chat-open .site-chat-clear { margin-left: 0; }
/* fx items now move with transform only — hint the compositor */
.fx-item.fx-gpu { will-change: transform, opacity; backface-visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   Throwables v4 — motion polish: ghost trail, hit shakes, egg & kiss items.
   ═══════════════════════════════════════════════════════════════════════ */
/* faded copies left behind the flying item */
.fx-ghost { opacity: 0.38; pointer-events: none; transition: opacity 0.22s ease-out, filter 0.22s; filter: saturate(0.8); }
.fx-ghost.fx-ghost-out { opacity: 0; }
.fx-ghost .fx-throw svg { filter: none !important; }

/* target pod jolts on impact; heavy hits also nudge the whole table */
@keyframes hit-shake {
  0%   { transform: translate(0,0) rotate(0); }
  15%  { transform: translate(-5px, 2px) rotate(-3deg); }
  30%  { transform: translate(5px, -2px) rotate(3deg); }
  45%  { transform: translate(-4px, 1px) rotate(-2deg); }
  60%  { transform: translate(3px, -1px) rotate(1.5deg); }
  80%  { transform: translate(-1px, 0) rotate(-0.5deg); }
  100% { transform: translate(0,0) rotate(0); }
}
@keyframes hit-shake-heavy {
  0%   { transform: translate(0,0) rotate(0); }
  12%  { transform: translate(-9px, 4px) rotate(-6deg); }
  26%  { transform: translate(9px, -4px) rotate(6deg); }
  40%  { transform: translate(-7px, 3px) rotate(-4deg); }
  56%  { transform: translate(5px, -2px) rotate(2.5deg); }
  74%  { transform: translate(-2px, 1px) rotate(-1deg); }
  100% { transform: translate(0,0) rotate(0); }
}
.seat.hit-shake > .seat-avatar, .seat.hit-shake > .seat-pod { animation: hit-shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.seat.hit-shake-heavy > .seat-avatar, .seat.hit-shake-heavy > .seat-pod { animation: hit-shake-heavy 0.52s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes screen-shake {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3px, 2px); }
  40%  { transform: translate(3px, -2px); }
  60%  { transform: translate(-2px, 1px); }
  80%  { transform: translate(2px, -1px); }
  100% { transform: translate(0,0); }
}
#tableView.screen-shake { animation: screen-shake 0.4s linear both; }

/* egg */
.p-shell { display: block; width: 9px; height: 8px; border-radius: 55% 45% 50% 50%;
  background: linear-gradient(160deg, #fffaf0, #d9c9a8); box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.p-runnel.p-yolk { background: linear-gradient(180deg, #ffc94a, #f0a020); width: 8px; height: 16px; }
/* kiss */
.fx-kiss-e svg { width: 60px; height: 60px; display: block; filter: drop-shadow(0 6px 9px rgba(0,0,0,0.5)); }
.fx-kiss .fx-kiss-e { display: block; animation: kiss-in 0.32s cubic-bezier(.2,1.6,.4,1) both, fx-fade 0.5s ease 1.7s both; }
@keyframes kiss-in { 0% { transform: scale(0.3) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.2) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.p-heart { display: block; color: #ff4d6d; font-size: 16px; line-height: 1; text-shadow: 0 0 8px rgba(255,80,110,0.7); }
.throw-item[data-throw="egg"] svg, .throw-item[data-throw="kiss"] svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  .seat.hit-shake > *, .seat.hit-shake-heavy > *, #tableView.screen-shake { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Table shape skins — the CSS felt/outer follow the chosen SVG geometry.
   ═══════════════════════════════════════════════════════════════════════ */
/* preview chips in the pickers */
.sw-shape { background: radial-gradient(circle at 40% 30%, #b98d55, #7a5326); border: 1px solid rgba(255,220,168,0.5); width: 30px; height: 18px; }
.sw-sh-classic { border-radius: 9px; }
.sw-sh-oval { border-radius: 50%; }
.sw-sh-oct { border-radius: 6px; }

/* Oval: the inner felt div becomes a true ellipse */
body.tshape-oval .felt { border-radius: 50% !important; }
body.tshape-oval .felt-outer { border-radius: 50% !important; }

/* Octagon: felt div follows the cut corners; SVG draws the rail/lip */
body.tshape-oct .felt-outer { border-radius: 60px !important; }
body.tshape-oct .felt {
  border-radius: 44px !important;
}
/* shape preview chips: little table silhouettes, not circles */
.sw.sw-shape { width: 30px !important; height: 18px !important; }
.sw.sw-shape.sw-sh-classic { border-radius: 9px !important; }
.sw.sw-shape.sw-sh-oval { border-radius: 50% !important; }
.sw.sw-shape.sw-sh-oct { border-radius: 5px !important; }

/* language selector in the topbar */
.lang-select {
  background: rgba(255,255,255,0.06); color: #e8e2d2;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 8px;
  padding: 5px 8px; font-size: 12px; cursor: pointer;
}
.lang-select option { background: #1a1230; color: #e8e2d2; }
@media (max-width: 600px) { .lang-select { padding: 4px 4px; font-size: 11px; max-width: 78px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Settings panel close X + roomy admin panel on phones.
   ═══════════════════════════════════════════════════════════════════════ */
.settings-title { display: flex; align-items: center; justify-content: space-between; }

@media (max-width: 700px) {
  /* Admin modal becomes a full-screen page with finger-sized controls */
  #adminModal { align-items: stretch; padding: 0; }
  #adminModal .modal-box.admin-panel {
    width: 100vw !important; max-width: 100vw !important;
    max-height: 100dvh !important; height: 100dvh;
    border-radius: 0; border: none;
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .admin-tabs { flex-wrap: wrap; gap: 6px; }
  .admin-tab { flex: 1 1 46%; padding: 11px 6px; font-size: 13px; }
  .design-grid { grid-template-columns: 1fr; gap: 12px; }
  .design-grid label { font-size: 13px; }
  .design-grid input[type="text"], .design-grid select, .design-grid textarea {
    font-size: 16px; padding: 11px 10px;
  }
  .design-grid input[type="color"] { height: 44px; }
  .admin-toolbar { flex-wrap: wrap; gap: 8px; }
  .admin-toolbar input { flex: 1 1 100%; font-size: 16px; padding: 11px 12px; }
  .admin-table-wrap { height: 50vh; }
  .admin-table { font-size: 12.5px; }
  .admin-table .btn.tiny, .sa-table .btn.tiny { padding: 8px 10px; font-size: 12px; }
  /* Tables tab: scroll sideways instead of crushing the inputs */
  .sa-tables-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sa-table { min-width: 680px; }
  .sa-in { font-size: 16px !important; padding: 8px 6px !important; }
  .sa-create-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sa-create-grid input, .sa-create-grid select { font-size: 16px; padding: 10px 8px; }
  #adminModal .modal-actions { position: sticky; bottom: 0; background: var(--panel-dark);
    padding-top: 10px; margin-top: 10px; }
  #adminModal .modal-actions .btn { padding: 12px 16px; font-size: 14px; }
}
/* modals stack above the floating chat/contact buttons */
.modal { z-index: 600; }
body.mobile-chat-open .lobby-side .site-chat { z-index: 700 !important; }
@media (max-width: 700px) {
  /* Accounts tab: let the row scroll sideways so action buttons aren't crushed */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table { min-width: 560px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cashier — Withdraw tab, MegaMax style: payment-method carousel, two-column
   form (amount + bank details), red ТАТАН АВАЛТ / violet ХААХ.
   ═══════════════════════════════════════════════════════════════════════ */
.cashier-box { width: min(760px, 96vw); }
.wd-pane { padding-top: 4px; }
.wd-sec-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  color: #cfc8e0; margin: 12px 0 10px; text-transform: uppercase;
}
.wd-carousel { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.wd-arrow { color: #6f6890; font-size: 18px; user-select: none; opacity: 0.5; }
.wd-method {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 92px; padding: 12px 6px 8px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 2px solid transparent; cursor: pointer;
}
.wd-method.active { border-color: #c22b35; }
.wd-mico { color: #e8e2d2; }
.wd-mname {
  font-size: 10.5px; color: #cfc8e0; max-width: 84px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; align-items: start; }
.wd-field { display: grid; grid-template-columns: 42% 58%; align-items: center; gap: 8px; margin-bottom: 10px; }
.wd-field > span { font-size: 12px; font-weight: 700; color: #e8e2d2; text-align: right; }
.wd-field input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; color: #fff; font-size: 14px; padding: 10px 10px;
}
.wd-field input::placeholder { color: #8a8398; }
.wd-field input:focus { outline: none; border-color: rgba(194,43,53,0.7); }
.wd-info { margin-top: 14px; color: #9d96b5; font-size: 12px; line-height: 1.8; }
.wd-info span[id] { color: #cfc8e0; }
.wd-adm-note { margin-top: 10px; }
.wd-adm-note .cashier-note { color: #8f88a5; font-size: 11.5px; }
.wd-userinfo { margin-top: 12px; }
.wd-msg { margin: 10px 2px 0; font-size: 13px; color: #e0707a; }
.wd-msg.wd-ok { color: #58c97a; }
.wd-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.wd-go, .wd-x2 {
  border: none; border-radius: 8px; cursor: pointer;
  padding: 13px 26px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.8px; color: #fff;
}
.wd-go { background: #c22b35; }
.wd-go:active { background: #a92028; }
.wd-x2 { background: #4f48b8; }
.wd-x2:active { background: #423ba0; }
@media (max-width: 700px) {
  .wd-grid { grid-template-columns: 1fr; gap: 0; }
  .wd-field { grid-template-columns: 1fr; gap: 4px; }
  .wd-field > span { text-align: left; }
  .wd-field input { font-size: 16px; }
  .wd-actions { flex-direction: column; }
  .wd-go, .wd-x2 { width: 100%; }
}
/* beat .modal-box label's display:block so the label sits LEFT of the input */
.modal-box label.wd-field { display: grid; margin-bottom: 10px; }
@media (max-width: 700px) { .modal-box label.wd-field { display: block; } }
#cashierModal .modal-box.wd-active > .modal-actions { display: none; }

/* Admin balance cell: "Set" (replace) row + "+ Нэмэх" (adjust) row */
.abal-row { display: flex; gap: 6px; align-items: center; }
.abal-row + .abal-row { margin-top: 5px; }
.admin-adj-input {
  width: 100%; min-width: 0; padding: 6px 8px; border-radius: 6px;
  border: 1px solid rgba(88,201,122,0.35); background: rgba(0,0,0,0.28);
  color: #9fe0b2; font-size: 13px;
}
.admin-adj-input::placeholder { color: #5f6f65; }
.abal-row .btn { white-space: nowrap; }
/* withdraw method card: the site's spade logo instead of a bank icon */
.wd-mico-logo {
  font-size: 30px; line-height: 1;
  color: var(--site-accent, #e6b422);
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
/* withdraw tab: just the site logo, large and centered — no method card */
.wd-logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 0 10px;
  font-weight: 700; font-size: 30px; letter-spacing: 2px; color: #fff;
}
.wd-logo-mark { color: var(--accent-orange, #e6b422); font-size: 34px; }
.wd-logo-name .accent { color: var(--site-accent, #e6b422); }
.tx-id { color: #8f88a5; font-variant-numeric: tabular-nums; }
.aw-table td { vertical-align: middle; }
@media (max-width: 700px) { .aw-table { min-width: 640px; } }
.wd-go.wd-disabled { opacity: 0.45; cursor: not-allowed; }

/* ═══════════ Bomb pot: dual boards + banner + badges ═══════════ */
.board-cards2 { margin-top: 4px; }
#tableView.dual-board .board-cards { min-height: 0; gap: 5px; }
#tableView.dual-board .board-cards .card {
  width: 62px !important; height: 87px !important; font-size: 24px !important; border-radius: 7px;
}
#tableView.dual-board .pot-row { margin-top: 2px; }
@media (max-width: 900px) {
  #tableView.dual-board .board-cards { gap: 3px; }
  #tableView.dual-board .board-cards .card { width: 42px !important; height: 59px !important; font-size: 17px !important; }
}
@media (max-width: 620px) and (orientation: portrait) {
  #tableView.dual-board .board-cards { gap: 3px; }
  #tableView.dual-board .board-cards .card { width: 38px !important; height: 54px !important; font-size: 15px !important; }
}

.bomb-banner {
  position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%);
  z-index: 60; pointer-events: none; text-align: center;
  font-weight: 900; font-size: 30px; letter-spacing: 1px; color: #ffd66b;
  text-shadow: 0 2px 12px rgba(0,0,0,.75), 0 0 26px rgba(255,140,0,.55);
  background: linear-gradient(180deg, rgba(40,20,0,.88), rgba(20,10,0,.88));
  border: 2px solid #ff9d2e; border-radius: 14px; padding: 12px 26px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 40px rgba(255,140,0,.3);
}
.bomb-banner span { display: block; font-size: 14px; font-weight: 700; color: #ffe9c2; letter-spacing: .4px; margin-top: 4px; }
.bomb-banner.hidden { display: none; }
.bomb-banner.bomb-pop { animation: bombPop 3.5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes bombPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(-6deg); }
  8%   { opacity: 1; transform: translate(-50%,-50%) scale(1.12) rotate(2deg); }
  14%  { transform: translate(-50%,-50%) scale(1) rotate(0); }
  82%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.92); }
}
@media (max-width: 620px) { .bomb-banner { font-size: 20px; padding: 9px 16px; width: max-content; max-width: 90vw; } .bomb-banner span { font-size: 11px; } }

/* lobby + admin + history bomb bits */
.bomb-badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 8px;
  background: rgba(255,150,40,.16); border: 1px solid rgba(255,150,40,.5);
  color: #ffb95e; font-size: 11px; font-weight: 800; white-space: nowrap;
}
.sa-table .sa-bomb { width: 52px; }
.hh-bomb { font-size: 13px; }
.hh-board-b { display: block; margin-top: 2px; padding-top: 2px; border-top: 1px dashed rgba(255,255,255,.18); }
#hrBoard.hr-dual { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.hr-brow { display: flex; gap: 3px; align-items: center; }
.hr-btag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px; margin-right: 3px;
  background: rgba(255,150,40,.2); border: 1px solid rgba(255,150,40,.45);
  color: #ffb95e; font-size: 10px; font-weight: 800;
}

/* bomb pot: lift the dual-board stack so board B clears the hero cards */
body.at-table #tableView.dual-board .board-area { top: 44%; }
#tableView.dual-board .board-area { top: 31%; }
@media (max-width: 620px) and (orientation: portrait) {
  #tableView.dual-board .board-area { margin-top: 6%; }
}

/* bomb-pot table creation checkbox row */
.nt-check { display: flex !important; align-items: center; gap: 8px; }
.nt-check input { width: 18px; height: 18px; accent-color: #ff9d2e; }

/* ═══════════ Table edit dialog (admins) ═══════════ */
.te-box { max-width: 420px; width: min(92vw, 420px); }
.te-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 10px; }
.te-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim, #b9b2c9); font-weight: 600; }
.te-grid label:first-child { grid-column: 1 / -1; }
.te-grid input[type="text"], .te-grid input[type="number"] {
  width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  color: #fff; font-size: 15px; font-weight: 700;
}
.te-grid input:focus { outline: none; border-color: var(--accent-gold, #d8b45c); }
.te-check { flex-direction: row !important; align-items: center; gap: 8px !important; grid-column: 1 / -1; }
.te-check input { width: 18px !important; height: 18px; accent-color: #ff9d2e; }
.te-hint { font-size: 11px; color: var(--text-dim, #b9b2c9); margin: 10px 0 0; }
.te-msg { font-size: 12px; margin: 8px 0 0; color: #7fd98a; }
.te-msg.err { color: #ff8d8d; }
.te-actions { display: flex; gap: 10px; margin-top: 14px; }
.te-actions .btn { flex: 1; padding: 11px 0; }
.te-super.hidden { display: none !important; }

/* table manager rows: read-only summary + Засах */
.sa-namecell b { font-size: 13px; }
.sa-ro { white-space: nowrap; font-weight: 600; }
.sa-actions { white-space: nowrap; }
.sa-actions .btn { margin-left: 4px; }
body:not(.is-super) .sa-rake-col { display: none; }
@media (max-width: 620px) {
  .te-grid { grid-template-columns: 1fr 1fr; gap: 8px 8px; }
  .sa-table .sa-game { display: none; }
}
#tblEditModal { z-index: 650; }
/* new 6-column table-manager layout (old 7-col % widths overridden) */
.sa-table th:nth-child(1), .sa-table td:nth-child(1) { width: 26%; }
.sa-table th:nth-child(2), .sa-table td:nth-child(2) { width: 15%; }
.sa-table th:nth-child(3), .sa-table td:nth-child(3) { width: 13%; }
.sa-table th:nth-child(4), .sa-table td:nth-child(4) { width: 24%; }
.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: 14%; }
@media (max-width: 620px) { .sa-table { min-width: 480px; } }

/* ═══════════ Avatars: presets + upload ═══════════ */
.av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.seat-medallion .av-img { border-radius: 50%; }
.sp-medal .av-img { border-radius: 50%; }
.av-clickable { cursor: pointer; position: relative; }
.av-clickable::after {
  content: '✎'; position: absolute; right: -4px; bottom: -4px;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-gold, #d8b45c); color: #201a10;
  border: 2px solid rgba(0,0,0,.4);
}
.avatar-box { max-width: 480px; width: min(94vw, 480px); }
.av-head { display: flex; align-items: center; justify-content: space-between; }
.av-head h3 { margin: 0; letter-spacing: 1px; }
.av-x {
  background: none; border: none; color: #fff; font-size: 18px; cursor: pointer;
  padding: 6px 10px; border-radius: 8px;
}
.av-x:hover { background: rgba(255,255,255,.1); }
.av-preview { display: flex; justify-content: center; margin: 12px 0; }
.av-preview img {
  width: 108px; height: 108px; border-radius: 18px; object-fit: cover;
  border: 2px solid var(--accent-gold, #d8b45c); box-shadow: 0 6px 24px rgba(0,0,0,.45);
  background: rgba(255,255,255,.04);
}
.av-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px;
  max-height: 42vh; overflow-y: auto; padding: 4px; border-radius: 10px;
  background: rgba(0,0,0,.18);
}
.av-cell {
  padding: 0; border: 2px solid transparent; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.05); aspect-ratio: 1; overflow: hidden;
  transition: transform .12s, border-color .12s;
}
.av-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-cell:hover { transform: scale(1.06); }
.av-cell.sel { border-color: var(--accent-gold, #d8b45c); box-shadow: 0 0 12px rgba(216,180,92,.45); }
.av-actions { display: flex; gap: 10px; margin-top: 12px; }
.av-actions .btn { flex: 1; padding: 11px 0; }
.av-msg { font-size: 12px; margin: 8px 0 0; color: #7fd98a; }
.av-msg.err { color: #ff8d8d; }
@media (max-width: 620px) {
  .av-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); max-height: 38vh; }
  .av-preview img { width: 88px; height: 88px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phone lobby lock — the page itself never scrolls; only the table list does.
   Previously the list (max-height 55vh) sat inside a page that could still
   scroll, so swiping the list dragged the whole lobby up and down.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  html { overscroll-behavior: none; }
  body.in-lobby {
    position: fixed; inset: 0; width: 100%;
    height: 100dvh; overflow: hidden !important;
    display: flex; flex-direction: column;
    overscroll-behavior: none;
  }
  body.in-lobby .topbar { flex: 0 0 auto; }
  body.in-lobby #lobbyView:not(.hidden) {
    flex: 1 1 auto; min-height: 0; height: auto !important;
    display: flex !important; flex-direction: column;
    overflow: hidden !important;
  }
  body.in-lobby .lobby > .lobby-main {
    flex: 1 1 auto; min-height: 0; height: auto !important;
    display: flex; flex-direction: column; overflow: hidden;
  }
  body.in-lobby .lobby-list-scroll {
    flex: 1 1 auto; min-height: 120px; max-height: none !important;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; touch-action: pan-y;
  }
  /* seated-players preview: compact strip under the list, scrolls internally */
  body.in-lobby .lobby > .lobby-side {
    flex: 0 0 auto; height: auto !important; max-height: 32vh;
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  }
  body.in-lobby .lobby-side .side-preview {
    max-height: 32vh; overflow-y: auto; overscroll-behavior: contain;
  }
}
@media (max-width: 700px) {
  /* phone: the chat lives in its own full-screen overlay, so the side strip
     is only the preview — keep it short so the table list gets the space */
  body.in-lobby .lobby > .lobby-side { max-height: 26vh; }
  body.in-lobby .lobby-side .side-preview { max-height: 26vh; }
}
/* phone: give the table list the room — one-row tab strips + compact preview */
@media (max-width: 700px) {
  body.in-lobby .lobby-main .lobby-tabs .tab { flex: 1 1 22%; font-size: 10.5px; padding: 7px 2px; white-space: nowrap; }
  body.in-lobby .lobby-main .lobby-subtabs .subtab { flex: 1 1 30%; font-size: 10.5px; padding: 6px 2px; white-space: nowrap; }
  body.in-lobby .lobby-main .lobby-tabs .tab-count { min-width: 16px; padding: 0 4px; font-size: 9.5px; }
  /* preview strip: just the header line + seats count / Play — the roster
     itself opens with the table */
  body.in-lobby .lobby-side .side-preview .sp-cols,
  body.in-lobby .lobby-side .side-preview .sp-list { display: none; }
  body.in-lobby .lobby > .lobby-side { max-height: none; }
  body.in-lobby .lobby-side .side-preview { max-height: none; overflow: hidden; }
  body.in-lobby .lobby-side .side-preview .sp-head { padding: 8px 12px 2px; }
  body.in-lobby .lobby-side .side-preview .sp-foot { padding: 4px 12px 10px; }
}
@media (max-width: 700px) {
  /* keep the preview's Тоглох button clear of the floating Чат button */
  body.in-lobby .lobby-side .side-preview .sp-foot { padding-right: 122px; }
}
/* phone table view: iOS ignores body{overflow:hidden} for touch — pin it */
@media (max-width: 980px) {
  body.at-table { position: fixed; inset: 0; width: 100%; height: 100dvh; overscroll-behavior: none; touch-action: manipulation; }
}
/* phone: the mini hole cards in the top-left collided with the wrapped
   toolbar (Босох / Мөнгө нэмэх); the hero's cards are big on the felt anyway */
@media (max-width: 700px) {
  body.at-table .head-cards { display: none !important; }
  body.at-table .table-head { top: 94px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phone table view — nothing moves:
   • toolbar is ONE fixed 44px row (it used to wrap to 2 rows once seated,
     shifting the felt and the buttons down)
   • the bottom dock (pre-action buttons / action buttons) is a fixed-height
     pinned panel — same height whether or not it's your turn
   • both are a size smaller and tidier
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  body.at-table .table-toolbar {
    flex-wrap: nowrap !important; height: 44px; min-height: 44px; max-height: 44px;
    overflow: hidden; gap: 4px !important; padding: 2px 6px !important; margin-bottom: 0 !important;
    align-items: center;
  }
  body.at-table .table-toolbar .icon-btn { width: 32px; height: 32px; min-width: 32px; padding: 0; font-size: 16px; flex: 0 0 auto; }
  body.at-table .table-toolbar .tb-act {
    padding: 5px 7px !important; font-size: 11px !important; line-height: 1.2;
    white-space: nowrap; flex: 0 0 auto; border-radius: 7px;
  }
  /* Бичлэг becomes an icon-only button to fit the single row */
  body.at-table .table-toolbar #replayLastBtn { font-size: 0 !important; padding: 5px 8px !important; }
  body.at-table .table-toolbar #replayLastBtn::before { content: '\25B6'; font-size: 12px; }
  body.at-table .table-toolbar #tableJackpot { display: none !important; }
  body.at-table .table-toolbar .comeback-btn { padding: 5px 8px !important; font-size: 10px !important; white-space: nowrap; }
  .table-tabs-bar.in-toolbar { max-width: 34vw; }
  .table-tabs-bar.in-toolbar .table-tab { padding: 4px 6px; font-size: 10.5px; max-width: 74px; overflow: hidden; text-overflow: ellipsis; }
  body.at-table .table-head { top: 52px; }
  body.at-table .felt-outer { margin-top: 2vh !important; }

}
/* sit-out lives in Settings now — the always-on corner/pre-move boxes go (all screens) */
#sitOutCorner, .premove-sitout { display: none !important; }
.settings-sitout.hidden { display: none !important; }

@media (max-width: 700px) and (orientation: portrait) {
  body.at-table #actionBar, body.at-table #preMoveBar {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none !important; margin: 0 !important; box-sizing: border-box;
    height: calc(128px + env(safe-area-inset-bottom, 0px));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
    background: rgba(10,8,16,0.94); border-radius: 12px 12px 0 0; z-index: 40;
  }
  body.at-table #actionBar.hidden, body.at-table #preMoveBar.hidden { display: none !important; }
  /* the numpad needs room when it is open */
  body.at-table #actionBar:has(.bet-numpad:not(.hidden)) { height: auto; }
  .bet-controls { display: flex; flex-direction: column; gap: 5px; }
  .quick-bets { gap: 5px; }
  .quick-bets .btn { padding: 6px 2px !important; font-size: 12px !important; border-radius: 7px; }
  .bet-slider-row { margin: 0 !important; gap: 5px; }
  .bet-slider-row .btn.step { padding: 3px 10px !important; font-size: 15px; min-width: 34px; }
  #betAmount { width: 78px !important; padding: 5px 6px !important; font-size: 14px !important; }
  .action-buttons { gap: 5px; }
  .action-buttons .btn { padding: 10px 4px !important; font-size: 14px !important; border-radius: 7px; }
  .premove-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .premove-btn { padding: 10px 4px !important; font-size: 13px !important; border-radius: 7px; }
  .showmuck-bar { display: flex; gap: 5px; }
  .showmuck-bar .btn { flex: 1; padding: 10px 4px; font-size: 14px; }
}
@media (max-width: 700px) {
  /* squeeze so the row still fits when the Telegram button is on */
  body.at-table .table-toolbar .icon-btn { width: 30px; height: 30px; min-width: 30px; font-size: 15px; }
  body.at-table .table-toolbar #addChipsBtn { font-size: 0 !important; padding: 5px 7px !important; }
  body.at-table .table-toolbar #addChipsBtn::before { content: '+ Нэмэх'; font-size: 11px; }
  body.at-table .table-toolbar #standUpBtn { font-size: 0 !important; padding: 5px 7px !important; }
  body.at-table .table-toolbar #standUpBtn::before { content: '\21F1 Босох'; font-size: 11px; }
  .table-tabs-bar.in-toolbar { max-width: 30vw; }
  .table-tabs-bar.in-toolbar .table-tab { max-width: 66px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  /* use the room above the fixed dock: taller felt */
  body.at-table .felt-outer, body.at-table.big-table .felt-outer { height: 70vh !important; margin-top: 1.5vh !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Portrait phone table — reference-style seating: a wide tall felt, seats on
   the rail with the felt centre kept clear.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) and (orientation: portrait) {
  body.at-table .felt-outer, body.at-table.big-table .felt-outer {
    width: 96vw !important; max-width: 96vw !important;
  }
  body.at-table .felt, body.at-table.big-table .felt { width: 84% !important; height: 92% !important; }
  .seat { width: 88px; }
  .seat-pod { min-width: 76px !important; max-width: 92px; padding: 2px 6px 4px !important; }
  .seat-pod .seat-name { font-size: 10.5px !important; max-width: 82px; }
  .seat-pod .seat-stack-num { font-size: 11px !important; }
  .seat-avatar { width: 42px; height: 44px; }
  .seat-medallion { width: 40px; height: 40px; font-size: 15px; }
  .seat-avatar.seat-empty { width: 48px !important; height: 48px !important; }
  .seat-empty .sit-word, .seat-sit-btn { font-size: 10px; letter-spacing: 1px; }
  /* board block a little lower so it sits between the upper and lower side seats */
  .board-area { margin-top: 20%; }
  .felt-brand { bottom: 24% !important; }
}
@media (max-width: 700px) {
  /* the table name already lives in the tab strip — keep only "Hand #" */
  body.at-table .table-name-big { display: none !important; }
  body.at-table .hand-sub { margin-top: 0; }
}
@media (max-width: 700px) and (orientation: portrait) {
  /* 9-max: board sits in the clear band between the upper and lower side seats */
  body.at-table.big-table .board-area { margin-top: 4%; }
  body.at-table.big-table .board-cards .card { width: 46px !important; height: 66px !important; font-size: 19px !important; }
  body.at-table.big-table .board-cards { gap: 3px; }
  /* 6-max: board dead-centre so revealed hole cards of the lower side seats
     (72% down the rail) never overlap the community cards at showdown */
  body.at-table:not(.big-table) .board-area { margin-top: 0; }
}

/* ═══════════ Showdown v2: hand-strength pill + live equity ═══════════ */
/* Best-hand label: a gold pill right under the seat pod (hero: always live) */
.seat .seat-handlabel, .seat.revealed .seat-handlabel {
  top: auto; bottom: -24px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #ffe08a, #e3b445);
  color: #2a1d02; border: 1px solid rgba(255,255,255,0.55);
  border-radius: 9px; padding: 3px 10px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.2px; text-shadow: none; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,0.55);
  z-index: 30 !important;
}
.seat.hero .seat-handlabel { bottom: -26px; font-size: 13px; }
/* Equity: purple pill at the top-right of the avatar, updated every card */
.equity-badge {
  bottom: auto !important; top: -10px !important; left: auto !important; right: -6px !important;
  transform: none !important; z-index: 31;
  background: linear-gradient(180deg, #7b6cf0, #4e42c9) !important; color: #fff !important;
  font-size: 12px !important; font-weight: 800; padding: 2px 7px !important; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: transform .25s;
}
.equity-badge.eq-bump { animation: eqBump .5s ease-out; }
@keyframes eqBump { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (max-width: 700px) {
  .seat .seat-handlabel, .seat.revealed .seat-handlabel { font-size: 10.5px; padding: 2px 8px; bottom: -20px; }
  .seat.hero .seat-handlabel { bottom: -22px; font-size: 11px; }
  .equity-badge { font-size: 10.5px !important; padding: 1px 6px !important; top: -8px !important; right: -4px !important; }
}
/* equity pill: bottom-right corner of the pod (clear of the cards above) */
.equity-badge {
  top: auto !important; bottom: 4px !important; right: -10px !important; left: auto !important;
}
@media (max-width: 700px) {
  .equity-badge { bottom: 2px !important; right: -8px !important; }
  .seat.hero .seat-handlabel { bottom: -16px; }
}

/* ═══════════ Pill colours follow the skin (or the player's own pick) ═══════════ */
:root { --pill-hand: #e3b445; --pill-hand-l: #ffe08a; --pill-hand-d: #c49a33; --pill-hand-fg: #2a1d02;
        --pill-eq: #5a4fd6; --pill-eq-l: #8f86f0; --pill-eq-d: #4a41b0; --pill-eq-fg: #ffffff; }
.seat .seat-handlabel, .seat.revealed .seat-handlabel {
  background: linear-gradient(180deg, var(--pill-hand-l), var(--pill-hand)) !important;
  color: var(--pill-hand-fg) !important;
  border-color: rgba(255,255,255,0.5) !important;
}
.equity-badge {
  background: linear-gradient(180deg, var(--pill-eq-l), var(--pill-eq)) !important;
  color: var(--pill-eq-fg) !important;
}
/* picker swatches */
.sw.sw-pill { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.35); display: inline-block; }
.sw.sw-auto { background: linear-gradient(135deg, #e3b445, #5a4fd6); font-size: 11px; font-weight: 800; color: #fff; text-align: center; line-height: 22px; }
.sw.sw-rainbow { background: conic-gradient(#ff5c7a, #ff9d2e, #ffe45c, #3fbf7f, #4da3ff, #b78bff, #ff5c7a); }
.pill-row .pill-sw { padding: 5px 6px; min-width: 0; }
.pill-row .pill-sw.active { outline: 2px solid var(--accent-gold, #d8b45c); outline-offset: 1px; }
.pill-custom { position: relative; cursor: pointer; }
.pill-custom .pill-color { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* ═══════════ Chips v3: one clean chip + bold amount (reference style) ═══════════ */
:root { --chip-color: #d9343a; }
.chip1-wrap { position: relative; display: inline-block; flex: 0 0 auto; }
.chip1 {
  position: relative; border-radius: 50%; box-sizing: border-box;
  background-color: var(--chip-color);
  background-image: repeating-conic-gradient(from 8deg, rgba(255,255,255,0.95) 0 16deg, transparent 16deg 45deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.25);
}
.chip1::before {
  content: ''; position: absolute; inset: 24%; border-radius: 50%;
  background: var(--chip-color);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 1px rgba(0,0,0,0.25);
}
.chip-place .chip1 { animation: chipPop .28s cubic-bezier(.2,.9,.3,1.4); }
@keyframes chipPop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
/* bet / winner pills: dark capsule, chip left, bold number */
.bet-zone {
  display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.58) !important; border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 999px !important; padding: 3px 11px 3px 4px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.bet-zone .bet-amt, .bet-zone .win-amt {
  background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  color: #fff !important; font-weight: 800 !important; font-size: 14px !important; letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85); line-height: 1.1;
}
.bet-zone.win-pile { flex-direction: row !important; }
/* pot capsule under the "Pot:" label */
#potChips {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,0.58); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 4px 13px 4px 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
#potChips:empty { display: none; }
#potChips .pot-amt {
  background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  color: #fff !important; font-weight: 800 !important; font-size: 16px !important; text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.side-pot { display: inline-flex; flex-direction: column; align-items: center; }
.side-pot .chip1-wrap { margin-bottom: 2px; }
@media (max-width: 700px) {
  .bet-zone { padding: 2px 9px 2px 3px !important; gap: 5px; }
  .bet-zone .bet-amt, .bet-zone .win-amt { font-size: 12.5px !important; }
  #potChips { padding: 3px 11px 3px 4px; }
  #potChips .pot-amt { font-size: 14px !important; }
  .pot-row .chip-stack { transform: none !important; }
}
@media (max-width: 700px) {
  /* the compact capsule fits on 9-max phones too — show chip AND number */
  body.big-table .pot-row #potChips { display: inline-flex !important; }
  body.big-table .pot-row .bet-amt.pot-amt { display: inline !important; }
  body.big-table .bet-zone .bet-amt { font-size: 12px !important; padding: 0 !important; }
}

/* ═══════════ Action buttons: word on top, BIG bold amount below ═══════════ */
.action-buttons .btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; gap: 1px; }
.action-buttons .btn .ab-word { font-size: 12px; font-weight: 700; opacity: 0.92; letter-spacing: 0.4px; text-transform: uppercase; }
.action-buttons .btn .ab-num { font-size: 19px; font-weight: 900; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.6); font-variant-numeric: tabular-nums; }
.action-buttons .btn.ab-allin .ab-num { color: #ffe27a; }
.action-buttons .btn.ab-allin .ab-word::after { content: ' · ALL-IN'; font-size: 10px; }
/* raise amount box: bigger, gold, obvious */
#betAmount {
  font-size: 17px !important; font-weight: 800 !important; color: #ffe27a !important;
  background: rgba(0,0,0,0.5) !important; border: 1px solid rgba(255,226,122,0.45) !important;
  text-align: right; font-variant-numeric: tabular-nums;
}
.bet-slider-row input[type=range] { height: 6px; }
.bet-slider-row input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
@media (max-width: 700px) and (orientation: portrait) {
  .action-buttons .btn { padding: 6px 4px !important; min-height: 44px; }
  .action-buttons .btn .ab-word { font-size: 10.5px; }
  .action-buttons .btn .ab-num { font-size: 17px; }
  #betAmount { font-size: 16px !important; width: 84px !important; }
}

/* Card face v3: the big bottom-right rank a size smaller so Q / K / 10 never
   collide with the corner index; "10" tighter still. */
.card .card-bigrank { font-size: 1.85em !important; right: 7% !important; bottom: 3% !important; }
.card .card-bigrank.r10 { font-size: 1.6em !important; letter-spacing: -0.09em; right: 5% !important; bottom: 5% !important; }

/* ═══════════ PWA install hint ═══════════ */
.pwa-banner {
  position: fixed; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 650;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: linear-gradient(180deg, #2a1d48, #1a1230); border: 1px solid rgba(216,180,92,0.55);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.55); color: #fff;
}
.pwa-banner.hidden { display: none !important; }
.pwa-ico { font-size: 26px; }
.pwa-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #d9d2e8; line-height: 1.3; }
.pwa-text b { font-size: 13.5px; color: #ffe08a; }
.pwa-x { background: none; border: none; color: #fff; font-size: 16px; padding: 6px 8px; cursor: pointer; opacity: 0.8; }
body.in-lobby .pwa-banner { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } /* above the Чат FAB */
body.at-table .pwa-banner { display: none !important; } /* never over the action / straddle dock */

/* ═══════════ Quick seat ═══════════ */
.quick-seat { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.qs-select {
  padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(255,255,255,0.16); font-size: 12px; font-weight: 700;
}
.qs-btn { white-space: nowrap; font-weight: 800; }
@media (max-width: 700px) {
  .lobby-filterbar { flex-wrap: wrap; }
  .quick-seat { margin-left: 0; width: 100%; justify-content: stretch; }
  .qs-select { flex: 1; }
  .qs-btn { flex: 1; padding: 8px 6px; }
}
.settings-straddle.hidden { display: none !important; }
.straddle-toggle:empty { display: none !important; }

/* ═══════════ Profile stats + leaderboard ═══════════ */
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 4px; }
.ps-cell { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ps-cell b { font-size: 16px; color: #ffe08a; font-variant-numeric: tabular-nums; }
.ps-cell b.pos { color: #6fe39a; } .ps-cell b.neg { color: #ff8d8d; }
.ps-cell span { font-size: 10px; color: var(--text-dim, #b9b2c9); letter-spacing: .3px; }
@media (max-width: 620px) { .profile-stats { grid-template-columns: repeat(2, 1fr); } }
.lb-btn { white-space: nowrap; }
.lb-box { max-width: 420px; width: min(94vw, 420px); }
.lb-sub { font-size: 12px; color: var(--text-dim, #b9b2c9); margin: 4px 0 10px; }
.lb-rows { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.lb-row.me { border-color: var(--accent-gold, #d8b45c); background: rgba(216,180,92,0.12); }
.lb-rank { width: 28px; text-align: center; font-weight: 800; font-size: 15px; }
.lb-name { flex: 1; font-weight: 700; display: flex; flex-direction: column; }
.lb-name small { font-weight: 500; font-size: 10.5px; color: var(--text-dim, #b9b2c9); }
.lb-net { font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-net.pos { color: #6fe39a; } .lb-net.neg { color: #ff8d8d; }
.hr-top { display: flex; align-items: center; gap: 8px; }
.hr-share { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #7fc3ff !important; border-color: rgba(127,195,255,0.4) !important; }
.tg-note { font-size: 12px; color: var(--text-dim, #b9b2c9); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ═══════════ Fixes: select readability, compact phone topbar ═══════════ */
/* native dropdown lists use the OS/browser panel colours — force dark text */
.qs-select option, .lang-select option { color: #111; background: #fff; }
.avatar-badge .av-img { border-radius: 50%; }
@media (max-width: 600px) {
  .topbar { display: flex !important; flex-direction: column; align-items: stretch; gap: 4px; padding: 5px 8px 6px; }
  .topbar-left { display: none !important; }
  .topbar-center { order: 0; }
  .topbar-center .brand { font-size: 18px; }
  .topbar-right {
    order: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px; width: 100%; justify-self: stretch;
  }
  .topbar-right .player-id { flex: 0 1 auto; padding: 2px 6px; }
  .topbar-right .player-meta { font-size: 10.5px; line-height: 1.15; }
  .topbar-right .avatar-badge { width: 28px; height: 28px; font-size: 12px; }
  .topbar-right .btn.small { padding: 5px 8px !important; font-size: 11px !important; white-space: nowrap; }
  .topbar-right .lang-select { padding: 4px 4px; font-size: 11px; max-width: 72px; }
  .topbar-right .jackpot-pill { display: none !important; }
}

/* ═══════════ Splash / loader ═══════════ */
.splash {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #2b1d48 0%, #140c24 60%, #0b0714 100%);
  transition: opacity .45s ease; opacity: 1;
}
.splash.out { opacity: 0; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: splashIn .6s ease-out; }
@keyframes splashIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.splash-mark { font-size: 64px; color: #e6c05a; text-shadow: 0 0 30px rgba(230,192,90,.5); line-height: 1; }
.splash-name { font-family: Georgia, 'Times New Roman', serif; font-size: 34px; letter-spacing: 4px; color: #f0dfa8; font-weight: 700; }
.splash-name span { color: #c9a227; }
.splash-bar { width: min(260px, 60vw); height: 4px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; margin-top: 14px; }
.splash-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a227, #ffe08a); transition: width .18s linear; }
.splash-pct { font-size: 12px; color: #b9b2c9; letter-spacing: .5px; }
.fs-btn { font-size: 15px; }
.fs-btn.hidden { display: none !important; }
:fullscreen body, body:fullscreen { background: #140c24; }
@media (max-width: 600px) { .topbar-right .fs-btn { width: 30px; height: 30px; min-width: 30px; padding: 0; } }

/* ═══════════ Phone lobby: rows must FIT — no sideways scroll ═══════════ */
.v-short { display: none; }
@media (max-width: 600px) {
  .v-full { display: none; } .v-short { display: inline; }
  body.in-lobby .lobby-list-scroll { overflow-x: hidden !important; touch-action: pan-y; }
  .lobby-list-scroll .table-list { width: 100% !important; min-width: 0 !important; table-layout: fixed; }
  .table-list th:nth-child(1), .table-list td:nth-child(1) { width: 30%; }
  .table-list th:nth-child(2), .table-list td:nth-child(2) { width: 20%; }
  .table-list th:nth-child(4), .table-list td:nth-child(4) { width: 15%; }
  .table-list th:nth-child(6), .table-list td:nth-child(6) { width: 21%; }
  .table-list th:nth-child(7), .table-list td:nth-child(7) { width: 14%; }
  .table-list td { overflow: hidden; text-overflow: ellipsis; }
  .table-list td.tbl-name { white-space: normal; word-break: break-word; line-height: 1.2; }
  .table-list td.stakes { white-space: nowrap; font-size: 11.5px; }
  .buyin-pill { padding: 2px 5px; font-size: 10.5px; white-space: nowrap; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .play-btn { padding: 5px 6px; font-size: 10.5px; width: 100%; }
  .table-list th { font-size: 9.5px; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 600px) {
  .table-list th { white-space: normal; overflow: visible; text-overflow: clip; font-size: 9px; line-height: 1.15; padding-top: 6px; padding-bottom: 6px; }
}

/* ═══════════ Straddle offer button ═══════════ */
.straddle-bar {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 35;
}
.straddle-bar.hidden { display: none !important; }
.straddle-btn {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; gap: 1px;
  padding: 9px 22px; border-radius: 10px; border: 1px solid rgba(255,220,120,0.5);
  background: linear-gradient(180deg, #5a4a1a, #3a2e0e); color: #ffe08a; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.straddle-btn .ab-word { font-size: 12px; letter-spacing: .5px; }
.straddle-btn .ab-num { font-size: 18px; font-weight: 900; }
.straddle-btn.on { background: linear-gradient(180deg, #e0b04a, #b98a1f); color: #2a1d02; border-color: #ffe08a; box-shadow: 0 0 16px rgba(224,176,74,0.55); }
.straddle-btn.on .ab-word::before { content: '\\2713 '; }
.straddle-hint { font-size: 11px; color: var(--text-dim, #b9b2c9); }
@media (max-width: 700px) and (orientation: portrait) {
  body.at-table #straddleBar {
    position: fixed; left: 0; right: 0; bottom: 0; transform: none;
    height: calc(128px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: center; flex-direction: column; gap: 6px;
    background: rgba(10,8,16,0.94); border-radius: 12px 12px 0 0; z-index: 39;
  }
  body.at-table #straddleBar .straddle-btn { width: 100%; padding: 10px 4px; }
  body.at-table #straddleBar .straddle-btn .ab-num { font-size: 17px; }
}

/* ═══════════ Toast notice ═══════════ */
.rp-toast {
  position: fixed; left: 50%; top: 64px; transform: translate(-50%, -12px); z-index: 900;
  max-width: min(92vw, 420px); padding: 10px 16px; border-radius: 12px;
  background: rgba(20,14,36,0.96); color: #ffe08a; border: 1px solid rgba(216,180,92,0.6);
  font-size: 13px; font-weight: 700; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.rp-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════ Landscape phone at the table ═══════════
   A phone turned sideways gets the desktop layout squeezed into ~390px of
   height. Classic landscape poker layout instead: the felt fills the left
   two thirds, the action / pre-move / straddle controls live in a fixed
   column on the right, and everything that is not play (title, chat/log
   panel, header hand preview) is hidden. */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  body.at-table .table-name-big, body.at-table .hand-sub { display: none !important; }
  body.at-table .log-wrap:not(.land-open) { display: none !important; }
  body.at-table .log-wrap.land-open { display: block !important; position: absolute; left: 8px; bottom: 44px; width: 52vw; z-index: 60; }
  body.at-table .log-wrap.land-open .log-panel { max-height: 120px; }
  body.at-table .head-cards { display: none !important; }
  body.at-table .hist-btn { right: auto !important; left: 8px !important; top: auto !important; bottom: 8px !important; display: flex !important; }
  body.at-table .felt-wrap { justify-content: flex-start !important; padding: 0 0 0 2vw !important; }
  body.at-table .felt-outer, body.at-table.big-table .felt-outer {
    width: 60vw !important; height: 74vh !important; max-width: none !important; aspect-ratio: auto !important;
    margin: 0 !important; margin-top: 0.5vh !important;
  }
  body.at-table .felt, body.at-table.big-table .felt { width: 84% !important; height: 80% !important; }
  body.at-table .board-area, body.at-table.big-table .board-area, #tableView.dual-board .board-area { margin-top: 0 !important; top: 46% !important; }
  body.at-table .board-area .pot-label { display: none !important; } /* the chip+amount pill under the board is enough */
  body.at-table .board-cards { min-height: 56px !important; }
  body.at-table .felt-brand { display: none !important; }
  body.at-table .seat.hero .seat-cards .card:nth-child(n), body.at-table .seat.hero.revealed .seat-cards .card:nth-child(n),
  body.at-table.big-table .seat.hero.revealed .seat-cards .card:nth-child(n) { width: 36px !important; height: 50px !important; font-size: 14px !important; }
  /* hero's cards sit to the LEFT of the hero pod (not above it) so the pot
     capsule and the board stay clear; hand label to the right of the pod */
  body.at-table .seat.hero .seat-cards { top: 50% !important; left: -6px !important; transform: translate(-100%, -60%) !important; flex-wrap: nowrap; }
  body.at-table .seat.hero .seat-handlabel { top: 50% !important; bottom: auto !important; left: 100% !important; transform: translate(6px, -50%) !important; white-space: nowrap; }
  body.at-table .seat.revealed .seat-cards .card:nth-child(n) { width: 34px !important; height: 48px !important; font-size: 13px !important; }
  body.at-table .board-cards .card { width: 40px !important; height: 56px !important; font-size: 16px !important; }
  body.at-table .board-cards { gap: 3px; }
  body.at-table .seat { transform: translate(-50%, -50%) scale(0.72); transform-origin: center center; }
  body.at-table .seat-pod .seat-name { font-size: 10px !important; }
  body.at-table .seat .seat-cards { top: -44px !important; }
  /* opponents' card backs: small, tucked behind the pod so they never reach the toolbar */
  body.at-table .seat:not(.hero):not(.revealed) .seat-cards .card:nth-child(n) { width: 26px !important; height: 36px !important; }
  body.at-table .seat:not(.hero):not(.revealed) .seat-cards { top: -22px !important; }
  body.at-table #actionBar, body.at-table #preMoveBar, body.at-table #straddleBar {
    position: fixed !important; right: 8px !important; left: auto !important; top: 54px !important; bottom: 8px !important;
    width: 31vw !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; height: auto;
    padding: 8px !important; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    background: rgba(10,8,16,0.94); border-radius: 12px; z-index: 40; border: 1px solid rgba(255,255,255,0.08);
  }
  body.at-table #actionBar.hidden, body.at-table #preMoveBar.hidden, body.at-table #straddleBar.hidden { display: none !important; }
  body.at-table #actionBar .bet-controls { display: flex; flex-direction: column; gap: 6px; }
  body.at-table #actionBar .quick-bets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  body.at-table #actionBar .quick-bets .btn { padding: 5px 4px !important; font-size: 11px !important; }
  body.at-table #actionBar .bet-slider-row { margin: 0 !important; gap: 4px; }
  body.at-table #actionBar .bet-slider-row .btn.step { padding: 2px 8px !important; font-size: 14px; min-width: 28px; }
  body.at-table #actionBar .bet-slider-row { flex-wrap: wrap; }
  body.at-table #actionBar .bet-slider-row input[type="range"] { flex: 1 1 60px; min-width: 40px; }
  body.at-table #actionBar #betAmount { flex: 1 1 100%; width: 100% !important; min-width: 0; padding: 5px 6px !important; font-size: 14px !important; }
  body.at-table #actionBar .action-buttons { display: flex; flex-direction: column; gap: 5px; }
  body.at-table #actionBar .action-buttons .btn { width: 100%; padding: 8px 4px !important; font-size: 13px !important; line-height: 1.15; }
  body.at-table #actionBar .action-buttons .btn .ab-num { font-size: 14px; }
  body.at-table .premove-btns { display: grid; grid-template-columns: 1fr; gap: 5px; }
  body.at-table .premove-btn { padding: 8px 4px !important; font-size: 12px !important; }
  body.at-table .showmuck-bar { display: flex; flex-direction: column; gap: 5px; }
  body.at-table .straddle-btn { width: 100%; padding: 8px 4px !important; }
  body.at-table .straddle-hint { display: block; text-align: center; font-size: 10px; }
}

/* ═══════════ Maintenance countdown bar ═══════════ */
.maint-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 950;
  padding: 8px 40px 8px 14px; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.35;
  background: linear-gradient(90deg, #6a3d00, #9a5a00); color: #fff3d6; border-bottom: 1px solid rgba(255,220,120,0.5);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
.maint-bar.hidden { display: none !important; }
body:has(#maintBar:not(.hidden)) .topbar { margin-top: 38px; }
@media (max-width: 600px) { .maint-bar { font-size: 11.5px; padding: 6px 10px; } body:has(#maintBar:not(.hidden)) .topbar { margin-top: 46px; } }
.sa-maint-row input { width: 70px; }
.sa-maint-help { font-size: 12px; color: #b9c0d4; line-height: 1.45; margin: 4px 0 6px; }
.sa-maint-help code { background: rgba(0,0,0,0.35); padding: 1px 5px; border-radius: 4px; }
.sa-maint-status { font-size: 12px; color: #ffe08a; font-weight: 700; min-height: 16px; }
/* the settings drawer must sit above the (portrait / landscape) action docks */
.settings-panel { z-index: 120 !important; }
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  .settings-panel { position: fixed !important; top: 50px !important; bottom: 6px !important; max-height: none !important; }
  body.at-table .hist-btn { z-index: 41; }
}

/* ═══════════ Landscape phone: lobby ═══════════
   Only ~390px of height: one-row top bar, compact filter/tab rows, the table
   list takes everything else; chat + preview strip are portrait-only. */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  body.in-lobby .topbar { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 10px !important; min-height: 0; }
  body.in-lobby .topbar-left { display: none !important; }
  body.in-lobby .topbar-center { flex: 0 0 auto; display: flex; align-items: center; order: 0; }
  body.in-lobby .topbar-center .brand { font-size: 17px; }
  body.in-lobby .play-money-badge { display: none !important; }
  body.in-lobby .topbar-right { flex: 1 1 auto; width: auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; order: 1; }
  body.in-lobby .topbar-right .jackpot-pill { display: none !important; }
  body.in-lobby .topbar-right .player-id { padding: 2px 6px; }
  body.in-lobby .topbar-right .player-meta { font-size: 10px; line-height: 1.15; }
  body.in-lobby .topbar-right .avatar-badge { width: 26px; height: 26px; font-size: 11px; }
  body.in-lobby .topbar-right .btn.small { padding: 4px 8px !important; font-size: 11px !important; white-space: nowrap; }
  body.in-lobby .topbar-right .lang-select { font-size: 11px; padding: 3px 4px; max-width: 84px; }
  body.in-lobby .topbar-right .fs-btn { width: 28px; height: 28px; min-width: 28px; padding: 0; }
  body.in-lobby .lobby { padding: 4px 8px !important; }
  body.in-lobby .lobby-filterbar { gap: 6px; margin: 0 0 4px !important; flex-wrap: nowrap; overflow: hidden; }
  body.in-lobby .lobby-filterbar #lobbySearch { flex: 1 1 120px; max-width: 200px; min-width: 0; padding: 5px 8px; font-size: 12px; }
  body.in-lobby .lobby-toggle { font-size: 11px; white-space: nowrap; }
  body.in-lobby .lb-btn, body.in-lobby .qs-btn { padding: 4px 8px !important; font-size: 11px !important; white-space: nowrap; }
  body.in-lobby .qs-select { padding: 4px 6px; font-size: 11px; max-width: 90px; }
  body.in-lobby .lobby-tabs, body.in-lobby .lobby-subtabs { margin-bottom: 4px !important; gap: 4px; }
  body.in-lobby .lobby-tabs, body.in-lobby .lobby-subtabs { flex-wrap: nowrap !important; }
  body.in-lobby .lobby-tabs .tab, body.in-lobby .lobby-subtabs .subtab { flex: 1 1 0 !important; min-width: 0; padding: 4px 8px !important; font-size: 11px !important; white-space: nowrap; }
  body.in-lobby .lobby > .lobby-side { display: none !important; }
  body.in-lobby .lobby-list-scroll { min-height: 60px; }
  body.in-lobby .table-list th { padding: 4px 8px; font-size: 10px; }
  body.in-lobby .table-list td { padding: 4px 8px; font-size: 12px; }
  body.in-lobby .play-btn { padding: 4px 8px; font-size: 11px; }
  body.in-lobby .pwa-banner { display: none !important; }
}
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  /* every dialog must fit 390px of height: scroll inside the box */
  .modal { align-items: flex-start !important; padding: 6px 0; }
  .modal .modal-box { max-height: calc(100vh - 12px) !important; overflow-y: auto !important; padding: 12px 16px !important; }
  .modal .modal-box h2, .modal .modal-box h3, .modal .modal-box .modal-title { margin-top: 0; font-size: 15px; }
  #joinModal .modal-box .quick-bets .btn, #joinModal .modal-box .biq-btn { padding: 8px 4px !important; font-size: 13px !important; }
}

/* ═══════════ Post-hand bar (rabbit hunt + show folded hand) ═══════════
   One small bar centred UNDER the board on every screen; the rabbit cards
   themselves are drawn on the board (dimmed) after the real community cards. */
body.at-table #rabbitHuntArea, body.at-table.big-table #rabbitHuntArea {
  position: absolute !important; left: 50% !important; right: auto !important; top: calc(50% + 100px) !important; bottom: auto !important;
  transform: translateX(-50%) !important; display: flex; align-items: center; gap: 8px; z-index: 30;
  max-width: 90%; padding: 0 !important; background: none !important; box-shadow: none !important; white-space: nowrap;
}
body.at-table #rabbitHuntArea.hidden { display: none !important; }
body.at-table #rabbitHuntArea .btn { padding: 6px 12px; font-size: 12px; border-radius: 9px; }
body.at-table #rabbitHuntArea .btn.rabbit-hunt { background: linear-gradient(180deg, #3d2f6b, #2a1f4d); color: #ffe08a; border: 1px solid rgba(255,220,120,0.45); font-weight: 800; }
body.at-table #rabbitHuntArea .rabbit-label { font-size: 12px; font-weight: 700; color: #ffe08a; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
body.at-table .board-cards .card.rabbit, .board-cards .card.rabbit {
  opacity: 0.62 !important; filter: saturate(0.6) brightness(0.92) !important;
  outline: 2px dashed rgba(255,224,138,0.85) !important; outline-offset: -3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) !important; transform: none !important; animation: none !important;
}
#straddleToggle { display: none !important; }
@media (max-width: 700px) and (orientation: portrait) {
  body.at-table #rabbitHuntArea, body.at-table.big-table #rabbitHuntArea { top: calc(50% + 78px) !important; }
  body.at-table.big-table #rabbitHuntArea { top: calc(50% + 24px) !important; }
}
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  body.at-table #rabbitHuntArea { top: calc(46% + 70px) !important; }
  body.at-table .rabbit-hunt-area { display: flex !important; }
  body.at-table #rabbitHuntArea.hidden { display: none !important; }
}
/* the seats layer covers the whole felt (z 22) — it must not swallow clicks
   meant for what lies beneath it (rabbit / show-folded bar under the board) */
.seats { pointer-events: none; }
.seats .seat { pointer-events: auto; }

/* ═══════════ Admin withdraw list: risk hints ═══════════ */
.aw-meta { font-size: 10.5px; color: #9aa0b8; font-weight: 400; margin-top: 2px; }
.aw-flag { color: #ffb347; font-weight: 800; }
tr.aw-risk td { background: rgba(255,140,0,0.08); }

/* ═══════════ Phone lobby: game type under the table name ═══════════ */
.tbl-game { display: none; }
@media (max-width: 600px) {
  .tbl-game.v-short { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .2px; color: #b9b2c9; opacity: .9; margin-top: 1px; white-space: nowrap; }
  .table-row.var-omaha .tbl-game, .table-row.var-omaha6 .tbl-game { color: #e6c39a; }
  .quick-seat { display: flex; flex-wrap: nowrap; width: 100%; gap: 5px; margin-left: 0; }
  .quick-seat .qs-select { flex: 1 1 0; min-width: 0; max-width: none; font-size: 12px; padding: 6px 4px; }
  .quick-seat .qs-btn { flex: 0 0 auto; }
}
/* admin: live preview of the chip amount being added / set */
.abal-preview { font-size: 11px; color: #ffe08a; font-weight: 700; margin-top: 2px; min-height: 14px; white-space: nowrap; }
.abal-preview.neg { color: #ff9c9c; }
.abal-cur { font-size: 13px; font-weight: 800; color: #ffe08a; margin-bottom: 3px; white-space: nowrap; }
.abal-cur .abal-k { font-size: 11px; color: #b9b2c9; font-weight: 600; }

/* ═══════════ Phone split view: stacked tiles, no sideways scroll ═══════════ */
.grid-view .tile { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid rgba(216,189,106,0.28); background: #000; min-width: 0; min-height: 0; }
.grid-view .tile iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; border-radius: 0; transform-origin: 0 0; }
@media (max-width: 700px) {
  .grid-view { grid-template-columns: 1fr !important; grid-auto-rows: 1fr; gap: 4px; padding: 4px; overflow: hidden; width: 100%; box-sizing: border-box; }
  .grid-view.grid-3plus { grid-template-columns: 1fr 1fr !important; }
  body.in-grid { overflow: hidden !important; }
  body.in-grid #tableTabsBar { overflow-x: auto; }
}
/* mini tiles: drop chrome that has no room inside a tile */
body.mini .table-toolbar .jackpot-pill, body.mini #fsBtnTable, body.mini .pwa-banner, body.mini .maint-bar { display: none !important; }
body.mini .hist-btn { display: none !important; }
body.in-grid .pwa-banner { display: none !important; }
/* mini tile in landscape layout: give the felt a little more of the tile */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  body.mini.at-table .felt-outer, body.mini.at-table.big-table .felt-outer { width: 64vw !important; height: 62vh !important; }
  body.mini.at-table #actionBar, body.mini.at-table #preMoveBar, body.mini.at-table #straddleBar { width: 30vw !important; top: 48px !important; }
}
@media (max-width: 700px) {
  /* grid mode on a phone: every tab + the layout switch must fit in one row */
  body.in-grid #tableTabsBar { display: flex; flex-wrap: nowrap; gap: 3px; padding: 3px 4px; overflow: hidden; }
  body.in-grid #tableTabsBar .table-tab { flex: 1 1 0; min-width: 0; max-width: 72px; padding: 4px 5px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.in-grid #tableTabsBar .table-tab [data-close] { display: none; }
  body.in-grid #tableTabsBar [data-addtable] { display: none; }
  body.in-grid #tableTabsBar .layout-btns { flex: 0 0 auto; margin-left: auto; }
  body.in-grid #tableTabsBar .lay-btn { padding: 4px 6px !important; font-size: 12px !important; }
  body.in-grid #tableTabsBar .lay-btn .lay-full { display: none; }
}

/* ═══════════ Phone: table switcher never scrolls ═══════════
   With 2+ tables open the toolbar strip shows compact numbered chips
   (1 2 3 4) instead of scrolling names — every open table is always
   reachable with one tap; the name is in the tile/felt anyway. */
.tab-num { display: none; }
@media (max-width: 700px) {
  .table-tabs-bar.in-toolbar.many { max-width: none; overflow: visible; flex: 0 1 auto; gap: 3px; }
  .table-tabs-bar.in-toolbar.many .table-tab { max-width: none; min-width: 26px; padding: 3px 6px; font-size: 11px; font-weight: 800; justify-content: center; }
  .table-tabs-bar.in-toolbar.many .table-tab .tab-name,
  .table-tabs-bar.in-toolbar.many .table-tab .tab-close { display: none; }
  .table-tabs-bar.in-toolbar.many .table-tab .tab-num { display: inline; }
  .table-tabs-bar.in-toolbar.many .table-tab .tab-dot { margin-right: 2px; }
  .table-tabs-bar.in-toolbar.many .add-table-btn { padding: 3px 6px; }
  .table-tabs-bar.in-toolbar.many .layout-btns .lay-btn { padding: 3px 5px !important; font-size: 11px !important; height: 24px; }
  .table-tabs-bar.in-toolbar.many .lay-full { display: none; }
  /* the toolbar itself must never scroll sideways either */
  body.at-table .table-toolbar { overflow: hidden; flex-wrap: nowrap; }
  body.at-table .table-toolbar .tb-act { padding: 4px 6px !important; font-size: 10.5px !important; white-space: nowrap; }
}
@media (max-width: 700px) {
  /* 2+ tables on a phone: everything must fit ONE 44px row, nothing may
     slide off the left edge — trim what the row cannot afford */
  .table-tabs-bar.in-toolbar.many .table-tab { min-width: 22px; padding: 3px 4px; font-size: 10.5px; }
  .table-tabs-bar.in-toolbar.many .add-table-btn { display: none; }           /* ⌂ → lobby adds tables */
  .table-tabs-bar.in-toolbar.many .lay-btn[data-layout="single"] { display: none; } /* only the ⊞ toggle */
  .table-tabs-bar.in-toolbar.many .lay-btn { padding: 3px 6px !important; height: 26px; }
  body.at-table .table-toolbar:has(.table-tabs-bar.many) #replayLastBtn,
  body.at-table .table-toolbar:has(.table-tabs-bar.many) #fsBtnTable { display: none !important; }
  body.at-table .table-toolbar { justify-content: flex-start !important; }
  body.at-table .table-toolbar .toolbar-spacer { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 700px) {
  .table-tabs-bar.in-toolbar.many .table-tab { position: relative; overflow: visible; }
  .table-tabs-bar.in-toolbar.many .table-tab .tab-dot { position: absolute; top: -3px; right: -3px; margin: 0; width: 8px; height: 8px; }
  .table-tabs-bar.in-toolbar.many { gap: 2px; }
  body.at-table .table-toolbar:has(.table-tabs-bar.many) { gap: 3px !important; padding: 2px 4px !important; }
  body.at-table .table-toolbar:has(.table-tabs-bar.many) .tb-act { padding: 4px 5px !important; }
}
/* table switch slide (swipe / arrow keys) */
@keyframes tvSlideR { from { transform: translateX(28px); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes tvSlideL { from { transform: translateX(-28px); opacity: .35; } to { transform: none; opacity: 1; } }
#tableView.slide-in-right .felt-wrap { animation: tvSlideR .3s ease-out; }
#tableView.slide-in-left .felt-wrap { animation: tvSlideL .3s ease-out; }

/* ═══════════ Audit-3 fixes ═══════════ */
/* A2: the withdrawals table must not inherit the 3-column widths of the roster */
.admin-table.aw-table { table-layout: auto; }
.admin-table.aw-table th:nth-child(n), .admin-table.aw-table td:nth-child(n) { width: auto; }
.admin-table.aw-table td { white-space: normal; }
/* A5: join dialog when the balance is short */
.bi-short { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px; background: rgba(255,120,80,0.14); border: 1px solid rgba(255,120,80,0.45); color: #ffd0c0; font-size: 12.5px; font-weight: 700; }
.bi-short.hidden { display: none !important; }
.bi-yes.disabled, .bi-yes:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
/* A3 + A4: landscape phone — toolbar anchored left, split view side by side */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  body.at-table .table-toolbar { justify-content: flex-start !important; overflow: hidden !important; flex-wrap: nowrap !important; gap: 4px !important; padding: 2px 6px !important; }
  body.at-table .table-toolbar .toolbar-spacer { flex: 1 1 auto; min-width: 0; }
  body.at-table .table-toolbar #tableJackpot, body.at-table .table-toolbar #fsBtnTable { display: none !important; }
  body.at-table .table-toolbar .tb-act { padding: 4px 7px !important; font-size: 11px !important; white-space: nowrap; }
  .table-tabs-bar.in-toolbar { max-width: none; overflow: visible; }
  .table-tabs-bar.in-toolbar.many .table-tab .tab-name, .table-tabs-bar.in-toolbar.many .table-tab .tab-close { display: none; }
  .table-tabs-bar.in-toolbar.many .table-tab .tab-num { display: inline; }
  .table-tabs-bar.in-toolbar.many .table-tab { min-width: 24px; padding: 3px 6px; font-weight: 800; }
  .table-tabs-bar.in-toolbar.many .add-table-btn, .table-tabs-bar.in-toolbar.many .lay-btn[data-layout="single"] { display: none; }
  .table-tabs-bar.in-toolbar.many .lay-full { display: none; }
  body.in-grid .topbar-center, body.in-grid .topbar-left { display: none !important; }
  body.in-grid .topbar { padding: 2px 8px !important; min-height: 0; }
  body.in-grid .topbar-right { flex-wrap: nowrap; gap: 6px; }
  body.in-grid .topbar-right .jackpot-pill, body.in-grid .topbar-right .fs-btn { display: none !important; }
  body.in-grid .topbar-right .player-meta { font-size: 10px; }
  .grid-view { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 1fr; gap: 4px; padding: 4px; overflow: hidden; }
  body.in-grid #tableTabsBar { display: flex; flex-wrap: nowrap; gap: 3px; padding: 2px 4px; overflow: hidden; }
  body.in-grid #tableTabsBar .table-tab { flex: 1 1 0; min-width: 0; max-width: 72px; padding: 3px 5px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.in-grid #tableTabsBar .table-tab [data-close], body.in-grid #tableTabsBar [data-addtable] { display: none; }
  body.in-grid #tableTabsBar .layout-btns { flex: 0 0 auto; margin-left: auto; }
  body.in-grid #tableTabsBar .lay-btn { padding: 2px 6px !important; font-size: 11px !important; height: 24px; }
  body.in-grid #tableTabsBar .lay-btn .lay-full { display: none; }
  body.in-grid .pwa-banner { display: none !important; }
}
/* A7: phone touch targets ≥ 36px */
@media (max-width: 700px) {
  .btn.small, .btn.tiny, .play-btn, .lb-btn, .qs-btn, #cashierBtn, #logoutBtn, #loginBtn, #adminBtn { min-height: 36px; }
  .icon-btn, .fs-btn, .settings-btn, #leaveTableBtn { min-width: 36px; min-height: 36px; }
  .lobby-toggle input[type="checkbox"], #hideEmpty, #hideFull { width: 20px; height: 20px; transform: scale(1.15); }
  .lobby-toggle { min-height: 36px; display: inline-flex; align-items: center; }
  .table-list td { padding-top: 5px; padding-bottom: 5px; }
  .play-btn { padding: 6px 6px; }
  body.at-table .table-toolbar .tb-act { min-height: 34px; }
  body.at-table .table-toolbar .icon-btn { width: 34px; height: 34px; min-width: 34px; }
  .table-tabs-bar.in-toolbar.many .table-tab { min-height: 32px; min-width: 26px; }
  .table-tabs-bar.in-toolbar .add-table-btn, .table-tabs-bar.in-toolbar .lay-btn { min-height: 32px; }
  .qs-select, .lang-select { min-height: 36px; }
}

/* ═══════════ Site-styled dialogs (replace alert/confirm/prompt) ═══════════ */
.ui-modal { z-index: 1200 !important; }
.ui-box { width: min(92vw, 380px); padding: 18px 18px 14px; border: 1px solid rgba(216,189,106,0.35); box-shadow: 0 16px 50px rgba(0,0,0,0.6); }
.ui-msg { font-size: 14px; line-height: 1.5; color: #f0eaf8; white-space: pre-line; margin-bottom: 12px; }
.ui-input { margin-bottom: 10px; }
.ui-actions .btn { min-width: 84px; min-height: 38px; }
.ui-modal .ui-actions { justify-content: flex-end; }

/* ═══════════ Wallet + cashier on the table ═══════════ */
.tb-wallet { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 8px 3px 8px; border-radius: 999px; background: rgba(0,0,0,0.38); border: 1px solid rgba(216,189,106,0.35); font-size: 12px; color: #f0e6c8; position: relative; z-index: 30; pointer-events: auto; }
.tb-wallet .tbw-ico { color: #e6c05a; font-size: 10px; }
.tb-wallet b { font-size: 13px; color: #ffe08a; }
.tb-wallet .btn.tiny { padding: 3px 9px; min-height: 26px; font-size: 11px; background: rgba(201,162,39,0.22); border: 1px solid rgba(201,162,39,0.6); color: #ffd75e; border-radius: 8px; }
.tb-wallet.hidden, .tb-login.hidden { display: none !important; }
.tb-login { margin-top: 4px; position: relative; z-index: 30; }
@media (max-width: 700px) {
  body.at-table .table-head { pointer-events: none; }
  body.at-table .tb-wallet, body.at-table .tb-login { pointer-events: auto; margin-top: 0; font-size: 11px; padding: 2px 6px; }
  body.at-table .tb-wallet b { font-size: 12px; }
  body.at-table .tb-wallet .btn.tiny { min-height: 24px; padding: 2px 7px; font-size: 10.5px; }
}
.bi-auto-hint { font-size: 11px; color: #b9b2c9; margin: -4px 0 8px; line-height: 1.35; }
/* landscape phone: compact wallet pinned top-left over the rail (it used to be hidden entirely) */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  body.at-table .table-head { top: 46px !important; left: 8px !important; }
  body.at-table .tb-wallet:not(.hidden), body.at-table .tb-login:not(.hidden) { display: inline-flex !important; font-size: 10px; padding: 1px 5px; gap: 4px; }
  body.at-table .tb-wallet b { font-size: 11px; }
  body.at-table .tb-wallet .btn.tiny { min-height: 20px; padding: 1px 6px; font-size: 10px; }
  body.at-table .tb-wallet .tbw-online { display: none; }
}
.hist-mine-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 12px; color: #d9d2e8; }
.hist-mine-bar.hidden { display: none !important; }
.hist-big { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hist-big input { width: 16px; height: 16px; }

/* ═══════════ online count + invite ═══════════ */
.online-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #b9d9b0; padding: 4px 8px; border-radius: 999px; background: rgba(60,160,90,0.12); border: 1px solid rgba(90,200,120,0.35); white-space: nowrap; }
.online-badge i, .tbw-online i { width: 7px; height: 7px; border-radius: 50%; background: #5fd37c; box-shadow: 0 0 6px #5fd37c; display: inline-block; }
.online-badge.hidden { display: none !important; }
.tbw-online { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #b9d9b0; margin-left: 2px; }
@media (max-width: 700px) { .online-badge { padding: 3px 6px; font-size: 10.5px; } }

/* ── B3: split view — tile lights up when it is your turn; tap = focus ── */
.grid-view .tile { transition: box-shadow .25s, border-color .25s; cursor: pointer; }
.grid-view .tile.my-turn { border-color: #ffd764; box-shadow: 0 0 0 2px #ffd764, 0 0 22px rgba(255,215,100,.75); animation: tileTurnPulse 1.1s ease-in-out infinite alternate; }
@keyframes tileTurnPulse { from { box-shadow: 0 0 0 2px #ffd764, 0 0 10px rgba(255,215,100,.45); } to { box-shadow: 0 0 0 3px #ffe58a, 0 0 26px rgba(255,215,100,.9); } }
.grid-view .tile.my-turn::after { content: attr(data-turn-label); position: absolute; top: 4px; left: 50%; transform: translateX(-50%); background: #ffd764; color: #1a1305; font-weight: 800; font-size: 12px; padding: 2px 10px; border-radius: 999px; pointer-events: none; z-index: 3; }

/* ── B6: table chat + emotes ── */
.log-wrap .chat-panel { display: none; }
.log-wrap.chat-mode .chat-panel { display: flex; flex-direction: column; }
.log-wrap.chat-mode #logPanel { display: none; }
.log-tab { cursor: pointer; position: relative; }
.log-tab.active { color: #e6ddc4; box-shadow: inset 0 -2px 0 var(--gold-soft); }
.log-tab.tab-chat:not(.active) { color: #b9b2c4; box-shadow: none; }
.tchat-badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; border-radius: 7px; background: #e0413f; color: #fff; font-size: 9px; line-height: 14px; text-align: center; padding: 0 3px; font-style: normal; }
body.at-table .log-panel.chat-panel { max-height: 240px; padding: 0 !important; overflow: hidden; }
.tchat-msgs { flex: 1 1 auto; overflow-y: auto; max-height: 96px; padding: 4px 8px; font-size: 12px; line-height: 1.35; }
.tchat-empty { opacity: .55; font-size: 11px; padding: 6px 2px; }
.tc-line b { color: #d8bd6a; font-weight: 700; }
.tc-line b.tc-me { color: #7fd7a8; }
.tc-line b.tc-adm { color: #ff9d2e; }
.tc-line b::after { content: ':'; }
.tc-emote { font-size: 16px; }
.tchat-row { display: flex; gap: 4px; padding: 4px 6px; border-top: 1px solid rgba(216,189,106,0.18); background: rgba(0,0,0,.25); }
.tchat-row input { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #eee; border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.tchat-row input:disabled { opacity: .55; }
.tchat-send, .tchat-emote-btn { background: rgba(216,189,106,.18); border: 1px solid rgba(216,189,106,.35); color: #e6ddc4; border-radius: 6px; padding: 0 9px; font-size: 14px; cursor: pointer; min-width: 32px; }
.tchat-emotes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px; background: rgba(14,12,20,.96); border-top: 1px solid rgba(216,189,106,.2); }
.tchat-em { font-size: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 4px 0; cursor: pointer; }
.tchat-em:hover { background: rgba(216,189,106,.22); }
@media (max-width: 700px) {
  body.at-table .log-panel.chat-panel { max-height: 200px; }
  .tchat-msgs { max-height: 70px; font-size: 11px; }
  .tchat-emotes { grid-template-columns: repeat(6, 1fr); }
  .tchat-em { font-size: 17px; }
}

/* ── B14: deeper profile stats + "my rank" under the top 10 ── */
.profile-stats2 { margin-top: 6px; grid-template-columns: repeat(3, 1fr); }
.profile-stats2 .ps-cell b { font-size: 15px; }
.profile-stats2 .ps-wide { grid-column: 1 / -1; }
.lb-me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 8px; border-radius: 10px; border: 1px dashed var(--accent-gold, #d8b45c); background: rgba(216,180,92,0.10); }
.lb-me.in-top { border-style: solid; }
.lb-me .lb-name { flex: 1; font-weight: 700; }
.lb-me .lb-name small { display: block; font-weight: 400; opacity: .7; font-size: 11px; }

/* ── B4/B5: admin roster meta line, in-play chip, deposit; withdrawal badge/status ── */
.admin-name .an-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-meta { font-size: 10.5px; opacity: .7; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 2px 6px; line-height: 1.3; }
.admin-meta i { font-style: normal; opacity: .5; }
.admin-meta .am-on { color: #5fd48f; opacity: 1; }
.admin-meta .am-seat { color: #ffd764; }
.abal-play { margin-left: 8px; font-size: 11px; color: #9ad4ff; font-weight: 600; }
.abal-row.abal-one { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.abal-row.abal-one input { width: 110px; min-width: 0; }
.aw-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; background: #e0413f; color: #fff; font-size: 10px; font-weight: 700; text-align: center; padding: 0 4px; margin-left: 6px; vertical-align: middle; }
#adminBtn.has-wd { box-shadow: 0 0 0 2px rgba(224,65,63,.55); }
.aw-showdone { font-size: 12px; margin-left: auto; margin-right: 8px; display: inline-flex; align-items: center; gap: 4px; opacity: .85; }
tr.aw-done td { opacity: .55; }
.aw-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
.aw-status.aw-st-completed { color: #5fd48f; }
.aw-status.aw-st-rejected { color: #ff8a80; }
.cash-pending-wd { margin-top: 8px; font-size: 12.5px; color: #ffd764; background: rgba(255,215,100,.08); border: 1px solid rgba(255,215,100,.3); border-radius: 8px; padding: 6px 10px; }
@media (max-width: 700px) {
  .profile-stats2 { grid-template-columns: repeat(2, 1fr); }
  .abal-row.abal-one input { width: 84px; }
}

/* ══ "Pro" table skin (data-tskin="gg"): wood rail, deep green felt, round
   avatar pods with a level badge, red action ring, white bet labels. Pure
   presentation — only active while body.tskin-gg is set. ══ */
.seat-lvl { display: none; }
body.tskin-gg { --gold-soft: #e8d9a8; }
body.tskin-gg .felt::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.06), rgba(0,0,0,.28) 78%); pointer-events: none; z-index: 0; }
body.tskin-gg .felt-brand { opacity: .22 !important; }
body.tskin-gg .felt-brandname { font-size: 44px !important; letter-spacing: 6px; color: #d9d0b8 !important; }

/* seat pods */
body.tskin-gg .seat-avatar { width: 70px; height: 70px; margin: 0 auto -10px; }
body.tskin-gg .seat-medallion {
  width: 62px !important; height: 62px !important;
  background: radial-gradient(circle at 40% 30%, #6b6478, #2c2836 70%) !important;
  border: 2px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.6) !important;
  font-family: Arial, Helvetica, sans-serif !important; font-size: 24px !important; color: #fff !important;
}
body.tskin-gg .seat-medallion .av-img { border-radius: 50%; }
body.tskin-gg .seat.acting .seat-medallion { border-color: #ff3b3b !important; box-shadow: 0 0 0 3px #e0262d, 0 0 18px rgba(224,38,45,.55), 0 6px 16px rgba(0,0,0,.6) !important; }
body.tskin-gg .seat.acting { animation: none !important; }
body.tskin-gg .seat.acting .seat-pod { box-shadow: 0 0 0 2px #e0262d, 0 4px 14px rgba(0,0,0,.6) !important; }
body.tskin-gg .seat-lvl {
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: -2px; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #15151a; border: 1.5px solid #cfcfd8; color: #fff; font-size: 11px; font-weight: 800; z-index: 4;
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
body.tskin-gg .seat.hero .seat-lvl { border-color: #ffd764; }
body.tskin-gg .seat-pod {
  background: rgba(14,14,18,.88) !important; border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px !important; padding: 5px 8px 4px !important; min-width: 96px; box-shadow: 0 6px 14px rgba(0,0,0,.55) !important;
}
body.tskin-gg .seat-name { color: #fff !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0; }
body.tskin-gg .seat-pod .seat-stack-num { color: #8ecbff !important; font-size: 15px !important; font-weight: 800 !important; }
body.tskin-gg .seat-stars { display: none !important; }
body.tskin-gg .seat.folded .seat-medallion { filter: grayscale(.9) brightness(.6); }
body.tskin-gg .seat.folded .seat-pod { opacity: .75; }
body.tskin-gg .dealer-chip { background: #f5e08a !important; color: #3a2a05 !important; border: 1px solid #b89a3a !important; font-weight: 900; box-shadow: 0 2px 5px rgba(0,0,0,.6); }
body.tskin-gg .timer-line { height: 5px !important; background: rgba(255,255,255,.12) !important; border-radius: 3px; }
body.tskin-gg .timer-line-fill { background: linear-gradient(90deg, #ff5a5a, #e0262d) !important; }
body.tskin-gg .seat-action-tag {
  background: rgba(20,20,24,.92) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important;
  font-weight: 800 !important; font-size: 12px !important; text-transform: none; border-radius: 6px !important;
}
body.tskin-gg .seat-action-tag.act-allin { color: #ff5252 !important; border-color: rgba(255,82,82,.55) !important; }
body.tskin-gg .seat-action-tag.act-fold { color: #9a9aa6 !important; }
body.tskin-gg .seat-action-tag.act-check, body.tskin-gg .seat-action-tag.act-call { color: #7fe0a0 !important; }
body.tskin-gg .seat-action-tag.act-bet, body.tskin-gg .seat-action-tag.act-raise { color: #ffb74d !important; }
body.tskin-gg .seat-handlabel { background: #c8323a !important; color: #fff !important; border-radius: 4px; padding: 1px 8px; font-weight: 800; text-shadow: none !important; }
body.tskin-gg .seat-avatar.seat-empty { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), rgba(0,0,0,.35)) !important; border: 1px solid rgba(255,255,255,.22) !important; }
body.tskin-gg .seat-sit-btn, body.tskin-gg .sit-word { color: rgba(255,255,255,.75) !important; }

/* bets, pot */
body.tskin-gg .bet-zone { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; gap: 4px; }
body.tskin-gg .bet-zone .bet-amt, body.tskin-gg .bet-zone .win-amt { color: #fff !important; font-size: 13px !important; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
body.tskin-gg .pot-label { background: rgba(0,0,0,.45) !important; border: none !important; color: #ffd764 !important; font-weight: 800 !important; border-radius: 6px !important; padding: 2px 12px !important; font-size: 13px; }
body.tskin-gg #potChips { background: none !important; border: none !important; box-shadow: none !important; }
body.tskin-gg #potChips .pot-amt { color: #fff !important; }
body.tskin-gg .board-cards .card { box-shadow: 0 3px 8px rgba(0,0,0,.55); border-radius: 5px; }
body.tskin-gg .street-label { color: #d9d0b8; }

/* header info strip (blinds / avg stack / players) */
.gg-info { display: flex; gap: 14px; font-size: 11px; color: #cfc8bd; margin-top: 2px; }
.gg-info span { display: inline-flex; flex-direction: column; line-height: 1.15; }
.gg-info i { font-style: normal; opacity: .6; font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; }
.gg-info b { color: #fff; font-weight: 700; }
body.tskin-gg .table-name-big { color: #e8dfc8 !important; }
/* toolbar / action bar tint */
body.tskin-gg .action-bar { background: rgba(20,18,16,.92) !important; }
body.tskin-gg .table-toolbar { background: rgba(24,20,18,.9) !important; }
@media (max-width: 700px) {
  body.tskin-gg .seat-avatar { width: 50px; height: 50px; margin-bottom: -8px; }
  body.tskin-gg .seat-medallion { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  body.tskin-gg .seat-lvl { width: 17px; height: 17px; font-size: 9px; }
  body.tskin-gg .seat-pod .seat-stack-num { font-size: 12px !important; }
  body.tskin-gg .seat-name { font-size: 10.5px !important; }
  .gg-info { display: none; }
}
/* BB mode: amounts get a little narrower type */
body.show-bb .seat-pod .seat-stack-num { letter-spacing: -.2px; }
.sa-rake-all { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; flex-wrap: wrap; }
.sa-rake-all input { width: 90px; }
.sa-rake-cur { opacity: .7; font-size: 12px; }
.sa-rakepct { font-size: 10.5px; opacity: .7; }

/* ── audit log, emote grid on phones, misc (audit round 3) ── */
.sa-audit { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
.sa-audit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sa-audit-wrap { max-height: 260px; overflow: auto; }
.sa-audit-table td { font-size: 11.5px; vertical-align: top; }
.sa-audit-table tr.audit-fail td { color: #ff9f9a; }
@media (max-width: 700px) {
  .tchat-emotes { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .tchat-em { min-height: 40px; font-size: 22px; }
}
.lb-since { font-size: 11.5px; opacity: .7; margin-top: -4px; }
/* lobby: one representative table per stake group pinned on top */
.table-row.rep-row .tbl-name { font-weight: 700; }
.table-row.rep-last td { border-bottom: 2px solid rgba(216,189,106,.45) !important; }

/* ══ Emotes v2: big, animated, per-emote motion + particles ══ */
.emote-wrap { position: absolute; transform: translate(-50%, -100%); width: 0; height: 0; pointer-events: none; z-index: 45; animation: emoteWrapIn 3.2s ease-out forwards; }
@keyframes emoteWrapIn { 0% { opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
.emote-glyph { position: absolute; left: 0; bottom: 6px; transform: translateX(-50%); font-size: 64px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.65)); transform-origin: 50% 100%; will-change: transform; }
.emote-name { position: absolute; left: 0; top: 6px; transform: translateX(-50%); background: rgba(10,8,14,.85); color: #ffd764; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid rgba(255,215,100,.35); }
.emote-part { position: absolute; left: 0; bottom: 30px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0; animation: emotePart 1.4s ease-out forwards; }
@keyframes emotePart { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(0); opacity: 0; } }
/* per-emote motion */
.em-thumb .emote-glyph { animation: emThumb 3.2s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes emThumb { 0% { transform: translateX(-50%) scale(.2) translateY(30px); } 12% { transform: translateX(-50%) scale(1.3) translateY(-10px); } 22% { transform: translateX(-50%) scale(1) translateY(0); } 35% { transform: translateX(-50%) scale(1.15) translateY(-14px); } 48% { transform: translateX(-50%) scale(1) translateY(0); } 85% { transform: translateX(-50%) scale(1) translateY(0); } 100% { transform: translateX(-50%) scale(.8) translateY(-40px); } }
.em-clap .emote-glyph { animation: emClap 3.2s ease-in-out both; }
@keyframes emClap { 0% { transform: translateX(-50%) scale(.3); } 10% { transform: translateX(-50%) scale(1.2); } 20%,40%,60% { transform: translateX(-56%) scale(1) rotate(-12deg); } 30%,50%,70% { transform: translateX(-44%) scale(1.1) rotate(12deg); } 80% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) scale(.8) translateY(-30px); } }
.em-lol .emote-glyph { animation: emLol 3.2s ease-in-out both; }
@keyframes emLol { 0% { transform: translateX(-50%) scale(.3); } 10% { transform: translateX(-50%) scale(1.2); } 20%,36%,52%,68% { transform: translateX(-50%) scale(1) rotate(-14deg) translateY(0); } 28%,44%,60%,76% { transform: translateX(-50%) scale(1.05) rotate(14deg) translateY(-8px); } 100% { transform: translateX(-50%) scale(.8) translateY(-30px); } }
.em-wow .emote-glyph { animation: emWow 3.2s ease-out both; }
@keyframes emWow { 0% { transform: translateX(-50%) scale(.2); } 20% { transform: translateX(-50%) scale(1.5); } 30% { transform: translateX(-50%) scale(1.2); } 40% { transform: translateX(-50%) scale(1.4); } 80% { transform: translateX(-50%) scale(1.3); } 100% { transform: translateX(-50%) scale(.9) translateY(-30px); } }
.em-cry .emote-glyph { animation: emCry 3.2s ease-in-out both; }
@keyframes emCry { 0% { transform: translateX(-50%) scale(.3); } 12% { transform: translateX(-50%) scale(1.15); } 25%,45%,65% { transform: translateX(-50%) scale(1) translateY(4px) rotate(-4deg); } 35%,55%,75% { transform: translateX(-50%) scale(1) translateY(0) rotate(4deg); } 100% { transform: translateX(-50%) scale(.8) translateY(20px); } }
.em-angry .emote-glyph { animation: emAngry 3.2s ease-in-out both; filter: drop-shadow(0 0 12px rgba(255,60,60,.8)); }
@keyframes emAngry { 0% { transform: translateX(-50%) scale(.3); } 10% { transform: translateX(-50%) scale(1.3); } 15%,25%,35%,45%,55% { transform: translateX(-54%) scale(1.15) rotate(-6deg); } 20%,30%,40%,50%,60% { transform: translateX(-46%) scale(1.15) rotate(6deg); } 80% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%) scale(.8) translateY(-30px); } }
.em-fire .emote-glyph { animation: emFire 3.2s ease-in-out both; filter: drop-shadow(0 0 14px rgba(255,140,0,.9)); }
@keyframes emFire { 0% { transform: translateX(-50%) scale(.3); } 12% { transform: translateX(-50%) scale(1.25); } 25%,45%,65% { transform: translateX(-50%) scale(1.05, 1.15) translateY(-6px); } 35%,55%,75% { transform: translateX(-50%) scale(1.15, .95) translateY(0); } 100% { transform: translateX(-50%) scale(.7) translateY(-60px); } }
.em-fish .emote-glyph { animation: emFish 3.2s ease-in-out both; }
@keyframes emFish { 0% { transform: translateX(-50%) scale(.3); } 10% { transform: translateX(-50%) scale(1.1); } 30% { transform: translateX(-90%) scale(1.1) rotate(-10deg); } 50% { transform: translateX(-10%) scale(-1.1, 1.1) rotate(10deg); } 70% { transform: translateX(-90%) scale(1.1) rotate(-10deg); } 85% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) scale(.8) translateY(-30px); } }
.em-party .emote-glyph { animation: emParty 3.2s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes emParty { 0% { transform: translateX(-50%) scale(.2) rotate(-30deg); } 15% { transform: translateX(-50%) scale(1.4) rotate(10deg); } 30% { transform: translateX(-50%) scale(1.1) rotate(-8deg); } 45% { transform: translateX(-50%) scale(1.25) rotate(8deg); } 60% { transform: translateX(-50%) scale(1.1) rotate(0); } 100% { transform: translateX(-50%) scale(.8) translateY(-40px); } }
.em-pray .emote-glyph { animation: emPray 3.2s ease-in-out both; }
@keyframes emPray { 0% { transform: translateX(-50%) scale(.3); } 12% { transform: translateX(-50%) scale(1.15); } 30%,60% { transform: translateX(-50%) scale(1) translateY(8px) rotate(6deg); } 45%,75% { transform: translateX(-50%) scale(1) translateY(0) rotate(0); } 100% { transform: translateX(-50%) scale(.8) translateY(-30px); } }
.em-shake .emote-glyph { animation: emShake 3.2s ease-in-out both; }
@keyframes emShake { 0% { transform: translateX(-50%) scale(.3); } 12% { transform: translateX(-50%) scale(1.15); } 25%,45%,65% { transform: translateX(-50%) scale(1) translateY(-6px); } 35%,55%,75% { transform: translateX(-50%) scale(1) translateY(4px); } 100% { transform: translateX(-50%) scale(.8) translateY(-30px); } }
.em-flex .emote-glyph { animation: emFlex 3.2s ease-in-out both; }
@keyframes emFlex { 0% { transform: translateX(-50%) scale(.3); } 12% { transform: translateX(-50%) scale(1.2); } 30%,60% { transform: translateX(-50%) scale(1.35) rotate(-8deg); } 45%,75% { transform: translateX(-50%) scale(1.05) rotate(0); } 100% { transform: translateX(-50%) scale(.8) translateY(-30px); } }
@media (max-width: 700px) {
  .emote-glyph { font-size: 46px; }
  .emote-name { font-size: 10px; }
}
body.mini .emote-glyph { font-size: 52px; }

/* ══ Phone: chat/log dock while the action / pre-action bar is showing ══
   The bar (≈128px) used to cover the dock completely. Now the dock sits just
   above the bar as a small two-tab pill (unread badge still visible); tapping
   a tab pops the panel up over the felt, the chevron / same tab closes it. */
@media (max-width: 700px) {
  body.at-table.bar-open .log-wrap { bottom: 134px; left: 6px; width: auto; z-index: 36; }
  body.at-table.bar-open .log-wrap:not(.ph-open) .log-panel { display: none !important; }
  body.at-table.bar-open .log-wrap:not(.ph-open) .log-tabs { border-radius: 10px; background: rgba(14,12,20,.92); border: 1px solid rgba(216,189,106,.35); }
  body.at-table.bar-open .log-wrap:not(.ph-open) .log-collapse { display: none; }
  body.at-table.bar-open .log-wrap .log-tab { padding: 6px 10px; font-size: 10px; }
  body.at-table.bar-open .log-wrap.ph-open { width: 74vw; }
  body.at-table.bar-open .log-wrap.ph-open .log-panel { display: block; max-height: 150px; background: rgba(10,8,14,.94) !important; }
  body.at-table.bar-open .log-wrap.ph-open .log-panel.chat-panel { display: flex; max-height: 190px; }
  body.at-table.bar-open .log-wrap.ph-open .tchat-msgs { max-height: 90px; }
  body.at-table.bar-open .log-wrap.ph-open .log-collapse { display: block; }
  body.at-table.bar-open .log-wrap.ph-open .log-tabs { border-radius: 10px 10px 0 0; }
  /* the sit-out box / straddle / rabbit corner move up with the dock */
  body.at-table.bar-open .sitout-corner { bottom: 178px; }
}

/* split view: the parent shows a compact wallet in the tabs bar (tiles hide theirs) */
.grid-wallet { display: none; }
body.in-grid .grid-wallet { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.38); border: 1px solid rgba(216,189,106,.35); font-size: 12px; color: #f0e6c8; white-space: nowrap; }
.grid-wallet b { color: #ffe08a; }
.grid-wallet .btn.tiny { padding: 2px 8px; min-height: 24px; font-size: 11px; background: rgba(201,162,39,.22); border: 1px solid rgba(201,162,39,.6); color: #ffd75e; border-radius: 8px; }
@media (max-width: 700px) { body.in-grid .grid-wallet { font-size: 11px; padding: 1px 6px; } }

/* settings drawer: the custom-amount input's intrinsic width (a number input
   is ~225px by default) pushed the Add-Chips box wider than the drawer, so the
   whole drawer scrolled sideways on phones. Constrain everything to the drawer. */
.settings-panel { overflow-x: hidden; box-sizing: border-box; }
.settings-actions, .chip-buy, .chip-buy-row, .chip-tray, .skin-row { max-width: 100%; box-sizing: border-box; min-width: 0; }
.chip-buy-row .rebuy-input { flex: 1 1 60px; width: 0; min-width: 0; }
.chip-tray { flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 700px) {
  .settings-panel { width: min(340px, 94vw); padding: 12px 12px; }
  .buy-chip { width: 42px; height: 42px; }
  .chip-tray { gap: 8px; }
}
/* the drawer is a vertical list: one option per full-width row, labels wrap */
.settings-panel { display: block; }
.settings-panel .settings-opt { width: 100%; max-width: 100%; white-space: normal; box-sizing: border-box; }
.settings-panel .settings-opt > span:first-child { min-width: 0; }

/* ── country flag at the seat + profile selector ── */
.seat-flag { font-size: 12px; margin-right: 4px; vertical-align: -1px; }
.profile-country { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: #cfc6a9; }
.profile-country select { background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 2px 6px; font-size: 12px; max-width: 160px; }
/* Pro (GG) skin: the flag sits on the avatar's top-right, like the real thing */
body.tskin-gg .seat-name .seat-flag { position: absolute; right: -2px; top: 2px; font-size: 15px; margin: 0; z-index: 4; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
body.tskin-gg .seat-pod { position: relative; }
@media (max-width: 700px) { .seat-flag { font-size: 11px; } body.tskin-gg .seat-name .seat-flag { font-size: 12px; } }

/* ── round-5: bet hint, wait-for-BB, spectating tab mark, seat BB tags ── */
.bet-hint { font-size: 11px; color: rgba(255,255,255,0.55); text-align: right; padding: 2px 6px 0; letter-spacing: 0.02em; }
.bet-hint:empty { display: none; }
.bi-waitbb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d8d2c0; margin: 6px 2px 2px; cursor: pointer; user-select: none; }
.bi-waitbb input { width: 16px; height: 16px; accent-color: #ffd764; margin: 0; }
.table-tab .tab-eye { margin-left: 4px; font-size: 11px; opacity: 0.75; }
.seat-away-tag.seat-bb-tag { background: rgba(255,215,100,0.85); color: #2a1f00; }
.seat-action-tag.straddle { background: #5b3fa0; color: #ffe08a; }
.cfg-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.cfg-check input { width: 16px !important; height: 16px; accent-color: #ffd764; flex: 0 0 auto; }
@media (max-width: 700px) { .bet-hint { text-align: center; } }
.hist-commit { font-size: 10.5px; color: rgba(255,255,255,0.45); margin-top: 6px; word-break: break-all; }
.hist-commit code { font-size: 10px; color: rgba(255,224,138,0.7); }

/* ── your own folded hand stays visible (greyed) until the hand ends ── */
.seat.hero.folded { opacity: 0.8; }
.seat.hero.folded .seat-cards.folded-mine .card { opacity: 0.55; filter: grayscale(0.85) brightness(0.8); }
#headCards.folded-mine .card { opacity: 0.5; filter: grayscale(0.85); }

/* ── X-ray (security observer): header badge, upcoming-board strip, roster ── */
.xray-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .06em; color: #1a1200; background: linear-gradient(180deg, #ffe08a, #e0b040); box-shadow: 0 0 10px rgba(255,215,100,0.45); }
.xray-next { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,0.35); border: 1px dashed rgba(255,215,100,0.5); }
.xray-next.hidden { display: none !important; }
.xray-next .xray-lbl { font-size: 10px; font-weight: 800; color: #ffe08a; letter-spacing: .04em; margin-right: 4px; white-space: nowrap; }
.xray-next .card.xray-card { width: 30px !important; height: 42px !important; font-size: 12px !important; opacity: 0.85; filter: saturate(0.85); outline: 1px dashed rgba(255,224,138,0.8); outline-offset: -2px; transform: none !important; animation: none !important; position: relative; }
.xray-next .card.xray-card[data-board]::after { content: attr(data-board); position: absolute; right: -3px; top: -6px; font-size: 8px; font-weight: 900; background: #ffe08a; color: #1a1200; border-radius: 6px; padding: 0 3px; }
.admin-meta .am-xray { color: #ffe08a; font-weight: 800; }
.btn.xray-on { background: rgba(255,215,100,0.25) !important; color: #ffe08a !important; }
@media (max-width: 700px) { .xray-next .card.xray-card { width: 22px !important; height: 31px !important; font-size: 9px !important; } .xray-badge { font-size: 9px; padding: 1px 6px; } }

/* ── X-ray peek at an opponent's live hand: a flat, fully visible row of
   medium cards ABOVE the pod (rank + suit colour readable); the action tag,
   dealer chip and away tag are drawn on top of the cards ── */
.seat.xray-peek .seat-cards { top: -62px; z-index: 4; gap: 3px !important; }
.seat.xray-peek .seat-cards .card, .seat.xray-peek .seat-cards .card:nth-child(n) {
  width: 58px !important; height: 80px !important; font-size: 21px; margin: 0 !important; transform: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,224,138,0.55);
}
.seat.xray-peek .seat-cards.four-cards .card:nth-child(n) { width: 44px !important; height: 62px !important; font-size: 16px; }
.seat.xray-peek .seat-action-tag, .seat.xray-peek .dealer-chip, .seat.xray-peek .seat-away-tag { z-index: 6; }
.seat-action-tag { z-index: 6; }
body.at-table .seat.xray-peek .seat-cards .card:nth-child(n) { width: 54px !important; height: 76px !important; font-size: 20px !important; }
body.at-table .seat.xray-peek .seat-cards.four-cards .card:nth-child(n) { width: 40px !important; height: 56px !important; font-size: 15px !important; }
@media (max-width: 700px) {
  .seat.xray-peek .seat-cards { top: -50px; }
  .seat.xray-peek .seat-cards .card, body.at-table .seat.xray-peek .seat-cards .card:nth-child(n) { width: 40px !important; height: 56px !important; font-size: 15px !important; }
  .seat.xray-peek .seat-cards.four-cards .card, body.at-table .seat.xray-peek .seat-cards.four-cards .card:nth-child(n) { width: 30px !important; height: 42px !important; font-size: 11px !important; }
}

/* ── River peel: the 5th board card lands face-down, lifts and flips over ── */
@keyframes riverFlip {
  0%   { transform: perspective(600px) rotateY(180deg) translateY(0) scale(1); }
  35%  { transform: perspective(600px) rotateY(180deg) translateY(-10px) scale(1.06); }
  65%  { transform: perspective(600px) rotateY(90deg) translateY(-14px) scale(1.1); }
  100% { transform: perspective(600px) rotateY(0deg) translateY(0) scale(1); }
}
@keyframes riverBack { 0%, 64% { opacity: 1; } 65%, 100% { opacity: 0; } }
.board-cards .card.river-flip { animation: riverFlip 1.05s cubic-bezier(.4,.1,.3,1) both; transform-style: preserve-3d; position: relative; overflow: hidden; }
.board-cards .card.river-flip::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 3;
  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),
    var(--site-cardback, linear-gradient(160deg, #463878 0%, #2a2050 60%, #1b1436 100%));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28);
  animation: riverBack 1.05s linear both;
}

/* ── Phone: keep the chat/log dock clear of the browser's bottom bar (Safari's
   address bar / Android gesture bar) — the write / send / emoji row used to
   sit under it. All bottoms include the safe-area inset. ── */
@media (max-width: 700px) {
  body.at-table .log-wrap { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.at-table.bar-open .log-wrap { bottom: calc(134px + env(safe-area-inset-bottom, 0px)); }
  body.at-table .log-wrap .tchat-row { padding-bottom: 2px; }
  body.at-table .sitout-corner { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  body.at-table .log-wrap.land-open { bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
}

/* ── chip convoy flights (bets → pot, pot → winner) ── */
.fx-item.fx-chipfly { will-change: transform, opacity; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.55)); }
.fx-item.fx-chipfly .chip-stack { width: 30px !important; height: 30px !important; }
.bet-zone.win-pile.win-wait { opacity: 0; }
.bet-zone.win-pile { transition: opacity 160ms ease; }
/* the +N label floats above an x-ray peek row too */
.seat.xray-peek .win-plus { top: -92px; }
@media (max-width: 700px) { .seat.xray-peek .win-plus { top: -74px; } }

/* ── Phone: full-screen table-chat sheet (body.tchat-full) ── */
.tchat-full-head { display: none; }
body.tchat-full #logWrap {
  position: fixed !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
  width: 100% !important; max-width: none !important; height: 100dvh; z-index: 950 !important; margin: 0 !important;
  display: flex !important; flex-direction: column; border-radius: 0 !important;
  background: rgba(12,10,18,0.98) !important; box-shadow: none !important;
}
body.tchat-full #logWrap .log-tabs, body.tchat-full #logWrap #logPanel, body.tchat-full #logWrap .log-collapse { display: none !important; }
body.tchat-full #logWrap .tchat-full-head {
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px 14px; border-bottom: 1px solid rgba(216,189,106,0.25);
  color: #ffe08a; font-weight: 800; font-size: 14px; letter-spacing: .03em;
}
body.tchat-full #logWrap .tchat-full-head b { color: #fff; font-weight: 700; margin-left: 4px; }
body.tchat-full #logWrap .tfh-close { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
body.tchat-full #logWrap .chat-panel { display: flex !important; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: none !important; height: auto !important; border-radius: 0 !important; background: transparent !important; }
body.tchat-full #logWrap .tchat-msgs { flex: 1 1 auto; max-height: none !important; min-height: 0; font-size: 14px; line-height: 1.45; padding: 8px 12px; }
body.tchat-full #logWrap .tchat-row { flex: 0 0 auto; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(0,0,0,0.35); border-top: 1px solid rgba(216,189,106,0.25); }
body.tchat-full #logWrap .tchat-row input { font-size: 16px; padding: 10px 12px; border-radius: 10px; } /* 16px: iOS does not zoom */
body.tchat-full #logWrap .tchat-row button { min-width: 44px; min-height: 42px; font-size: 20px; border-radius: 10px; }
body.tchat-full #logWrap .tchat-emotes { flex: 0 0 auto; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 10px; }
body.tchat-full #logWrap .tchat-emotes .tchat-em { min-height: 46px; font-size: 26px; }
body.tchat-full #actionBar, body.tchat-full #preMoveBar, body.tchat-full #straddleBar { visibility: hidden; }

/* ── Phone: the open-table switcher is always in front and easy to tap ──
   Lobby: a sticky strip under the top bar (it used to sit in the page flow
   and slide behind the lobby chrome). Table view: the numbered chips get a
   real finger-sized hit area. */
@media (max-width: 700px) {
  body.in-lobby #tableTabsBar:not(.hidden) {
    position: sticky; top: 0; z-index: 650;
    background: rgba(16,10,22,0.97); border-bottom: 1px solid rgba(216,189,106,0.35);
    box-shadow: 0 4px 12px rgba(0,0,0,0.45); padding: 6px 8px; gap: 6px; min-height: 50px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body.in-lobby #tableTabsBar .table-tab { min-height: 38px; padding: 6px 12px; font-size: 13px; border-radius: 10px; display: inline-flex; align-items: center; }
  body.in-lobby #tableTabsBar .table-tab.add-table-btn { width: 38px; height: 38px; min-height: 0; padding: 0; }
  body.in-lobby #tableTabsBar .tab-close { padding: 2px 4px 2px 8px; font-size: 17px; line-height: 1; }
  body.in-lobby #tableTabsBar .lay-btn { min-height: 36px; padding: 4px 10px !important; font-size: 12px !important; }
  .table-tabs-bar.in-toolbar.many .table-tab { min-width: 36px !important; min-height: 34px; padding: 4px 10px !important; font-size: 14px !important; border-radius: 9px; }
  .table-tabs-bar.in-toolbar.many .table-tab .tab-dot { top: -4px; right: -4px; width: 10px; height: 10px; }
  .table-tabs-bar.in-toolbar.many .lay-btn { height: 34px !important; padding: 4px 10px !important; font-size: 13px !important; }
  .table-tabs-bar.in-toolbar.many { gap: 5px; }
}
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1000px) {
  .table-tabs-bar.in-toolbar.many .table-tab { min-width: 34px; min-height: 30px; padding: 3px 9px; font-size: 13px; }
}
@media (max-width: 700px) {
  /* lobby strip: the ⊞ split toggle is enough (a tab tap already returns to single view) */
  body.in-lobby #tableTabsBar .lay-btn[data-layout="single"] { display: none; }
  body.in-lobby #tableTabsBar .layout-btns { padding: 2px 4px; margin-left: auto; }
  body.in-lobby #tableTabsBar .table-tab.add-table-btn { margin-right: 4px; }
}
@media (max-width: 700px) {
  .table-tabs-bar.in-toolbar.many.many4 .table-tab { min-width: 28px !important; padding: 4px 5px !important; font-size: 13px !important; }
  .table-tabs-bar.in-toolbar.many.many4 { gap: 3px; }
  .table-tabs-bar.in-toolbar.many.many4 .lay-btn { padding: 4px 7px !important; }
  body.at-table .table-toolbar:has(.table-tabs-bar.many4) .tb-act { padding: 4px 4px !important; font-size: 10px !important; }
  body.at-table .table-toolbar:has(.table-tabs-bar.many4) { gap: 2px !important; padding: 2px 3px !important; }
}

/* ---- multi-seat (super-admin grant) ---- */
.admin-meta .am-multi { color: #9be7ff; font-weight: 800; }
.btn.multi-on { background: rgba(120,210,255,0.22) !important; color: #9be7ff !important; }
.bi-alias { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 13px; color: #d9e3ee; }
.bi-alias input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.35); color: #fff; font-size: 14px; }
.bi-alias input:focus { outline: none; border-color: #9be7ff; }
body.has-multiseat .seat.hero { cursor: pointer; }
.seat.mine-alt .seat-avatar { box-shadow: 0 0 0 2px #9be7ff, 0 0 14px rgba(155,231,255,0.55); }
.seat.mine-alt .seat-name { color: #9be7ff; }
.seat.mine-alt.acting .seat-avatar { box-shadow: 0 0 0 3px #ffe08a, 0 0 18px rgba(255,224,138,0.7); }
.acting-as { position: absolute; top: -22px; left: 10px; background: #9be7ff; color: #10202a; font-weight: 900; font-size: 12px; letter-spacing: .04em; padding: 3px 10px; border-radius: 10px 10px 0 0; box-shadow: 0 -2px 8px rgba(0,0,0,0.35); z-index: 3; }
.action-bar { position: relative; }

/* ---- account security (2FA, re-auth) ---- */
.auth-2fa { margin: 4px 0 10px; }
.auth-2fa-hint { font-size: 13px; color: #d9e3ee; margin: 0 0 6px; }
.auth-2fa input { width: 100%; box-sizing: border-box; font-size: 22px; letter-spacing: .3em; text-align: center; padding: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.35); color: #fff; }
.profile-sec { display: flex; flex-direction: column; gap: 8px; }
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.sec-note { font-size: 12.5px; color: #bcc7d3; margin: 0; line-height: 1.4; }
.tfa-qr { display: flex; justify-content: center; margin: 6px 0; }
.tfa-qr img { width: 180px; height: 180px; background: #fff; border-radius: 8px; padding: 4px; }
.sec-inline { display: flex; gap: 8px; align-items: center; }
.sec-inline input { flex: 1; min-width: 0; font-size: 20px; letter-spacing: .25em; text-align: center; padding: 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.35); color: #fff; }
.tfa-codes { background: rgba(0,0,0,0.4); border: 1px dashed rgba(255,224,138,0.5); border-radius: 8px; padding: 10px 14px; font-size: 15px; letter-spacing: .08em; line-height: 1.6; color: #ffe08a; user-select: all; }
#profileSec code { background: rgba(0,0,0,0.35); padding: 2px 6px; border-radius: 4px; user-select: all; word-break: break-all; }
.reauth-box { max-width: 380px; }
.reauth-box label { display: block; margin: 8px 0; font-size: 13px; }
.reauth-box input { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.35); color: #fff; font-size: 15px; }
.admin-meta .am-tfa-on { color: #7fd6a0; font-weight: 700; }
.admin-meta .am-tfa-off { color: #ffb3b3; font-weight: 700; }
.btn.danger { background: linear-gradient(180deg, #8e2f38, #6b1f27) !important; color: #fff; }

/* ═══ Open-table strip on desktop: never squeezed behind the lobby ═══
   The lobby locks body to the viewport as a flex column; the strip had no
   flex-basis, so the lobby pane squashed it to a ~20px sliver ("сууж байгаа
   ширээ далд орж байна"). It now keeps its full height, sits in front, and
   the table(s) you are SEATED at are marked in gold. */
@media (min-width: 701px) {
  body.in-lobby #tableTabsBar:not(.hidden) {
    flex: 0 0 auto; min-height: 50px; padding: 8px 16px; gap: 8px;
    position: relative; z-index: 60;
    background: rgba(16,10,22,0.98);
    border-bottom: 1px solid rgba(216,189,106,0.35);
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  }
  body.in-lobby #tableTabsBar .table-tab { min-height: 34px; padding: 6px 14px; font-size: 13px; border-radius: 10px; }
  body.in-lobby #tableTabsBar .table-tab.add-table-btn { width: 34px; height: 34px; min-height: 0; padding: 0; }
}
.table-tab.seated {
  border-color: var(--accent-gold); color: #ffe08a;
  background: rgba(240,196,25,0.12);
  box-shadow: 0 0 0 1px rgba(240,196,25,0.22), 0 0 10px rgba(240,196,25,0.25);
}
.table-tab.seated.active { color: #fff; background: var(--accent-purple); border-color: var(--accent-gold); }
.table-tab .tab-seat {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.8px; line-height: 1;
  background: linear-gradient(180deg, #ffd75e, #c9a227); color: #1a1208;
  border-radius: 4px; padding: 3px 6px;
}

/* Cashier › Deposit: the site-chat pinned notice is repeated here */
.cashier-pinned {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 12px; padding: 11px 14px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(201,162,39,0.20), rgba(201,162,39,0.10));
  border: 1px solid rgba(201,162,39,0.45);
  box-shadow: inset 0 1px 0 rgba(255,215,94,0.18);
}
.cashier-pinned .cashier-pin-ico { font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.cashier-pinned .pin-text { color: #ffe9ad; font-size: 14.5px; font-weight: 600; line-height: 1.5; white-space: pre-line; word-break: break-word; }
/* In the table toolbar the chips are already numbered and compact — the
   SEATED badge only belongs in the lobby strip (phones: the toolbar chips
   must all fit on one row). */
.table-tabs-bar.in-toolbar .tab-seat { display: none; }
.table-tabs-bar.in-toolbar .table-tab.seated { box-shadow: none; }

/* ═══ Phone (portrait): the chat/log dock is ALWAYS a small pill at the TOP
   RIGHT, just under the toolbar — away from the action buttons (at the bottom
   it sat on top of Fold / Check / Call when the bet rows were open) and away
   from the browser's bottom bar. Nothing moves when the action bar opens or
   closes; ЛОГ drops the log panel down over the felt, ЧАТ opens the
   full-screen sheet. ═══ */
@media (max-width: 700px) and (orientation: portrait) {
  body.at-table .log-wrap { top: calc(50px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important; right: 6px; left: auto !important; width: auto; z-index: 36; }
  body.at-table .log-wrap.ph-open { right: 6px; }
  body.at-table .log-wrap:not(.ph-open) .log-panel { display: none !important; }
  body.at-table .log-wrap:not(.ph-open) .log-tabs { border-radius: 10px; background: rgba(14,12,20,.92); border: 1px solid rgba(216,189,106,.35); }
  body.at-table .log-wrap:not(.ph-open) .log-collapse { display: none; }
  body.at-table .log-wrap .log-tab { padding: 7px 12px; font-size: 11px; }
  body.at-table .log-wrap.ph-open { width: 74vw; }
  body.at-table .log-wrap.ph-open .log-panel { display: block; max-height: 150px; background: rgba(10,8,14,.94) !important; }
  body.at-table .log-wrap.ph-open .log-panel.chat-panel { display: flex; max-height: 190px; }
  body.at-table .log-wrap.ph-open .tchat-msgs { max-height: 90px; }
  body.at-table .log-wrap.ph-open .log-collapse { display: block; }
  body.at-table .log-wrap.ph-open .log-tabs { border-radius: 10px 10px 0 0; }
  body.at-table .sitout-corner { bottom: calc(178px + env(safe-area-inset-bottom, 0px)); }

  /* full-screen chat sheet: composer at the TOP (header → emotes → input →
     messages, newest first). Whatever the browser does with its bottom bar
     or the keyboard, the input row stays on screen. */
  body.tchat-full.tc-topfirst #logWrap { top: 0 !important; bottom: 0 !important; height: auto !important; }
  body.tchat-full.tc-topfirst #logWrap .chat-panel { flex-direction: column-reverse; justify-content: flex-end; }
  body.tchat-full.tc-topfirst #logWrap .tchat-row { border-top: 0; border-bottom: 1px solid rgba(216,189,106,0.25); padding: 8px; background: rgba(0,0,0,0.35); }
  body.tchat-full.tc-topfirst #logWrap .tchat-emotes { border-bottom: 1px solid rgba(216,189,106,0.18); }
  body.tchat-full.tc-topfirst #logWrap .tchat-msgs { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); } /* the last (oldest) lines stay reachable above any bottom bar */
}