/* ============================================================
   POKER — premium 3D design
   ============================================================ */
* { box-sizing: border-box; }

:root {
  --gold: #ffd76a;
  --gold-2: #e0a83a;
  --felt-1: #2b8a54;
  --felt-2: #17603c;
  --panel: rgba(10, 18, 14, .86);
  --panel-2: rgba(6, 12, 9, .92);
  --stroke: rgba(255, 255, 255, .14);
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #eef4f0;
  background:
    radial-gradient(1200px 700px at 50% 12%, #12241a 0%, #0a1410 55%, #050a08 100%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

#table { position: relative; width: 100vw; height: 100vh; perspective: 1600px; }

/* ===================== TABLE ===================== */
#felt {
  position: absolute; inset: 6%;
  border-radius: 50% / 46%;
  background:
    radial-gradient(ellipse at 50% 34%, var(--felt-1) 0%, #1e7046 40%, #124f2f 72%, #0a2f1c 100%);
  border: 16px solid #43291a;
  box-shadow:
    inset 0 0 140px rgba(0, 0, 0, .7),
    inset 0 6px 40px rgba(255, 255, 255, .06),
    0 26px 60px rgba(0, 0, 0, .75),
    0 0 0 2px rgba(0, 0, 0, .5);
}
#felt::before {
  content: '♠  ♥  ♣  ♦';
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
  font-size: 52px; letter-spacing: 44px; color: rgba(255, 255, 255, .055);
  white-space: nowrap; pointer-events: none;
}
#felt::after {
  content: '';
  position: absolute; inset: -30px;
  border-radius: 50% / 46%;
  border: 17px solid #54341f;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .12),
    inset 0 -3px 8px rgba(0, 0, 0, .5),
    0 22px 46px rgba(0, 0, 0, .66);
  pointer-events: none;
}

/* ===================== CENTER (pot + board cards) ===================== */
#center {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  text-align: center; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
#board { display: flex; gap: 10px; justify-content: center; min-height: 96px; order: 0; }

#pot {
  order: -1; margin: 0 0 14px;
  font-size: 22px; font-weight: 900; letter-spacing: .6px; color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.65), 0 8px 20px rgba(0,0,0,.7);
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.42));
  padding: 6px 20px; border-radius: 999px;
  border: 1px solid rgba(255, 215, 106, .35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.5);
}
/* an EMPTY pot pill still painted its background/border/shadow (the same "ghost shadow"
   the empty seats had): keep the space (no layout jump) but make it invisible */
#pot:empty { visibility: hidden; }
#potchips:empty { visibility: hidden; }
#boardmsg {
  margin-top: 10px; min-height: 20px;
  font-size: 15px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 2px 10px rgba(0,0,0,.95);
}
#boardmsg.pulse { animation: bmPulse .6s ease-out; }
@keyframes bmPulse {
  0%   { transform: scale(.7);  opacity: .2; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
#myhand {
  margin-top: 6px; min-height: 18px;
  font-size: 14px; font-weight: 800; color: #8dffb8;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
/* big centred notice while a cash table waits for players */
#waitingOverlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  z-index: 55; pointer-events: none;
}
#waitingOverlay.show { display: flex; }
#waitingOverlay .wt-box {
  text-align: center; padding: 22px 34px; border-radius: 18px;
  background: rgba(8,16,22,.74); border: 1px solid rgba(255,215,106,.45);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#waitingOverlay .wt-main {
  font: 900 clamp(22px, 3.4vw, 42px)/1.15 'Segoe UI', system-ui, sans-serif;
  color: #ffe9a8; letter-spacing: .5px; text-shadow: 0 3px 14px rgba(0,0,0,.8);
  animation: wtPulse 2s ease-in-out infinite;
}
@keyframes wtPulse { 0%,100% { opacity: .85; } 50% { opacity: 1; } }

/* deck of cards on the table (kept for the whole hand; source of the deal).
   z-index below #center (2) so it never covers the board cards on small screens. */
#deck {
  position: absolute; left: 36%; top: 45%; transform: translate(-50%, -50%);
  width: 78px; height: 108px; z-index: 1; pointer-events: none;   /* same size as the board cards */
  display: none;
}
#deck.show { display: block; }
#deck i {
  position: absolute; left: 0; top: 0; width: 78px; height: 108px; border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,235,190,.60) 0 3px, rgba(255,235,190,.12) 4px 26%, transparent 27%),
    repeating-linear-gradient(45deg, rgba(255,235,190,.16) 0 4px, transparent 4px 12px),
    repeating-linear-gradient(-45deg, rgba(255,235,190,.16) 0 4px, transparent 4px 12px),
    linear-gradient(160deg, #c8353f 0%, #a01e29 46%, #6c0f18 100%);
  border: 1px solid #f0dcb0;
  box-shadow: 0 4px 9px rgba(0,0,0,.55), inset 0 0 0 2px #e6c88a, inset 0 0 0 5px #7d1019;
}
#deck i:nth-child(1) { transform: translate(-9px, -7px); }
#deck i:nth-child(2) { transform: translate(-3px, -2px); }
#deck i:nth-child(3) { transform: translate(3px, 2px); }
#deck i:nth-child(4) { transform: translate(9px, 7px); }

/* ===================== CARDS ===================== */
.card {
  position: relative; width: 64px; height: 90px; border-radius: 8px;
  background: linear-gradient(158deg, #ffffff 0%, #f7f7f9 52%, #e8e9ee 100%);
  color: #1a1a1a;
  font-weight: 800; font-size: 26px;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, .45),
    0 2px 0 #cdcfd6,
    inset 0 1px 0 #fff,
    inset 0 -2px 4px rgba(0,0,0,.08);
  border: 1px solid rgba(0, 0, 0, .16);
  overflow: hidden;
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card.red { color: #d32f2f; }
.card .ci {
  position: absolute; top: 3px; left: 4px;
  display: flex; flex-direction: column; align-items: center; line-height: .95;
}
.card .ci b { font-size: .58em; }
.card .ci i { font-size: .46em; font-style: normal; }
.card .cp {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05em; opacity: .95;
}
.card.mini { width: 62px; height: 86px; font-size: 22px; border-radius: 8px; }
.card.mini .ci { top: 3px; left: 4px; }
.card.pending { opacity: .35; }

.card.back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,235,190,.60) 0 2px, rgba(255,235,190,.12) 3px 26%, transparent 27%),
    repeating-linear-gradient(45deg, rgba(255,235,190,.16) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(255,235,190,.16) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #c8353f 0%, #a01e29 46%, #6c0f18 100%);
  border: 1px solid #f0dcb0;
  box-shadow:
    0 6px 14px rgba(0,0,0,.55),
    inset 0 0 0 2px #e6c88a,
    inset 0 0 0 4px #7d1019,
    inset 0 0 16px rgba(0,0,0,.45);
}
.card.back::after {
  content: '';
  position: absolute; inset: 6px; border-radius: 6px;
  border: 1px solid rgba(240, 220, 176, .62);
  background: radial-gradient(circle at 50% 50%, rgba(255,235,190,.30) 0 5px, transparent 6px);
  box-shadow: inset 0 0 8px rgba(0,0,0,.35);
}
.card.best {
  outline: 3px solid var(--gold); outline-offset: -1px;
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(255,215,106,.75), 0 8px 16px rgba(0,0,0,.45);
  transform: translateY(-4px);
}

/* board cards (3D flip) */
#board .flipcard { width: 78px; height: 108px; perspective: 900px; opacity: .55; transition: opacity .45s ease; }
#board .flipcard.revealed { opacity: 1; }
.fc-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.25,.9,.3,1);
}
.flipcard.revealed .fc-inner { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0; border-radius: 8px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.fc-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,235,190,.60) 0 3px, rgba(255,235,190,.12) 4px 26%, transparent 27%),
    repeating-linear-gradient(45deg, rgba(255,235,190,.16) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(255,235,190,.16) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #c8353f 0%, #a01e29 46%, #6c0f18 100%);
  border: 1px solid #f0dcb0;
  box-shadow:
    0 8px 18px rgba(0,0,0,.55),
    inset 0 0 0 3px #e6c88a,
    inset 0 0 0 5px #7d1019,
    inset 0 0 20px rgba(0,0,0,.45);
}
.fc-back::after {
  content: ''; position: absolute; inset: 7px; border-radius: 6px;
  border: 1px solid rgba(240, 220, 176, .60);
  background: radial-gradient(circle at 50% 50%, rgba(255,235,190,.30) 0 7px, transparent 8px);
  box-shadow: inset 0 0 10px rgba(0,0,0,.35);
}
.fc-front {
  transform: rotateY(180deg);
  display: block; background: linear-gradient(158deg, #ffffff 0%, #f6f6f8 52%, #e7e8ed 100%);
  color: #1a1a1a; font-weight: 800; font-size: 31px;
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 8px 16px rgba(0,0,0,.45), 0 2px 0 #cdcfd6, inset 0 1px 0 #fff;
  overflow: hidden;
}
.fc-front .ci { position: absolute; top: 3px; left: 5px; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.fc-front .ci b { font-size: .58em; }
.fc-front .ci i { font-size: .46em; font-style: normal; }
.fc-front .cp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.05em; }
.fc-front.red { color: #d32f2f; }
.fc-front.best {
  outline: 3px solid var(--gold); outline-offset: -1px;
  box-shadow: 0 0 20px rgba(255,215,106,.85), 0 8px 16px rgba(0,0,0,.45);
}

/* ===================== SEATS ===================== */
.seat {
  position: absolute; transform: translate(-50%, -50%);
  width: 160px; padding: 4px 10px; border-radius: 28px;   /* capsule button */
  background: none;          /* the capsule colour is painted by ::after, ON TOP of the cards */
  border: 0;
  text-align: left; font-size: 13px;
  z-index: 8;                /* capsule above its own cards (.seat-cards is z-index 4) */
  transition: opacity .2s;
}
/* opaque capsule body: painted ABOVE the cards, so the inner half of each card is hidden */
.seat::after {
  content: '';
  position: absolute; inset: 0; border-radius: 28px;
  background: linear-gradient(180deg, #141c18, #080e0b);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
  z-index: 5;
  pointer-events: none;
}
/* empty seat: small dashed capsule with the Sit button */
.seat.empty { width: 108px; padding: 7px; text-align: center; }
.seat.empty::after { border-style: dashed; }
.seat.turn::after {
  border-color: #ffd76a;
  box-shadow: 0 0 0 2px rgba(255, 215, 106, .9), 0 0 24px rgba(255, 215, 106, .55), 0 8px 18px rgba(0,0,0,.6);
}
/* ---- SPOTLIGHT on the player who is on turn ----
   Every seat carries a small rig light that hangs BEHIND the player (outside the
   table) and a soft cone of light falling from it onto the capsule. The whole unit
   is rotated with --spot-angle, computed by renderSeats(): from above for the top
   seats, from the upper/lower CORNER (45deg / 135deg) for the side chairs - the only
   free space around the table - and from below for my own seat at the bottom. It is
   painted above the felt but under the capsule (::after), the cards and the name. */
.seat-spot {
  --spot-w: 300px;      /* cone width where it reaches the player */
  --spot-len: 74px;     /* cone length */
  --spot-gap: 24px;     /* distance from the capsule centre to the wide end */
  display: none;
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; z-index: 1;
  transform: rotate(var(--spot-angle, 0deg));
  pointer-events: none;
}
.seat.turn .seat-spot { display: block; }
/* the light cone: narrow at the lamp, wider at the player, fading out on the way */
.seat-spot::before {
  content: '';
  position: absolute; left: 50%; bottom: var(--spot-gap);
  width: var(--spot-w); height: var(--spot-len);
  transform: translateX(-50%);
  background:
    radial-gradient(44% 24% at 50% 0%, rgba(255, 249, 220, .78), rgba(255, 231, 160, .22) 60%, transparent 78%),
    linear-gradient(to bottom, rgba(255, 243, 196, .42) 0%, rgba(255, 226, 152, .16) 50%, rgba(255, 215, 106, 0) 100%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(2.2px);
  animation: seatSpotPulse 2.4s ease-in-out infinite alternate;
}
/* the fixture itself: a small dark can with a warm lens facing the player and a thin
   mount bar going back to the "ceiling" */
.seat-spot-lamp {
  position: absolute; left: 50%;
  bottom: calc(var(--spot-gap) + var(--spot-len));
  width: 32px; height: 20px;
  transform: translateX(-50%);
  border-radius: 7px 7px 9px 9px;
  background: linear-gradient(180deg, #4a5058 0%, #262c32 45%, #12161a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 3px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.5);
}
.seat-spot-lamp::before {   /* the lens / light exit, pointing at the player */
  content: '';
  position: absolute; left: 50%; top: 100%;
  width: 26px; height: 8px;
  transform: translate(-50%, -1px);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #fffdf2 0%, #ffe9a8 45%, rgba(255,215,106,.15) 100%);
  box-shadow: 0 0 16px 5px rgba(255,226,150,.55);
}
.seat-spot-lamp::after {    /* the bar it hangs from */
  content: '';
  position: absolute; left: 50%; bottom: 100%;
  width: 5px; height: 14px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(70,78,88,0), #39404a);
}
/* when there is no room for the fixture (my own seat has the action bar right
   behind it), only the beam is drawn - it comes from behind the bar */
.seat-spot.no-lamp .seat-spot-lamp { display: none; }
/* a very slow "breathing" of the light (barely noticeable, it just feels alive) */
@keyframes seatSpotPulse {
  from { opacity: .55; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .seat-spot::before { animation: none; opacity: .85; }
}
.seat.winner::after {
  border-color: #7fffa8;
  animation: winPulse 1s ease-in-out infinite alternate;
}
@keyframes winPulse {
  from { box-shadow: 0 0 18px rgba(127,255,168,.6), 0 8px 18px rgba(0,0,0,.6); }
  to   { box-shadow: 0 0 38px rgba(127,255,168,1), inset 0 0 24px rgba(127,255,168,.35), 0 8px 18px rgba(0,0,0,.6); }
}
.seat.me::after {
  background: linear-gradient(180deg, #183626, #081a10);
  border-color: rgba(255, 215, 106, .45);
}
.seat.folded { opacity: 1; }
.seat.folded .name, .seat.folded .chips, .seat.folded .action { opacity: .55; }
/* all cards (mine too) fly away at fold — hidden from the seat */
.seat.folded .cards { visibility: hidden; }

/* but after the animation ends, MY cards reappear at my seat,
   semi-transparent, so I can follow the rest of the hand */
.seat.me.folded.show-folded-cards .cards {
  visibility: visible;
  opacity: .45;
  transition: opacity .4s ease-in;
}
/* the FOLD pill stays fully visible on top of them */
.seat.me.folded.show-folded-cards .action { opacity: 1; }
.seat.allin::after { border-color: #ff5c5c; box-shadow: 0 0 22px rgba(255,92,92,.6), 0 8px 18px rgba(0,0,0,.6); }
.seat.away   { opacity: .45; }
.seat.away::after { border-style: dashed; }
/* ---- capsule body: name + stack centred in the capsule, avatar on its left edge ---- */
.seat-body { display: flex; align-items: center; position: relative; z-index: 6; }
.seat-avatar { position: absolute; left: -32px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.seat-avatar .av,
.seat-avatar .avph {
  width: 44px; height: 44px; border-radius: 50%; display: block; object-fit: cover;
  border: 2px solid rgba(255, 215, 106, .55);
  box-shadow: 0 3px 8px rgba(0,0,0,.7);
}
.seat-avatar .avph {
  background: linear-gradient(180deg, #2c3b33, #16211b);
  border-color: rgba(255,255,255,.18); border-style: dashed;
}
.seat-avatar .fl {
  position: absolute; right: -7px; bottom: -4px;
  z-index: 9;                    /* above the timer-ring SVG */
  line-height: 0;
}
.seat-avatar .fl img {
  width: 20px; height: 14px;
  object-fit: cover; display: block;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.55);
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.75);
}

/* turn timer drawn on the player's capsule (the oval around avatar/name/chips/country) */
.seat-timer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 6;   /* above the capsule, under the avatar */
  opacity: 0; transition: opacity .2s;
}
.seat-timer.show { opacity: 1; }
.seat-timer .st-bg { fill: none; stroke: rgba(0, 0, 0, .45); stroke-width: 3; }
.seat-timer .st-fg {
  fill: none; stroke: #ffd76a; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;   /* pathLength = 1, set from JS */
  transition: stroke .2s, stroke-dashoffset .25s linear;
  filter: drop-shadow(0 0 4px rgba(255, 215, 106, .6));
}

.seat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.seat-info .name {
  width: 100%; text-align: center;
  font-weight: 800; font-size: 13px; color: #eef4f0; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat-info .chips {
  display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 1px;
  align-self: stretch; padding-top: 1px; flex-wrap: nowrap; white-space: nowrap;
  border-top: 1px solid rgba(255, 255, 255, .14);   /* thin divider between name and stack */
}
.seat-info .chips, .seat-info .chips .num { color: #7fffa8; font-weight: 900; font-size: 13px; }
/* tournament stack in big blinds: smaller than the chip count, never wider than the seat */
.seat-info .chips .num { white-space: nowrap; }
.seat-info .chips .stack-bb { font-size: 10px; opacity: .7; margin-left: 4px; white-space: nowrap; }

/* player cards: they come out from UNDER the capsule - half of each card stays
   hidden behind the opaque capsule body (.seat::after, z-index 5) */
.seat-cards {
  position: absolute;
  display: flex; gap: 3px;
  z-index: 4;                    /* UNDER the capsule (::after is z-index 5), over the felt */
  pointer-events: none;
}
/* seats on the LOWER half of the table (me included): cards half out of the TOP edge */
.seat.cards-up .seat-cards {
  left: 50%;
  top: -56px;                    /* only half of the card comes out */
  transform: translateX(-50%);
}
/* seats on the UPPER half: cards half out of the BOTTOM edge */
.seat.cards-down .seat-cards {
  left: 50%;
  bottom: -30px;                 /* top players' cards must not touch the table frame */
  transform: translateX(-50%);
}
/* seats on the LEFT side: cards half out of the RIGHT edge */
.seat.cards-right .seat-cards {
  left: 100%;
  top: 50%;
  margin-left: -26px;            /* overlap: half of the card goes under the capsule */
  transform: translateY(-50%);
}
/* seats on the RIGHT side: cards half out of the LEFT edge */
.seat.cards-left .seat-cards {
  right: 100%;
  top: 50%;
  margin-right: -26px;
  transform: translateY(-50%);
}
.seat-cards .card.mini {
  width: 58px; height: 80px;
  font-size: 22px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,.65), 0 1px 0 #b9bcc4;
}
/* a card still being dealt: hidden (but keeps its layout) until its flying copy lands */
.seat-cards .card.dealing { visibility: hidden; }
/* my own cards: bigger and sitting higher, so the middle of the card
   is clearly visible above the capsule */
.seat.me .seat-cards .card.mini {
  width: 78px; height: 108px;
  font-size: 29px;
}
.seat.me.cards-up .seat-cards { top: -78px; }
/* second card slightly rotated (fan effect) */
.seat-cards .card.mini:nth-child(2) {
  transform: rotate(4deg);
  transform-origin: bottom left;
}

/* current action, shown under the capsule */
.seat .action {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px; white-space: nowrap;
  font-weight: 900; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  z-index: 6;
}
.seat .action:not(:empty) {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #12100a;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.seat.folded .action:not(:empty) { background: linear-gradient(180deg,#e0524a,#a8271f); color: #fff; }

.seat .awaytag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg,#6a6a6a,#3d3d3d); color: #fff;
  font-size: 9px; font-weight: 900; letter-spacing: .8px;
  padding: 2px 9px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,.55);
  z-index: 6;
}
/* win-percentage badge styling lives further down (the single .seat .eqbadge rule) */
.seat.away .eqbadge { top: -34px; }   /* never overlap the AWAY tag */
/* sit-out countdown (10:00 ticking down), reset by the server each time the player sits out */
.seat .awaycount {
  position: absolute; bottom: -11px; right: -11px;
  min-width: 34px; padding: 2px 6px; border-radius: 999px;
  background: linear-gradient(180deg, #ff8a5c, #d1471f); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: .3px; text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 3px 8px rgba(0,0,0,.65); z-index: 9; pointer-events: none;
}

/* short speech bubble with the message, shown for 3 seconds on the seat of whoever just wrote */
.seat .chatbubble {
  position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%);   /* centred on the seat capsule */
  /* width:max-content -> the bubble is NOT clamped to the half-capsule on its right
     (with a bare "left:50%" the shrink-to-fit width only has the seat/2 available,
     which wrapped even a short word over several lines) */
  width: max-content; max-width: 320px; padding: 5px 12px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #2b3a33, #1a2520);
  color: #eef4f0; font-size: 14px; font-weight: 800; line-height: 1.15; white-space: normal;
  word-break: break-word;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 6px 16px rgba(0,0,0,.6);
  z-index: 12; pointer-events: none;
  animation: chatBubblePop .25s ease-out;
}
.seat .chatbubble::after {
  content: ''; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: #2b3a33;
}
@keyframes chatBubblePop {
  from { transform: translateX(-50%) scale(.6); opacity: .2; }
  to   { transform: translateX(-50%) scale(1);  opacity: 1; }
}
.sitbtn {
  width: 100%; padding: 9px; cursor: pointer;
  position: relative; z-index: 6;   /* above the capsule ::after background */
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  border: none; border-radius: 9px; font-weight: 900; color: #12100a;
  box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .06s ease, box-shadow .06s ease;
}
.sitbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }

/* ===================== CHIPS (classic denominations) ===================== */
.chipstack { position: relative; display: inline-block; width: 22px; vertical-align: bottom; margin-right: 6px; }
.chipstack i {
  position: absolute; left: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 7px/1 Arial, Helvetica, sans-serif; color: #fff; letter-spacing: -.3px;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
  background-clip: padding-box;
  border: 2px dashed rgba(255,255,255,.78);
  box-shadow: 0 2px 3px rgba(0,0,0,.55), inset 0 -3px 5px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.45);
}
.chipstack i::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
}
.chipstack i.c1    { background: radial-gradient(circle at 34% 28%, #a8d8ff 0 12%, #4a90d9 58%, #1e4a7a 100%); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.55); }
.chipstack i.c5    { background: radial-gradient(circle at 34% 28%, #ff9a9a 0 12%, #e23b3b 58%, #8f1414 100%); }
.chipstack i.c10   { background: radial-gradient(circle at 34% 28%, #8ec2ff 0 12%, #2f6fd2 58%, #143a7a 100%); }
.chipstack i.c25   { background: radial-gradient(circle at 34% 28%, #93e6ae 0 12%, #2fae5a 58%, #146b32 100%); }
.chipstack i.c100  { background: radial-gradient(circle at 34% 28%, #ff8f8f 0 12%, #d32029 58%, #700a10 100%); }
.chipstack i.c500  { background: radial-gradient(circle at 34% 28%, #cba6ff 0 12%, #7a3fbf 58%, #3f1a70 100%); }
.chipstack i.c1000 { background: radial-gradient(circle at 34% 28%, #fff3c0 0 12%, #d4af37 58%, #8a6d12 100%); color: #3a2b00; text-shadow: none; }
.chipstack.bank i { width: 18px; height: 18px; font-size: 6px; border-width: 1px; }
#bets { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* D / SB / BB discs on the felt (no longer attached to the capsule) */
#markers { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.markerwrap {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; gap: 4px; align-items: center; justify-content: center;
}
.marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font: 900 10px/1 Arial, Helvetica, sans-serif; letter-spacing: .3px;
  box-shadow:
    0 2px 5px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(0,0,0,.25);
  border: 1.5px solid rgba(255,255,255,.85);
}
.marker.m-d  { background: radial-gradient(circle at 35% 30%, #ffffff, #dcdcdc 60%, #a8a8a8); color: #111; }
.marker.m-sb { background: radial-gradient(circle at 35% 30%, #cdefff, #7fd4ff 60%, #3a9fd6); color: #06120b; }
.marker.m-bb { background: radial-gradient(circle at 35% 30%, #ffe4c9, #ffb27f 60%, #d67b3a); color: #06120b; }
/* win-percentage badge, attached above each all-in seat */
.seat .eqbadge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 2px 9px; border-radius: 999px;
  font: 800 12px/1.3 Arial, Helvetica, sans-serif; color: #06170f;
  background: linear-gradient(180deg, #fff3c4, #f6c94a 60%, #d9a520);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 3px 9px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.8);
  white-space: nowrap; z-index: 5; pointer-events: none;
}
/* bottom-half seats draw their cards out of the TOP edge, so lift the win-% badge
   above the cards instead of letting it sit on top of them */
.seat.cards-up .eqbadge { top: -80px; }
.seat.me.cards-up .eqbadge { top: -102px; }   /* my own cards are taller */
/* all-in win-% overlay: a separate layer above seats/cards/topbar, so the badge
   is readable no matter where the player sits around the table */
#equity { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.eqovl {
  position: absolute; transform: translate(-50%, -50%);
  padding: 2px 9px; border-radius: 999px;
  font: 800 12px/1.3 Arial, Helvetica, sans-serif; color: #06170f;
  background: linear-gradient(180deg, #fff3c4, #f6c94a 60%, #d9a520);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 3px 9px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.8);
  white-space: nowrap;
}
.betpile {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 0;                  /* container only: no pill background / border / shadow */
}
/* wrapper for the discs: a fixed 22px box centred in the column, so the stack
   sits exactly on the bet spot (the number goes BELOW it, not beside it) */
.betpile .pile {
  display: block;             /* block, not flex, so siblings cannot influence it */
  position: relative;
  width: 22px;                /* fixed = chip width -> exact centring on the bet spot */
  margin: 0 auto;             /* centre the stack inside the .betpile column */
  text-align: center;         /* keeps the stack centred when mobile shrinks it to 15px */
  min-height: 22px;
}
.betpile .pile .chipstack { margin-right: 0; }   /* no 6px offset -> exact centring */
.betpile .num {
  color: var(--gold); font-weight: 900; font-size: 11px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  white-space: nowrap;
  text-align: center;         /* centred on the column, not glued to the left */
}

/* .flychip is no longer used: all chip animations go through .flypile */

/* The compact pile that flies from the pot to the winner (a single div) */
.flypile {
  position: absolute; width: 30px; height: 30px;
  transform: translate(-50%,-50%);
  z-index: 17; pointer-events: none;
  transition: transform 950ms cubic-bezier(.25,.9,.3,1), opacity 320ms 700ms;
}
.flypile i {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 7px/1 Arial, Helvetica, sans-serif; color: #fff;
  letter-spacing: -.3px;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
  border: 2px dashed rgba(255,255,255,.78);
  box-shadow:
    0 2px 4px rgba(0,0,0,.6),
    inset 0 -3px 5px rgba(0,0,0,.35),
    inset 0 2px 3px rgba(255,255,255,.45);
}
/* same colours as #potchips / .chipstack */
.flypile i.c1    { background: radial-gradient(circle at 34% 28%, #a8d8ff 0 12%, #4a90d9 58%, #1e4a7a 100%); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.55); }
.flypile i.c5    { background: radial-gradient(circle at 34% 28%, #ff9a9a 0 12%, #e23b3b 58%, #8f1414 100%); }
.flypile i.c10   { background: radial-gradient(circle at 34% 28%, #8ec2ff 0 12%, #2f6fd2 58%, #143a7a 100%); }
.flypile i.c25   { background: radial-gradient(circle at 34% 28%, #93e6ae 0 12%, #2fae5a 58%, #146b32 100%); }
.flypile i.c100  { background: radial-gradient(circle at 34% 28%, #ff8f8f 0 12%, #d32029 58%, #700a10 100%); }
.flypile i.c500  { background: radial-gradient(circle at 34% 28%, #cba6ff 0 12%, #7a3fbf 58%, #3f1a70 100%); }
.flypile i.c1000 { background: radial-gradient(circle at 34% 28%, #fff3c0 0 12%, #d4af37 58%, #8a6d12 100%); color: #3a2b00; text-shadow: none; }

/* Total value shown BELOW the flying pile (bets + winnings) */
.flypile .flyval {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, 2px);
  font: 900 12px/1 "Segoe UI", system-ui, sans-serif;
  color: #ffd76a; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.75);
  pointer-events: none;
}
.flyamt {
  position: absolute; transform: translate(-50%, -50%); z-index: 16;
  pointer-events: none; color: #fff; font-weight: 900; font-size: 14px;
  text-shadow: 0 2px 6px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,.8);
  transition: transform 1s cubic-bezier(.25,.9,.3,1), opacity .4s;
}
.flycard {
  /* same look AND size as the deck cards, so the deal reads as the deck's TOP card leaving */
  position: absolute; width: 78px; height: 108px; border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,235,190,.60) 0 3px, rgba(255,235,190,.12) 4px 26%, transparent 27%),
    repeating-linear-gradient(45deg, rgba(255,235,190,.16) 0 4px, transparent 4px 12px),
    repeating-linear-gradient(-45deg, rgba(255,235,190,.16) 0 4px, transparent 4px 12px),
    linear-gradient(160deg, #c8353f 0%, #a01e29 46%, #6c0f18 100%);
  border: 1px solid #f0dcb0;
  box-shadow: 0 3px 7px rgba(0,0,0,.5), inset 0 0 0 2px #e6c88a, inset 0 0 0 5px #7d1019;
  transform: translate(-50%, -50%);
  z-index: 14; pointer-events: none;
  /* no transition here: the motion is driven by requestAnimationFrame */
}
.flycard::after { display: none; }   /* the deck cards have no inner ::after */
.flycard.big { width: 78px; height: 108px; }   /* board deal: matches #board .flipcard */

/* ===================== CONTROL PANEL ===================== */
#controls {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  justify-content: center; max-width: 94vw;
  background: linear-gradient(180deg, rgba(12, 20, 16, .95), rgba(6, 11, 9, .95));
  padding: 13px 20px; border-radius: 16px;
  z-index: 20;
  border: 1px solid rgba(255, 215, 106, .28);
  box-shadow: 0 20px 45px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#controls button {
  padding: 12px 20px; border: none; border-radius: 11px;
  font-weight: 900; cursor: pointer; font-size: 15px; letter-spacing: .3px;
  color: #12100a;
  box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .06s ease, box-shadow .06s ease, outline-color .1s;
}
#controls button:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3); }
/* poker-room style: pulse my action buttons while it is my turn (size presets stay static) */
#controls.turn-active button:not(.pre):not(.bsize) { animation: actionPulse 1.3s ease-in-out infinite; }
@keyframes actionPulse {
  0%, 100% { box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 0 rgba(255,214,120,0); }
  50%      { box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45), 0 0 16px 5px rgba(255,214,120,.8); }
}
@media (prefers-reduced-motion: reduce) {
  #controls.turn-active button:not(.pre):not(.bsize) { animation: none; }
}
/* quick bet-size presets: Min / 1/2 Pot / 2/3 Pot / Pot / All-in */
#controls .sizing { display: inline-flex; gap: 5px; flex-wrap: wrap; align-items: center; }
#controls button.bsize {
  padding: 6px 10px; font-size: 11px; font-weight: 800; letter-spacing: .2px; border-radius: 8px;
  background: linear-gradient(180deg, #3a4a57, #232c33); color: #dfe8ef;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
#controls button.bsize:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
#controls .ctl-info { color: var(--gold); font-weight: 800; font-size: 14px; }
.b-fold  { background: linear-gradient(180deg, #e0524a, #ab231b); color: #fff; }
.pr-row input {
  flex: 1; min-width: 0; background: #16211b; color: #ffe7a8; border: 1px solid var(--stroke);
  border-radius: 8px; padding: 7px 8px; font-weight: 700;
}
.b-check { background: linear-gradient(180deg, #67e394, #1ea455); }
.b-call  { background: linear-gradient(180deg, #6bb9f7, #1f74c4); color: #fff; }
.b-raise { background: linear-gradient(180deg, #ffcd6b, #e08a12); }
.b-raise.b-allin, .b-call.b-allin { background: linear-gradient(180deg, #ff7a7a, #c62828); color: #fff; }
#controls .pre { display: inline-flex; align-items: center; }
#controls button.sel { outline: 3px solid var(--gold); outline-offset: 2px; color: #12100a; }
.tick {
  display: inline-block; width: 15px; height: 15px; margin-right: 8px;
  border-radius: 4px; border: 2px solid rgba(0, 0, 0, .55);
  background: rgba(255, 255, 255, .45); position: relative; vertical-align: -2px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.tick.on { background: #0b0b0b; }
.tick.on::after {
  content: '✓'; color: #fff; font-size: 11px; font-weight: 900;
  position: absolute; left: 1px; top: -4px;
}
/* ===== raise slider = a progress bar: dark track + FIXED "V" chevron tape + gradient fill ===== */
#raiseAmt, #preRaiseAmt {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px; margin: 0; padding: 0;
  background: transparent; box-shadow: none; outline: none;
  position: relative; z-index: 3;
}
#raiseAmt::-webkit-slider-runnable-track, #preRaiseAmt::-webkit-slider-runnable-track { background: transparent; border: none; height: 8px; }
#raiseAmt::-moz-range-track, #preRaiseAmt::-moz-range-track { background: transparent; border: none; height: 8px; }
/* the arrow thumb */
#raiseAmt::-webkit-slider-thumb, #preRaiseAmt::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 40px; height: 28px; border: none; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2322E3A0'/%3E%3Cstop offset='.3' stop-color='%23FFD93D'/%3E%3Cstop offset='.6' stop-color='%23FF8A3D'/%3E%3Cstop offset='.82' stop-color='%23FF3D77'/%3E%3Cstop offset='1' stop-color='%23A64DFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 11.5 H22 V5.5 L34 14 L22 22.5 V16.5 H1 Z' fill='url(%23a)' stroke='%23241000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M2.5 12 H21 V7.8 L29 13.9' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(255,217,61,.6)) drop-shadow(0 0 12px rgba(166,77,255,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.7));
  animation: glowPulse 1.6s ease-in-out infinite;
}
#raiseAmt::-moz-range-thumb, #preRaiseAmt::-moz-range-thumb {
  width: 40px; height: 28px; border: none; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2322E3A0'/%3E%3Cstop offset='.3' stop-color='%23FFD93D'/%3E%3Cstop offset='.6' stop-color='%23FF8A3D'/%3E%3Cstop offset='.82' stop-color='%23FF3D77'/%3E%3Cstop offset='1' stop-color='%23A64DFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 11.5 H22 V5.5 L34 14 L22 22.5 V16.5 H1 Z' fill='url(%23a)' stroke='%23241000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M2.5 12 H21 V7.8 L29 13.9' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(255,217,61,.6)) drop-shadow(0 0 12px rgba(166,77,255,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.7));
  animation: glowPulse 1.6s ease-in-out infinite;
}
/* --- mobile-safe: the visible arrow is an overlay (.knob) so it ALWAYS sits on the track --- */
#raiseAmt, #preRaiseAmt { height: 28px; }
#raiseAmt::-webkit-slider-thumb, #preRaiseAmt::-webkit-slider-thumb { background: transparent; filter: none; animation: none; }
#raiseAmt::-moz-range-thumb, #preRaiseAmt::-moz-range-thumb { background: transparent; filter: none; animation: none; }
#raiseAmt::-webkit-slider-runnable-track, #preRaiseAmt::-webkit-slider-runnable-track { margin: 0; }
#raiseAmt::-moz-range-track, #preRaiseAmt::-moz-range-track { margin: 0; }
#controls .sliderwrap { height: 28px; }
#controls .sliderwrap .knob {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  width: 40px; height: 28px; z-index: 4; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2322E3A0'/%3E%3Cstop offset='.3' stop-color='%23FFD93D'/%3E%3Cstop offset='.6' stop-color='%23FF8A3D'/%3E%3Cstop offset='.82' stop-color='%23FF3D77'/%3E%3Cstop offset='1' stop-color='%23A64DFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 11.5 H22 V5.5 L34 14 L22 22.5 V16.5 H1 Z' fill='url(%23a)' stroke='%23241000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M2.5 12 H21 V7.8 L29 13.9' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255,217,61,.6)) drop-shadow(0 0 12px rgba(166,77,255,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.7));
  animation: glowPulse 1.6s ease-in-out infinite;
}
/* --- bigger + thicker arrow (larger knob and hit area) --- */
#raiseAmt, #preRaiseAmt { height: 30px; }
#raiseAmt::-webkit-slider-thumb, #preRaiseAmt::-webkit-slider-thumb { width: 44px; height: 30px; }
#raiseAmt::-moz-range-thumb, #preRaiseAmt::-moz-range-thumb { width: 44px; height: 30px; }
#controls .sliderwrap { height: 30px; }
#controls .sliderwrap .knob {
  width: 44px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2322E3A0'/%3E%3Cstop offset='.3' stop-color='%23FFD93D'/%3E%3Cstop offset='.6' stop-color='%23FF8A3D'/%3E%3Cstop offset='.82' stop-color='%23FF3D77'/%3E%3Cstop offset='1' stop-color='%23A64DFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 10 H24 V4 L42 15 L24 26 V20 H2 Z' fill='url(%23a)' stroke='%23241000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M4 11.5 H23 V7 L33 14.5' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,217,61,.5)) drop-shadow(0 0 10px rgba(166,77,255,.4)) drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
  50%      { filter: drop-shadow(0 0 7px rgba(255,217,61,.9)) drop-shadow(0 0 16px rgba(166,77,255,.6)) drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
}
/* wrapper: dark track + FIXED chevron tape + gradient fill + the input (arrow) on top */
#controls .sliderwrap { position: relative; display: inline-flex; align-items: center; width: 150px; height: 24px; vertical-align: middle; }
#controls .sliderwrap::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 8px; border-radius: 999px; background: rgba(0,0,0,.6);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
}
#controls .sliderwrap .tape {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; padding: 0 7px; pointer-events: none;
}
#controls .sliderwrap .tape i {
  width: 8px; height: 14px; display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2322E3A0'/%3E%3Cstop offset='.3' stop-color='%23FFD93D'/%3E%3Cstop offset='.6' stop-color='%23FF8A3D'/%3E%3Cstop offset='.82' stop-color='%23FF3D77'/%3E%3Cstop offset='1' stop-color='%23A64DFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1.6 2 L6.4 7 L1.6 12' fill='none' stroke='url(%23v)' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .18;
  animation: chevLight 1.4s linear infinite;
}
#controls .sliderwrap .tape i:nth-child(2) { animation-delay: .18s; }
#controls .sliderwrap .tape i:nth-child(3) { animation-delay: .36s; }
#controls .sliderwrap .tape i:nth-child(4) { animation-delay: .54s; }
#controls .sliderwrap .tape i:nth-child(5) { animation-delay: .72s; }
#controls .sliderwrap .tape i:nth-child(6) { animation-delay: .9s; }
#controls .sliderwrap .tape i:nth-child(7) { animation-delay: 1.08s; }
#controls .sliderwrap .tape i:nth-child(8) { animation-delay: 1.26s; }
#controls .sliderwrap .fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 8px; width: 0; z-index: 2;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, #1ea455, #44d17f 30%, #ffd93d 60%, #ff8a3d 82%, #ff3d77 100%);
  background-repeat: no-repeat; background-position: left center;
  box-shadow: 0 0 8px rgba(255,205,107,.35);
}
@media (prefers-reduced-motion: reduce) {
  #controls .sliderwrap .knob { animation: none; }
  #controls .sliderwrap .tape i { animation: none; opacity: .6; }
}
@keyframes chevLight {
  0%, 55%, 100% { opacity: .18; filter: none; }
  25%           { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,217,61,.9)) drop-shadow(0 0 10px rgba(255,61,119,.6)); }
}
#raiseVal, #preRaiseVal { color: var(--gold); font-weight: 900; min-width: 54px; font-size: 15px; }

/* ===================== TOAST / STATUS ===================== */
#toast {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.75));
  padding: 16px 28px; border-radius: 14px;
  font-weight: 900; color: var(--gold);
  font-size: clamp(16px, 1.7vw, 23px); line-height: 1.35;
  text-align: center; white-space: pre-line;
  max-width: min(88vw, 720px); box-sizing: border-box;
  border: 1px solid rgba(255,215,106,.35);
  box-shadow: 0 14px 34px rgba(0,0,0,.7);
  opacity: 0; transition: opacity .3s; z-index: 60; pointer-events: none;
}
#toast.show { opacity: 1; }

#status {
  order: -2; margin: 0 0 6px; transform: translateY(-24px);   /* just above the pot */
  background: none; border: none; box-shadow: none; border-radius: 0; padding: 0;
  /* long TV-style banner (TEXAS HOLD'EM • NO LIMIT • ROOM • BLINDS): smaller + wraps instead of overflowing */
  font-size: clamp(10px, 1.4vw, 20px); font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255, 255, 255, .32);
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  max-width: min(1400px, 90vw); white-space: normal; line-height: 1.25;
  z-index: 1; pointer-events: none;   /* behind seats/cards so it never covers them */
}
#status:empty { display: none; }

/* ===================== TOP BAR ===================== */
#topbar {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 8px; align-items: center; z-index: 30; flex-wrap: wrap; justify-content: flex-end;
}
#topbar button {
  background: linear-gradient(180deg, #2b3a33, #1a2520);
  color: #e6f2ea; border: 1px solid rgba(255,255,255,.14);
  padding: 9px 13px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 5px 0 rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .06s ease, box-shadow .06s ease;
}
/* red poker chip drawn in CSS for the Blinds button (there is no chip emoji) */
#topbar .chipicon {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  vertical-align: -2px; margin-right: 5px;
  border: 2px dashed rgba(255, 255, 255, .85);
  background: radial-gradient(circle at 34% 28%, #ff9a9a 0 12%, #e23b3b 58%, #8f1414 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.35);
}
#topbar button:hover { background: linear-gradient(180deg, #34463d, #1f2c26); }
#topbar button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
#topbar #leaveBtn { background: linear-gradient(180deg,#4a3a2a,#2b2118); }
#topbar #soundBtn.off { background: linear-gradient(180deg,#3a3a3a,#222); color: #9a9a9a; }
#topbar #botBtn { background: linear-gradient(180deg,#2f7d55,#1b4d34); }
#topbar #awayBtn { background: linear-gradient(180deg,#4a4257,#2a2533); }
#topbar #logoutBtn { background: linear-gradient(180deg,#3a2f4a,#241d33); }
/* guest/spectator theme picker (top bar, right after Sound).
   Dark pill + light text so it stays readable on every theme. */
#topbar select.guest-theme {
  background: linear-gradient(180deg,#2b3a33,#12211c);
  color: #eafaf1; border: 1px solid rgba(255,255,255,.2);
  padding: 9px 11px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 800; font-family: inherit;
  box-shadow: 0 5px 0 rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  max-width: 46vw;
}
#topbar select.guest-theme:hover { background: linear-gradient(180deg,#34463d,#1f2c26); }
#topbar select.guest-theme option { background: #12211c; color: #eafaf1; }

/* ===================== TABLE INFO (top-left) ===================== */
/* how many players are sitting at the table and how many of them are bots
   (feature flag: POKER_TABLE_INFO_ENABLED; the bots part only while a bot is seated) */
#tableinfo {
  position: absolute; left: 14px; top: 14px; z-index: 14;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px;
  font: 800 11px/1 Arial, Helvetica, sans-serif; letter-spacing: .2px;
  color: #dff3e6; white-space: nowrap; pointer-events: none;
  background: rgba(8, 18, 13, .62);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .38);
}
#tableinfo .ti-b { color: #ffd76a; }

/* ===================== ACCOUNT / AUTH ===================== */
/* No permanent login button: the account modal opens centered when a visitor clicks Sit */
#auth {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 200; display: none;
}
#auth.show { display: block; }
.authbox {
  width: 320px; max-width: 88vw;
  background: linear-gradient(180deg, rgba(14, 26, 20, .62), rgba(6, 12, 9, .70));   /* transparent: the table stays visible */
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px; padding: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.authtitle { font-size: 18px; font-weight: 900; color: var(--gold); margin-bottom: 3px; }
.authsub { font-size: 12px; opacity: .75; margin-bottom: 14px; }

/* Login / Register tabs (two forms inside the same modal) */
.authtabs { display: flex; gap: 6px; margin-bottom: 12px; }
.authtab {
  flex: 1 1 0; width: auto; margin: 0; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  color: #cfe0d6; font-weight: 900; font-size: 14px; box-shadow: none;
}
.authtab.active { background: linear-gradient(180deg,#67e394,#1ea455); color: #04150c; border-color: transparent; }
.authpane { display: block; }
.authbox input {
  width: 100%; margin: 6px 0; padding: 11px 13px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .55); color: #eee; font-size: 14px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
.authbox input:focus { outline: none; border-color: var(--gold); }
.authbox button {
  width: 100%; margin: 6px 0; padding: 11px 13px;
  border: none; border-radius: 10px; cursor: pointer;
  font-weight: 900; font-size: 14px;
  box-shadow: 0 5px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .06s ease, box-shadow .06s ease;
}
.authbox button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.authbox #btnLogin { background: linear-gradient(180deg,#67e394,#1ea455); color: #04150c; }
.authbox #btnRegister { background: linear-gradient(180deg,#33465f,#22303f); color: #dbe9ff; }
.authbox #btnClose { background: transparent; color: #b9b9b9; font-weight: 700; box-shadow: none; }
.authbox #btnClose:hover { color: #fff; }
#authMsg { min-height: 16px; margin-top: 6px; font-size: 12px; color: #ff9a9a; }

/* ---- tournament dialog form: two columns so the box fits without a long scroll ---- */
#trForm.trFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px;
  align-items: start;
}
#trForm.trFormGrid > div { min-width: 0; }
#trForm.trFormGrid .authlbl { display: block; font-size: 11px; line-height: 1.35; }
/* phones / very narrow boxes: back to a single column */
@media (max-width: 520px) {
  #trForm.trFormGrid { grid-template-columns: minmax(0, 1fr); }
}

/* generic confirmation modal (reuses the auth-box look) */
#confirmBox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 14px;
  background: rgba(0, 0, 0, .55);
}
#confirmBox.show { display: flex; }
#confirmBox .authbox { width: 320px; max-width: 88vw; }
#confirmBox #confirmYes { background: linear-gradient(180deg,#67e394,#1ea455); color: #04150c; }
#confirmBox #confirmNo { background: transparent; color: #b9b9b9; font-weight: 700; box-shadow: none; }
#confirmBox #confirmNo:hover { color: #fff; }
#blinds { position: absolute; left: 14px; bottom: 62px; z-index: 42; display: none; }
#blinds.show { display: block; }
#blinds input[type=number] { -moz-appearance: textfield; }

.empty { opacity: .3; font-weight: 700; }

/* ===================== SIDE PANEL: CHAT + GAME INFO ===================== */
#sidepanel {
  position: absolute; right: 0; bottom: 10px; z-index: 12;   /* always below the action bar */
  width: min(45vw, 500px); max-width: 45vw;   /* wide chat / game-info / hands bar */
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(8,14,11,.86), rgba(4,8,6,.86));
  border: 1px solid var(--stroke);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

/* desktop: when the panel is closed, a small "peek" of ~3 lines from the
   ACTIVE tab (chat or game info) stays visible under the tab bar, without the
   input row. The inactive pane is already hidden inline by showPanelTab().
   No effect on mobile because #sidepanel is display: none anyway. */
body:not(.panel-open) .sp-pane {
  height: 64px !important;
  padding: 2px 6px !important;
}
body:not(.panel-open) .sp-row,
body:not(.panel-open) .sp-hint {
  display: none !important;
}
/* tab header */
.sp-tabs { display: flex; align-items: center; gap: 3px; padding: 3px 4px; border-bottom: 1px solid var(--stroke); }
.sp-tab {
  flex: 1 1 0; cursor: pointer; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #a9c3b6; font-weight: 800; font-size: 10px;
  padding: 4px 6px; letter-spacing: .3px;
}
.sp-tab:hover { color: #e6f2ea; background: rgba(255,255,255,.05); }
.sp-tab.active { color: #06170f; background: linear-gradient(180deg, var(--gold), var(--gold-2)); }
.sp-badge {
  display: none; min-width: 18px; text-align: center;
  background: #e0524a; color: #fff; font-weight: 900; font-size: 11px;
  border-radius: 999px; padding: 1px 6px; margin-right: 2px;
}
.sp-pane { padding: 6px 8px; display: flex; flex-direction: column; height: 240px; overflow: hidden; box-sizing: border-box; }

/* chat tab */
.sp-chat {
  height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  font-size: 12px; line-height: 1.4; color: #d7f3e2;
  display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255,215,106,.40) rgba(0,0,0,.25);
}
.cm { display: flex; align-items: baseline; gap: 5px; }
.cm-time { order: -2; font-size: 10px; opacity: .5; flex-shrink: 0; }
.cm-name { order: -1; font-weight: 900; color: #9fe6bd; white-space: nowrap; flex-shrink: 0; }
.cm.me .cm-name { color: var(--gold); }
.cm-text { flex: 1; min-width: 0; word-break: break-word; white-space: pre-wrap; }
.cm.me .cm-text { color: #fff; }
.sp-row { display: flex; gap: 6px; margin-top: 7px; flex: 0 0 auto; }
.sp-row input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--stroke); background: rgba(0,0,0,.5); color: #eee; font-size: 13px;
}
.sp-row input:focus { outline: none; border-color: var(--gold); }
.sp-row input:disabled { opacity: .5; }
.sp-row button {
  border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer;
  font-weight: 900; font-size: 13px; color: #12100a;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
}
.sp-row button:disabled { opacity: .45; cursor: default; }
.sp-hint { min-height: 14px; margin-top: 4px; font-size: 11px; color: #ff9a9a; flex: 0 0 auto; }
.sp-row #chatEmoji {
  flex: 0 0 auto; padding: 8px 10px; font-size: 16px; line-height: 1;
  background: linear-gradient(180deg,#2b3a33,#1a2520); color: #e6f2ea;
  border: 1px solid var(--stroke);
}
.sp-row #chatEmoji:disabled { opacity: .45; cursor: default; }

/* emoji picker modal (reuses the auth-box look) */
#emojiBox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 14px;
  background: rgba(0, 0, 0, .55);
}
#emojiBox.show { display: flex; }
#emojiBox .authbox { width: 340px; max-width: 92vw; }
.emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  max-height: 230px; overflow-y: auto; margin: 6px 0;
}
.emoji-cell {
  cursor: pointer; font-size: 20px; line-height: 1; padding: 5px 0; text-align: center;
  border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid transparent;
}
.emoji-cell:hover { background: rgba(255,255,255,.14); border-color: var(--gold); }
#emojiBox #emojiClose { background: transparent; color: #b9b9b9; font-weight: 700; box-shadow: none; }
#emojiBox #emojiClose:hover { color: #fff; }

/* game info tab: the original play-by-play log, now a pane inside the panel */
#tablelog {
  width: auto; max-width: none; height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  background: none; border: none; box-shadow: none; padding: 0;
  font: 12px/1.45 ui-monospace, "Cascadia Mono", monospace; color: #d7f3e2;
  opacity: .95;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 106, .40) rgba(0, 0, 0, .25);
}
#tablelog div { white-space: normal; word-break: break-word; }
/* thin, translucent-gold scrollbar (shared by the chat and the log) */
#tablelog::-webkit-scrollbar, .sp-chat::-webkit-scrollbar { width: 8px; height: 8px; }
#tablelog::-webkit-scrollbar-track, .sp-chat::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); border-radius: 8px; }
#tablelog::-webkit-scrollbar-thumb, .sp-chat::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 106, .35); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
#tablelog::-webkit-scrollbar-thumb:hover, .sp-chat::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 106, .60); background-clip: padding-box;
}

/* ===================== MOBILE ===================== */
@media (max-width: 820px) {
  /* NOTE: phone sizes for seats, cards, felt, board and deck are defined in
     mobile.css (loaded after this file) so they live in a single place.
     Desktop is untouched. */
  .seat-timer .st-bg, .seat-timer .st-fg { stroke-width: 2.5; }
  .seat-info .name, .seat-info .chips, .seat-info .chips .num { font-size: 11px; }
  .fc-front { font-size: 22px; }
  #pot { font-size: 18px; padding: 5px 14px; }
  #potchips { width: 74px; height: 46px; margin: 6px auto 0; }
  #potchips i { width: 20px; height: 20px; font-size: 7px; }
  #potchips .potval { font-size: 11px; bottom: 0; }
  #controls button { padding: 10px 14px; font-size: 13px; }
  #sidepanel { width: 300px; max-width: 72vw; }
  .sp-chat { height: 116px; }
  #tablelog { max-height: 116px; font-size: 10px; }
  #raiseAmt, #preRaiseAmt { width: 110px; }
}

/* very small screens: let the panel span the width, lifted just above the action bar */
@media (max-width: 560px) {
  #sidepanel {
    left: 8px; right: 8px; width: auto; max-width: none; bottom: 84px;
    border-radius: 12px;
  }
  .sp-chat { height: 120px; }
  #tablelog { max-height: 120px; }
}

/* ===================== HAND HISTORY / REPLAY ===================== */
#replay {
  position: fixed; inset: 0; z-index: 400; display: none;
  align-items: center; justify-content: center; padding: 14px;
  background: rgba(0,0,0,.66);
}
#replay.show { display: flex; }

.rp-box {
  width: min(1180px, 98vw); height: min(780px, 94vh);
  display: grid; grid-template-columns: 400px 1fr; gap: 12px;
  padding: 12px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(22,33,27,.99), rgba(8,14,11,.99));
  border: 1px solid var(--stroke);
  box-shadow: 0 26px 70px rgba(0,0,0,.75);
}
.rp-side { display: flex; flex-direction: column; min-height: 0; }
.rp-sideh {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 900; letter-spacing: .6px; color: var(--gold);
  padding: 2px 4px 10px; font-size: 14px;
}
.rp-x {
  background: linear-gradient(180deg, #2b3d33, #16211b); color: #ffe7a8;
  border: 1px solid var(--stroke); border-radius: 8px; cursor: pointer;
  width: 28px; height: 26px; font-weight: 900;
}
.rp-list { flex: 1; overflow: auto; padding-right: 4px; }
/* cash / tournament filter pills above the hand list */
.rp-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 2px 9px; }
.rp-filter {
  background: linear-gradient(180deg, #2b3d33, #16211b); color: #cfe2d7;
  border: 1px solid var(--stroke); border-radius: 999px; padding: 5px 11px;
  font: 800 11px/1 'Segoe UI', system-ui, sans-serif; cursor: pointer;
  transition: color .15s, border-color .15s, filter .15s;
}
.rp-filter:hover { color: #fff; border-color: rgba(255,215,106,.45); filter: brightness(1.08); }
.rp-filter.active { color: #12100a; background: linear-gradient(180deg, #ffd76a, #e0a72a); border-color: transparent; }
.rp-find {
  flex: 1; min-width: 96px; padding: 5px 10px; border-radius: 999px;
  background: #16211b; color: #ffe7a8; border: 1px solid var(--stroke);
  font: 700 11px/1 'Segoe UI', system-ui, sans-serif;
}
.rp-find:focus { outline: none; border-color: rgba(255,215,106,.6); }
.rp-empty { opacity: .6; font-size: 12px; padding: 10px 2px; }
.rp-item {
  background: linear-gradient(180deg, rgba(38,54,45,.9), rgba(16,26,20,.9));
  border: 1px solid var(--stroke); border-radius: 10px; padding: 8px 10px;
  margin-bottom: 8px; cursor: pointer; transition: border-color .15s, transform .1s;
}
.rp-item:hover { border-color: var(--gold); transform: translateY(-1px); }
.rp-item.sel  { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.rp-item.win     { border-left: 3px solid #7fffa8; }
.rp-item.lose    { border-left: 3px solid #e0524a; }
.rp-item.watched { border-left: 3px solid #6b8b7c; }
.rp-item.watched .rp-net { color: #b9c6bf; font-weight: 700; }
.rp-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.rp-head b { color: var(--gold); }
.rp-head span { opacity: .65; font-size: 11px; }
.rp-sub { font-size: 11px; opacity: .85; margin-top: 3px; display: flex; justify-content: space-between; gap: 6px; }
.rp-cards { letter-spacing: .5px; font-weight: 800; }
.rp-net { color: #7fffa8; }
.rp-item.lose .rp-net { color: #ff8a80; }

.rp-view { display: flex; flex-direction: column; min-height: 0; }
.rp-head2 {
  display: flex; gap: 10px; align-items: baseline; padding: 2px 2px 8px;
  font-size: 14px; font-weight: 900; color: #fff;
}
.rp-head2 b { color: var(--gold); }
.rp-head2 span { font-size: 12px; opacity: .7; font-weight: 700; }
.rp-net2 { margin-left: auto; color: #7fffa8; }

.rp-table {
  position: relative; flex: 1; min-height: 300px;
  border-radius: 46% / 40%; border: 1px solid rgba(255,215,106,.25);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(56,120,86,.55), rgba(11,44,29,.95) 70%),
    linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.55));
  box-shadow: inset 0 0 60px rgba(0,0,0,.6);
}
.rp-center {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1;
}
.rp-street { font-size: 11px; letter-spacing: 2px; font-weight: 900; color: rgba(255,255,255,.45); }
.rp-board { display: flex; gap: 5px; min-height: 56px; }
/* winning combination under the replay board (what the hand was won with) */
.rp-win {
  min-height: 13px; text-align: center;
  font: 800 11px/1.25 "Segoe UI", system-ui, sans-serif;
  color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.rp-pot { font-size: 14px; font-weight: 900; color: var(--gold); text-shadow: 0 2px 6px rgba(0,0,0,.8); }

.rp-seats, .rp-bets { position: absolute; inset: 0; pointer-events: none; }

/* replay seats: the same capsule look as the live table (avatar + flag + name + stack) */
.rt-seat {
  position: absolute; transform: translate(-50%,-50%);
  width: 122px; padding: 3px 8px; border-radius: 20px;
  background: linear-gradient(180deg, #141c18, #080e0b);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
  text-align: left; font-size: 10px; z-index: 6;
}
.rt-seat.me     { background: linear-gradient(180deg, #183626, #081a10); border-color: rgba(255,215,106,.45); }
.rt-seat.turn   { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,215,106,.85), 0 0 16px rgba(255,215,106,.5); }
.rt-seat.folded { opacity: .55; }
.rt-seat.out    { opacity: .6; border-style: dashed; }
.rt-seat.allin  { border-color: #ff5c5c; }
.rt-seat.winner { border-color: #7fffa8; box-shadow: 0 0 18px rgba(127,255,168,.7); }

.rt-body { display: flex; align-items: center; gap: 7px; }
#replay .rt-seat .who { position: relative; line-height: 0; flex-shrink: 0; }
.rt-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.rt-name { font-weight: 800; font-size: 11px; color: #eef4f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-stack { color: #7fffa8; font-weight: 900; font-size: 11px; }

/* cards come out of the capsule towards the middle of the table */
.rt-cards { position: absolute; display: flex; gap: 3px; z-index: 7; }
.rt-seat.rt-up .rt-cards    { left: 50%; bottom: 100%; margin-bottom: 3px; transform: translateX(-50%); }
.rt-seat.rt-down .rt-cards  { left: 50%; top: 100%;    margin-top: 3px;    transform: translateX(-50%); }
.rt-seat.rt-left .rt-cards  { right: 100%; top: 50%;   margin-right: 5px;  transform: translateY(-50%); }
.rt-seat.rt-right .rt-cards { left: 100%;  top: 50%;   margin-left: 5px;   transform: translateY(-50%); }

.rt-act {
  position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%);
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #12100a;
  font-weight: 900; font-size: 9px; letter-spacing: .4px; z-index: 8;
}
.rt-seat.folded .rt-act { background: linear-gradient(180deg,#e0524a,#a8271f); color: #fff; }
.rt-win {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  color: #7fffa8; font-weight: 900; font-size: 11px; white-space: nowrap; z-index: 9;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.rt-d {
  position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; line-height: 18px;
  border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d7d7d7 70%, #a9a9a9);
  color: #111; font-size: 9px; font-weight: 900; z-index: 10;
}
.rt-b {
  position: absolute; left: -9px; width: 20px; height: 20px; line-height: 20px;
  border-radius: 50%; text-align: center; font-size: 8px; font-weight: 900; color: #06120b; z-index: 10;
}
.rt-b.sb { top: -9px; background: radial-gradient(circle at 35% 30%, #cdefff, #7fd4ff 60%, #3a9fd6); }
.rt-b.bb { top: 15px; background: radial-gradient(circle at 35% 30%, #ffe4c9, #ffb27f 60%, #d67b3a); }

/* win-% badge, drawn beyond the cards so it is never hidden */
.rt-eq {
  position: absolute; padding: 1px 7px; border-radius: 999px;
  font: 800 10px/1.3 Arial, Helvetica, sans-serif; color: #06170f;
  background: linear-gradient(180deg, #fff3c4, #f6c94a 60%, #d9a520);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
  white-space: nowrap; z-index: 20; pointer-events: none;
}
.rt-seat.rt-up .rt-eq    { left: 50%; transform: translateX(-50%); bottom: calc(100% + 52px); }
.rt-seat.rt-down .rt-eq  { left: 50%; transform: translateX(-50%); top: calc(100% + 52px); }
.rt-seat.rt-left .rt-eq  { top: 50%; transform: translateY(-50%); right: calc(100% + 78px); }
.rt-seat.rt-right .rt-eq { top: 50%; transform: translateY(-50%); left: calc(100% + 78px); }

.rt-bet {
  position: absolute; transform: translate(-50%,-50%);
  font-size: 11px; font-weight: 900; color: var(--gold);
  background: rgba(0,0,0,.55); border-radius: 999px; padding: 1px 8px;
  border: 1px solid rgba(255,215,106,.35); z-index: 5;
}
#replay .card.mini { width: 32px; height: 44px; font-size: 14px; border-radius: 5px; }
#replay .card.mini .ci { top: 2px; left: 3px; }
#replay .rp-board .card.mini { width: 40px; height: 56px; font-size: 17px; }
/* Rabbit Hunt in the replay: the cards that WOULD have come, drawn right after the
   dealt board cards - separated by a dashed line, a bit smaller and marked with a
   rabbit, so an old hand can be reviewed with them (like on the live table) */
.rp-board .rt-rabbit {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding-left: 7px;
  border-left: 1px dashed rgba(255,255,255,.28);
}
#replay .rp-board .rt-rabbit .card.mini { width: 30px; height: 42px; font-size: 13px; }
.rp-board .rt-rabbit-tag { font-size: 13px; line-height: 1; font-weight: 400; }

.rp-ctl { display: flex; align-items: center; gap: 8px; padding: 10px 2px 4px; flex-wrap: wrap; }
.rp-ctl button {
  background: linear-gradient(180deg, #2b3d33, #16211b); color: #ffe7a8;
  border: 1px solid var(--stroke); border-radius: 8px; padding: 6px 10px;
  font-weight: 900; cursor: pointer;
}
.rp-ctl button:hover { border-color: var(--gold); }
.rp-ctl input[type=range] { flex: 1; min-width: 140px; accent-color: #ffd76a; }
.rp-ctl select {
  background: #16211b; color: #ffe7a8; border: 1px solid var(--stroke);
  border-radius: 8px; padding: 5px 6px; font-weight: 800;
}
.rp-step { font-size: 11px; opacity: .7; min-width: 54px; text-align: right; }
.rp-msg { min-height: 22px; font-size: 13px; font-weight: 800; color: #fff; padding: 2px 2px 6px; }
.rp-log {
  height: 92px; overflow: auto; font-size: 11px; line-height: 1.5;
  background: rgba(0,0,0,.35); border: 1px solid var(--stroke);
  border-radius: 10px; padding: 6px 9px; opacity: .9;
}

@media (max-width: 820px) {
  .rp-box { grid-template-columns: 1fr; height: 96vh; }
  .rp-list { max-height: 150px; }
  .rp-table { min-height: 250px; }
  .rt-seat { width: 84px; font-size: 9px; }
  #replay .card.mini { width: 26px; height: 36px; font-size: 12px; }
  #replay .rp-board .card.mini { width: 32px; height: 44px; font-size: 14px; }
  #replay .rp-board .rt-rabbit .card.mini { width: 24px; height: 34px; font-size: 11px; }
  .rp-log { height: 68px; }
}

/* ===================== AVATARS + COUNTRY FLAGS ===================== */
.seat .who { position: relative; width: max-content; margin: 0 auto 5px; line-height: 0; }
.av, .avph { width: 42px; height: 42px; border-radius: 50%; display: block; }
.av {
  object-fit: cover;
  border: 2px solid rgba(255, 215, 106, .55);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(0, 0, 0, .35);
  background: #16211b;
}
.avph {
  background: linear-gradient(180deg, #2c3b33, #16211b);
  border: 2px dashed rgba(255, 255, 255, .18);
}
.fl { line-height: 0; }
.seat .who .fl { position: absolute; right: -8px; bottom: -4px; }
.fl img {
  width: 19px; height: 13px; object-fit: cover; display: block;
  border-radius: 2px; border: 1px solid rgba(0, 0, 0, .55); background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .75);
}
.flc {
  display: inline-block; font: 900 9px/1.25 system-ui, sans-serif; letter-spacing: .3px;
  color: #ffd76a; background: rgba(0, 0, 0, .75); border-radius: 3px; padding: 2px 4px;
}
#replay .av, #replay .avph { width: 30px; height: 30px; }
#replay .rt-seat .fl img { width: 15px; height: 11px; }

/* profile dialog */
#profile {
  position: fixed; inset: 0; z-index: 420; display: none;
  align-items: center; justify-content: center; padding: 14px;
  background: rgba(0, 0, 0, .62);
}
#profile.show { display: flex; }
.pr-box {
  width: min(560px, 96vw); max-height: 92vh; overflow: auto; padding: 14px 16px 16px;
  border-radius: 16px; border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(22, 33, 27, .99), rgba(8, 14, 11, .99));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .75);
}
.pr-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 900; letter-spacing: .5px; color: var(--gold); padding-bottom: 10px;
}
.pr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; font-weight: 800; }
.pr-row span { opacity: .75; min-width: 62px; }
.pr-row select {
  flex: 1; background: #16211b; color: #ffe7a8; border: 1px solid var(--stroke);
  border-radius: 8px; padding: 7px 8px; font-weight: 700;
}
.pr-sub { font-size: 12px; font-weight: 800; opacity: .75; margin: 4px 0 8px; }
.pr-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
/* the .primary / .ghost classes had no styling: the profile buttons fell back to the
   browser's default (the "1980s" look). Give them the same style as the rest of the app. */
.pr-box button:not(.rp-x) {
  appearance: none; -webkit-appearance: none;
  padding: 9px 18px; border: 1px solid transparent; border-radius: 10px;
  font: 800 13px/1 'Segoe UI', system-ui, sans-serif; letter-spacing: .3px;
  cursor: pointer; color: #dbe9ff;
  background: linear-gradient(180deg, #33465f, #22303f);
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pr-box button:not(.rp-x):hover { filter: brightness(1.08); }
.pr-box button:not(.rp-x):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.pr-box button:not(.rp-x):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pr-box button.primary {
  background: linear-gradient(180deg, #67e394, #1ea455); color: #04150c;
  border-color: rgba(0,0,0,.25);
}
.pr-box button.ghost {
  background: transparent; color: #cfe2d7; border: 1px solid var(--stroke);
  box-shadow: none;
}
.pr-box button.ghost:hover {
  color: #fff; border-color: rgba(255,215,106,.55); background: rgba(255,255,255,.05);
}
.pr-box #prPassBtn {
  width: 100%; color: #ffe9a8; border-color: rgba(255,215,106,.45);
  background: linear-gradient(180deg, rgba(138,106,30,.55), rgba(74,53,16,.55));
}
.pr-box #prPassBtn:hover { filter: brightness(1.12); }

/* avatar picker grid */
.avg {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
  max-height: 190px; overflow: auto; padding: 5px;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--stroke); border-radius: 10px;
}
#registerPane .avg { max-height: 120px; }
.avgimg {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover;
  cursor: pointer; border: 2px solid transparent; opacity: .82;
  transition: opacity .15s, transform .1s, border-color .15s;
}
.avgimg:hover { opacity: 1; transform: translateY(-1px); }
.avgimg.sel {
  border-color: var(--gold); opacity: 1;
  box-shadow: 0 0 0 2px rgba(255, 215, 106, .35), 0 0 12px rgba(255, 215, 106, .5);
}
/* sign-up form extras */
.authpick { margin: 9px 0 4px; text-align: left; }
.authlbl { display: block; font-size: 11px; font-weight: 800; opacity: .7; margin: 0 0 5px 2px; }
.authselect {
  width: 100%; margin-top: 4px; padding: 9px 10px; font-weight: 700;
  background: #16211b; color: #ffe7a8; border: 1px solid var(--stroke); border-radius: 8px;
}

@media (max-width: 820px) {
  .avg { grid-template-columns: repeat(6, 1fr); }
  .av, .avph { width: 34px; height: 34px; }
  #replay .av, #replay .avph { width: 26px; height: 26px; }
}

/* ===================== FOLD: cards thrown to the muck ===================== */
.flycard.fold {
  width: 58px; height: 80px;      /* matches .seat-cards .card.mini */
  z-index: 18;                    /* above everything, even the seats */
  box-shadow: 0 8px 22px rgba(0,0,0,.75),
              inset 0 0 0 2px #e6c88a,
              inset 0 0 0 4px #7d1019;
}

/* ===================== POT CHIPS (centre stack) ===================== */
#potchips {
  /* the stack sits BELOW the board (normal flow, under the table cards) */
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100px;
  height: 76px;              /* was 56px */
  margin: 6px auto 8px;
  padding-bottom: 20px;      /* room for potval inside */
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  transform: translateX(8px);    /* subtle shift - only to clear the deck (on the left) */
}
#potchips i {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 8px/1 Arial, Helvetica, sans-serif;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
  border: 2px dashed rgba(255,255,255,.78);
  box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 -3px 5px rgba(0,0,0,.35),
              inset 0 2px 3px rgba(255,255,255,.45);
}
/* dark text on the light chips (white / gold) */
#potchips i.c1000 { color: #3a2b00; text-shadow: none; }

/* SIDE POTS: main pot + side pots as separate stacks, each with its own amount */
#potchips.multi {
  display: flex; align-items: flex-end; justify-content: center; gap: 18px;
  width: auto; height: auto; padding-bottom: 0; transform: none;
}
#potchips.multi .potgrp {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 40px;
}
#potchips.multi .potstack { position: relative; width: 26px; }
#potchips.multi .potval { position: static; transform: none; font-size: 12px; }
#potchips.multi .potlbl {
  font: 800 8px/1 Arial, Helvetica, sans-serif; letter-spacing: .6px;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

/* Total value shown BELOW the centre stack */
#potchips .potval {
  position: absolute; left: 50%; bottom: 0;   /* was -18px */
  transform: translateX(-50%);
  font: 900 13px/1 "Segoe UI", system-ui, sans-serif;
  color: #ffd76a; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.75);
  pointer-events: none;
}
#potchips i::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
}
/* colours (same as .chipstack) */
#potchips i.c1    { background: radial-gradient(circle at 34% 28%, #a8d8ff 0 12%, #4a90d9 58%, #1e4a7a 100%); }
#potchips i.c5    { background: radial-gradient(circle at 34% 28%, #ff9a9a 0 12%, #e23b3b 58%, #8f1414 100%); }
#potchips i.c10   { background: radial-gradient(circle at 34% 28%, #8ec2ff 0 12%, #2f6fd2 58%, #143a7a 100%); }
#potchips i.c25   { background: radial-gradient(circle at 34% 28%, #93e6ae 0 12%, #2fae5a 58%, #146b32 100%); }
#potchips i.c100  { background: radial-gradient(circle at 34% 28%, #ff8f8f 0 12%, #d32029 58%, #700a10 100%); }
#potchips i.c500  { background: radial-gradient(circle at 34% 28%, #cba6ff 0 12%, #7a3fbf 58%, #3f1a70 100%); }
#potchips i.c1000 { background: radial-gradient(circle at 34% 28%, #fff3c0 0 12%, #d4af37 58%, #8a6d12 100%); }

/* ===================== RABBIT HUNT ===================== */
#rabbitBox {
  position: absolute; inset: 0; z-index: 25;
  pointer-events: none;
  transition: opacity .4s;
}
#rabbitBox.fade-out { opacity: 0; }

.rabbit-card {
  position: absolute;
  width: 78px; height: 108px;
  transform: translate(-50%, -50%);
  perspective: 900px;
  will-change: transform;
}
.rabbit-card .rc-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.25,.9,.3,1);
}
.rabbit-card.revealed .rc-inner { transform: rotateY(180deg); }
.rabbit-card .rc-face {
  position: absolute; inset: 0; border-radius: 8px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.rabbit-card .rc-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,235,190,.60) 0 3px, rgba(255,235,190,.12) 4px 26%, transparent 27%),
    repeating-linear-gradient(45deg, rgba(255,235,190,.16) 0 4px, transparent 4px 12px),
    repeating-linear-gradient(-45deg, rgba(255,235,190,.16) 0 4px, transparent 4px 12px),
    linear-gradient(160deg, #c8353f 0%, #a01e29 46%, #6c0f18 100%);
  border: 1px solid #f0dcb0;
  box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 0 0 3px #e6c88a, inset 0 0 0 5px #7d1019;
}
.rabbit-card .rc-front {
  transform: rotateY(180deg);
  background: linear-gradient(158deg, #ffffff 0%, #f6f6f8 52%, #e7e8ed 100%);
  color: #1a1a1a; font-weight: 800; font-size: 31px;
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 8px 16px rgba(0,0,0,.45), 0 2px 0 #cdcfd6, inset 0 1px 0 #fff;
  overflow: hidden;
}
.rabbit-card .rc-front .ci { position: absolute; top: 3px; left: 5px; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.rabbit-card .rc-front .ci b { font-size: .58em; }
.rabbit-card .rc-front .ci i { font-size: .46em; font-style: normal; }
.rabbit-card .rc-front .cp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.05em; }
.rabbit-card .rc-front.red { color: #d32f2f; }

.rabbit-label {
  position: absolute; transform: translate(-50%, 0);
  padding: 3px 12px; border-radius: 999px;
  font: 900 13px/1 "Segoe UI", system-ui, sans-serif;
  color: #06170f;
  background: linear-gradient(180deg, #fff3c4, #f6c94a 60%, #d9a520);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
  white-space: nowrap;
}
@media (max-width: 820px) {
  .rabbit-card { width: 34px; height: 47px; }
  .rabbit-card .rc-front { font-size: 13px; }
  .rabbit-label { font-size: 11px; padding: 2px 9px; }
}

/* ===================== 3D MOTION (chips physics) ===================== */
/* Each disc eases its own transform, so the mid-flight scale(1.08) and the
   landing wobble set by flyChips()/flyPotPile() are animated. */
.flypile i {
  transition: transform 300ms ease-out;
}

/* Optional continuous wobble (NOT applied by default - could cost performance
   on low-end phones). To enable: add  animation: chipWobble 900ms ease-in-out infinite;
   to the .flypile i rule above. */
@keyframes chipWobble {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
  50%      { filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
}

/* ===================== LIVE HAND STRENGTH METER ===================== */
#myeq {
  display: none;
  position: relative;
  width: 160px;              /* narrower */
  height: 16px;              /* thinner */
  margin: 6px auto 10px;     /* 10px below = the pot chips no longer touch the bar */
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.42));
  border: 1px solid rgba(255,215,106,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 4px 10px rgba(0,0,0,.50);
  overflow: hidden;
}
#myeq.show { display: block; }

#myeq .myeq-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #e0524a 0%, #ffa500 45%, #67e394 100%);
  transition: width .35s cubic-bezier(.25,.9,.3,1);
  box-shadow: 0 0 8px rgba(255,205,107,.35);
}
#myeq.low  .myeq-fill { box-shadow: 0 0 10px rgba(224,82,74,.55); }
#myeq.high .myeq-fill { box-shadow: 0 0 12px rgba(127,255,168,.65); }

#myeq .myeq-txt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 900 10px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.7);
  pointer-events: none;
}

@media (max-width: 820px) {
  #myeq { width: 120px; height: 10px; margin: 5px auto 8px; }
  #myeq .myeq-txt { font-size: 9px; }
}