/* =========================================================================
   Poker R2100 — Mobile Watch View
   ========================================================================= */

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

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

/* ============================ App Layout ================================ */
.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

.mode {
  display: inline-flex;
  border: 1px solid #145214;
  border-radius: 3px;
  overflow: hidden;
}
.mode button {
  background: #000;
  color: var(--g-dim);
  border: 0;
  border-right: 1px solid #145214;
  font: inherit;
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  min-height: 28px;
}
.mode button:last-child { border-right: 0; }
.mode button.on {
  color: var(--g);
  background: #062806;
  box-shadow: inset 0 0 6px rgba(57,255,57,.15);
}

select {
  background: #000;
  color: var(--g);
  border: 1px solid #145214;
  border-radius: 3px;
  font: inherit;
  font-size: 10px;
  padding: 3px 6px;
  min-height: 28px;
  max-width: 140px;
}

/* Controls */
.ctrl {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.ctrl button {
  background: #000;
  color: var(--g);
  border: 1px solid #145214;
  border-radius: 3px;
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  min-width: 28px;
  min-height: 28px;
}
.ctrl button.on {
  background: #062806;
  box-shadow: inset 0 0 6px rgba(57,255,57,.15);
}
.ctrl input[type=range] {
  width: 60px;
  accent-color: var(--g);
}
.statusline {
  color: var(--g-dim);
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 100px;
}
.statusline b { color: var(--g); }

/* ============================ Stage ===================================== */
.stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, #06280d 0%, #000 65%);
  min-height: 0;
}

.felt {
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  width: 88%; height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(8,40,18,.5) 0%, rgba(4,20,10,.35) 55%, transparent 75%);
  box-shadow: inset 0 0 50px rgba(0,0,0,.5);
  z-index: 0;
  pointer-events: none;
}

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

/* ============================ Board ==================================== */
.board {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  width: 90%;
  max-width: 340px;
}
.board-cards {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.board-cards .pc {
  width: 48px;
  height: 67px;
}
.board-cards .pc .c-tl, .board-cards .pc .c-br { font-size: 9px; width: 12px; }
.board-cards .pc .c-tl { top: 2px; left: 2px; }
.board-cards .pc .c-br { bottom: 2px; right: 2px; }
.board-cards .pc .pips { inset: 14px 6px 14px 6px; font-size: 12px; }
.board-cards .pc.ace .pips { font-size: 26px; }
.board-cards .pc .face-rank { font-size: 16px; }
.board-cards .pc .face-suit { font-size: 12px; }

.board-cards .pc:nth-child(1) { transform: rotate(-4deg); }
.board-cards .pc:nth-child(2) { transform: rotate(-2deg); }
.board-cards .pc:nth-child(3) { transform: rotate(0deg); }
.board-cards .pc:nth-child(4) { transform: rotate(2deg); }
.board-cards .pc:nth-child(5) { transform: rotate(4deg); }

.board-cards .pc.deal { animation: cardDeal .4s ease-out backwards; }
.board-cards .pc.deal:nth-child(1) { animation-delay: 0ms; }
.board-cards .pc.deal:nth-child(2) { animation-delay: 100ms; }
.board-cards .pc.deal:nth-child(3) { animation-delay: 200ms; }
.board-cards .pc.deal:nth-child(4) { animation-delay: 100ms; }
.board-cards .pc.deal:nth-child(5) { animation-delay: 100ms; }
@keyframes cardDeal {
  0% { transform: translateY(-40px) scale(.5) rotate(-15deg); opacity: 0; }
  60% { opacity: 1; }
  100% { opacity: 1; }
}

.bote {
  margin-top: 10px;
  font-size: 22px;
  letter-spacing: 2px;
  text-shadow: 0 0 12px var(--g), 0 0 2px #000;
}
.bote.pulse { animation: botePulse .5s ease-out; }
@keyframes botePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); color: var(--gold); text-shadow: 0 0 16px var(--gold); }
  100% { transform: scale(1); }
}

.pile {
  width: 80px;
  height: 40px;
  margin: 6px auto 0;
  position: relative;
}
.coin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--g);
  background: radial-gradient(circle at 35% 30%, #1a6a1a, #041804 70%);
  box-shadow: 0 0 4px rgba(57,255,57,.4), inset 0 0 0 2px rgba(0,0,0,.35);
}

.mesa {
  margin-top: 3px;
  font-size: 11px;
  color: var(--g-dim);
  letter-spacing: 1px;
}
.street {
  font-size: 9px;
  color: var(--g-dim);
  margin-top: 3px;
  letter-spacing: 0.5px;
}

/* ============================ Cards ==================================== */
.pc {
  position: relative;
  width: 56px; height: 78px;
  background: linear-gradient(135deg, #fbfdfb 0%, #e9efe9 100%);
  border: 1px solid #888;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.6);
  color: #111;
  overflow: hidden;
  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 4px, #0a330a 4px 8px),
    linear-gradient(135deg, #0a330a, #041804);
  border-color: var(--g-dim);
  box-shadow: 0 3px 6px rgba(0,0,0,.55), 0 0 6px 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: 22px; text-shadow: 0 0 8px var(--g);
  opacity: .85;
}
.pc.win {
  box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255,210,74,.7), 0 3px 6px 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 2px var(--gold), 0 0 8px rgba(255,210,74,.4), 0 3px 6px rgba(0,0,0,.5); }
  100% { box-shadow: 0 0 0 2px var(--gold), 0 0 20px rgba(255,210,74,.9), 0 3px 6px 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: 10px; line-height: 1.05; font-weight: 900;
  text-align: center; width: 14px; letter-spacing: -0.5px;
}
.pc .c-tl { top: 3px; left: 3px; }
.pc .c-br { bottom: 3px; right: 3px; transform: rotate(180deg); }
.pc .c-tl .suit, .pc .c-br .suit { font-size: 9px; }

/* Pips */
.pc .pips {
  position: absolute; inset: 16px 8px 16px 8px;
  font-size: 14px; line-height: 1;
}
.pc .pips span {
  position: absolute;
  transform: translate(-50%, -50%);
}
.pc.ace .pips {
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.pc.ace .pips span { position: static; transform: none; }

/* Face cards */
.pc .face-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.pc .face-rank { font-size: 20px; line-height: .9; font-weight: 900; }
.pc .face-suit { font-size: 15px; line-height: 1; }

/* ============================ Seats ==================================== */
.seat {
  position: absolute; z-index: 5;
  width: clamp(130px, 42vw, 168px);
  background: rgba(0,8,0,.88);
  border: 2px solid #1c7a1c;
  border-radius: 10px;
  padding: 8px 10px 7px;
  box-shadow: 0 4px 14px 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;
}
.side { display: none !important; }
.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 16px rgba(200,255,200,.35), inset 0 0 12px 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 .badge { color: #0b1a0b; border-color: #0b1a0b; }
.seat.actor::before {
  content: 'TURNO';
  position: absolute; left: 50%; top: -10px;
  transform: translateX(-50%);
  background: #0b1a0b; color: #c8f5c8;
  font-size: 8px; letter-spacing: 1.5px;
  padding: 1px 6px;
  border-radius: 3px;
  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; }
@keyframes foldTilt {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(6px) rotate(-3deg); opacity: .42; filter: grayscale(.5); }
}
.seat.folded-static { opacity: .42; filter: grayscale(.5); }
.seat.elim { opacity: .3; border-color: #5a2020; filter: grayscale(.6); }
.seat.zoom { transform: scale(1.05); z-index: 8; }
.seat.winner {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(255,210,74,.6), inset 0 0 16px 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 12px rgba(255,210,74,.4), inset 0 0 12px rgba(255,210,74,.08); }
  100% { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(255,210,74,.8), inset 0 0 18px rgba(255,210,74,.16); }
}
.seat.winner .stack-n { color: var(--gold); text-shadow: 0 0 8px var(--gold); }

.seat.highlight {
  border-color: #7fb0d8;
  box-shadow: 0 0 0 2px #7fb0d8, 0 0 18px rgba(127,176,216,.45);
}

/* Seat positions for mobile */
.s0 { top: 2%; left: 50%; transform: translateX(-50%); }
.s1 { bottom: 2%; left: 2%; }
.s2 { bottom: 2%; right: 2%; }

/* Dealer button */
.dealer {
  position: absolute; top: -10px; left: -10px;
  width: 20px; height: 20px; 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: 11px; font-weight: 900;
  box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.6);
  z-index: 7;
}
.seat.s1 .dealer { left: auto; right: -10px; }

/* Seat internals */
.seat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.seat-name {
  font-size: 11px; letter-spacing: 0.5px;
  text-shadow: 0 0 6px var(--g);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}
.seat-sub { font-size: 8px; color: var(--g-dim); margin-top: 1px; }
.timer-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.timer {
  width: 32px; height: 32px; position: relative; flex-shrink: 0;
}
.timer svg { width: 32px; height: 32px; transform: rotate(-90deg); }
.timer .bg { fill: none; stroke: #0d3d0d; stroke-width: 3; }
.timer .fg { fill: none; stroke: var(--g); stroke-width: 3; 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: 9px; text-shadow: 0 0 4px var(--g);
}
.lives { display: flex; gap: 2px; }
.life { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(236,241,243,.5); background: transparent; }
.life.lost { background: var(--red); border-color: var(--red); box-shadow: 0 0 3px var(--red); }
.seat-sub .ptype { margin-left: 3px; padding: 0 2px; border: 1px solid rgba(236,241,243,.25); color: var(--g-dim); font-size: 7px; text-transform: uppercase; }

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

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

/* Bet chips */
.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: 18px; height: 6px; border-radius: 50%;
  border: 1.5px solid var(--g);
  background: radial-gradient(circle at 40% 30%, var(--chip-green), var(--chip-green-deep));
  box-shadow: 0 0 4px rgba(57,255,57,.4), inset 0 -1px 0 rgba(0,0,0,.4);
  margin-top: -4px;
}
.bet-chips .bv {
  font-size: 10px; color: var(--gold); font-weight: 900;
  text-shadow: 0 0 4px #000, 0 0 6px var(--gold);
  margin-bottom: 1px;
}
.seat.s0 .bet-chips { left: 50%; bottom: -44px; transform: translateX(-50%); animation-name: betPop0; }
.seat.s1 .bet-chips { right: -24px; top: -24px; }
.seat.s2 .bet-chips { left: -24px; top: -24px; }
@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,.9);
  border: 1px solid var(--g);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--g);
  text-shadow: 0 0 5px var(--g);
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(57,255,57,.45);
  animation: bubblePop .3s ease-out;
}
.bubble::after {
  content: ''; position: absolute;
  width: 0; height: 0; border: 5px solid transparent;
}
.seat.s0 .bubble { left: 50%; bottom: -26px; transform: translateX(-50%); animation-name: bubblePop0; }
.seat.s0 .bubble::after { border-top-color: var(--g); top: -10px; left: 50%; margin-left: -5px; }
.seat.s1 .bubble { left: 50%; top: -28px; transform: translateX(-50%); animation-name: bubblePop1; }
.seat.s1 .bubble::after { border-bottom-color: var(--g); bottom: -10px; left: 50%; margin-left: -5px; }
.seat.s2 .bubble { left: 50%; top: -28px; transform: translateX(-50%); animation-name: bubblePop1; }
.seat.s2 .bubble::after { border-bottom-color: var(--g); bottom: -10px; left: 50%; margin-left: -5px; }
@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; } }

/* Flying chips */
.fly {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--g);
  background: radial-gradient(circle at 35% 30%, #2a8a2a, #041804);
  box-shadow: 0 0 6px var(--g);
  z-index: 15;
  pointer-events: none;
  animation: flychip .5s 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(.5); opacity: 0; }
}
/* Win burst */
.winburst {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 35% 30%, #ffe88a, #8a6a10);
  box-shadow: 0 0 8px var(--gold);
  z-index: 16; pointer-events: none;
  animation: winburst .8s ease-out forwards;
}
@keyframes winburst {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
}

/* Degraded notice */
.degraded {
  position: absolute; top: 46px; right: 8px; z-index: 6;
  font-size: 9px; color: #c9a227; border: 1px solid #c9a227; padding: 2px 6px; border-radius: 3px;
}

/* Landscape adjustments */
@media (orientation: landscape) {
  .seat { width: 140px; }
  .seat.s0 { top: 4%; }
  .seat.s1 { bottom: 4%; }
  .seat.s2 { bottom: 4%; }
  .board { top: 50%; max-width: 300px; }
  .board-cards .pc { width: 42px; height: 59px; }
  .board-cards .pc .c-tl, .board-cards .pc .c-br { font-size: 8px; }
  .board-cards .pc .pips { font-size: 10px; }
  .board-cards .pc.ace .pips { font-size: 22px; }
  .bote { font-size: 18px; }
  .ctrl input[type=range] { width: 40px; }
}

/* Small phones */
@media (max-height: 600px) {
  header { padding: 4px 6px; }
  .seat { width: 130px; padding: 6px 8px 5px; }
  .seat-name { font-size: 10px; }
  .pc { width: 44px; height: 62px; }
  .seat-mid .hole .pc { width: 44px; height: 62px; }
  .board-cards .pc { width: 38px; height: 53px; }
  .bote { font-size: 18px; }
  .stack-n { font-size: 12px; }
}