:root {
  --bg: #0f1115;
  --panel: #161a20;
  --accent: #e01b24;
  --text: #e6e6e6;
  --muted: #8a8a8a;
  --green: #00d4aa;
  --felt: #0f5e4f;
  --chip: #f2c14e;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg); color: var(--text);
}
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 20px; border-bottom: 3px solid var(--accent);
  position: sticky; top:0; background: #13161b; z-index: 10;
}
.logo { font-weight: 800; font-size: 22px; color: var(--accent); }
.beta { font-size: 10px; margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0,212,170,.12); color: var(--green); }
.tag { color: var(--muted); font-size: 12px; }

.layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; padding: 16px; max-width: 1400px; margin: 0 auto; }
.sidebar { display: grid; gap: 16px; }
.main { display: grid; gap: 16px; }
.panel { background: var(--panel); border: 1px solid #2a2a2a; border-radius: 10px; padding: 16px; }

.tables { display: grid; gap: 8px; }
.table-btn {
  padding: 10px 12px; border-radius: 10px; background: #22262e; color: var(--text);
  border: 1px solid #333; cursor: pointer; text-align: left; display: grid; gap: 6px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.table-btn:hover { transform: translateY(-1px); background: #2a303a; }
.table-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(224,27,36,.3); }
.table-title { display:flex; align-items:center; justify-content: space-between; font-weight: 700; }
.table-meta-row { color: var(--muted); font-size: 12px; display:flex; gap: 10px; flex-wrap: wrap; }
.badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid #3a3a3a; text-transform: uppercase; letter-spacing: .5px; }
.badge.playing { color: #ffd24d; border-color: rgba(255,210,77,.4); background: rgba(255,210,77,.1); }
.badge.waiting { color: #8aa4ff; border-color: rgba(138,164,255,.4); background: rgba(138,164,255,.1); }
.badge.empty { color: var(--muted); }
.badge.showdown { color: #f26dff; border-color: rgba(242,109,255,.4); background: rgba(242,109,255,.1); }

.table-meta { display:flex; gap: 12px; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; }
#pot.pulse { animation: glow .6s ease; color: #ffd24d; }

.stage-bar { display:flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.stage-pill { padding: 4px 10px; border-radius: 999px; border: 1px solid #3a3f48; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; background:#1a1d23; }
.stage-pill.active { color: #fff; border-color: var(--accent); background: rgba(224,27,36,.2); box-shadow: 0 0 10px rgba(224,27,36,.35); }
.stage-pill.done { color: #cfd3da; border-color: #4a505a; background:#20242c; }

.table-wrap { display:flex; justify-content:center; }
.poker-table {
  position: relative; width: 860px; height: 460px; border-radius: 280px; background: #0b3d34;
  border: 8px solid #1c1f24; box-shadow: inset 0 0 0 6px #0e473c, 0 20px 40px rgba(0,0,0,.45);
}
.table-felt {
  position:absolute; inset:20px; border-radius: 240px; background: radial-gradient(circle at 50% 40%, #117a64, #0b4a3e 70%);
}

.board {
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  display:flex; gap: 8px; z-index: 3;
}

.pot-area {
  position:absolute; top:36%; left:50%; transform: translate(-50%, -50%);
  display:flex; flex-direction:row; align-items:center; gap:12px; z-index: 2;
}
.pot-box { display:flex; flex-direction:column; align-items:center; gap:4px; }
.pot-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing:.4px; }
.pot-stack {
  width: 46px; height: 30px; border-radius: 8px;
  background: radial-gradient(circle at 30% 30%, #f9d56e, #c18b2a 70%);
  border: 2px solid #b68a2f; box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.pot-amt {
  font-size: 13px; color: #ffd24d; font-weight: 800; text-shadow: 0 0 6px rgba(255,210,77,.35);
}
.card { padding: 8px 10px; border-radius: 6px; border: 1px solid #333; background:#1d1f25; min-width: 44px; text-align: center; font-weight: 700; display:flex; gap: 6px; align-items:center; justify-content:center; }
.card.red { color: #ff7a7a; }
.card .rank { font-weight: 800; }
.card .suit { font-size: 14px; }
.card.mini { padding: 4px 6px; min-width: 28px; font-size: 12px; }
.card.new { animation: pop .35s ease; box-shadow: 0 0 10px rgba(224,27,36,.45); }

.seats { position:absolute; inset:0; z-index: 4; }
.seat {
  position:absolute; width: 160px; padding: 8px; border-radius: 10px; background: rgba(18,20,25,.96);
  border: 1px solid #5a5f6b; text-align:center; color: var(--text);
}
.seat.active { border-color: var(--accent); box-shadow: 0 0 12px rgba(224,27,36,.55); position: relative; }
.seat.folded { border-color: #4a4f59; background: rgba(18,20,25,.55); }

.seat-action {
  position: absolute; right: 8px; bottom: -16px;
  background: #1f232b; color: #ffd24d; border: 1px solid #4a4f59;
  font-size: 11px; padding: 2px 6px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.seat-profit {
  position: absolute; left: 8px; bottom: -16px;
  background: rgba(0,212,170,.15); color: #00d4aa; border: 1px solid rgba(0,212,170,.45);
  font-size: 11px; padding: 2px 6px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.chip-fly.win {
  background: #00d4aa; color: #053b32; border-color: #009d80;
}
.seat .name { font-weight: 700; }
.seat .meta { color: var(--muted); font-size: 12px; margin-top: 4px; }

.hand { display:flex; gap: 6px; justify-content:center; margin-top: 6px; }
.hole { width: 24px; height: 32px; border-radius: 4px; background: #2b2f36; border: 1px solid #3a3f48; }
.hole.back { background: linear-gradient(135deg,#2b2f36,#1b1f26); }
.card.back { background: linear-gradient(135deg,#2b2f36,#1b1f26); border-style: dashed; color: #5a5f6b; }

.bet {
  position:absolute; left:50%; transform: translateX(-50%); bottom: -18px; display:flex; align-items:center; gap:6px;
}
.chip { width: 18px; height: 18px; border-radius: 50%; background: var(--chip); border: 2px solid #b68a2f; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.bet-amt { font-size: 12px; color: #ffd24d; }
.bet.pulse { animation: glow .6s ease, pop .35s ease; }

.chip-fly {
  position: fixed; z-index: 9999; padding: 4px 6px; border-radius: 999px;
  background: var(--chip); color: #3a2a00; font-size: 11px; font-weight: 700;
  border: 2px solid #b68a2f; box-shadow: 0 2px 8px rgba(0,0,0,.45);
  transform: translate(0,0) scale(1);
  transition: transform .6s ease, opacity .6s ease;
  pointer-events: none; opacity: 1;
}

.leaderboard-tabs { display:flex; gap: 8px; margin-bottom: 10px; }
.tab-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid #333; background:#262626; color: var(--text); cursor: pointer; font-size: 12px; }
.tab-btn.active { border-color: var(--accent); color: #fff; }
.leaderboard { display:grid; gap: 8px; }
.leaderboard-item { display:flex; justify-content: space-between; padding: 8px 10px; background:#242424; border-radius: 8px; border: 1px solid #333; font-size: 13px; }
.leaderboard-item .rank { color: var(--muted); margin-right: 8px; }
.leaderboard-empty { color: var(--muted); font-size: 12px; }

.action-log { display:grid; gap: 6px; max-height: 220px; overflow:auto; }
.action-item { display:flex; justify-content: space-between; padding: 6px 8px; background:#22262e; border-radius: 6px; font-size: 12px; border: 1px solid #2f333a; }
.action-item .ts { color: var(--muted); }

@keyframes pop { from { transform: scale(.9); opacity:.6; } to { transform: scale(1); opacity:1; } }
@keyframes glow { from { filter: drop-shadow(0 0 0 rgba(255,210,77,.1)); } to { filter: drop-shadow(0 0 10px rgba(255,210,77,.6)); } }

@media (max-width: 1100px){
  .layout { grid-template-columns: 1fr; }
  .poker-table { width: 100%; height: 420px; }
}