:root {
  --ink: #f2ede0;
  --dim: #a9a294;
  --gold: #d4af37;
  --gold-soft: rgba(212, 175, 55, 0.35);
  --lac-0: #060a08;
  --lac-1: #0d150f;
  --lac-2: #16221a;
  --line: rgba(212, 175, 55, 0.22);
  --accent: #c0283d;
  --good: #4ade80;
  --bad: #ff6b6b;
  --font-display: 'Marcellus', Georgia, serif;
  --font-ui: 'Inter', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: var(--lac-0); color: var(--ink);
  font-family: var(--font-ui); overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 18vw rgba(0,0,0,0.65);
}

/* ---- panel base (lacquer card) ---- */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--lac-2), var(--lac-1));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  animation: panel-in 0.35s ease-out;
}
.panel::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---- lobby ---- */
#lobby {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(11,61,36,0.35), rgba(6,10,8,0.85));
}
#lobby-main { width: min(92vw, 380px); text-align: center; }
.crest { font-family: var(--font-display); font-size: 44px; color: var(--gold); margin-bottom: 4px; }
#lobby-main h1 { font-family: var(--font-display); font-size: 26px; margin: 0 0 2px; }
.tagline { color: var(--dim); font-size: 13px; margin: 0 0 18px; letter-spacing: 0.04em; }
.dim { color: var(--dim); font-size: 12px; }

#inp-name, #inp-code, #room-link {
  width: 100%; padding: 10px 12px; margin-bottom: 12px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-family: var(--font-ui); font-size: 14px;
}
select {
  width: 100%; padding: 8px 10px; background: rgba(0,0,0,0.35);
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 13px;
}
.row { display: flex; gap: 10px; margin-bottom: 12px; }
.row label { flex: 1; text-align: left; font-size: 11px; color: var(--dim); display: block; }
.join-row input { margin-bottom: 0; }
.divider {
  margin: 18px 0 12px; text-align: center; color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; position: relative;
}
.divider::before, .divider::after {
  content: ''; position: absolute; top: 50%; width: 30%; height: 1px; background: var(--line);
}
.divider::before { left: 0; } .divider::after { right: 0; }

.btn {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.04); color: var(--ink); cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}
.btn:hover { background: rgba(255,255,255,0.09); }
.btn:active { transform: scale(0.97); }
.btn.big { width: 100%; padding: 13px 16px; margin-bottom: 10px; font-size: 14px; }
.btn.primary { background: linear-gradient(180deg, #2a6b46, #164a2c); border-color: rgba(74,222,128,0.4); color: #eafff0; }
.btn.gold { background: linear-gradient(180deg, #e9c765, var(--gold)); color: #241a03; border-color: transparent; }
.link-btn {
  background: none; border: none; color: var(--dim); font-size: 12px;
  text-decoration: underline; cursor: pointer; margin-top: 6px;
}
.credit { margin-top: 14px; font-size: 11px; color: var(--dim); }

/* ---- room panel ---- */
#room-panel { width: min(92vw, 380px); text-align: center; }
#room-panel h2 { font-family: var(--font-display); margin: 0 0 4px; }
.code { color: var(--gold); letter-spacing: 0.15em; }
#room-players { list-style: none; margin: 12px 0; padding: 0; text-align: left; }
#room-players li { padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }

/* ---- in-game HUD ---- */
#game-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#game-ui > * { pointer-events: auto; }

#hud {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 16px; padding: 8px 20px; border-radius: 999px;
  background: rgba(6,10,8,0.7); border: 1px solid var(--line);
  font-size: 12px; color: var(--dim); pointer-events: none; z-index: 12;
}
#top-buttons { position: fixed; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 12; }
#top-buttons button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(6,10,8,0.7); color: var(--ink); cursor: pointer; font-size: 15px;
}

/* ---- seat plates (relative positioning: 0 = me/bottom, 1 = right, 2 = top, 3 = left) ---- */
.plate {
  position: fixed; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; background: rgba(6,10,8,0.72);
  border: 1px solid var(--line); font-size: 12px; z-index: 11; visibility: hidden;
}
.plate .p-badge { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.plate .p-name { font-weight: 600; }
.plate .p-bankroll { color: var(--gold); font-variant-numeric: tabular-nums; }
.plate.me { border-color: var(--gold-soft); }
.plate[data-rel="0"] { bottom: 300px; left: 50%; transform: translateX(-50%); }
.plate[data-rel="1"] { right: 18px; top: 50%; transform: translateY(-50%); }
.plate[data-rel="2"] { top: 60px; left: 50%; transform: translateX(-50%); }
.plate[data-rel="3"] { left: 18px; top: 50%; transform: translateY(-50%); }

/* ---- bead plate (hand history road) ---- */
#bead-plate {
  position: fixed; top: 96px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; max-width: min(80vw, 420px); overflow-x: auto;
  padding: 6px 10px; border-radius: 999px; background: rgba(6,10,8,0.55);
  z-index: 11;
}
.bead { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bead-player { background: #5cf0ff; }
.bead-banker { background: var(--accent); }
.bead-tie { background: var(--good); }

/* ---- hand result banner ---- */
#hand-result {
  position: fixed; top: 130px; left: 50%; transform: translateX(-50%);
  padding: 8px 18px; border-radius: 10px; background: rgba(6,10,8,0.82);
  border: 1px solid var(--gold-soft); font-family: var(--font-display);
  font-size: 16px; letter-spacing: 0.03em; color: var(--gold); z-index: 12;
  display: none;
}
#bet-timer {
  position: fixed; top: 130px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--dim); z-index: 12;
}
#my-result {
  position: fixed; top: 172px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 999px; background: rgba(6,10,8,0.82);
  border: 1px solid var(--line); font-size: 13px; z-index: 12; text-align: center;
  white-space: nowrap;
}
#my-result.sat-out { color: var(--dim); font-style: italic; }
#my-result b.won { color: var(--good); }
#my-result b.lost { color: var(--bad); }
#my-result b.push { color: var(--dim); }

/* ---- betting panel ---- */
#bet-panel {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: 16px; background: rgba(6,10,8,0.8);
  border: 1px solid var(--line); z-index: 12; width: min(92vw, 480px);
}
.bet-zone {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.03); cursor: pointer; font-size: 13px;
  transition: background 0.15s ease;
}
.bet-zone:hover { background: rgba(255,255,255,0.08); }
.bet-zone.disabled { opacity: 0.4; pointer-events: none; }
.bet-zone.won { border-color: var(--good); box-shadow: 0 0 0 2px rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); }
.bet-zone.disabled.won { opacity: 1; } /* keep the winning-zone highlight fully visible even though betting is closed */
.bet-zone .bet-label { font-weight: 600; letter-spacing: 0.02em; }
.bet-zone .bet-amount { color: var(--gold); font-variant-numeric: tabular-nums; }
#chip-tray { display: flex; gap: 8px; }
.chip-denom {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line);
  background: radial-gradient(circle at 35% 30%, #2a3630, #101915);
  color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer;
}
.chip-denom.sel { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
#btn-next-hand { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 12; }

/* ---- shuffle mode ---- */
#shuffle-ui {
  position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; padding-bottom: 40px; pointer-events: none;
}
#shuffle-ui .shuffle-hint {
  margin-bottom: 14px; padding: 8px 16px; border-radius: 999px;
  background: rgba(6,10,8,0.7); color: var(--dim); font-size: 13px;
}
#shuffle-ui .btn { pointer-events: auto; }

/* ---- toast ---- */
#toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  padding: 10px 18px; border-radius: 999px; background: rgba(6,10,8,0.9);
  border: 1px solid var(--line); font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; z-index: 40;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- modal ---- */
#modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
}
.modal-card { width: min(92vw, 420px); text-align: center; }
.modal-card.side { position: fixed; right: 20px; bottom: 20px; left: auto; top: auto; margin: 0; }
#modal.side-active { background: transparent; pointer-events: none; }
#modal-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.standings { list-style: none; padding: 0; margin: 10px 0; text-align: left; }
.standings li { padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .plate[data-rel="1"], .plate[data-rel="3"] { display: none; }
  #bead-plate { max-width: 90vw; }
  #bet-panel { width: 94vw; }
}