/* =========================================================================
   Poker R2100 — watch.css  (professional green theme, corrected cards)
   ========================================================================= */

:root {
  --g: #39ff39;
  --g-dim: #167a16;
  --g-deep: #041a04;
  --red: #e02424;
  --gold: #ffd24a;
  --gold-dim: #8a6a10;
  --ink: #0b120b;
  --felt: #0c4a18;
  --felt-deep: #06280d;
  --rail: #2a1410;
  --chip-green: #1d7a1d;
  --chip-green-deep: #052005;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  color: var(--g);
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  letter-spacing: .5px;
  overflow: hidden;
  background: #000;
  user-select: none;
}

/* ============================ App grid ================================== */
.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr minmax(180px, 220px);
  grid-template-rows: 46px 1fr;
}
/* Hide history before it crowds the two bottom seats */
@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none !important; }
}

/* ============================ Header =================================== */
header {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: #000;
  border-bottom: 1px solid #0c3a0c;
  font-size: 12px;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 6px; }
.brand .logo {
  color: var(--g); font-size: 18px;
  text-shadow: 0 0 10px var(--g);
  animation: glow 3s ease-in-out infinite alternate;
}
@keyframes glow {
  0% { text-shadow: 0 0 6px var(--g); }
  100% { text-shadow: 0 0 14px var(--g), 0 0 2px #fff; }
}
h1 { font-size: 13px; margin: 0; letter-spacing: 2px; text-shadow: 0 0 8px var(--g); }

.mode { display: inline-flex; border: 1px solid #145214; border-radius: 3px; overflow: hidden; }
.mode button, select, .ctrl button {
  background: #000; color: var(--g-dim); border: 0; font: inherit;
  padding: 4px 9px; cursor: pointer;
}
.mode button { border-right: 1px solid #145214; }
.mode button:last-child { border-right: 0; }
.mode button.on, .ctrl button.on { color: var(--g); background: #062806; box-shadow: inset 0 0 8px rgba(57,255,57,.15); }
select, .ctrl button { border: 1px solid #145214; color: var(--g); border-radius: 3px; }
.ctrl { display: flex; align-items: center; gap: 4px; }
.ctrl input[type=range] { width: 110px; accent-color: var(--g); }
.statusline { flex: 1; color: var(--g-dim); font-size: 11px; overflow: hidden; white-space: nowrap; }
.statusline b { color: var(--g); }
.status-link { color: inherit; text-decoration: none; }
.status-link:hover b { text-decoration: underline; }
.nav { display: flex; gap: 8px; }
a { color: var(--g-dim); text-decoration: none; }
a:hover { color: var(--g); text-shadow: 0 0 6px var(--g); }

/* ============================ Stage ===================================== */
.stage {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 58%, #06280d 0%, #000 70%);
}

/* Felt: subtle dark green (like the original table.html vibe) */
.felt {
  position: absolute;
  left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  width: 72%; height: 58%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(8,40,18,.55) 0%, rgba(4,20,10,.4) 55%, transparent 75%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.5);
  z-index: 0;
  pointer-events: none;
}
.rail { display: none; }
.felt::after { display: none; }

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 30; }

/* ============================ Board ==================================== */
.board {
  position: absolute;
  left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  min-width: min(520px, 92vw);
  width: min(520px, 92%);
}
.board-cards { display: flex; justify-content: center; gap: 14px; }
.board-cards .pc:nth-child(1) { transform: rotate(-6deg); }
.board-cards .pc:nth-child(2) { transform: rotate(-3deg); }
.board-cards .pc:nth-child(3) { transform: rotate(0deg); }
.board-cards .pc:nth-child(4) { transform: rotate(3deg); }
.board-cards .pc:nth-child(5) { transform: rotate(6deg); }
/* Only NEW cards animate (progressive deal: flop 3, turn 1, river 1) */
.board-cards .pc.deal { animation: cardDeal .45s ease-out backwards; }
.board-cards .pc.deal:nth-child(1) { animation-delay: 0ms; }
.board-cards .pc.deal:nth-child(2) { animation-delay: 120ms; }
.board-cards .pc.deal:nth-child(3) { animation-delay: 240ms; }
.board-cards .pc.deal:nth-child(4) { animation-delay: 120ms; }
.board-cards .pc.deal:nth-child(5) { animation-delay: 120ms; }
@keyframes cardDeal {
  0% { transform: translateY(-50px) scale(.5) rotate(-20deg); opacity: 0; }
  60% { opacity: 1; }
  100% { opacity: 1; }
}

.bote {
  margin-top: 16px;
  font-size: 30px;
  letter-spacing: 4px;
  text-shadow: 0 0 16px var(--g), 0 0 2px #000;
}
.bote.pulse { animation: botePulse .5s ease-out; }
@keyframes botePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); color: var(--gold); text-shadow: 0 0 20px var(--gold); }
  100% { transform: scale(1); }
}
.pile {
  width: 130px; height: 64px; margin: 10px auto 0; position: relative;
}
.coin {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--g);
  background: radial-gradient(circle at 35% 30%, #1a6a1a, #041804 70%);
  box-shadow: 0 0 6px rgba(57,255,57,.45), inset 0 0 0 3px rgba(0,0,0,.35);
}
.mesa {
  margin-top: 4px;
  font-size: 15px;
  color: var(--g-dim);
  letter-spacing: 2px;
}
.street { font-size: 11px; color: var(--g-dim); margin-top: 4px; letter-spacing: 1px; }

/* ============================ Cards (fixed) =========================== */
.pc {
  position: relative;
  width: 96px; height: 134px;
  background: linear-gradient(135deg, #fbfdfb 0%, #e9efe9 100%);
  border: 1px solid #888;
  border-radius: 9px;
  box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.6);
  color: #111;
  overflow: hidden;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.pc.red { color: var(--red); }
.pc.slot {
  background: transparent; border: 1px dashed rgba(20,80,20,.5); box-shadow: none;
}
.pc.back {
  background:
    repeating-linear-gradient(45deg, #062406 0 6px, #0a330a 6px 12px),
    linear-gradient(135deg, #0a330a, #041804);
  border-color: var(--g-dim);
  box-shadow: 0 4px 8px rgba(0,0,0,.55), 0 0 8px rgba(57,255,57,.2);
  color: var(--g);
}
.pc.back::after {
  content: '◈';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--g); font-size: 40px; text-shadow: 0 0 10px var(--g);
  opacity: .85;
}
.pc.win {
  box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(255,210,74,.7), 0 4px 8px rgba(0,0,0,.5);
  z-index: 2;
  animation: winGlow 1.2s ease-in-out infinite alternate;
}
@keyframes winGlow {
  0% { box-shadow: 0 0 0 3px var(--gold), 0 0 12px rgba(255,210,74,.4), 0 4px 8px rgba(0,0,0,.5); }
  100% { box-shadow: 0 0 0 3px var(--gold), 0 0 28px rgba(255,210,74,.9), 0 4px 8px rgba(0,0,0,.5); }
}
.pc.dim { opacity: .28; filter: grayscale(.7) brightness(.55); }

/* Corner index */
.pc .c-tl, .pc .c-br {
  position: absolute; font-size: 14px; line-height: 1.05; font-weight: 900;
  text-align: center; width: 18px; letter-spacing: -1px;
}
.pc .c-tl { top: 5px; left: 5px; }
.pc .c-br { bottom: 5px; right: 5px; transform: rotate(180deg); }
.pc .c-tl .suit, .pc .c-br .suit { font-size: 13px; }

/* Pips area: absolute positioning per rank */
.pc .pips {
  position: absolute; inset: 24px 16px 24px 16px;
  font-size: 22px; line-height: 1;
}
.pc .pips span {
  position: absolute;
  transform: translate(-50%, -50%);
}
/* Ace: single big suit */
.pc.ace .pips {
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
}
.pc.ace .pips span { position: static; transform: none; }

/* Face cards (J,Q,K): stacked rank + suit */
.pc .face-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
}
.pc .face-rank { font-size: 34px; line-height: .9; font-weight: 900; }
.pc .face-suit { font-size: 26px; line-height: 1; }

/* Seat (small) cards */
.seat-mid .pc { width: 64px; height: 90px; }
.seat-mid .pc .c-tl, .seat-mid .pc .c-br { font-size: 11px; width: 14px; }
.seat-mid .pc .pips { inset: 20px 12px 20px 12px; font-size: 16px; }
.seat-mid .pc.ace .pips { font-size: 36px; }
.seat-mid .pc .face-rank { font-size: 24px; }
.seat-mid .pc .face-suit { font-size: 18px; }

/* ============================ Seats ==================================== */
.seat {
  position: absolute; z-index: 5;
  width: clamp(168px, 28vw, 340px);
  background: rgba(0,8,0,.85);
  border: 2px solid #1c7a1c;
  border-radius: 12px;
  padding: 12px 16px 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease, background .25s ease, color .25s ease;
}
/* Subtle inverted chrome: who is deciding (cards stay normal) */
.seat.actor {
  color: #0b1a0b;
  background: linear-gradient(165deg, #d8f5d8 0%, #b6e6b6 55%, #9fd49f 100%);
  border-color: #163816;
  box-shadow: 0 0 0 2px #1a4a1a, 0 0 22px rgba(200,255,200,.35), inset 0 0 18px rgba(255,255,255,.25);
}
.seat.actor .seat-name,
.seat.actor .stack-n { color: #0b1a0b; text-shadow: none; }
.seat.actor .seat-sub,
.seat.actor .seat-stats,
.seat.actor .seat-stats b,
.seat.actor .eq,
.seat.actor .ptype { color: #1e3d1e; text-shadow: none; }
.seat.actor .eq { text-shadow: none; }
.seat.actor .badge { color: #0b1a0b; border-color: #0b1a0b; }
.seat.actor::before {
  content: 'TURNO';
  position: absolute; left: 50%; top: -12px;
  transform: translateX(-50%);
  background: #0b1a0b; color: #c8f5c8;
  font-size: 10px; letter-spacing: 2px;
  padding: 2px 8px;
  border-radius: 4px;
  text-shadow: none;
  animation: turnoBlink 1.2s ease-in-out infinite alternate;
}
@keyframes turnoBlink { 0% { opacity: .75; } 100% { opacity: 1; } }

.seat.folded { animation: foldTilt .5s ease-out forwards; }
.seat.s0.folded { animation: foldTilt0 .5s ease-out forwards; }
@keyframes foldTilt {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(8px) rotate(-3deg); opacity: .42; filter: grayscale(.5); }
}
@keyframes foldTilt0 {
  0% { transform: translateX(-50%) translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(8px) rotate(-3deg); opacity: .42; filter: grayscale(.5); }
}
.seat.folded-static { opacity: .42; filter: grayscale(.5); }
.seat.s0.folded-static { transform: translateX(-50%); }
.seat.s0.zoom { transform: translateX(-50%) scale(1.08); }
.seat.elim { opacity: .3; border-color: #5a2020; filter: grayscale(.6); }
.seat.zoom { transform: scale(1.08); z-index: 8; }
.seat.winner {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(255,210,74,.6), inset 0 0 22px rgba(255,210,74,.12);
  animation: winnerPulse 1s ease-in-out infinite alternate;
}
@keyframes winnerPulse {
  0% { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255,210,74,.4), inset 0 0 18px rgba(255,210,74,.08); }
  100% { box-shadow: 0 0 0 2px var(--gold), 0 0 32px rgba(255,210,74,.8), inset 0 0 24px rgba(255,210,74,.16); }
}
.seat.winner .stack-n { color: var(--gold); text-shadow: 0 0 10px var(--gold); }

.seat.highlight {
  border-color: #7fb0d8;
  box-shadow: 0 0 0 2px #7fb0d8, 0 0 24px rgba(127,176,216,.45);
}
.seat.highlight::after {
  content: 'MONITOR';
  position: absolute; left: 50%; bottom: -12px;
  transform: translateX(-50%);
  background: #000; color: #7fb0d8;
  font-size: 9px; letter-spacing: 2px;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.s0 { top: 2%; left: 50%; transform: translateX(-50%); }
.s0.zoom { transform: translateX(-50%) scale(1.08); }
.s1 { bottom: 3%; left: 3%; }
.s2 { bottom: 3%; right: 3%; }

/* Dealer button */
.dealer {
  position: absolute; top: -12px; left: -12px;
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ccc 70%, #999);
  color: #111; border: 2px solid #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.6);
  z-index: 7;
}
.seat.s1 .dealer { left: auto; right: -12px; }
.seat.s2 .dealer { left: -12px; right: auto; }

/* Seat internals */
.seat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.seat-name {
  font-size: 15px; letter-spacing: 1px;
  text-shadow: 0 0 8px var(--g);
  text-transform: uppercase;
}
.seat-sub { font-size: 10px; color: var(--g-dim); margin-top: 2px; }
.timer-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.timer {
  width: 44px; height: 44px; position: relative; flex-shrink: 0;
}
.timer svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.timer .bg { fill: none; stroke: #0d3d0d; stroke-width: 3.5; }
.timer .fg { fill: none; stroke: var(--g); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.timer.urgent .fg { stroke: var(--red); }
.timer .n {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; text-shadow: 0 0 6px var(--g);
}
.lives { display: flex; gap: 3px; }
.life { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(236,241,243,.5); background: transparent; box-shadow: 0 0 2px rgba(0,0,0,.4); }
.seat-sub .ptype { margin-left: 5px; padding: 0 3px; border: 1px solid rgba(236,241,243,.25); color: var(--g-dim); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.life.lost { background: var(--red); border-color: var(--red); box-shadow: 0 0 4px var(--red); }

.seat-mid { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.seat-mid .hole { display: flex; gap: 4px; }
.seat-mid .hole .pc.deal { animation: dealIn .35s ease-out backwards; }
.seat-mid .hole .pc.deal:nth-child(1) { animation-delay: 80ms; }
.seat-mid .hole .pc.deal:nth-child(2) { animation-delay: 160ms; }
@keyframes dealIn {
  0% { transform: translate(-120px, -80px) rotate(-30deg) scale(.7); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* Chip stack (proportional: 15 chips = 1500) */
.coin-stack { width: 46px; height: 44px; position: relative; margin-left: auto; }
.coin-stack i {
  position: absolute; left: 5px; width: 36px; height: 8px; border-radius: 50%;
  border: 2px solid var(--g);
  background: radial-gradient(circle at 40% 30%, var(--chip-green), var(--chip-green-deep));
  box-shadow: 0 0 5px rgba(57,255,57,.3), inset 0 -1px 0 rgba(0,0,0,.4);
}
.stack-n {
  font-size: 22px; min-width: 64px; text-align: right;
  text-shadow: 0 0 8px var(--g);
}
.seat-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--g-dim);
  border-top: 1px solid #0c3a0c;
  padding-top: 6px;
}
.seat-stats b { color: var(--g); }
.badge { border: 1px solid currentColor; padding: 0 5px; font-size: 9px; margin-left: 6px; border-radius: 3px; }
.eq {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 18px; color: #7ee787; text-shadow: 0 0 10px var(--g), 0 0 2px #000;
  letter-spacing: 1px;
}
.eq.none { color: var(--g-dim); opacity: .5; font-size: 12px; }

/* Bet chips attached to player */
.bet-chips {
  position: absolute; z-index: 6;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 0;
  pointer-events: none;
  animation: betPop .3s ease-out;
}
@keyframes betPop { 0% { transform: scale(.4); opacity: 0; } 100% { opacity: 1; } }
.bet-chips .bc {
  width: 26px; height: 9px; border-radius: 50%;
  border: 2px solid var(--g);
  background: radial-gradient(circle at 40% 30%, var(--chip-green), var(--chip-green-deep));
  box-shadow: 0 0 6px rgba(57,255,57,.4), inset 0 -1px 0 rgba(0,0,0,.4);
  margin-top: -5px;
}
.bet-chips .bv {
  font-size: 14px; color: var(--gold); font-weight: 900;
  text-shadow: 0 0 6px #000, 0 0 8px var(--gold);
  margin-bottom: 2px;
}
.seat.s0 .bet-chips { left: 50%; bottom: -64px; transform: translateX(-50%); animation-name: betPop0; }
.seat.s1 .bet-chips { right: -36px; top: -34px; }
.seat.s2 .bet-chips { left: -36px; top: -34px; }
@keyframes betPop0 { 0% { transform: translateX(-50%) scale(.4); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } }

/* Speech bubble */
.bubble {
  position: absolute; z-index: 9;
  background: rgba(0,0,0,.88);
  border: 1px solid var(--g);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 14px;
  color: var(--g);
  text-shadow: 0 0 6px var(--g);
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(57,255,57,.45);
  animation: bubblePop .3s ease-out;
}
.bubble::after {
  content: ''; position: absolute;
  width: 0; height: 0; border: 7px solid transparent;
}
.seat.s0 .bubble { left: 50%; bottom: -34px; transform: translateX(-50%); animation-name: bubblePop0; }
.seat.s0 .bubble::after { border-top-color: var(--g); top: -14px; left: 50%; margin-left: -7px; }
.seat.s1 .bubble { left: 50%; top: -36px; transform: translateX(-50%); animation-name: bubblePop1; }
.seat.s1 .bubble::after { border-bottom-color: var(--g); bottom: -14px; left: 50%; margin-left: -7px; }
.seat.s2 .bubble { left: 50%; top: -36px; transform: translateX(-50%); animation-name: bubblePop1; }
.seat.s2 .bubble::after { border-bottom-color: var(--g); bottom: -14px; left: 50%; margin-left: -7px; }
@keyframes bubblePop { 0% { transform: scale(.5); opacity: 0; } 100% { opacity: 1; } }
@keyframes bubblePop0 { 0% { transform: translateX(-50%) scale(.5); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } }
@keyframes bubblePop1 { 0% { transform: translateX(-50%) scale(.5); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } }

/* Degraded (no frames) */
.degraded {
  position: absolute; top: 60px; right: 14px; z-index: 6;
  font-size: 10px; color: #c9a227; border: 1px solid #c9a227; padding: 3px 8px; border-radius: 4px;
}

/* Flying chips */
.fly {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--g);
  background: radial-gradient(circle at 35% 30%, #2a8a2a, #041804);
  box-shadow: 0 0 8px var(--g);
  z-index: 15;
  pointer-events: none;
  animation: flychip .6s ease-in forwards;
}
@keyframes flychip {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.55); opacity: 0; }
}
/* Win burst (chips back to winner) */
.winburst {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 35% 30%, #ffe88a, #8a6a10);
  box-shadow: 0 0 10px var(--gold);
  z-index: 16; pointer-events: none;
  animation: winburst .9s ease-out forwards;
}
@keyframes winburst {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.5); opacity: 0; }
}

/* ============================ Side panel ============================== */
.side {
  border-left: 1px solid #0c3a0c;
  background: rgba(0,0,0,.82);
  display: flex; flex-direction: column;
  min-height: 0;
  opacity: .72;
  transition: opacity .2s;
}
.side:hover { opacity: 1; }
.side h2 {
  margin: 0; padding: 10px 10px 4px;
  font-size: 10px; color: var(--g-dim); letter-spacing: 1px;
}
.side-tools { padding: 0 10px 6px; }
.side-tools select { width: 100%; font-size: 10px; }
.log { flex: 1; overflow: auto; padding: 0 8px 8px; font-size: 10px; line-height: 1.35; }
.logline {
  padding: 4px 3px; border-bottom: 1px solid #061406; cursor: pointer; color: var(--g-dim);
  border-radius: 3px;
}
.logline:hover, .logline.cur { color: var(--g); background: #031503; }
.logline.cur { box-shadow: inset 2px 0 0 var(--g); }
.logline.gid { color: var(--g); border-bottom: 1px solid #0c3a0c; letter-spacing: .05em; cursor: default; }
.logline .msg { color: #ff9a9a; display: block; font-style: italic; }
.side-foot { padding: 6px 10px; font-size: 9px; color: #0d3d0d; border-top: 1px solid #0c3a0c; }

/* Scrollbar */
.log::-webkit-scrollbar { width: 8px; }
.log::-webkit-scrollbar-track { background: #000; }
.log::-webkit-scrollbar-thumb { background: #145214; border-radius: 4px; }
.log::-webkit-scrollbar-thumb:hover { background: var(--g-dim); }