/* ── Reset & box model ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS variables ──────────────────────────────────────────── */
:root {
  --gold:           #d4af37;
  --felt:           #2ea855;
  --felt-dark:      #228040;
  --felt-rail:      #175c2c;
  --purple-dark:    #1a0a2e;
  --card-w:         42px;
  --card-h:         60px;
  --seat-avatar:    58px;
  --action-h:       72px;
  /* Card sizes */
  --player-card-w:  76px;
  --player-card-h:  112px;
  --player-cards-y: 116px;
  --ai-card-w:      21px;
  --ai-card-h:      31px;
  --comm-card-w:    38px;
  --comm-card-h:    57px;
  /* Height reserved at bottom of game-area for player hole cards */
  --cards-area-h:   108px;
  /* Inner button ring */
  --btn-ring-inset-x:  21%;
  --btn-ring-inset-y:  20%;
  --btn-ring-y:        -178px;
  --btn-ring-scale-y:  0.65;
  --btn-ring-opacity:  0;
  /* Table center: vertical position of pot + community cards */
  --table-center-top: 20%;
  --pot-chip-y:          -28px;
  --pot-text-x:           1px;
  --pot-text-y:           10px;
  --community-cards-y:    14px;
  --hand-result-x:        0px;
  --hand-result-y:        38px;
  --ai-revealed-y:        18px;
  /* Per-seat card fine-tune offsets */
  --s1-cx: 16px; --s1-cy: 0px;
  --s2-cx: 16px; --s2-cy: 0px;
  --s3-cx: 16px; --s3-cy: 0px;
  --s4-cx: 16px; --s4-cy: 0px;
  --s5-cx: -16px; --s5-cy: 0px;
  --s6-cx: -16px; --s6-cy: 0px;
  --s7-cx: -16px; --s7-cy: 0px;
  /* Table geometry */
  --table-w:           95vw;
  --table-h:           783px;
  --table-h-scale:     1;
  --table-top:         130px;
  /* Hint panel vertical position (overridden by slider) */
  --hint-panel-top:    calc(max(14px, env(safe-area-inset-top)) + 4px);
  --table-x:           0px;
  --table-oval-r:      180px;
  --table-perspective: 1200px;
  --table-tilt:        0deg;
  --ai-perspective:    1100px;
  --ai-tilt:           8deg;
  /* Chip tower & betting menu */
  --chip-tower-w:      52;
  --chip-tower-x:      9px;
  --chip-tower-y:      -100px;
  --action-btn-col:    1fr;
  --chip-tower-scale:  1.5;
  --qrow-active-scale:  1.1;
  --qrow-inactive-scale: 1.0;
  --tower-menu-width:  53;
}

/* ── Base ───────────────────────────────────────────────────── */
html, body {
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 280px 220px at 12% 18%, rgba(90,0,180,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 200px 280px at 88% 12%, rgba(60,0,160,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 240px 180px at 75% 88%, rgba(100,0,200,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 160px 200px at 25% 78%, rgba(50,0,130,0.4) 0%, transparent 55%),
    #0d0518;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Screens ────────────────────────────────────────────────── */
.screen {
  display: none;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
}
.screen.active { display: flex; }

/* ── Menu screen ────────────────────────────────────────────── */
#screen-menu {
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: url('/assets/splash-bg.png') center center / cover no-repeat, #0a0a2e;
  padding: 40px 24px;
}

.menu-settings-btn {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  font-size: 1.3rem;
  color: rgba(255,255,255,0.7);
  z-index: 21;
}

#splash-logo {
  width: min(360px, 90vw);
  height: auto;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.splash-name-input {
  width: min(560px, 80vw);
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: box-shadow 0.15s;
  -webkit-appearance: none;
}
.splash-name-input::placeholder { color: #aaa; font-weight: 400; }
.splash-name-input:focus {
  box-shadow: 0 0 0 3px var(--gold);
}

.btn-primary {
  padding: 16px 56px;
  border: none;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  background: var(--gold);
  color: #111;
  transition: opacity 0.12s, transform 0.08s;
}
.btn-primary:active { opacity: 0.8; transform: scale(0.97); }

/* Online play is experimental — greyed out with a small tag. */
.btn-experimental {
  background: #4b5563;
  color: rgba(255, 255, 255, 0.85);
}
.btn-experimental .exp-tag {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 2px;
}

.btn-secondary {
  padding: 14px 56px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,0.7);
  transition: opacity 0.12s, transform 0.08s;
}
.btn-secondary:active { opacity: 0.7; transform: scale(0.97); }

/* ── Game screen layout ─────────────────────────────────────── */
/*
 * #screen-game covers the full viewport and is the flex column root.
 * Children in flex flow: #hud (top) → #game-area (flex:1) → #action-zone (bottom).
 * Full-screen overlays (#bet-picker, #btn-next-hand, #post-action-note)
 * use position:fixed and sit above the flex stack via z-index.
 */
#screen-game {
  position: fixed;
  inset: 0;
  background: transparent;
  /* display controlled by .screen / .screen.active */
  flex-direction: column;
  overflow: hidden;
}
#screen-game.active {
  display: flex;
}

/* ── HUD — top flex item, height driven by content + safe-area ── */
#hud {
  flex: 0 0 auto;
  z-index: 41;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 14px 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%);
  pointer-events: none;
}

#hud > * { pointer-events: auto; }

/* While hosting, the fixed host banner overlays the top strip — push the HUD (and
   its settings button) down below it. --host-banner-h is measured in JS. */
body.host-banner-active #hud {
  padding-top: calc(max(10px, env(safe-area-inset-top)) + var(--host-banner-h, 30px));
}

/* ── Game area — fills space between HUD and action zone ─────── */
/*
 * Positioning context for all in-play elements: table, player cards,
 * chip tower, hint panel, hand result, MTT toasts.
 * overflow:visible lets seats/avatars overhang the table oval edge.
 */
#game-area {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: visible;
  z-index: 2; /* below #action-zone (20); tower-menu and bubble use position:fixed to overlay buttons */
}

#hud-blinds, #hud-hand, #hud-level-timer { display: none; }

.hud-timer {
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.45;
  letter-spacing: 0.5px;
}
.hud-timer.urgent {
  opacity: 1;
  color: #f97316;
  animation: timer-pulse 1s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── Blinds Up banner ───────────────────────────────────────── */
/* Appended to #game-area by hud.js — centers within the play area */
#blinds-up-banner {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  z-index: 200;
  background: rgba(10, 4, 30, 0.92);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 14px 28px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}
#blinds-up-banner.bu-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#blinds-up-banner.bu-fade {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.8s, transform 0.8s;
}
#blinds-up-banner .bu-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 2px;
}
#blinds-up-banner .bu-level {
  display: block;
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 2px;
}
#blinds-up-banner .bu-amounts {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
}

#blinds-up-banner .bu-mtt {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

.icon-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.icon-btn:active { opacity: 0.6; }
#btn-settings { position: relative; z-index: 41; margin-left: auto; }

/* ── Table oval ─────────────────────────────────────────────── */
/*
 * Fills #game-area from 8px top to --cards-area-h from bottom.
 * --cards-area-h reserves room for the floating player hole cards.
 * Absolute positioning avoids all margin-top magic-number hacks.
 */
#table {
  position: absolute;
  top: var(--table-top, 8px);
  left: 50%;
  transform: perspective(var(--table-perspective, 1200px)) translateX(calc(-50% + var(--table-x, 0px))) rotateX(var(--table-tilt, 0deg));
  width: var(--table-w, 95vw);
  height: calc(var(--table-h) * var(--table-h-scale, 1));
  bottom: var(--cards-area-h, 108px);
  min-height: 320px;
  /* Brighter neon-green center fading to dark rail edge */
  background: radial-gradient(ellipse 68% 55% at 50% 44%,
    #6cf08a 0%,
    #4dd870 12%,
    var(--felt) 38%,
    var(--felt-dark) 66%,
    var(--felt-rail) 100%
  );
  /* More circular ends — genuine casino oval */
  border-radius: 50% / var(--table-oval-r, 180px);
  border: none;
  /* Rail = thick dark-brown box-shadow + thin gold line + inner depth */
  box-shadow:
    0 0 0 9px #2d1808,                          /* dark brown rail */
    0 0 0 10px rgba(212,175,55,0.55),            /* gold rail trim */
    0 0 0 12px rgba(0,0,0,0.55),                 /* outer shadow */
    0 18px 60px rgba(0,0,0,0.9),                 /* drop shadow */
    inset 0 0 0 3px rgba(255,255,255,0.09),      /* inner rail highlight */
    inset 0 0 100px rgba(0,0,0,0.28);            /* felt depth */
  overflow: visible;
}

/* ── AI seats wrapper: independent perspective/tilt ─────────── */
#ai-seats {
  position: absolute;
  inset: 0;
  transform: perspective(var(--ai-perspective, 1200px)) rotateX(var(--ai-tilt, 0deg));
  transform-origin: 50% 50%;
}

/* ── Table center: pot + community cards ────────────────────── */
#table-center {
  position: absolute;
  top: var(--table-center-top, 38%);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 94%;
  z-index: 25; /* above action-zone (20) so community cards layer over buttons */
}


#pot-display {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1.5px;
  text-shadow:
    0 0 3px rgba(0,0,0,0.95),
    0 0 6px rgba(0,0,0,0.8),
    1px 1px 0 rgba(0,0,0,0.9),
   -1px -1px 0 rgba(0,0,0,0.9),
    1px -1px 0 rgba(0,0,0,0.9),
   -1px  1px 0 rgba(0,0,0,0.9),
    0 2px 8px rgba(0,0,0,0.6);
  transition: color 0.2s ease;
}

#pot-display.result-win {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(212,175,55,0.65), 0 2px 8px rgba(0,0,0,0.6);
}

#pot-display.result-split {
  color: #60a5fa;
  text-shadow: 0 0 16px rgba(96,165,250,0.5), 0 2px 8px rgba(0,0,0,0.6);
}

/* Two-line split: shift up so second line doesn't overlap blinds text */
#pot-display.result-split-two-line {
  transform: translate(var(--pot-text-x, 0px), calc(var(--pot-text-y, 0px) - 10px));
  line-height: 1.3;
  text-align: center;
  width: 100%;
}

.split-line1 {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
}

.split-line2 {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.85;
  letter-spacing: 0.5px;
  text-align: center;
}

#pot-display.result-mode:not(.result-win):not(.result-split) {
  color: rgba(255,255,255,0.85);
}

#community-cards {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  transform: translateY(var(--community-cards-y, 0px));
}

/* ── Seat base ──────────────────────────────────────────────── */
.seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seat-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* ── Seat orientation — cards/chip-count flow toward table center ── */
/*
 * Each seat gets an orientation class: seat-top, seat-top-left,
 * seat-top-right, seat-left, seat-right, seat-btm-left, seat-btm-right.
 * Default (no class): cards peek above avatar, chip-count below.
 */

/* All seats: chip-count below avatar (default column flow) */

/* ── Seat 1 (top-center): cards top-right of avatar ─────────── */
/* No override — falls back to default top position.
   The #seat-4 translate moves them right. */
.seat-top .seat-cards .hole-card:nth-child(1) { transform: rotate(-6deg); margin-right: -4px; }
.seat-top .seat-cards .hole-card:nth-child(2) { transform: rotate(6deg); }

/* ── Seats 2 & 3 (left side): cards top-right of avatar ─────── */
.seat-top-left .seat-cards .hole-card:nth-child(1),
.seat-left .seat-cards .hole-card:nth-child(1) { transform: rotate(-6deg); margin-right: -4px; }
.seat-top-left .seat-cards .hole-card:nth-child(2),
.seat-left .seat-cards .hole-card:nth-child(2) { transform: rotate(6deg); }

/* ── Seats 5 & 6 (right side): cards top-left of avatar ─────── */
.seat-top-right .seat-cards .hole-card:nth-child(1),
.seat-right .seat-cards .hole-card:nth-child(1) { transform: rotate(-6deg); margin-right: -4px; }
.seat-top-right .seat-cards .hole-card:nth-child(2),
.seat-right .seat-cards .hole-card:nth-child(2) { transform: rotate(6deg); }

/* ── Seat 4 (btm-left): cards top-right of avatar ── */
.seat-btm-left .seat-cards .hole-card:nth-child(1) { transform: rotate(-6deg); margin-right: -4px; }
.seat-btm-left .seat-cards .hole-card:nth-child(2) { transform: rotate(6deg); }

/* ── Seat 7 (btm-right): cards top-left of avatar ── */
.seat-btm-right .seat-cards .hole-card:nth-child(1) { transform: rotate(-6deg); margin-right: -4px; }
.seat-btm-right .seat-cards .hole-card:nth-child(2) { transform: rotate(6deg); }

/* ── Per-seat card fine-tune offsets (set via dev tool) ─────── */
#seat-1 .seat-cards { translate: var(--s1-cx, 16px)  var(--s1-cy, 0px); }
#seat-2 .seat-cards { translate: var(--s2-cx, 16px)  var(--s2-cy, 0px); }
#seat-3 .seat-cards { translate: var(--s3-cx, 16px)  var(--s3-cy, 0px); }
#seat-4 .seat-cards { translate: var(--s4-cx, 16px)  var(--s4-cy, 0px); }
#seat-5 .seat-cards { translate: var(--s5-cx, -16px) var(--s5-cy, 0px); }
#seat-6 .seat-cards { translate: var(--s6-cx, -16px) var(--s6-cy, 0px); }
#seat-7 .seat-cards { translate: var(--s7-cx, -16px) var(--s7-cy, 0px); }
#seat-1 .seat-cards.revealed { translate: calc(var(--s1-cx, 16px) - 5px) var(--s1-cy, 0px); }
#seat-7 .seat-cards.revealed { translate: calc(var(--s7-cx, -16px) + 5px) var(--s7-cy, 0px); }

/* ── Seat positions (8 seats around the oval) ───────────────── */

/* Seat 0: player — bottom-center, elevated above fixed button overlay */
#player-seat {
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  translate: -9px -16px;
  z-index: 25; /* above hole cards (20) and table, below chip tower (30) */
}

/* Keep chip count z-index above winner avatar-wrap scale */
#player-seat .chip-count {
  position: relative;
  z-index: 15;
}

/* Seat 1: top-center — avatar at top lip, cards peeking above */
#seat-4 {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  translate: -7px -47px;
  z-index: 5;
}

/* Seat 2: top-left — slight overhang */
#seat-3 {
  top: 5%;
  left: 2%;
  translate: 26px -24px;
}

/* Seat 3: left-middle — significant overhang off left rail */
#seat-2 {
  top: 14%;
  left: -14px;
  translate: 17px -10px;
}

/* Seat 4: bottom-left — above fixed player card overlay */
#seat-1 {
  top: 30%;
  left: 1%;
  translate: -16px 0;
}

/* Seat 5: top-right — slight overhang */
#seat-5 {
  top: 5%;
  right: 2%;
  translate: -21px -29px;
}

/* Seat 6: right-middle — significant overhang off right rail */
#seat-6 {
  top: 14%;
  right: -14px;
  translate: -22px -5px;
}

/* Seat 7: bottom-right — above fixed player card overlay */
#seat-7 {
  top: 30%;
  right: 1%;
  translate: 16px 0;
}

/* ── Avatar ─────────────────────────────────────────────────── */
.avatar-wrap {
  position: relative;
  width: var(--seat-avatar);
  height: var(--seat-avatar);
  overflow: visible; /* seat-cards peek above, action-badge peeks corner */
}

/* Rainbow ring via pseudo-element — conic-gradient behind the avatar */
.avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 30px;    /* 20px avatar radius + 6px inset + margin */
  background: conic-gradient(from 0deg,
    #ff4040, #ff8800, #ffee00,
    #44ee44, #00ccff, #4488ff,
    #cc44ff, #ff4040);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.avatar-wrap:has(.turn-indicator.active)::before {
  opacity: 1;
  animation: hue-spin 4s linear infinite;
}

/* When a countdown ring is depleting on this seat (online shot clock, or solo with
   the timer setting on), it IS the turn cue — suppress the rainbow ring so the
   avatar shows a single animating meter, not two concentric ones. Same specificity
   as the rule above, so source order lets this win when both would apply. */
.avatar-wrap:has(.timer-ring:not(.hidden))::before {
  opacity: 0;
  animation: none;
}

.avatar {
  width: var(--seat-avatar);
  height: var(--seat-avatar);
  border-radius: 20px;
  background: #2a1a4e;
  border: 4px solid var(--gold);
  overflow: hidden;
  position: relative;
  z-index: 1;          /* sits above the ::before rainbow ring */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.7),
    0 0 0 1px rgba(212,175,55,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ── Turn indicator ring ────────────────────────────────────── */
.turn-indicator {
  position: absolute;
  inset: -7px;
  border-radius: 27px;    /* 20px + 7px inset */
  border: none;
  pointer-events: none;
  z-index: 2;
}

.turn-indicator.active { /* visual handled by .avatar-wrap::before */ }

/* ── Online: dramatic turn cue ──────────────────────────────────
   Online keeps the rainbow ring (solo's cue) but larger, and crucially does NOT
   let the countdown arc suppress it — the ring + a matching animated rainbow glow
   are the attention-grabber, with the thin timer arc layered on top for the clock.
   Higher specificity than the .timer-ring suppression rule so it wins. */
body.online-play .avatar-wrap:has(.turn-indicator.active)::before {
  inset: -10px;                         /* larger than the default -6px */
  border-radius: 34px;
  opacity: 1;
  animation: hue-spin 4s linear infinite;
}
/* Animated rainbow glow halo behind the avatar (own keyframe — hue-spin can't be
   reused here because it sets `filter`, which would wipe the blur). */
body.online-play .avatar-wrap:has(.turn-indicator.active)::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 38px;
  background: conic-gradient(from 0deg,
    #ff4040, #ff8800, #ffee00,
    #44ee44, #00ccff, #4488ff,
    #cc44ff, #ff4040);
  z-index: -1;                          /* behind the avatar + ring */
  pointer-events: none;
  animation: rainbow-glow 1.8s ease-in-out infinite;
}
@keyframes rainbow-glow {
  0%, 100% { filter: blur(9px)  hue-rotate(0deg);   opacity: 0.45; transform: scale(1); }
  50%      { filter: blur(14px) hue-rotate(180deg); opacity: 0.85; transform: scale(1.1); }
}

/* ── AI thinking dots ───────────────────────────────────────── */
.ai-think-dots {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 4px;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.ai-think-dots.active {
  display: flex;
}

.ai-think-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.8);
}

.ai-think-dots span:nth-child(1) { animation: think-bounce 0.9s 0s infinite; }
.ai-think-dots span:nth-child(2) { animation: think-bounce 0.9s 0.15s infinite; }
.ai-think-dots span:nth-child(3) { animation: think-bounce 0.9s 0.3s infinite; }

/* ── AI seat cards — peek above avatar ──────────────────────── */
.seat-cards {
  position: absolute;
  top: -14px;           /* cards peek above the avatar frame */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  z-index: 0;           /* behind .avatar (z-index: 1) */
  pointer-events: none;
  transition: top 0.22s ease-out;
}

/* AI peek — lift cards above the avatar, no other changes */
.seat-cards.peeking {
  top: -46px;
  z-index: 10;
}

.seat-cards .hole-card {
  width: var(--ai-card-w, 21px);
  height: var(--ai-card-h, 31px);
  border-radius: 2px;
  transition: width 0.25s ease, height 0.25s ease, transform 0.2s ease;
}

.seat-cards .hole-card:nth-child(1) {
  transform: rotate(-9deg) translateY(2px);
  margin-right: -10px;
}

.seat-cards .hole-card:nth-child(2) {
  transform: rotate(9deg) translateY(2px);
}

/* Revealed at showdown — raise and enlarge. z-index must clear the action badge
   (16) and a peeking neighbor (10) so the bet bubble / nearby cards can't cover
   the reveal. */
.seat-cards.revealed {
  top: calc(-54px + var(--ai-revealed-y, 0px));
  z-index: 30;
}

/* Float a whole seat above its neighbors while its cards are revealed. At showdown
   every non-winner seat becomes an opacity stacking context (.seat:not(.seat-winner)
   → opacity 0.4), so without this a later-DOM seat — or one with an explicit
   z-index (#player-seat 25, #seat-4 5) — paints over an adjacent seat's reveal. */
/* Scoped under #table so it outranks the per-seat ID z-indexes (#player-seat 25,
   #seat-4 5) that would otherwise keep a revealing seat pinned below its neighbors. */
#table .seat:has(.seat-cards.revealed) { z-index: 40; }
.seat-cards.revealed .hole-card {
  width: 30px;
  height: 44px;
}
.seat-cards.revealed .hole-card:nth-child(1) {
  transform: rotate(-5deg);
  margin-right: -8px;
}
.seat-cards.revealed .hole-card:nth-child(2) {
  transform: rotate(5deg);
}

/* ── Player hole cards — float at bottom of game-area ───────── */
/*
 * Absolute within #game-area. bottom: 8px sits above the action zone.
 * The --cards-area-h gap between table bottom and game-area bottom
 * ensures the table oval doesn't cover these cards.
 */
#player-hole-cards {
  position: absolute;
  bottom: var(--player-cards-y, 8px);
  left: 0; right: 0;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-end;
  z-index: 20;
  pointer-events: none; /* peek only — tap-hold on cards still works */
}

#player-hole-cards .player-card {
  width: var(--player-card-w, 110px);
  height: var(--player-card-h, 155px);
  border-radius: 8px;   /* 76px × 10.9% SVG ratio */
  pointer-events: auto; /* re-enable tap-to-peek */
}

/* Face-down player card: proportional inset + deep ambient shadow */
#player-hole-cards .player-card.face-down {
  box-shadow:
    inset 0 0 0 5px #f2f2f2,
    0 4px 0 0 #c0c0c0,
    0 10px 32px rgba(0,0,0,0.55);
}

/* Face-up player card: deeper ambient only */
#player-hole-cards .player-card:not(.face-down) {
  box-shadow: 0 4px 0 0 #d0d0d0, 0 10px 32px rgba(0,0,0,0.45);
}

/* Hand resolve: lift cards above the avatar so they're fully visible */
#player-hole-cards.cards-revealed {
  bottom: calc(var(--player-cards-y, 8px) + 40px);
  transition: bottom 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#player-hole-cards:not(.cards-revealed) {
  transition: bottom 200ms ease-in;
}

/* ── Chip count — below avatar ──────────────────────────────── */
.chip-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  white-space: nowrap;
  background: rgba(0,0,0,0.58);
  border-radius: 10px;
  padding: 2px 7px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── Action badge — speech bubble above avatar ───────────────── */
.action-badge {
  position: absolute;
  bottom: calc(100% + 3px); /* float just above the avatar-wrap */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 9px;
  opacity: 0; /* Start transparent so fade-in animation triggers */
  transition: opacity 0.4s ease-out;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.95);
  border: 1.5px solid rgba(255,255,255,0.2);
  z-index: 16;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  pointer-events: none;
  /* Tail */
  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(255,255,255,0.15);
  }
}

.action-badge.badge-allin { background: rgba(124,58,237,0.90);  border-color: #7c3aed; }
.action-badge.badge-allin::after  { border-top-color: rgba(124,58,237,0.90); }
.action-badge.badge-fold  { background: rgba(190,24,93,0.85);  border-color: #be185d; }
.action-badge.badge-fold::after  { border-top-color: rgba(190,24,93,0.85); }
.action-badge.badge-check { background: rgba(22,163,74,0.85);  border-color: #16a34a; }
.action-badge.badge-check::after { border-top-color: rgba(22,163,74,0.85); }
.action-badge.badge-call  { background: rgba(22,163,74,0.85);  border-color: #16a34a; }
.action-badge.badge-call::after  { border-top-color: rgba(22,163,74,0.85); }
.action-badge.badge-raise { background: rgba(8,145,178,0.85);  border-color: #0891b2; }
.action-badge.badge-raise::after { border-top-color: rgba(8,145,178,0.85); }
.action-badge.badge-bet   { background: rgba(8,145,178,0.85);  border-color: #0891b2; }
.action-badge.badge-bet::after   { border-top-color: rgba(8,145,178,0.85); }

/* ── Cards (common) ─────────────────────────────────────────── */
.hole-card,
.community-card,
.player-card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 4px;   /* overridden per type below */
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  user-select: none;
}

/* Face-down — matches cardback.svg: gray fill, white inner border, hard drop shadow */
.hole-card.face-down,
.community-card.face-down,
.player-card.face-down {
  background: #cccccc;
  border: none;
  box-shadow:
    inset 0 0 0 2px #f2f2f2,
    0 3px 0 0 #c0c0c0,
    0 2px 8px rgba(0,0,0,0.35);
}

/* Face-up — matches cards.svg: light gray face, hard drop shadow */
.hole-card:not(.face-down),
.community-card:not(.face-down),
.player-card:not(.face-down) {
  background: #f5f5f5;
  border: none;
  box-shadow: 0 3px 0 0 #d0d0d0, 0 1px 6px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px 4px;
}

.hole-card.red,
.community-card.red,
.player-card.red  { color: #dc2626; }

.hole-card.black,
.community-card.black,
.player-card.black { color: #111827; }

.c-rank {
  font-size: 1.17rem;
  font-weight: 800;
  line-height: 1;
  align-self: flex-start;
}

.c-rank.bot {
  transform: rotate(180deg);
  align-self: flex-end;
}

/* All cards: top rank + suit only, no bottom rank */
.community-card .c-rank.bot,
.player-card .c-rank.bot,
.hole-card .c-rank.bot {
  display: none;
}

/* Player hole cards: rank and suit 25% larger than community */
.player-card .c-rank { font-size: 1.46rem; }
.player-card .c-suit {
  font-size: 2.37rem;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-5px);
}

.c-suit {
  font-size: 1.65rem;
  line-height: 1;
}

/* ── Pot area: text anchored, chips float above it ───────────── */
.pot-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Chip pile: absolutely positioned above the pot text, grows upward */
.pot-chip-pile {
  position: absolute;
  bottom: calc(100% + var(--pot-chip-y, -9px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}

/* Pot amount text: moves independently via --pot-text-x/y */
#pot-display {
  transform: translate(var(--pot-text-x, 0px), var(--pot-text-y, 0px));
}

#table-blinds {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin-top: 2px;
  transform: translate(var(--pot-text-x, 0px), var(--pot-text-y, 0px));
  pointer-events: none;
}
/* Showdown: hand name displayed in table-blinds — brighten it */
#table-blinds.has-result-detail {
  color: rgba(255,255,255,0.80);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.88rem;
}

.pot-stack {
  position: relative;
  width: 38px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}

/* ── Inner button ring ──────────────────────────────────────── */
/* Pucks sit on this ellipse. Opacity 0 by default — toggle via dev tool. */
#table-button-ring {
  position: absolute;
  top:    var(--btn-ring-inset-y, 14%);
  left:   var(--btn-ring-inset-x, 9%);
  right:  var(--btn-ring-inset-x, 9%);
  bottom: var(--btn-ring-inset-y, 14%);
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translateY(var(--btn-ring-y, 0px)) scaleY(var(--btn-ring-scale-y, 1));
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.45),
    0 0 0 1px rgba(0,0,0,0.35),
    0 0 0 2px rgba(255,255,255,0.06);
  opacity: var(--btn-ring-opacity, 0);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s;
}

/* ── Dealer / blind pucks ───────────────────────────────────── */
.dealer-btn, .blind-btn {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  border: 2px solid rgba(255,255,255,0.75);
  pointer-events: none;
  letter-spacing: -0.5px;
}

.dealer-btn {
  background: radial-gradient(circle at 40% 35%, #f0d060, var(--gold) 60%, #9a7820);
  color: #111;
  font-size: 0.62rem;
}

.sb-btn {
  background: radial-gradient(circle at 40% 35%, #60a8f8, #2563eb 60%, #1e40af);
  color: #fff;
}

.bb-btn {
  background: radial-gradient(circle at 40% 35%, #f87060, #dc2626 60%, #991b1b);
  color: #fff;
}

/* ── Chip stack visual ──────────────────────────────────────── */

/* ── Player chip tower — absolute bottom-right of game-area ──── */

/* ── System 2: Selection glow (separate from physical shadow) ────
   Positioned by JS (_positionTowerGradient) based on chip tower rect.
   Source anchored to the active betting region (upper white chips). */
#tower-gradient {
  position: fixed;
  left: var(--tower-grad-left, 0px);
  top:  var(--tower-grad-top,  0px);
  width:  var(--tower-grad-w, 100vw);
  height: var(--tower-grad-h, 70vh);
  background:
    /* Hot core at chip stack — teal-green, mid-height */
    radial-gradient(ellipse 16% 14% at var(--tower-grad-cx, 88%) 52%,
      rgba(0,240,200,1.00) 0%,
      rgba(0,220,180,1.00) 32%,
      transparent 72%),
    /* Wide table spread — covers most of the width */
    radial-gradient(ellipse 75% 58% at calc(var(--tower-grad-cx, 88%) + 4%) 55%,
      rgba(0,200,160,1.00) 0%,
      rgba(0,160,140,0.60) 50%,
      transparent 85%),
    /* Full ambient — soft glow reaching the left edge */
    radial-gradient(ellipse 100% 78% at 100% 60%,
      rgba(0,150,120,0.48) 0%,
      transparent 78%);
  pointer-events: none;
  z-index: 29;
  opacity: var(--tower-grad-opacity, 0);
  transition: opacity 0.25s ease;
}

#player-chip-tower {
  position: absolute;
  right: calc(8px + var(--chip-tower-x, 0px));
  bottom: calc(8px + var(--chip-tower-y, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 30;
  cursor: pointer;
  gap: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: bottom right;
  transform: scale(var(--chip-tower-scale, 1));
  transition: transform 80ms ease-out;
}

/* ── Left-handed play ───────────────────────────────────────── */
body.lefty #player-chip-tower {
  right: auto;
  left: calc(8px + var(--chip-tower-x, 0px));
  transform-origin: bottom left;
}

/* Action buttons: explicit order reposition for grid (direction:rtl unreliable on grid) */
body.lefty #action-buttons #btn-fold      { order: 3; }
body.lefty #action-buttons #btn-check-call { order: 2; }
body.lefty #action-buttons #btn-bet-raise  { order: 1; }

/* Bet picker rows: reverse flex order */
body.lefty .bet-options {
  flex-direction: row-reverse;
}
body.lefty .bet-custom {
  flex-direction: row-reverse;
}

/* Tower gradient: mirror x-positions for left-side tower */
body.lefty #tower-gradient {
  background:
    radial-gradient(ellipse 16% 14% at 12% 52%,
      rgba(0,240,200,1.00) 0%,
      rgba(0,220,180,1.00) 32%,
      transparent 72%),
    radial-gradient(ellipse 75% 58% at 8% 55%,
      rgba(0,200,160,1.00) 0%,
      rgba(0,160,140,0.60) 50%,
      transparent 85%),
    radial-gradient(ellipse 100% 78% at 0% 60%,
      rgba(0,150,120,0.48) 0%,
      transparent 78%);
}

/* Tower menu qline: in lefty mode menu is RIGHT of tower, so reverse the row
   so pill is on the right (away from tower) and line points left toward tower */
body.lefty .qlabel-wrap {
  flex-direction: row-reverse;
}
body.lefty .qline {
  background: linear-gradient(to left, rgba(255,255,255,0.12) 0%, transparent 100%);
}
body.lefty .qline::after {
  right: auto;
  left: 0;
}
body.lefty .qrow.active-zone .qline {
  background: linear-gradient(to left, rgba(255,255,255,0.85) 0%, transparent 100%);
}

/* ── 3D CSS chip tower (ported from betting-lab) ───────────────
   Each chip = .chip-unit with .chip-face (top disc) + .chip-rim (side)
   Stack wrapper */
/* ── System 1: Physical contact shadow (separate from selection glow) ──
   The stack sits on the felt under overhead light.
   Shadow = shallow oval footprint at the base only.
   No drop shadow on the full chip stack silhouette. */
.chip-stack {
  position: relative;
  /* No filter drop-shadow — that always reads as a Photoshop rear-cast shadow */
}

/* Contact shadow: oval radial gradient anchored to the stack base.
   Darkest directly under the bottom chip, soft spread outward on felt.
   Slightly wider than the stack, shallow height — like a cylinder on a table. */
/* Contact shadow — only visible when chips are present */
.chip-stack:not(:has(.chip-unit))::after {
  display: none;
}

.chip-stack::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  height: 24px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.35) 35%,
    rgba(0,0,0,0.10) 65%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* One chip = face disc + rim edge */
.chip-unit {
  position: absolute;
  width: var(--cw, 52px);
}

/* The rim */
.chip-rim {
  position: absolute;
  bottom: 0;
  width: var(--cw, 52px);
  height: var(--rim, 15px);
  background-color: var(--cb);
  clip-path: url(#chip-rim-clip);
  border-top: 1.5px solid rgba(0,0,0,1);
  background-image:
    linear-gradient(to bottom,
      rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 30%,
      transparent 55%, rgba(0,0,0,0.34) 100%),
    linear-gradient(to right,
      rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 8%,
      rgba(0,0,0,0.10) 18%, transparent 28%,
      rgba(255,255,255,0.42) 60%,
      rgba(255,255,255,0.12) 76%, transparent 88%,
      rgba(0,0,0,0.30) 96%, rgba(0,0,0,0.45) 100%);
}

/* The face disc — top surface of each chip */
.chip-face {
  position: absolute;
  bottom: calc(var(--rim, 15px) * 0.4);
  width: var(--cw, 52px);
  height: var(--face, 14px);
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 32%, var(--cf), var(--cm, var(--cf)));
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.40),
    inset 1px 0 3px rgba(0,0,0,0.20),
    0 -1px 0 rgba(255,255,255,0.18);
  border: 1.5px solid rgba(0,0,0,0.20);
}

/* Inner ring — only on the top chip's face */
.chip-face.is-top {
  box-shadow:
    0 2px 5px rgba(0,0,0,0.30),
    inset 0 0 0 1.5px rgba(255,255,255,0.12);
}
.chip-face.is-top::before {
  content: none;
}
/* Label hidden on all chips except top — color coding handles lower denominations */
.chip-face::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--chip-label-size, 14.4px); font-weight: 900;
  color: transparent;
  letter-spacing: 0.02em;
  pointer-events: none;
  overflow: hidden;
}
/* Top chip label only — color set inline via --label-color */
.chip-face.is-top::after {
  color: var(--label-color, rgba(255,255,255,0.55));
}
/* Show label only on the bottom-most lifted chip — the cut-point chip in the gap */
.chip-unit.chip-cut-point .chip-face::after {
  color: var(--label-color, rgba(255,255,255,0.75));
}
/* Pot chips and flying chips: hide labels */
.pot-stack .chip-face::after,
.pot-stack .chip-face.is-top::after,
.chip-fly .chip-face::after,
.chip-fly .chip-face.is-top::after {
  color: transparent;
}

/* Bottom ellipse on the lowest chip */
.chip-face.is-bottom-rim {
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
  border: none;
  z-index: 0;
}

#tower-label {
  display: none; /* shown again later in bet/raise UI */
}

/* ── Tower drag-to-bet menu ─────────────────────────────────── */
/*
 * #tower-menu uses position:fixed to escape #game-area's stacking context,
 * so it paints above #action-zone (z:20). Coordinates set by _buildTowerMenu().
 */
#tower-menu {
  position: fixed;
  z-index: 31; /* above action-zone (20), gradient (29), chip tower (30) */
  pointer-events: none;
  /* right / bottom / height / width set by _buildTowerMenu() */
}
#tower-menu.active { pointer-events: auto; }

/* Each row pinned at the exact cut-point Y on the stack */
.qrow {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%) scale(1);
  transform-origin: center center;
  opacity: 0;
  transition: opacity 0.14s ease-out, transform 0.12s ease-out;
  cursor: pointer;
  will-change: opacity, transform;
}

/* Pill + glow line layout */
.qlabel-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.qpill {
  flex-shrink: 0;
  width: var(--pill-w, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,8,20, var(--qpill-bg-inactive, 0.82));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 2px 0;
  transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
}

/* Active zone bg is handled inline by JS reading --qpill-bg-active */

.qlabel-main {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.05em;
  transition: color 0.08s, font-size 0.1s;
}

/* Glow line from pill to stack edge */
.qline {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.12) 0%, transparent 100%);
  transition: background 0.1s, height 0.1s, box-shadow 0.1s;
  position: relative;
}
.qline::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transition: all 0.1s;
}

/* Active zone — subtle scale, distinction comes from glow/color not size */
.qrow.active-zone {
  transform: translateY(-50%) scale(var(--qrow-active-scale, 1.1));
}
.qrow.active-zone .qpill {
  background: rgba(255,255,255,0.16);
  border: 1.5px solid #fff;
  box-shadow: 0 0 14px rgba(255,255,255,0.40), 0 0 5px rgba(255,255,255,0.65);
}
.qrow.active-zone .qlabel-main { color: #fff; font-size: 11px; font-weight: 900; }
.qrow.active-zone .qline {
  background: linear-gradient(to right, rgba(255,255,255,0.85) 0%, transparent 100%);
  height: 1.5px;
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
}
.qrow.active-zone .qline::after {
  background: #fff; width: 5px; height: 5px;
  box-shadow: 0 0 6px rgba(255,255,255,0.9);
}

/* active-between removed — only two states: inactive and active-zone */

/* Bet bubble above tower — absolute in #game-area, right/bottom set by JS */
#tower-bet-bubble {
  position: fixed;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom center;
  background: #06b6d4;
  color: #fff;
  font-size: 13px; font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none; z-index: 35; opacity: 0;
  box-shadow: 0 2px 12px rgba(6,182,212,0.4);
  transition: opacity 0.15s;
}
#tower-bet-bubble.show { opacity: 1; }

#tower-bet-bubble.tower-bubble-active {
  cursor: pointer;
  pointer-events: auto;
}

@keyframes bubble-wiggle {
  0%   { transform: translateX(-50%) scale(1); }
  15%  { transform: translateX(calc(-50% + 6px)) scale(1.05); }
  35%  { transform: translateX(calc(-50% - 6px)) scale(1.05); }
  55%  { transform: translateX(calc(-50% + 4px)) scale(1.02); }
  75%  { transform: translateX(calc(-50% - 3px)) scale(1.01); }
  100% { transform: translateX(-50%) scale(1); }
}

#tower-bet-bubble.bubble-wiggle {
  animation: bubble-wiggle 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  background: #ef4444 !important;
}

/* Down-pointing caret toward the chip stack — all active states */
#tower-bet-bubble.tower-bubble-active::after,
#tower-bet-bubble.fondle-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--caret-color, #06b6d4);
}

/* Card peek animation */
.card-peek {
  transform: rotate(-8deg) translateY(-8px);
  z-index: 10;
}

/* Deal scale-in */
.card-deal-in {
  animation: card-deal 0.25s ease-out both;
}

/* Community card: larger and more prominent */
.community-card {
  width: var(--comm-card-w, 40px);
  height: var(--comm-card-h, 59px);
  border-radius: 4px;  /* 40px × 10.9% SVG ratio */
}

/* ── Turn-clock ring (SVG) ──────────────────────────────────── */
/* Class-based so it applies to seat 0's authored ring AND the rings injected
   into opponent seats' .avatar-wrap (the ring follows whoever is acting). */
.timer-ring {
  position: absolute;
  inset: -5px;
  width: calc(var(--seat-avatar) + 10px);
  height: calc(var(--seat-avatar) + 10px);
  pointer-events: none;
  transform: rotate(-90deg);
}

.timer-bg {
  fill: none;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 3;
}

.timer-arc {
  fill: none;
  stroke: #4ade80;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 210;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.5s;
}

.timer-arc.warning { stroke: #f59e0b; }
.timer-arc.critical { stroke: #ef4444; }

/* ── Host keep-alive banner ─────────────────────────────────── */
#host-keepalive-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #0b160d;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  pointer-events: none;
}
#host-keepalive-banner.hidden { display: none; }
#host-keepalive-banner .hk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0b160d;
  animation: hk-pulse 1.6s ease-in-out infinite;
}
@keyframes hk-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Post-action note ───────────────────────────────────────── */
/* position:fixed so it floats above the action zone */
#post-action-note {
  position: fixed;
  bottom: calc(var(--cards-area-h, 108px) + max(20px, env(safe-area-inset-bottom)) + 100px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(0,0,0,0.75);
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  color: rgba(255,255,255,0.9);
  animation: fade-note 2.5s ease-in-out both;
  z-index: 25;
}

/* ── Hint panel — absolute top of game-area (below HUD) ──────── */
/* ── Hint Panel — 3-layer mobile design ─────────────────────── */
#hint-panel {
  position: fixed;
  top: var(--hint-panel-top);
  left: 8px; right: 8px;
  background: rgba(8,4,20,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 14px 8px;
  z-index: 40;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

#hint-panel.hint-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#hint-panel.hint-hiding {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* ── Elimination toast ───────────────────────────────────────── */
#elim-toast {
  position: fixed;
  top: var(--hint-panel-top);
  left: 8px; right: 8px;
  background: linear-gradient(to right, rgba(180,20,20,0.18), rgba(8,4,20,0.92));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  border: 1px solid rgba(255,80,80,0.2);
  border-left: 4px solid #e53e3e;
  z-index: 20;
  padding: 9px 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 1s ease, transform 1s ease;
  pointer-events: none;
  overflow: hidden;
  cursor: pointer;
}

#elim-toast.elim-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  cursor: pointer;
}

#elim-toast.elim-hiding {
  opacity: 0;
  transform: translateY(-4px);
}

#elim-toast-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Eliminator avatar — left, gold ring, full color */
#elim-winner-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2.5px solid #ffd700;
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
}

#elim-winner-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Loser avatar — right, red ring, grayscale */
#elim-loser-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2.5px solid #e53e3e;
  box-shadow: 0 0 10px rgba(229,62,62,0.4);
}

#elim-loser-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

/* Text block */
#elim-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

#elim-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: nowrap;
  min-width: 0;
}

#elim-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

#elim-connector {
  font-size: 0.6rem;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  white-space: nowrap;
}

#elim-winner-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #ffd700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

#elim-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  text-align: center;
}

/* Entry animations */
@keyframes elim-loser-shake {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.1) translateX(-3px); }
  40%  { transform: scale(0.88) translateX(3px); }
  60%  { transform: scale(0.92) translateX(-2px); }
  80%  { transform: scale(0.95) translateX(1px); }
  100% { transform: scale(1) translateX(0); }
}

@keyframes elim-winner-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

#elim-loser-wrap.elim-animate  { animation: elim-loser-shake 0.45s ease forwards; }
#elim-winner-wrap.elim-animate { animation: elim-winner-pulse 0.35s ease 0.1s forwards; }

/* ── Layer 1: Glanceable ─────────────────────────────────────── */
#hint-l1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#hint-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  border-radius: 20px;
  align-self: flex-start;
}
/* State color variants */
.state-monster  { background: rgba(124,58,237,0.30); color: #c084fc; border: 1px solid rgba(124,58,237,0.5); }
.state-strong   { background: rgba(22,163,74,0.25);  color: #4ade80; border: 1px solid rgba(22,163,74,0.4); }
.state-playable { background: rgba(37,99,235,0.25);  color: #60a5fa; border: 1px solid rgba(37,99,235,0.4); }
.state-speculative { background: rgba(107,114,128,0.25); color: #d1d5db; border: 1px solid rgba(107,114,128,0.4); }
.state-caution  { background: rgba(217,119,6,0.25);  color: #fbbf24; border: 1px solid rgba(217,119,6,0.4); }
.state-trap     { background: rgba(234,88,12,0.25);  color: #fb923c; border: 1px solid rgba(234,88,12,0.45); }
.state-danger   { background: rgba(220,38,38,0.25);  color: #f87171; border: 1px solid rgba(220,38,38,0.4); }
.state-pressure { background: rgba(220,38,38,0.25);  color: #f87171; border: 1px solid rgba(220,38,38,0.4); }

#hint-nickname {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
  margin-bottom: 1px;
}

#hint-action-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#hint-action {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.action-fold   { color: #f87171; }
.action-call   { color: #60a5fa; }
.action-check  { color: #4ade80; }
.action-raise  { color: #4ade80; }
.action-allin  { color: #f87171; }

#hint-reason {
  font-size: 0.90rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.3;
}

#hint-drawodds {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.3;
  margin-top: 3px;
}

#hint-why-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.30);
  font-size: 0.65rem;
  cursor: pointer;
  padding: 2px 0 0;
  text-align: left;
  letter-spacing: 0.04em;
}
#hint-why-btn:active { opacity: 0.6; }

/* ── Layer 2: Expanded teaching ──────────────────────────────── */
#hint-l2 {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 7px;
  padding-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#hint-explanation {
  font-size: 0.91rem;
  color: rgba(255,255,255,0.70);
  line-height: 1.45;
  margin: 0;
}

#hint-mistake {
  font-size: 0.71rem;
  color: rgba(251,146,60,0.80);
  line-height: 1.35;
  margin: 0;
}

#hint-confidence {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
}
.conf-clear      { color: #4ade80; }
.conf-reasonable { color: #fbbf24; }
.conf-close      { color: #60a5fa; }

#hint-expert-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  font-size: 0.63rem;
  cursor: pointer;
  padding: 1px 0 0;
  text-align: left;
  letter-spacing: 0.04em;
}

/* ── Layer 3: Expert numbers ─────────────────────────────────── */
#hint-l3 {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#hint-l3 span {
  font-size: 0.975rem;
  font-weight: 700;
  color: rgba(255,255,255,0.40);
  white-space: nowrap;
}

/* Button highlight (applied to action buttons) */
.recommended { box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }

/* ── Bet picker — slides up from viewport bottom ─────────────── */
/* position:fixed here is intentional: it must overlay the action zone */
#bet-picker {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.9);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px max(12px, env(safe-area-inset-bottom));
  animation: slide-up 0.22s ease-out both;
  z-index: 40;
}

.bet-options {
  display: flex;
  gap: 8px;
}

.bet-opt {
  flex: 1;
  padding: 10px 4px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}

.bet-opt.active {
  background: var(--gold);
  color: #111;
}

.bet-opt:active { opacity: 0.7; }

.bet-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
  padding-bottom: 4px;
}

#bet-minus,
#bet-plus {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

#bet-minus:active,
#bet-plus:active { opacity: 0.6; transform: scale(0.92); }

#bet-amount-display {
  font-size: 1.4rem;
  font-weight: 800;
  min-width: 100px;
  text-align: center;
  color: var(--gold);
}

#btn-confirm-raise {
  display: block;
  width: calc(100% - 16px);
  margin: 10px 8px 0;
  padding: 11px 0;
  background: var(--gold);
  color: #1a0a2e;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-transform: uppercase;
}
#btn-confirm-raise:active { opacity: 0.75; transform: scale(0.97); }

/* ── Action zone — fixed-height bottom flex item ─────────────── */
/*
 * #action-zone always reserves bottom space even when #action-buttons
 * is hidden (display:none), preventing layout shift between hands.
 * Height = button height + vertical padding + safe-area-inset-bottom.
 */
#action-zone {
  flex: 0 0 auto;
  min-height: calc(80px + 14px + max(32px, env(safe-area-inset-bottom)));
  position: relative;
  z-index: 20; /* below #game-area (25) — chip tower intentionally overlays button area */
}

/* ── Action buttons inside action zone ───────────────────────── */
#action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  padding: 14px 24px max(32px, env(safe-area-inset-bottom));
  z-index: 22;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  width: 100%;
}

/* Invisible placeholder — keeps grid slot occupied so center column stays centered */
#action-buttons button.btn-invisible {
  visibility: hidden;
  pointer-events: none;
}

#action-buttons button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.12s, transform 0.08s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

/* Fold + Check: keep button at full touch target, shrink only the visual backing */
#btn-fold,
#btn-check-call {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  overflow: visible;
}

/* Visual backing circle drawn smaller via ::before */
#btn-fold::before,
#btn-check-call::before {
  content: '';
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
#btn-fold::before    { background: #c026a8; }
#btn-check-call::before { background: #16a34a; }

/* Move recommended ring onto the ::before so it fits the smaller backing */
#btn-fold.recommended,
#btn-check-call.recommended {
  outline: none !important;
  box-shadow: none !important;
}
#btn-fold.recommended::before,
#btn-check-call.recommended::before {
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 5px #4ade80, 0 0 14px rgba(74,222,128,0.5);
}

/* Keep icon/label above the pseudo-element */
#btn-fold .btn-icon, #btn-fold .btn-label,
#btn-check-call .btn-icon, #btn-check-call .btn-label,
#btn-check-call .btn-amount {
  position: relative;
  z-index: 1;
}

#action-buttons button:active:not(:disabled) {
  opacity: 0.8;
  transform: scale(0.91);
}

#action-buttons button:disabled {
  opacity: 0.28;
  cursor: default;
}

.btn-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.btn-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#btn-check-call.is-call .btn-icon {
  display: none;
}

/* Amount on top, label on bottom — mirrors the fold/check layout */
.btn-amount {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  margin-top: 4px;
}

.btn-amount.hidden {
  display: none;
}

#btn-check-call.is-call .btn-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin-top: 2px;
}

.call-action {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.88;
  text-transform: uppercase;
}

.call-amount {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

#btn-fold       { background: #c026a8; color: #fff; }
#btn-check-call { background: #16a34a; color: #fff; }
#btn-bet-raise  { background: #0891b2; color: #fff; }

button.recommended {
  outline: 2px solid #4ade80;
  outline-offset: 3px;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.5);
}

/* Pre-action queued state — Check/Fold (Fold btn) or Check/Call (Check-Call btn) */
#btn-fold.btn-prequeued,
#btn-check-call.btn-prequeued {
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 3px #fbbf24, 0 0 12px rgba(251,191,36,0.5);
}

.prefold-badge {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fbbf24;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* ── Hand result — winner announcement ───────────────────────── */
/* Absolute within #game-area — centers in the play area, not full screen */
#hand-result {
  position: fixed;
  top: calc(max(10px, env(safe-area-inset-top)) + var(--hand-result-y, 0px));
  left: 50%;
  transform: translateX(calc(-50% + var(--hand-result-x, 0px)));
  text-align: center;
  z-index: 200;
  pointer-events: none;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.35);
  padding: 8px 20px 7px;
  min-width: 160px;
  width: calc(100% - 32px);
  max-width: 300px;
}

#hand-result:not(.hidden) {
  animation: winner-pop 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes winner-pop {
  from { transform: translateX(calc(-50% + var(--hand-result-x, 0px))) scale(0.88); opacity: 0; }
  to   { transform: translateX(calc(-50% + var(--hand-result-x, 0px))) scale(1);    opacity: 1; }
}


#result-msg {
  font-size: 1.1rem;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
  line-height: 1.2;
  letter-spacing: 0.5px;
}

#hand-result.player-win #result-msg {
  color: var(--gold);
  font-size: 1.35rem;
  text-shadow: 0 0 20px rgba(212,175,55,0.7);
}

#hand-result.player-split #result-msg {
  color: #60a5fa;
  font-size: 1.2rem;
  text-shadow: 0 0 16px rgba(96,165,250,0.55);
}

#result-detail {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  margin-top: 3px;
  letter-spacing: 0.3px;
}

/* ── Winner seat highlight ────────────────────────────────────── */
.seat-winner .avatar-wrap {
  transform: scale(1.22);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  z-index: 12;
}

.seat-winner .avatar {
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 28px rgba(212,175,55,1),
    0 0 64px rgba(212,175,55,0.55) !important;
  animation: winner-pulse 1s ease-in-out infinite;
}

@keyframes winner-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 20px rgba(212,175,55,0.9), 0 0 48px rgba(212,175,55,0.4); }
  50%       { box-shadow: 0 0 0 3px var(--gold), 0 0 42px rgba(212,175,55,1),   0 0 86px rgba(212,175,55,0.7); }
}

/* Dim everyone else when a winner is shown */
#table:has(.seat-winner) .seat:not(.seat-winner) {
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

/* ── Standalone Next Deal button ─────────────────────────────── */
/*
 * position:fixed so it overlays the action zone (which keeps its
 * reserved height). Centered horizontally, rests in the action zone area.
 */
#btn-next-hand {
  position: fixed;
  bottom: calc(max(27px, env(safe-area-inset-bottom) + 7px) + 34px);
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 52px;
  border: none;
  border-radius: 50px;
  background: var(--gold);
  color: #111;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  z-index: 22;
  box-shadow: 0 4px 20px rgba(0,0,0,0.55);
}

#btn-next-hand:active {
  opacity: 0.8;
  transform: translateX(-50%) scale(0.97);
}

/* ── Hand History button — sits below Next Deal ──────────────── */
#btn-hand-history {
  position: fixed;
  bottom: calc(max(27px, env(safe-area-inset-bottom) + 7px) - 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  color: rgba(255,255,255,0.55);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 6px 16px;
  cursor: pointer;
  z-index: 22;
  white-space: nowrap;
}
#btn-hand-history:active { opacity: 0.6; }

/* ── Hand History Modal ──────────────────────────────────────── */
#hand-history-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
}
#hand-history-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}
#hand-history-panel {
  position: relative;
  width: 100%;
  max-height: 80vh;
  background: #0d0518;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#hand-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
#hand-history-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
}
#btn-close-history {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
}
#hand-history-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 0.68rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.70);
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  white-space: pre-wrap;
  margin: 0;
}
.hh-export {
  background: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.30);
  font-size: 0.65rem;
  padding: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Result overlay (kept for JS refs, not shown) ────────────── */
#result-overlay { display: none; }

/* ── Welcome screen ─────────────────────────────────────────── */
#screen-welcome {
  align-items: center;
  justify-content: center;
  background: url('/assets/splash-bg.png') center center / cover no-repeat, #0a0a2e;
  padding: 32px 20px;
}

#welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  /* Scrim panel */
  background: rgba(5, 10, 35, 0.82);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 32px 24px 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

#welcome-avatar-wrap {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 3px solid rgba(255,215,0,0.4);
  overflow: hidden;
  box-shadow: 0 0 32px rgba(255,215,0,0.2), 0 4px 16px rgba(0,0,0,0.5);
  background: #1a1a3e;
  flex-shrink: 0;
}

#welcome-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#welcome-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#welcome-eyebrow {
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#welcome-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffd700;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 12px rgba(255,215,0,0.3);
}

#welcome-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 16px 12px;
  width: 100%;
  justify-content: space-around;
}

.welcome-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

/* Fixed-height icon zone so all three cells align regardless of icon type */
.welcome-stat-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
}

.welcome-stat-icon {
  font-size: 2rem;
  line-height: 1;
}

.welcome-stat-icon--svg {
  width: 44px;
  height: 30px;
  display: block;
}

.welcome-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: #ffd700;
  line-height: 1;
}

.welcome-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.welcome-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

#welcome-progression {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: -12px 0 0;
}

#welcome-desc {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

#welcome-desc strong {
  color: #fff;
  font-weight: 700;
}

#btn-welcome-start {
  width: 100%;
  padding: 18px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 20px rgba(255,215,0,0.25);
}

/* ── Finish screen ───────────────────────────────────────────── */
#screen-finish {
  align-items: center;
  justify-content: center;
  background: url('/assets/splash-bg.png') center center / cover no-repeat, #0a0a2e;
  padding: 32px 20px;
}

#finish-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  background: rgba(5, 10, 35, 0.82);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 32px 24px 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

#finish-avatar-wrap {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 28px rgba(255,255,255,0.1), 0 4px 16px rgba(0,0,0,0.5);
  background: #1a1a3e;
}

#finish-card.finish--winner #finish-avatar-wrap {
  border-color: rgba(255,215,0,0.6);
  box-shadow: 0 0 32px rgba(255,215,0,0.3), 0 4px 16px rgba(0,0,0,0.5);
}

#finish-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#finish-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#finish-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

#finish-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0;
}

#finish-card.finish--winner #finish-title {
  color: #ffd700;
  text-shadow: 0 2px 16px rgba(255,215,0,0.4);
}

#finish-place {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

#finish-card.finish--winner #finish-place {
  color: #ffd700;
}

/* Top 3 podium row (winner only) */
#finish-top3 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.finish-podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.finish-podium-avatar {
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2);
}

.finish-podium-item--1 .finish-podium-avatar {
  width: 54px; height: 54px;
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(255,215,0,0.35);
}
.finish-podium-item--2 .finish-podium-avatar,
.finish-podium-item--3 .finish-podium-avatar {
  width: 40px; height: 40px;
  border-color: rgba(255,255,255,0.25);
}

.finish-podium-medal {
  font-size: 1.1rem;
  line-height: 1;
}

.finish-podium-name {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.6);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#btn-finish-leaderboard,
#btn-finish-play-again {
  width: 100%;
}


/* ── Results screen (legacy rules removed — see New Leaderboard section below) ── */

/* ── Settings overlay ───────────────────────────────────────── */
#settings-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#settings-box {
  background: #0d1a38;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 28px 24px 22px;
  width: min(320px, 88vw);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#settings-box h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  cursor: pointer;
}

.settings-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--gold);
}

.settings-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 2px 0;
}

.settings-row label {
  cursor: default;
}

#settings-phone-preview-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.settings-preview-btn {
  flex: 1;
  padding: 7px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  white-space: nowrap;
}

.settings-preview-btn.active {
  background: rgba(212,175,55,0.2);
  border-color: rgba(212,175,55,0.5);
  color: #ffd700;
}

.settings-preview-btn:active { opacity: 0.7; }

.settings-inline-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 14px;
  cursor: pointer;
}

.settings-inline-btn:active { opacity: 0.7; }
.settings-inline-btn.danger { color: #ff6b6b; border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.10); }

.settings-slider-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
}

.settings-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-slider-label span:last-child {
  font-size: 0.78rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

.settings-slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
  height: 4px;
  cursor: pointer;
}

.settings-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.settings-actions button {
  flex: 1;
  padding: 12px 8px;
  border: none;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

#btn-quit-session {
  background: #7f1d1d;
  color: #fca5a5;
}

#btn-close-settings {
  background: var(--gold);
  color: #111;
}

.settings-actions button:active { opacity: 0.75; }

#settings-version {
  text-align: center;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
  padding: 10px 0 2px;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes hue-spin {
  to { filter: hue-rotate(360deg); }
}

/* ── Global Leaderboard overlay ──────────────────────────────── */
#global-lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 32;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#global-lb-box {
  background: #0d1a38;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 24px 20px 20px;
  width: min(340px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.glb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.glb-header h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
}

.glb-status {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 8px 0;
}

.glb-error { color: #ff9999; }

.glb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.glb-table thead th {
  color: rgba(255,255,255,0.4);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 6px 10px;
  text-align: left;
}

.glb-table thead th:not(:first-child):not(:nth-child(2)) {
  text-align: right;
}

/* Match the This Game rows: roomy rows, faint separators */
.glb-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); }

.glb-table .glb-rank {
  width: 28px;
  color: var(--gold);
  font-weight: 800;
  padding: 10px 4px;
  font-size: 0.78rem;
  text-align: left;
}

.glb-table .glb-name {
  padding: 10px 8px;
  font-weight: 700;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.92);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glb-table .glb-num {
  padding: 10px 6px;
  text-align: right;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums;
}

/* KO count — same blue as the This Game board */
.glb-table .glb-ko { color: #7ecfff; }

/* Chip count — same green as the This Game board */
.glb-table .glb-chips { color: #7fff7f; }

/* Top-3 ranks keep their medal tint, names stay bold */
.glb-rank-1 .glb-rank { color: #ffd700 !important; }
.glb-rank-2 .glb-rank { color: #c0c0c0 !important; }
.glb-rank-3 .glb-rank { color: #cd7f32 !important; }
.glb-rank-1 .glb-name,
.glb-rank-2 .glb-name,
.glb-rank-3 .glb-name { font-weight: 700; }

.glb-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* Tabs */
.glb-tabs {
  display: flex;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 3px;
}

.glb-tab {
  flex: 1;
  padding: 7px 0;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.glb-tab.glb-tab-active {
  background: rgba(212,175,55,0.2);
  color: var(--gold);
}

/* Profit colors — match the This Game board (green chips / red loss) */
.glb-table .glb-pos { color: #7fff7f; }
.glb-table .glb-neg { color: #f87171; }

/* Live tab — you row: gold accent like the This Game human row */
.glb-live-you {
  background: rgba(212,175,55,0.12);
  box-shadow: inset 3px 0 0 var(--gold);
}
.glb-live-you .glb-name { color: var(--gold) !important; }

.glb-submit-section { display: flex; flex-direction: column; gap: 8px; }

.glb-submit-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}

.glb-stat-preview {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 2px;
}

.glb-form-row { display: flex; gap: 8px; }

.glb-handle-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: rgba(255,255,255,0.9);
  font-size: 0.88rem;
  padding: 8px 12px;
  outline: none;
  min-width: 0;
}

.glb-handle-input:focus { border-color: rgba(212,175,55,0.5); }

.glb-submit-btn {
  padding: 8px 16px;
  font-size: 0.84rem;
  border-radius: 8px;
  white-space: nowrap;
}

@keyframes think-bounce {
  0%, 100% { transform: translateY(0); }
  45%       { transform: translateY(-4px); }
}

@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fade-note {
  0%   { opacity: 0; transform: translateY(4px); }
  12%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes card-deal {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes card-peek {
  0%   { transform: rotate(0deg) translateY(0); }
  40%  { transform: rotate(-8deg) translateY(-8px); }
  60%  { transform: rotate(-8deg) translateY(-8px); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* Community card deal-in — slides from above with slight tilt */
@keyframes comm-deal {
  0%   { transform: translateY(-26px) rotate(-5deg) scale(0.88); opacity: 0; }
  65%  { transform: translateY(3px)   rotate(0.6deg) scale(1.02); opacity: 1; }
  100% { transform: translateY(0)     rotate(0deg)   scale(1);    opacity: 1; }
}
.community-card.comm-deal-in {
  animation: comm-deal 0.32s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* Flying chip token — sized by inline SVG, colored by denomination */
.chip-fly {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  line-height: 0;
  will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

/* ── Winning hand card highlights ───────────────────────────── */
.card-in-hand {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(212,175,55,0.7), 0 4px 0 0 #c8a800 !important;
  position: relative;
  z-index: 2;
}

#community-cards .community-card.card-in-hand {
  transform: translateY(-8px);
}

#player-hole-cards .player-card.card-in-hand {
  transform: translateY(-14px);
}

#player-hole-cards .player-card.card-not-in-hand {
  opacity: 0.35;
}

.card-not-in-hand {
  opacity: 0.32;
}

/* ── Utility ────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Responsive tweaks (larger phones) ─────────────────────── */
@media (min-width: 400px) {
  :root {
    --card-w: 46px;
    --card-h: 64px;
  }
}

/* ── Tablet layout (iPad portrait and up) ───────────────────── */
html.tablet {
  --table-w:          64vw;
  --table-h:          1200px;
  --table-top:        200px;
  --chip-tower-x:     168px;
  --chip-tower-y:     -21px;
  --action-zone-lift: 79px;
  --hint-panel-top:   calc(91vh - 10px);
}

html.tablet #game-area {
  transform: scale(1.25);
  transform-origin: bottom center;
  overflow: visible;
}

html.tablet #action-zone {
  pointer-events: none;
}

html.tablet #action-zone > * {
  pointer-events: auto;
}

html.tablet #action-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  pointer-events: none;
  z-index: 21;
}

html.tablet #action-buttons {
  grid-template-columns: 80px 1fr 80px;
  background: none;
  transform: translateY(calc(-1 * var(--action-zone-lift, 0px)));
  pointer-events: none;
}

html.tablet #action-buttons button {
  pointer-events: auto;
}

html.tablet #btn-fold       { justify-self: start; margin-left: calc(var(--chip-tower-x, 9px) - 17px); }
html.tablet body.lefty #btn-fold { justify-self: end; margin-left: 0; margin-right: calc(var(--chip-tower-x, 9px) - 17px); }

/* tall-phone extra breathing room handled by margin-bottom: auto on #table */

/* ── MTT overlay & notifications ───────────────────────────── */
#mtt-overlay {
  display: none; /* MTT info moved to blinds-up banner */
}

.mtt-sep { margin: 0 6px; opacity: 0.4; }

#mtt-toast {
  position: absolute;
  bottom: calc(var(--cards-area-h, 108px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: var(--gold);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  border: 1px solid var(--gold);
  z-index: 200;
  opacity: 1;
  transition: opacity 0.4s;
  white-space: nowrap;
}
#mtt-toast.fade-out { opacity: 0; }

#mtt-final-banner {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 24px var(--gold), 0 2px 8px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.72);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 14px 28px;
  letter-spacing: 1px;
  z-index: 300;
  pointer-events: none;
  white-space: nowrap;
}
#mtt-final-banner:not(.hidden) {
  animation: finalTablePop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes finalTablePop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.6); }
  70%  { opacity: 1; transform: translate(-50%,-50%) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* ── "Your Turn" banner (Bug 2) ─────────────────────────────── */
#your-turn-banner {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--gold);
  text-shadow: 0 0 24px var(--gold), 0 2px 8px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.72);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 12px 26px;
  z-index: 300;
  pointer-events: none;
  white-space: nowrap;
}
#your-turn-banner:not(.hidden) {
  animation: finalTablePop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Joining-in-progress overlay (Bug 4) ────────────────────── */
#joining-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.82);
}
#joining-overlay.hidden { display: none; }
.joining-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 36px;
  max-width: 86%;
  text-align: center;
}
.joining-spinner {
  width: 46px;
  height: 46px;
  border: 4px solid rgba(212,175,55,0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: joiningSpin 0.9s linear infinite;
}
@keyframes joiningSpin { to { transform: rotate(360deg); } }
.joining-title { font-size: 1.3rem; font-weight: 800; color: var(--gold); letter-spacing: 0.5px; }
.joining-status { font-size: 0.95rem; color: #d8dee6; line-height: 1.4; }

/* ── MTT Leaderboard (results screen) ───────────────────────── */
.lb-header {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  margin-bottom: 10px;
}

.mtt-leaderboard {
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 12px;
}
.mtt-lb-row {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.82rem;
}
.mtt-lb-row.human { background: rgba(212,175,55,0.12); }
.mtt-lb-place { width: 36px; font-weight: bold; color: var(--gold); }
.mtt-lb-name  { flex: 1; }
.mtt-lb-chips { color: #7fff7f; font-variant-numeric: tabular-nums; }
.mtt-lb-chips.eliminated { color: #888; }

/* ── New Leaderboard (card + overlay) ───────────────────────── */

/* Results screen: center the card */
#screen-results {
  align-items: center;
  justify-content: center;
  padding: 0;
  background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a1628 70%);
}

/* Shared card shell */
.lb-card {
  width: min(92vw, 420px);
  max-height: 90vh;
  background: #100828;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(212,175,55,0.12);
}

.lb-card--overlay {
  max-height: 80vh;
}

/* In-game LB tab bar */
.lb-ov-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  flex-shrink: 0;
}

.lb-ov-tab {
  flex: 1;
  padding: 7px 0;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.04);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lb-ov-tab.lb-ov-tab-active {
  background: rgba(212,175,55,0.18);
  color: var(--gold);
}

/* Card header */
.lb-card-header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.lb-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.lb-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.lb-meta-chip {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(212,175,55,0.14);
  border: 1px solid rgba(212,175,55,0.35);
  color: var(--gold);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: 0.04em;
}

.lb-meta-timer {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

/* Winner banner */
.lb-winner-banner {
  text-align: center;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  background: rgba(212,175,55,0.12);
  border-bottom: 1px solid rgba(212,175,55,0.2);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Scrollable rows area */
.lb-rows-wrap {
  height: 300px;
  flex: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Each player row */
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}

.lb-row.lb-row--human {
  border-left: 3px solid var(--gold);
  background: rgba(212,175,55,0.12);
  padding-left: 13px;
}

.lb-row--human .lb-avatar {
  width: 80px;
  height: 80px;
  font-size: 2rem;
}

/* When an AI row is focused, shrink the human avatar back to normal */
.lb-has-focus .lb-row--human .lb-avatar {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

.lb-row.lb-row--eliminated {
  opacity: 0.45;
}

.lb-row.lb-row--highlight {
  border-left: 3px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.07);
  padding-left: 13px;
}

.lb-row--highlight .lb-avatar {
  width: 80px;
  height: 80px;
  font-size: 2rem;
  border-color: rgba(255,255,255,0.7);
  transition: width 0.2s ease, height 0.2s ease;
}

/* Avatar circle */
.lb-avatar {
  transition: width 0.2s ease, height 0.2s ease;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: #2a1a4e;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  overflow: hidden;
}

.lb-row--eliminated .lb-avatar {
  border-color: rgba(255,255,255,0.15);
  filter: grayscale(1);
}

/* Place badge */
.lb-place {
  width: 28px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gold);
  text-align: right;
  flex-shrink: 0;
}

.lb-row--eliminated .lb-place {
  color: rgba(255,255,255,0.4);
}

/* Name + subtitle */
.lb-name-wrap {
  flex: 1;
  min-width: 0;
}

.lb-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-row--eliminated .lb-name {
  color: rgba(255,255,255,0.55);
}

.lb-elim-note {
  font-size: 0.64rem;
  color: rgba(255,255,255,0.35);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* KO count */
.lb-ko {
  font-size: 0.72rem;
  font-weight: 700;
  color: #7ecfff;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
  margin-right: 6px;
}

/* Chip count */
.lb-chips {
  font-size: 0.82rem;
  font-weight: 700;
  color: #7fff7f;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.lb-chips.lb-chips--out {
  color: rgba(255,255,255,0.28);
}

/* Card footer */
.lb-card-footer {
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.lb-btn-play-again,
.lb-btn-back {
  padding: 13px 48px;
  border: none;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: opacity 0.12s, transform 0.08s;
}

.lb-btn-play-again {
  background: var(--gold);
  color: #111;
}

.lb-btn-back {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.18);
}

.lb-btn-play-again:active,
.lb-btn-back:active {
  opacity: 0.75;
  transform: scale(0.97);
}

/* ── Leaderboard overlay ─────────────────────────────────────── */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-overlay.hidden { display: none; }

.lb-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lb-card--overlay {
  position: relative;
  z-index: 1;
}

/* Fade-in animation */
@keyframes lb-fade-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes lb-fade-out {
  from { opacity: 1; transform: translateY(0)    scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(0.97); }
}

.lb-overlay.lb-entering .lb-card--overlay {
  animation: lb-fade-in 0.22s ease-out both;
}

.lb-overlay.lb-exiting .lb-card--overlay {
  animation: lb-fade-out 0.18s ease-in both;
}

/* Make avatar-wrap cursor pointer when lb-clickable class is applied */
.avatar-wrap.lb-clickable {
  cursor: pointer;
}

.avatar-wrap.lb-clickable:active {
  opacity: 0.75;
}

/* ── Emotes (Online Play) ───────────────────────────────────── */

/* Floating emote glyph that rises from a seat's avatar. */
.emote-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.4);
  opacity: 0;
  font-size: 2rem;
  line-height: 1;
  pointer-events: none;
  z-index: 17;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
.emote-bubble.emote-play {
  animation: emote-float 1.9s ease-out forwards;
}
@keyframes emote-float {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px)   scale(0.3); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1.2); }
  24%  {             transform: translateX(-50%) translateY(-2px)  scale(1); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-42px) scale(0.85); }
}

/* Radial emote menu — fixed overlay anchored over the seat-0 avatar. */
.emote-menu { position: fixed; inset: 0; z-index: 590; }
.emote-menu.hidden { display: none; }
.emote-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.emote-menu.emote-open .emote-backdrop { opacity: 1; }

/* Zero-size origin pinned to the avatar center; children fan out via transforms. */
.emote-anchor { position: absolute; width: 0; height: 0; }

.emote-btn {
  position: absolute; left: 0; top: 0;
  width: 46px; height: 46px;
  margin: 0; padding: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1;
  background: #fbf6ea;
  border: 1.5px solid var(--gold);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(.2,1.3,.5,1);
}
.emote-btn:active { filter: brightness(0.92); }

/* Fan-out positions (joy → sadness, left → right), revealed on open. */
.emote-menu.emote-open .emote-pos-0 { opacity: 1; transform: translate(calc(-50% - 93px), calc(-50% - 25px)) scale(1); transition-delay: 0s;    }
.emote-menu.emote-open .emote-pos-1 { opacity: 1; transform: translate(calc(-50% - 68px), calc(-50% - 68px)) scale(1); transition-delay: 0.02s; }
.emote-menu.emote-open .emote-pos-2 { opacity: 1; transform: translate(calc(-50% - 25px), calc(-50% - 93px)) scale(1); transition-delay: 0.04s; }
.emote-menu.emote-open .emote-pos-3 { opacity: 1; transform: translate(calc(-50% + 25px), calc(-50% - 93px)) scale(1); transition-delay: 0.06s; }
.emote-menu.emote-open .emote-pos-4 { opacity: 1; transform: translate(calc(-50% + 68px), calc(-50% - 68px)) scale(1); transition-delay: 0.08s; }
.emote-menu.emote-open .emote-pos-5 { opacity: 1; transform: translate(calc(-50% + 93px), calc(-50% - 25px)) scale(1); transition-delay: 0.10s; }

.emote-lb-btn {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  background: #1c1430;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: 0.8rem; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 6px)) scale(0.6);
  transition: opacity 0.16s ease 0.06s, transform 0.2s ease 0.06s;
}
.emote-menu.emote-open .emote-lb-btn {
  opacity: 1;
  transform: translate(-50%, calc(-50% + var(--av-half, 29px) + 30px)) scale(1);
}

/* ── Blind Warning Toast — shares elim-toast layout/motion ──── */

#blind-warning-toast {
  position: fixed;
  top: calc(max(14px, env(safe-area-inset-top)) + 4px);
  left: 8px; right: 48px;
  background: linear-gradient(to right, rgba(140,90,0,0.22), rgba(8,4,20,0.92));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  border: 1px solid rgba(255,180,40,0.2);
  border-left: 4px solid #d4a017;
  z-index: 18;
  padding: 9px 16px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  color: #f0c040;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

#blind-warning-toast.bwt-show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Blind center flash — brief center toast alongside the top bar ── */
#blind-center-flash {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 180;
  background: rgba(10, 4, 30, 0.88);
  border: 1px solid rgba(212, 160, 23, 0.55);
  border-radius: 10px;
  padding: 8px 18px;
  color: #f0c040;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#blind-center-flash:not(.hidden).bcf-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ── Chip tower total label ── */
#chip-tower-total {
  display: none;
}

/* ── Hint context line (position + stack depth) ── */
#hint-context {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
#hint-context.ctx-pressure {
  color: rgba(255, 140, 40, 0.8);
}
#hint-context.ctx-shove {
  color: rgba(255, 80, 60, 0.9);
}

/* ── Feedback Card ──────────────────────────────────────────── */

:root {
  --fc-bg:          rgba(18, 18, 28, 0.97);
  --fc-border:      rgba(255,255,255,0.10);
  --fc-tab-active:  rgba(255,255,255,0.14);
  --fc-spark-up:    #4caf50;
  --fc-spark-down:  #e57373;
  --fc-text:        #e8e8f0;
  --fc-muted:       #888;
  --fc-value-color: #fff;
}

#feedback-card {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: min(420px, 100%);
  background: var(--fc-bg);
  border: 1px solid var(--fc-border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 0 0 16px;
  z-index: 120;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--fc-text);
  font-family: inherit;
  box-shadow: 0 -6px 32px rgba(0,0,0,0.5);
  pointer-events: auto;
}

#feedback-card.fc-hidden {
  display: none;
}

#feedback-card.fc-visible {
  transform: translateX(-50%) translateY(0);
  display: block;
}

#feedback-card.fc-hide {
  transform: translateX(-50%) translateY(100%);
  display: block;
}

.fc-drag-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 10px auto 6px;
}

.fc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 8px;
}

.fc-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-close {
  background: none;
  border: none;
  color: var(--fc-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
}

.fc-close:active { opacity: 0.6; }

.fc-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
}

.fc-tab {
  background: none;
  border: 1px solid var(--fc-border);
  border-radius: 20px;
  color: var(--fc-muted);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.fc-tab:active { opacity: 0.7; }

.fc-tab.fc-tab-active {
  background: var(--fc-tab-active);
  border-color: rgba(255,255,255,0.25);
  color: var(--fc-text);
}

.fc-body {
  padding: 0 12px;
  min-height: 96px;
}

.fc-body-summary {
  padding: 0 14px;
}

.fc-no-data {
  color: var(--fc-muted);
  font-size: 12px;
  padding: 16px 0;
  text-align: center;
}

/* 3-column table */
.fc-table {
  width: 100%;
  border-collapse: collapse;
}

.fc-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.fc-row:last-child { border-bottom: none; }

.fc-icon {
  width: 28px;
  font-size: 16px;
  padding: 6px 4px 6px 2px;
  text-align: center;
  vertical-align: middle;
}

.fc-value {
  width: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fc-value-color);
  padding: 6px 8px;
  vertical-align: middle;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fc-blurb {
  font-size: 12px;
  color: var(--fc-muted);
  padding: 6px 2px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  width: 100%;
}

/* Sparkline bar */
.fc-sparkline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 8px;
}

.fc-spark-svg {
  flex: 1;
  height: 32px;
  overflow: visible;
}

.fc-spark-label {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* Session summary extras */
.fc-narrative {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fc-text);
  margin: 0 0 12px;
}

.fc-heroes {
  margin-bottom: 12px;
}

.fc-hero-row {
  font-size: 12px;
  color: #f0c040;
  padding: 3px 0;
}

/* ── Full-screen Round Review modal (fc2) ───────────────────── */

.fc2-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fc2-modal.fc2-open {
  opacity: 1;
  pointer-events: auto;
}

.fc2-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.fc2-sheet {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 0%, rgba(80,30,160,0.5) 0%, #0b0818 65%);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fc2-modal.fc2-open .fc2-sheet {
  transform: translateY(0);
}

/* Header */
.fc2-header {
  padding: 0 20px 0;
  padding-top: 14vh;
  text-align: center;
}

.fc2-header-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fc2-header-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 10px;
}

.fc2-header-blinds {
  font-size: 56px;
  font-weight: 900;
  color: var(--gold, #d4af37);
  line-height: 1;
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.fc2-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0 -20px 16px;
}

/* Tabs */
.fc2-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 12px;
}

.fc2-tab {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.fc2-tab.fc2-tab-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* Body */
.fc2-body {
  flex: 1;
  padding: 0 16px 8px;
  overflow-y: auto;
}

/* Highlights tab — stat grid */
.fc2-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.fc2-stat-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.fc2-archetype-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(212,160,23,0.2);
  border-radius: 18px;
  margin-bottom: 10px;
}

.fc2-archetype-row-emoji { font-size: 22px; }

.fc2-archetype-row-label {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.fc2-stat-cell {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(212,160,23,0.15);
  border-radius: 18px;
  padding: 20px 8px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.fc2-stat-icon {
  font-size: 36px;
  display: block;
  color: var(--gold, #d4af37);
  filter: drop-shadow(0 2px 8px rgba(212,160,23,0.25));
}

.fc2-stat-value {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1;
}

.fc2-archetype-label {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  display: block;
  line-height: 1.2;
  text-align: center;
}

.fc2-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.38);
  display: block;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fc2-stat-ctx {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  display: block;
  line-height: 1.3;
  text-align: center;
}

/* Trend arrows on stat cards */
.fc2-trend {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}

.fc2-trend-up   { color: #4caf50; }
.fc2-trend-down { color: #e57373; }

.fc2-stat-cell {
  position: relative;
}

/* Hero moment card */
.fc2-hero-card {
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(212,160,23,0.35);
  border-radius: 16px;
  padding: 18px 16px 16px;
  margin-bottom: 12px;
  text-align: center;
}

.fc2-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(212,160,23,0.7);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.fc2-hero-chips {
  font-size: 36px;
  font-weight: 900;
  color: #4caf50;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 8px;
}

.fc2-hero-text {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}
/* Rivalry card — replaces hero slot when player-vs-player data is available */
.fc2-rivalry-card {
  margin: 16px 16px 0;
  padding: 16px 18px;
  background: rgba(110, 80, 210, 0.10);
  border: 1.5px solid rgba(150, 110, 240, 0.28);
  border-radius: 16px;
}
.fc2-rivalry-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: rgba(180, 150, 255, 0.75);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fc2-rivalry-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
}
.fc2-rivalry-sub {
  margin-top: 5px;
  font-size: 12px;
  color: rgba(255,255,255,0.40);
}

/* Hand of the Session card */
.fc2-hand-card {
  margin: 16px 16px 0;
  padding: 18px 18px 14px;
  background: rgba(200, 160, 55, 0.09);
  border: 1.5px solid rgba(200, 160, 55, 0.32);
  border-radius: 16px;
}
.fc2-hand-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: rgba(210, 170, 70, 0.75);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fc2-hand-decision {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
  margin-bottom: 4px;
}
.fc2-hand-odds {
  font-size: 12px;
  color: rgba(255,255,255,0.42);
  margin-bottom: 10px;
}
.fc2-hand-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.fc2-hand-name {
  font-size: 12px;
  color: rgba(255,255,255,0.50);
}
.fc2-hand-chips {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: #4caf50;
  font-variant-numeric: tabular-nums;
}
/* Signal badges */
.fc2-signal {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}
.fc2-signal-good-read  { background: rgba(80,200,120,0.15); color: rgba(100,220,130,0.9); }
.fc2-signal-got-there  { background: rgba(80,160,240,0.15); color: rgba(100,180,255,0.9); }
.fc2-signal-bluff      { background: rgba(200,100,240,0.15); color: rgba(210,130,255,0.9); }
.fc2-signal-value      { background: rgba(200,160,55,0.15);  color: rgba(220,180,80,0.9); }

.fc2-hero-cards {
  margin-top: 6px;
  font-size: 12px;
  font-family: monospace;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.03em;
}

/* Hero moments */
.fc2-moments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc2-moment-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(212,160,23,0.06);
  border: 1px solid rgba(212,160,23,0.18);
  border-radius: 12px;
  padding: 12px;
}

.fc2-moment-star {
  font-size: 18px;
  flex-shrink: 0;
}

.fc2-moment-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fc2-moment-text {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}

.fc2-moment-chips-up,
.fc2-moment-chips-down {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  align-self: center;
}

.fc2-moment-chips-up   { color: #4caf50; }
.fc2-moment-chips-down { color: #e57373; }

/* Stats tab — sparkline card */
.fc2-spark-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 16px 10px;
  margin-bottom: 16px;
}

.fc2-spark-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.fc2-spark-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}

.fc2-spark-delta {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fc2-spark-delta.up  { color: #4caf50; }
.fc2-spark-delta.down { color: #e57373; }

.fc2-spark-svg {
  width: 100%;
  height: 72px;
  display: block;
}

/* Stats tab — list rows */
.fc2-stat-list {
  display: flex;
  flex-direction: column;
}

.fc2-stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.fc2-stat-row:last-child { border-bottom: none; }

.fc2-row-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}

.fc2-row-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fc2-row-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.fc2-row-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
}

.fc2-row-val {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Grades tab */
.fc2-grades-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.fc2-grade-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 20px 8px 16px;
}

.fc2-grade-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  border: 2px solid;
}

.fc2-grade-circle.a {
  background: rgba(212,160,23,0.15);
  border-color: var(--gold, #d4af37);
  color: var(--gold, #d4af37);
}

.fc2-grade-circle.b {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

.fc2-grade-circle.c {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
}

.fc2-grade-icon {
  font-size: 18px;
}

.fc2-grade-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

.fc2-grade-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}

.fc2-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.fc2-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fc2-legend-dot.a { background: var(--gold, #d4af37); }
.fc2-legend-dot.b { background: rgba(255,255,255,0.4); }
.fc2-legend-dot.c { background: rgba(255,255,255,0.15); }

/* Empty state */
.fc2-empty {
  padding: 32px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}

.fc2-empty-moments {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  font-style: italic;
}

/* Footer */
.fc2-footer {
  padding: 12px 16px 16px;
}

.fc2-next-btn {
  width: 100%;
  background: var(--gold, #d4af37);
  border: none;
  border-radius: 28px;
  color: #1a0a00;
  font-size: 16px;
  font-weight: 800;
  padding: 16px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}

.fc2-next-btn:active { opacity: 0.8; }

/* ── Player bet piles (chips beside avatar, mid-street) ── */
.player-bet-pile {
  pointer-events: none;
  /* position, z-index, and edge coords set inline per seat */
}
.player-bet-pile .chip-face::after {
  display: none;
}

/* ── Avatar rank number — light tournament hint ──────────────────── */
.rank-num {
  position: absolute;
  pointer-events: none;
  line-height: 1;
  font-weight: 700;
  font-size: 11px;
  min-width: 18px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d4af37;
  border-radius: 8px;
  color: #7c3a10;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15);
  /* coords set inline per seat */
}
.rank-num--gold {
  color: #7c3a10;
}
.rank-num--gray {
  color: #7c3a10;
  opacity: 0.85;
}

.player-bet-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.fc2-footer--summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc2-play-again-btn {
  width: 100%;
  background: var(--gold, #d4af37);
  border: none;
  border-radius: 28px;
  color: #1a0a00;
  font-size: 16px;
  font-weight: 800;
  padding: 16px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}
.fc2-play-again-btn:active { opacity: 0.8; }

.fc2-done-link {
  background: none;
  border: none;
  color: var(--text-dim, rgba(255,255,255,0.45));
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fc2-done-link:active { opacity: 0.6; }


/* ── Online play screens (Phase 1) ───────────────────────────── */
#screen-online,
#screen-lobby-browser,
#screen-waiting-room {
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: url('/assets/splash-bg.png') center center / cover no-repeat, #0a0a2e;
  padding: 40px 24px;
}
.online-card {
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(10, 10, 40, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 24px 20px;
  backdrop-filter: blur(6px);
}
.online-title {
  margin: 0 0 6px;
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
}
.online-status {
  min-height: 18px;
  margin: 4px 0 0;
  text-align: center;
  color: #ffd479;
  font-size: 0.85rem;
}
.lobby-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}
.lobby-empty { text-align: center; color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.lobby-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
}
.lobby-row:active { transform: scale(0.98); }
.lobby-row-host { font-weight: 600; }
.lobby-row-count { color: rgba(255,255,255,0.65); font-size: 0.85rem; }
.lobby-code-row { display: flex; gap: 8px; }
.lobby-code-row .splash-name-input { flex: 1; text-transform: uppercase; }
.lobby-code-row .btn-primary { width: auto; padding-inline: 18px; }
.waiting-code {
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
}
#waiting-code { font-weight: 700; letter-spacing: 2px; color: #fff; }
.waiting-roster {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
}
.roster-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.roster-name { flex: 1; }
.roster-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.roster-tag.host { background: #f0a818; color: #1a0a2e; }
.roster-tag.you  { background: rgba(120,160,255,0.35); color: #fff; }
.btn-mini {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
}

.lobby-row-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: #1a0a2e;
  background: #f0a818;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ── DEV: simulated app/device chrome ─────────────────────────── */
/* Top & bottom bars that mimic the reduced play height some players have
   (status bar / banner / nav / ad). As flex children of #screen-game they
   steal vertical space, shrinking #game-area and forcing the player's
   hole cards up toward the community cards. Toggle with the "b" key. */
/* Shared bar styling; hidden until its body class turns it on. */
.sim-ui-bar {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #1e293b, #1e293b 10px, #283548 10px, #283548 20px);
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 50;
}
/* Independent top / second-top / bottom bars (toggled from Settings).
   Two stacked top bars (56 + 44) reproduce the mockup-hub chrome. */
body.sim-top    #sim-bar-top    { display: flex; height: 56px; }
body.sim-top2   #sim-bar-top2   { display: flex; height: 44px; }
body.sim-bottom #sim-bar-bottom { display: flex; height: 100px; }

/* Keep the fixed UI clear of whichever bar is present: push the hint panel
   below the top bar(s); lift next-hand / history above the bottom bar.
   (Stand-in for real device safe-areas.) */
body.sim-top              #hint-panel { top: calc(var(--hint-panel-top) + 56px); }
body.sim-top2             #hint-panel { top: calc(var(--hint-panel-top) + 44px); }
body.sim-top.sim-top2     #hint-panel { top: calc(var(--hint-panel-top) + 100px); }
body.sim-bottom #btn-next-hand    { bottom: calc(max(27px, env(safe-area-inset-bottom) + 7px) + 34px + 100px); }
body.sim-bottom #btn-hand-history { bottom: calc(max(27px, env(safe-area-inset-bottom) + 7px) + 90px); }

/* Card-overlap reflow — applied by JS (updateCardsCramped) ONLY when the
   player's hole cards actually intersect the community cards. Drops seat 0's
   avatar + hole cards down to clear the board; the puck follows via table.js.
   Seat 0 (human) only — never touches other seats or the default layout. */
/* Use transform (not `translate`) — the seat carries a JS-set inline
   `translate` (active-player lift) that would otherwise win. */
/* --cramp-shift is set by JS to the measured overlap (px), floored at 62.
   Hole cards drop 14px more than the avatar to keep the avatar nested at the
   card corner (preserves the original 62/76 spacing). */
body.cards-cramped #player-seat       { transform: translateX(-50%) translateY(var(--cramp-shift, 62px)); }
body.cards-cramped #player-hole-cards { transform: translateY(calc(var(--cramp-shift, 62px) + 14px)); }