:root {
  --bg: #0f172a;
  --panel: rgba(255,255,255,0.93);
  --panel-soft: rgba(255,255,255,0.76);
  --ink: #172033;
  --muted: #64748b;
  --felt: #0f7a62;
  --felt-dark: #06483b;
  --felt-light: #18a27f;
  --gold: #f6c453;
  --gold-dark: #d89b1d;
  --danger: #ef4444;
  --blue: #2563eb;
  --green: #16a34a;
  --shadow: 0 20px 60px rgba(0,0,0,0.28);
  --soft-shadow: 0 12px 28px rgba(15,23,42,0.16);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 8%, rgba(246,196,83,0.28), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(20,184,166,0.18), transparent 30%),
    radial-gradient(circle at 55% 96%, rgba(59,130,246,0.18), transparent 34%),
    linear-gradient(135deg, #101827 0%, #111f37 42%, #07111f 100%);
}

button, select, input { font: inherit; }
button { border: 0; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease; }
button:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.02); }
button:not(:disabled):active { transform: translateY(0); }
button:disabled { opacity: .45; cursor: not-allowed; }
select, input[type="range"] { width: 100%; }
select {
  border: 1px solid #d8e0ea;
  background: white;
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 6px;
  color: var(--ink);
}
label { display: block; color: var(--muted); font-weight: 800; font-size: .86rem; margin: 13px 0; }

.site-header {
  max-width: 1460px;
  margin: 0 auto;
  padding: 22px 24px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: white;
}
.site-header h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.045em; }
.site-header p { margin: 3px 0 0; color: #cbd5e1; font-weight: 900; letter-spacing: 0.18em; font-size: 0.78rem; }
.header-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.game-shell {
  max-width: 1460px;
  margin: 0 auto;
  padding: 8px 24px 28px;
  display: grid;
  grid-template-columns: minmax(248px, 302px) minmax(690px, 1fr);
  gap: 22px;
}
.side-panel { display: flex; flex-direction: column; gap: 14px; }
.panel-card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.68);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
  padding: 16px;
  backdrop-filter: blur(14px);
}
.panel-card h2 { margin: 0 0 10px; font-size: 1.05rem; letter-spacing: -0.025em; }
.panel-title-line { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 4px; }
.panel-title-line h2 { margin:0; }
.full { width: 100%; }
.button-stack { display:flex; flex-direction:column; gap:9px; margin-top: 12px; }
.primary-btn, .gold-btn, .danger-btn, .ghost-btn, .soft-btn, .soft-danger-btn {
  border-radius: 16px;
  padding: 11px 14px;
  font-weight: 900;
}
.primary-btn { color: white; background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 10px 24px rgba(37,99,235,.22); }
.gold-btn { color: #3b2500; background: linear-gradient(135deg, #ffe08a, #f7b72f); box-shadow: 0 10px 24px rgba(246,196,83,.25); }
.danger-btn { color: white; background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 10px 24px rgba(239,68,68,.22); }
.ghost-btn { color: white; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.soft-btn { color:#164e63; background: linear-gradient(135deg, #ecfeff, #dbeafe); border: 1px solid #c7d2fe; }
.soft-danger-btn { color:#7f1d1d; background: linear-gradient(135deg, #fff1f2, #fee2e2); border: 1px solid #fecaca; }
.mini-badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 8px; background:#eef2ff; color:#3730a3; font-size:.72rem; font-weight:900; white-space:nowrap; }
.mini-badge.soft { background:#ecfdf5; color:#047857; }

.status-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #e6edf5; }
.status-row:last-child { border-bottom:0; }
.status-row span { color: var(--muted); font-weight: 800; }
.status-row strong { font-size: 1rem; }
.action-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.secondary-actions { margin-top: 12px; }
#actionHint { min-height: 42px; color: var(--muted); line-height: 1.4; margin: 0 0 12px; }
.raise-box { margin-top: 14px; padding-top: 10px; border-top: 1px solid #e6edf5; }
.raise-line { display:flex; align-items:center; gap:10px; margin-top: 8px; }
#raiseAmountText { flex:1; font-weight: 900; font-size:1.2rem; color:#0f513f; }
input[type="range"] { accent-color: var(--gold-dark); }

.collapse-toggle { width:100%; display:flex; justify-content:space-between; align-items:center; color: var(--ink); background: transparent; font-weight:900; padding:0; }
.collapse-body { margin-top: 10px; color: var(--muted); font-size:.9rem; line-height:1.45; }
.collapse-body.closed { display:none; }
.rank-list { margin:0; padding-left:20px; display:grid; gap:4px; }
.log-body { max-height: 190px; overflow:auto; padding-right:4px; }
#gameLog { list-style:none; padding:0; margin:0; }
#gameLog li { padding:8px 0; border-bottom:1px solid #e6edf5; font-size:.84rem; color:#475569; }

.table-area { min-width: 0; }
.table-felt {
  position: relative;
  min-height: 790px;
  border-radius: 44px;
  overflow: hidden;
  box-shadow: var(--shadow), inset 0 0 0 12px rgba(77,42,20,.75), inset 0 0 0 18px rgba(255,255,255,.08);
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.12), transparent 53%),
    radial-gradient(ellipse at center, rgba(0,0,0,.18), transparent 72%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.035) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, var(--felt-light), var(--felt), var(--felt-dark));
  border: 10px solid #5b371f;
}
.table-felt.pulse { animation: tablePulse .45s ease; }
.table-glow { position:absolute; inset:76px 98px 132px; border:2px dashed rgba(255,255,255,.18); border-radius:50%; pointer-events:none; }
.players-area { position:absolute; inset:0; }
.center-board {
  position:absolute;
  left:50%; top:48%; transform: translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width: min(92%, 650px);
  z-index: 3;
}
.table-meta-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.community-cards { min-height: 112px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.pot-badge, .phase-pill, .message-banner {
  color: white;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 900;
}
.message-banner { border-radius: 18px; max-width: 600px; text-align:center; line-height:1.35; }

.showdown-panel {
  width:min(100%, 620px);
  max-height: 190px;
  overflow:auto;
  background: rgba(255,255,255,.93);
  border:1px solid rgba(255,255,255,.74);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  border-radius: 22px;
  padding: 12px;
}
.showdown-panel.hidden { display:none; }
.showdown-row { display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; padding:8px; border-bottom:1px solid #e2e8f0; }
.showdown-row:last-child { border-bottom:0; }
.showdown-row .winner { color:#047857; font-weight:900; }
.showdown-row strong { display:block; }
.showdown-row span { color:var(--muted); font-size:.82rem; font-weight:700; }

.seat {
  position:absolute;
  width: 182px;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.65);
  transform: translate(-50%, -50%);
  z-index:4;
  transition: outline .18s ease, opacity .18s ease, transform .18s ease;
}
.human-seat {
  position:absolute;
  left:50%; bottom:18px; transform:translateX(-50%);
  width:min(92%, 510px);
  z-index:5;
  background: rgba(255,255,255,.95);
  border-radius: 28px;
  padding: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.75);
}
.seat.active, .human-seat.active { outline: 4px solid rgba(246,196,83,.9); }
.seat.folded, .human-seat.folded { opacity: .58; filter: grayscale(.35); }
.seat.out { opacity:.38; filter: grayscale(.7); }
.player-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.player-name { font-weight: 900; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.dealer-chip { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#fff; color:#0f172a; font-size:.75rem; font-weight:900; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.chips-line { color: var(--muted); font-size:.86rem; margin-top:4px; font-weight:800; }
.status-pill { display:inline-block; margin-top:6px; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:.75rem; font-weight:900; }
.status-pill.allin { background:#fff7ed; color:#9a3412; }
.status-pill.fold { background:#fef2f2; color:#991b1b; }
.status-pill.win { background:#ecfdf5; color:#047857; }
.cards { display:flex; gap:8px; margin-top:10px; justify-content:center; min-height:78px; }
.human-seat .cards { min-height: 96px; }

.card {
  width: 62px;
  height: 86px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #eef2f7);
  color:#111827;
  border:1px solid rgba(15,23,42,.16);
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:7px;
  font-weight:900;
  animation: dealIn .24s ease-out both;
}
.card.red { color:#dc2626; }
.card.back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 27%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 5px, transparent 5px 10px),
    linear-gradient(135deg, #1d4ed8, #172554);
  color: transparent;
}
.card.placeholder { opacity:.18; }
.card .rank { font-size:1rem; line-height:1; }
.card .suit { align-self:center; font-size:1.7rem; line-height:1; }
.card .rank.bottom { transform: rotate(180deg); align-self:flex-end; }
.human-seat .card, .community-cards .card { width:70px; height:98px; border-radius:14px; }
.human-info { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.hand-summary { color:#0f513f; font-weight:900; margin-top:8px; text-align:center; }
.odds-line { color:#64748b; font-size:.8rem; margin-top:3px; font-weight:800; text-align:center; }

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 16px);
  opacity: 0;
  background: rgba(15,23,42,.94);
  color: white;
  padding: 12px 16px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
  font-weight:800;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes dealIn {
  from { opacity:0; transform: translateY(-12px) scale(.93) rotate(-1deg); }
  to { opacity:1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes tablePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@media (max-width: 1040px) {
  .game-shell { grid-template-columns: 1fr; }
  .side-panel { order: 2; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items:start; }
  .table-area { order: 1; }
  .table-felt { min-height: 710px; }
}
@media (max-width: 760px) {
  .site-header { padding: 16px; align-items:flex-start; flex-direction:column; }
  .header-actions { width:100%; justify-content:stretch; }
  .header-actions button { flex:1; }
  .game-shell { padding: 6px 12px 20px; }
  .side-panel { grid-template-columns: 1fr; }
  .table-felt { min-height: 650px; border-radius: 30px; border-width: 7px; }
  .table-glow { inset: 72px 30px 142px; }
  .seat { width: 142px; padding: 8px; border-radius: 18px; }
  .card { width: 46px; height: 64px; border-radius: 9px; padding: 5px; }
  .card .suit { font-size:1.25rem; }
  .human-seat .card, .community-cards .card { width:52px; height:72px; }
  .community-cards { gap:6px; min-height: 78px; }
  .center-board { top:47%; width:94%; }
  .message-banner { font-size:.86rem; }
  .human-seat { width:94%; bottom:10px; }
  .human-info { grid-template-columns:1fr; }
}