/* Supernova Poker — theme mirrors blackjack.html/roulette.html (self-contained,
   no build step). Accent --c = gold, matching the felt's own branding text. */
:root{
  --bg:#06070A; --surface:#0E1117; --surface-2:#141821; --border:#1E2330;
  --mint:#23F7DD; --amber:#F5B544; --coral:#FF6B9D; --blue:#5B8DEF; --lavender:#A78BFA; --yellow:#FFD23F; --green:#3DDC84;
  --text:#F4F6FA; --text-dim:#9BA3B4; --text-faint:#6B7385;
  --mono:'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  --c:#FFD23F;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

/* ⚠️ ANIMAȚIILE NU AU VOIE SĂ MĂREASCĂ PAGINA.
   `dealIn` pornește de la `translate(50%,-160%)`, deci o carte împărțită la un
   scaun de lângă marginea din dreapta iese câțiva pixeli din ecran. Măsurat:
   **7px pe orizontală**. Consecința nu era 7px, ci o reacție în lanț — apărea
   bara orizontală, bara mânca 15px din înălțime, deci apărea și cea verticală,
   iar pagina sărea la fiecare mână împărțită.

   `clip`, nu `hidden`: `hidden` ar face din `html` un container de derulare, cu
   efectele lui secundare peste tot (elemente `fixed`, derulare pe iOS). `clip`
   doar taie ce iese, fără să schimbe nimic altceva.
   ⚠️ Numai pe orizontală — pe verticală pagina TREBUIE să poată fi derulată,
   sunt regulile și istoricul mâinilor dedesubt. */
html{overflow-x:clip;}
/* ⚠️⚠️ `visibility:visible` E AICI, NU ÎN JS. Pagina pornește ascunsă dintr-un
   `<style>` inline (vezi `index.html`), iar singurul lucru care o arată e chiar
   APLICAREA acestei foi — deci nu există nicio fereastră în care conținutul să fie
   vizibil nestilizat. Un `document.body.style.visibility` din JS ar fi venit mai
   târziu decât stilul, deci ar fi lăsat exact flash-ul pe care îl repară. */
/* ⚠️ Cât ține pornirea, masa e ASCUNSĂ (nu `display:none` — layout-ul rămâne
   așezat, deci nu sare nimic când apare). Clasa se scoate la prima decizie. */
body.booting .scene{visibility:hidden}
body{
  visibility:visible;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--text); min-height:100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,210,63,0.10), transparent 55%),
    radial-gradient(90% 70% at 50% 120%, rgba(167,139,250,0.08), transparent 60%),
    var(--bg);
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
}
.wrap{max-width:1000px; margin:0 auto; padding:16px 22px calc(34px + env(safe-area-inset-bottom));}

/* same gold pill design as every other game's lobby button / identity pill */
.lobby-back{position:fixed; top:14px; left:16px; font-family:'Roboto', sans-serif; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:#FFE55C; text-decoration:none; padding:7px 12px; border:2px solid rgba(255,215,0,0.3);
  border-radius:10px; background:linear-gradient(145deg, rgba(26,26,46,0.95) 0%, rgba(22,33,62,0.95) 100%);
  backdrop-filter:blur(10px); transition:.15s; z-index:500;}
.lobby-back:hover{color:#FFD700; border-color:rgba(255,215,0,0.6);}
@media (max-width:700px){.lobby-back{position:static; display:inline-block; margin-bottom:10px;}}

h1{text-align:center; font-size:48px; font-weight:800; letter-spacing:-0.02em; margin:0 0 10px;}
h1 .x{color:var(--c);}

.player-bar{position:fixed; top:14px; right:16px; z-index:40; display:flex; align-items:center; gap:8px;}
@media (max-width:700px){.player-bar{position:static; justify-content:flex-end; margin-bottom:10px;}}
.player-id{font-family:var(--mono); font-size:13px; color:#FFE55C; letter-spacing:.04em;
  border:2px solid rgba(255,215,0,0.3); border-radius:10px; padding:7px 14px;
  background:linear-gradient(145deg, rgba(26,26,46,0.95) 0%, rgba(22,33,62,0.95) 100%);
  backdrop-filter:blur(10px);}
.player-id .badge{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--text-faint); margin-right:6px; vertical-align:middle;}
.player-id.wallet-connected .badge{background:var(--mint);}
.player-id.wallet-connected{color:#FFE55C;}

.credits-pill{font-family:var(--mono); font-size:13px; color:var(--text-faint); letter-spacing:.04em;
  border:1px solid var(--border); border-radius:10px; padding:7px 14px; background:linear-gradient(180deg,#0c1016,#080b10);}
.credits-pill b{color:var(--text); font-weight:800; font-variant-numeric:tabular-nums; margin-left:5px;}
.credits-pill b.flash{animation:pop .4s var(--ease); display:inline-block;}
@keyframes pop{0%{transform:scale(1);}40%{transform:scale(1.22);}100%{transform:scale(1);}}

/* ⚠️ Server online/offline — verde cât timp masa e la zi cu serverul (connected
   sau seated), roșu în orice altă stare (connecting/reconnecting/error). Cerut
   de Vlad, 2026-08-21: nu mai era decât text neutru, fără nicio culoare. Clasele
   se pun din setNetStatus(). */
#net-status.net-online{color:var(--green); border-color:color-mix(in srgb,var(--green) 45%,var(--border));}
#net-status.net-online b{color:var(--green);}
#net-status.net-offline{color:var(--coral); border-color:color-mix(in srgb,var(--coral) 45%,var(--border));}
#net-status.net-offline b{color:var(--coral);}

/* ⚠️ Stiva jucătorului la masă — SCOASĂ din .player-bar (2026-08-21, cerut de
   Vlad) fiindcă pariul era deja arătat de două ori (aici și pe pâslă). Mutată
   sub butoanele de acțiune, în .below-row (vezi acolo) — pe masă nu poate sta:
   cărțile și tot ce e pe pâslă rămân neatinse. Același design auriu ca
   .seat-pill de la Blackjack xEGLD (nu .credits-pill — acela e neutru). */
/* ⚠️ MĂRITĂ CU 50% pe 2026-08-23, la cererea lui Vlad — e singurul loc în care îți
   vezi stiva cât joci, iar la 12px se citea greu de la distanța de la care privești
   masa. Scalate proporțional: 12→18px, 7/14→11/21px, colțul 10→15px, bordura 2→3px.
   ⚠️ `gap`, `.seat-pill-cap` și `.seat-pill-cur` sunt în `em`, deci urmează singure —
   nu le converti în px, altfel o viitoare rescalare le lasă în urmă.
   ⚠️ `.seat-pill` are un SINGUR consumator, `#stack-pill` din `.below-row`. Dacă apare
   al doilea, verifică-l: mărimea de aici nu mai e neutră. */
.seat-pill{display:inline-flex; align-items:baseline; gap:.42em; white-space:nowrap;
  font-family:var(--mono); font-size:18px; letter-spacing:.05em; color:#FFE55C;
  padding:11px 21px; border-radius:15px; border:3px solid rgba(255,215,0,0.3);
  background:linear-gradient(145deg, rgba(26,26,46,0.95) 0%, rgba(22,33,62,0.95) 100%);
  backdrop-filter:blur(10px);}
.seat-pill-cap{opacity:.72; font-size:.85em;}
.seat-pill .amt{font-weight:800; font-variant-numeric:tabular-nums;}
.seat-pill-cur{opacity:.68; font-size:.85em;}

/* ============================================================
   THE TABLE — Masa_Poker.webp as background, everything else laid
   out as % positions (computed from the actual render camera, see
   Dev_3D_Poker_Table.md) over it, scaling with container units.
   NOTE: the asset is 3012x1146 since 2026-08-13 (re-rendered 3x so it stops
   being upscaled past the 1750px cap). 1004/382 below is the SAME ratio and
   is left as-is on purpose — not a stale value. */
.scene{position:relative; left:50%; transform:translateX(-50%); z-index:1;
  width:min(1750px, 98vw, calc(82vh * 2.6283)); margin:5vh auto 0; aspect-ratio:1004 / 382;
  container-type:size; --cw:11.26cqh;}
.scene::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:16px;
  background:url("images/Masa_Poker.webp?v=2") center/cover no-repeat;
  -webkit-mask-image:
    radial-gradient(40% 40% at 0% 100%, transparent 0%, #000 70%),
    radial-gradient(40% 40% at 100% 100%, transparent 0%, #000 70%),
    radial-gradient(42% 42% at 0% 0%, transparent 0%, #000 70%),
    radial-gradient(42% 42% at 100% 0%, transparent 0%, #000 70%),
    linear-gradient(to bottom, transparent 0%, #000 6%),
    linear-gradient(to right, transparent 0%, #000 4%),
    linear-gradient(to left, transparent 0%, #000 4%);
  -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in;
          mask-image:
    radial-gradient(40% 40% at 0% 100%, transparent 0%, #000 70%),
    radial-gradient(40% 40% at 100% 100%, transparent 0%, #000 70%),
    radial-gradient(42% 42% at 0% 0%, transparent 0%, #000 70%),
    radial-gradient(42% 42% at 100% 0%, transparent 0%, #000 70%),
    linear-gradient(to bottom, transparent 0%, #000 6%),
    linear-gradient(to right, transparent 0%, #000 4%),
    linear-gradient(to left, transparent 0%, #000 4%);
          mask-composite: intersect;
  filter:drop-shadow(0 0 70px rgba(255,210,63,.12));}

/* ---- community cards + pot, centered over the felt branding ---- */
/* the dealer's board cards get their OWN --cw instead of inheriting .scene's
   11.26cqh — Vlad wanted them bigger (2026-08-12). Set to 14.72cqh, i.e. the
   same size as the hero's own cards (.seat.hero), so the board reads as the
   main thing on the felt rather than the smallest cards on the table. */
/* 45.1% — the anchor projected from the felt centre, and the only correct value:
   it is what keeps the board clear of the dealer's chip tray. Measured by
   projecting the tray through the current camera into this crop, it occupies
   21.63%..34.50%; at 45.1% the board's top edge lands at 34.79%, just under it.
   Both attempts to raise the board to give the pot more room (42.6%, then 39%)
   put the cards ON the tray — at 39% they climbed 5.8% into it (Vlad: "nu se
   suiau nici odata peste caseta de jetoane"). DO NOT raise this.
   The board's bottom edge (55.4%) does reach the pot pile, and that is fine —
   the cards cover it via z-index:7 below, the same call blackjack makes with
   .hand-spot(7) over .bet-spot(5). Size and position are both fixed: solve any
   overlap with z-order, or by moving the POT, never by moving these. */
.community{position:absolute; left:50%; top:45.1%; transform:translate(-50%,-50%);
  display:flex; gap:1.21cqw; z-index:7; --cw:14.72cqh;}
/* 64.3% was the projected anchor; moved down 3.1% together with .pot-chips —
   see the comment there. Bottom lands at 70.02%, still clear of the hero's
   cards (71.69%). */
.pot{position:absolute; left:50%; top:67.4%; transform:translate(-50%,-50%); z-index:4;
  font-family:var(--mono); font-size:calc(var(--cw)*0.24); font-weight:800; color:var(--c);
  background:rgba(5,7,13,.82); border:1px solid color-mix(in srgb,var(--c) 45%,var(--border)); border-radius:999px;
  padding:.35em 1em; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.55); text-shadow:0 0 10px color-mix(in srgb,var(--c) 50%,transparent);}

/* ---- chip piles: any amount (a live bet in front of a player, or the pot)
   becomes a cluster of little "turnulete" (towers), one per denomination
   present, biggest denomination first. Multiple towers no longer line up in
   a row — chipPileHTML() (poker.js) positions each one via inline left/top
   using CHIP_CLUSTER_LAYOUTS (2 side by side, 3 triangle, 4 grid, 5/6 hex
   rows), so .chip-pile itself just needs to be a plain positioning root (its
   own position:absolute, already set per context below, is enough — towers
   are placed at left/top:50% of THIS box, then offset). --cw is inherited
   from the surrounding seat (hero/bot) or set explicitly per context so every
   pile on the table reads at the same size (see .pot-chips/.bot-bet-chips/
   .hero-row .bet-chips). */
/* pot pile: 20% smaller than the .scene base (13cqh) it would otherwise
   inherit — Vlad found the pot chips too big relative to the players'. */
/* 55.6% was the anchor projected from the felt; the pot moves down 3.1% from it
   (2026-08-12). The board cards had to stay at 45.1% to clear the dealer's chip
   tray, and once they were enlarged their bottom edge reached 55.4% — which put
   even a flat 3-tower row 2.05% behind them. The board cannot move, so the pot
   does: at 58.7% a flat row starts at 56.45%, i.e. 1.05% of clear air under the
   cards, while a tall tower still slides up behind them (by design — z-order
   covers it). Budget checked: only 4.77% existed between the old badge bottom
   and the hero's cards, so 3.1% is most of it; POT_POS in poker.js must be kept
   in step with this value. */
.pot-chips{position:absolute; left:50%; top:58.7%; transform:translate(-50%,-50%); z-index:4; pointer-events:none; --cw:9.01cqh;}
/* sized so a chip's diameter is close to a card's width (real chip ⌀ 23.5cm vs
   a poker card's 6.35cm width scaled the same way, see Dev_3D_Poker_Table.md
   "Jetoanele mărite") — was 0.34cw, "ridicol de mici" per Vlad. Positioned via
   inline left/top (set in poker.js, see CHIP_CLUSTER_LAYOUTS) rather than
   flex — position:absolute here is what makes that positioning read relative
   to the pile's own center instead of the page. */
.chip-tower{position:absolute; transform:translate(-50%,-50%); width:calc(var(--cw)*0.85); height:calc(var(--cw)*1.2);}
/* Discs stacked with a slight vertical offset so each one peeks out above the
   one below it, like a real chip stack. Offset kept very tight (0.11cw, ~13%
   of a disc's own height) — 0.33 and even 0.18 still looked "lăbărțat"
   (loose/sprawled) per Vlad; a real stack shows just a thin sliver of each
   chip underneath.
   ---- 2026-08-13: the FACE is now blackjack's, not a Blender sprite ----
   Vlad asked for the same design and colour as the blackjack table, so this
   is a straight port of blackjack.html's `.chip`: a colour disc with a dashed
   white edge, an inner highlight ring, and the denomination printed on it.
   Was six rendered webps (images/chips/chip_<colour>.webp, still on disk).
   ⚠️ The SIZE did not change and must not: the tower box and the disc were
   already byte-identical between the two games (--cw*0.85 wide, --cw*1.2 tall,
   discs at --i*--cw*0.11), and `*{box-sizing:border-box}` keeps the dashed
   border INSIDE the disc — so this occupies exactly what the sprites did.
   Denomination→colour was already the same mapping in both games, so nothing
   changed there either — it just lives here now instead of in a JS lookup. */
.chip-disc{position:absolute; left:0; bottom:calc(var(--i) * var(--cw) * 0.11); width:100%;
  height:calc(var(--cw)*0.85);}
/* the chip face itself — shared by the stacked discs and the single chip that
   flies to the pot, so both read as the same physical object. */
.chip-disc, .chip-fly{border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-weight:800; font-size:calc(var(--cw)*0.26); color:#fff;
  border:calc(var(--cw)*0.09) dashed rgba(255,255,255,.85);
  box-shadow:0 4px 8px rgba(0,0,0,.5), inset 0 3px 6px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.5);}
.chip-disc::before, .chip-fly::before{content:""; position:absolute; inset:20%; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.28), rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);}
.chip-disc span, .chip-fly span{position:relative; z-index:1;}
/* exact colours from blackjack.html — do not drift, the two tables are meant
   to show the same chips. */
.chip-disc.c1  , .chip-fly.c1  {background:radial-gradient(circle at 50% 35%, #c3cbd6, #8f98a8);}
.chip-disc.c5  , .chip-fly.c5  {background:radial-gradient(circle at 50% 35%, #f0616d, #b3212e);}
.chip-disc.c10 , .chip-fly.c10 {background:radial-gradient(circle at 50% 35%, #6f9bf2, #3457b8);}
.chip-disc.c25 , .chip-fly.c25 {background:radial-gradient(circle at 50% 35%, #52e394, #1d9c58);}
.chip-disc.c50 , .chip-fly.c50 {background:radial-gradient(circle at 50% 35%, #55555e, #232328);}
.chip-disc.c100, .chip-fly.c100{background:radial-gradient(circle at 50% 35%, #b98bd6, #6b3f8c);}
.chip-count{position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:calc(var(--cw)*0.06);
  font-family:var(--mono); font-weight:800; color:#fff; font-size:calc(var(--cw)*0.15); line-height:1;
  background:rgba(0,0,0,.72); border-radius:999px; padding:.2em .5em; white-space:nowrap;}
.chip-pop{animation:chipPop .28s var(--ease) backwards;}
@keyframes chipPop{from{transform:scale(.35); opacity:0;} to{transform:scale(1); opacity:1;}}
/* a single chip that flies from a player's seat to the pot (or pot to winner),
   pure visual feedback — position is animated left/top in %, same coordinate
   space as .seat/.pot (both live directly inside #table/.scene). */
/* z-index 6: above the static piles (4) — a chip in flight lands ON the pile —
   but below every card (7), so a chip crossing the felt passes UNDER the board
   instead of over it. Was 8, i.e. over everything. */
/* --cw here is LOCAL and exists only so the shared chip-face rule above (border
   width, font size — both expressed in --cw) scales to this box instead of
   inheriting .scene's 11.26cqh, which would draw a border thicker than the
   chip. 2.77/0.85 makes --cw*0.85 come out at exactly 2.77cqh, i.e. the size
   this chip already was. The width/height below are left spelled out as
   2.77cqh so that stays obvious.
   This chip carries no printed value on purpose — at ~14px the digits land at
   ~4px. See flyChip() in poker.js. */
.chip-fly{position:absolute; --cw:calc(2.77cqh / 0.85);
  width:2.77cqh; height:2.77cqh; min-width:14px; min-height:14px; z-index:6;
  pointer-events:none; transform:translate(-50%,-50%);
  transition:left .65s cubic-bezier(.3,.6,.3,1), top .65s cubic-bezier(.3,.6,.3,1), opacity .65s ease-in .05s;}

/* the whole pot flying home to whoever won it (flyPotChips in poker.js): a
   clone of the felt pile, same towers, same --cw as .pot-chips, so what leaves
   looks like what was sitting there. Zero-size anchor box exactly like
   .pot-chips — the .chip-tower children position themselves off its centre.
   z-index 8 is deliberate and applies ONLY to this direction: the pot going
   out passes OVER the board (7), while a bet swept the other way stays at
   .chip-fly's 6 and slides under it. Shrinks as it goes, so it reads as being
   absorbed into the winner's stack rather than dropped on top of it. */
.pot-fly{position:absolute; z-index:8; pointer-events:none; --cw:9.01cqh;
  transform:translate(-50%,-50%);
  transition:left .9s cubic-bezier(.34,.62,.28,1), top .9s cubic-bezier(.34,.62,.28,1),
             transform .9s cubic-bezier(.34,.62,.28,1), opacity .9s ease-in .38s;}

/* ---- seat pods: one per player, positioned by JS from real camera-projected
   cupholder coordinates (see Dev_3D_Poker_Table.md). Hero's pod is bigger and
   sits lower (own cards face-up, larger); bot pods are compact, cards down. */
/* z-index 5: players' cards sit above the chip piles (4) too, per the same rule.
   NOT raised to the board's 7 on purpose — the hero's hand overlaps
   .rail-controls (cards 70..94%, buttons 91..103%), and those buttons must stay
   clickable and on top. */
.seat{position:absolute; transform:translate(-50%,-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:.31cqw;
  transition:filter .2s;}
.seat.folded{opacity:.4; filter:saturate(.4);}
.seat.acting .name-tag{color:var(--c); border-color:var(--c); box-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent);}
.seat .hand{display:flex;}
.seat .card3d + .card3d{margin-left:calc(var(--cw)*-0.55);}
.seat.hero{--cw:14.72cqh;}
.seat.bot{--cw:10.39cqh;}
/* hero's cards + chip pile side by side ("jetoanele... in dreapta cartilor,
   pe masa pregatite" — Vlad) instead of stacked, chips to the right since
   .bet-chips comes after .hand in the DOM. */
/* .hero-row's OWN box must stay exactly hand-sized — .seat.hero is centered
   on HERO_FELT_POS via translate(-50%,-50%), so if the row's flow height grew
   to match the (taller) chip pile, that translate would push the bottom edge
   down into the rail buttons (measured: -0.5px overlap with align-items:center
   AND :flex-end — flex alignment doesn't change the container's own height,
   only where children sit within it). The pile is positioned OUT of flow
   instead (absolute, anchored to the hand's right edge), so it can be taller
   than the hand without growing the box translate(-50%,-50%) centers. */
.hero-row{position:relative; display:flex;}
/* --cw:10.4cqh — same scale as .pot-chips/.bot-bet-chips (see below): Vlad
   wants every chip pile on the table the same size, pot included, not just
   hero matching bots.
   top:50% (not bottom:0) + a much bigger margin-left: with bottom:0 the pile
   sat at the hand's BOTTOM edge, which — verified by sampling the actual
   background pixels at that point (canvas + RGB channel test, same technique
   as BOT_CHIP_POS) — is already past the felt, onto the wood rail, no matter
   the x. The felt only reaches to about x:62% at the cards' own height
   (y:73.5%, the hand's vertical CENTER); top:50% keeps the pile at that
   height instead of the hand's bottom, and margin-left:1.3cw (was 0.18 —
   scaled for the OLD tight-beside-the-cards look) pushes it far enough right
   to clear the hand without crossing back onto the rail. Checked at the
   widest cluster (6 towers): every tower center still samples as felt.
   ---- 2026-08-13: lifted half a chip (0.425cw) ----
   Vlad: "la playerul care joaca, jetoanele se suprapun putin cu masa, trebuie
   mutate mai in sus pe verticala cu jumatate de jeton." He was right to the
   pixel — measured on the real discs, the felt ends at y:86.6% under this pile
   while its bottom edge reached y:90.64%, i.e. 0.45cw of chip hanging over the
   wooden rail. (Note the tower CENTRES were all still on felt, which is why the
   older centre-only check above never caught it — a disc is drawn 0.425cw below
   its own centre.)
   ⚠️ The lift lives on `top`, NOT on `transform`. It was on the transform first
   and Vlad caught the result immediately: "prima data cand apare jetonul apare la
   pozitia vechie, dupa care sare imediat la pozitia noua". The .chip-pop entry
   animation's keyframes set `transform:scale(...)`, which REPLACES the whole
   transform — so for the 0.28s it ran the lift vanished, the pile sat back over
   the rail, then snapped up. Anything chipPop animates must stay out of
   `transform`. (Bots never showed this: theirs is translate(-50%,-50%) on a
   zero-size box, so losing it changes nothing visible.)
   ⚠️ HERO ONLY — the bots' piles are placed from BOT_CHIP_POS in poker.js and
   are not affected; do not "fix" them to match. */
.hero-row .bet-chips{position:absolute; left:100%; top:calc(50% - var(--cw) * 0.425);
  transform:translateY(-50%); margin-left:calc(var(--cw)*1.3); --cw:9.01cqh;}
.name-tag{font-family:var(--mono); font-size:calc(var(--cw)*0.19); font-weight:700; color:var(--text-dim);
  background:rgba(5,7,13,.82); border:1px solid var(--border); border-radius:999px; padding:.3em .85em;
  white-space:nowrap; box-shadow:0 4px 10px rgba(0,0,0,.5);}
.name-tag .stack{color:var(--text); font-weight:800; margin-left:.5em;}
.bet-chips{position:relative;}
/* bots' pile is its own absolutely-positioned layer (BOT_CHIP_POS in
   poker.js) — on the green felt, forward of the cupholder, not nested in
   .seat.bot anymore, so it needs its own explicit --cw (would otherwise fall
   back to .scene's 13cqh and collide between adjacent seats, found via
   getBoundingClientRect on seats 0/1). Same 10.4cqh as .pot-chips/hero's own
   pile — every chip pile on the table reads at one consistent size now. */
.bot-bet-chips{position:absolute; transform:translate(-50%,-50%); --cw:9.01cqh; z-index:4; pointer-events:none;}
/* the amount badge floats ABOVE the pile (toward the pot/open felt) instead
   of adding a row below it — for hero that avoids the rail buttons, for bots
   it avoids crowding their cards. */
.pile-amt{position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:calc(var(--cw)*0.1);
  /* ⚠️ 0.1811 → 0.2083 = încă +15% (Vlad, 2026-09-03: „să se vadă mai bine betul").
     Istoricul mărimii: +15%, apoi +5% (2026-08-27), acum +15%. */
  font-family:var(--mono); font-weight:800; color:#06130b; font-size:calc(var(--cw)*0.2083); line-height:1;
  /* ⚠️⚠️ PADDING-UL ORIZONTAL SCADE, ca pastila să NU se lățească (cerut explicit:
     „mai înaltă, dar mai lată nu"). Padding-ul e în `em`, deci ar fi crescut cu fontul
     — 0.8em×1.15 pe fiecare parte, plus textul mai lat, ar fi dat o pastilă cu ~15%
     mai lată. ⚠️ 0.5em e MĂSURAT în browser, nu ales: la o sumă obișnuită („0.040")
     lățimea iese EXACT 0% diferență față de înainte. Cu 0.62em creștea încă cu 6%.
     ⚠️ ÎNĂLȚIMEA crește cu fontul, cum s-a cerut: `line-height:1` plus 0.3em sus și
     jos înseamnă 1.6em, deci +15% odată cu litera.
     ⚠️ La sume LUNGI pastila tot se lățește — și e corect: „doar dacă dă textul pe
     afară o mărești și pe lățime". `white-space:nowrap` garantează că textul nu se
     rupe niciodată pe două rânduri. */
  background:linear-gradient(180deg,#ffe27a,var(--c)); border-radius:999px; padding:.3em .5em; white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,.4);}
.status-tag{font-family:var(--mono); font-size:calc(var(--cw)*0.16); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--coral); padding:.15em .6em;}
.status-tag.win{color:var(--c);}
/* ⚠️ SB / BB — pastilele de blind, sub butonul D, în același spațiu de
   coordonate (vezi renderBlindTags în poker.js). Deliberat mai mici și mai
   discrete decât D: spun cine pune jumătate și cine întreg, fără să concureze
   cu butonul care spune cine împarte. `pointer-events:none` fiindcă nu sunt
   controale — nu au ce să intercepteze. */
.blind-tag{position:absolute; padding:.18cqw .5cqw; border-radius:.6cqw;
  font-family:var(--mono); font-weight:800; font-size:1.05cqw; line-height:1.15;
  letter-spacing:.04em; display:grid; place-items:center; white-space:nowrap;
  z-index:5; transform:translate(-50%,-50%); pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,.45);}
.blind-tag.sb{background:rgba(20,22,34,.92); color:var(--text-dim); border:1px solid rgba(255,255,255,.28);}
.blind-tag.bb{background:rgba(20,22,34,.92); color:var(--c); border:1px solid color-mix(in srgb,var(--c) 55%,transparent);}

.dealer-btn{position:absolute; width:2.63cqw; height:2.63cqw; min-width:20px; min-height:20px; border-radius:50%;
  background:linear-gradient(180deg,#fff,#ddd); color:#111; font-family:var(--mono); font-weight:800; font-size:1.42cqw;
  display:grid; place-items:center; box-shadow:0 3px 8px rgba(0,0,0,.5); border:2px solid #999; z-index:5;
  transform:translate(-50%,-50%);}

/* ---- sound control: mute + volume, ported from roulette.html's own
   sound-ctl (same open/close-panel behaviour, same master-gain engine in
   poker.js) — just rescaled from roulette's raw cqw units to poker's --cw
   (cqh-based, see .scene) so it sits at the same relative size as every
   other on-table element here. Corner of the felt, top-right — clear of
   every seat (closest is seat 8 at x:75.4/y:11.4, well left/below this).
   Anchored by LEFT, not right: roulette's version anchored the pill by its
   right edge, so opening it (padding-right + slider width growing) pushed
   the whole box — speaker included — to the left, since flexbox lays the
   button out from the box's (moving) left edge. Vlad wants the opposite:
   speaker stays put, the volume bar grows out to its right. Anchoring by a
   fixed `left` instead means the box only grows on its right side, so the
   first flex child (the button) never moves. `left` is pulled in from the
   true corner by more than the panel's open-state growth (padding-right
   0.2cw + slider 1.7cw + slider's own margin 0.15cw ≈ 2.05cw), so the fully
   open pill's right edge still lands short of the table's right edge. */
.sound-ctl{position:absolute; z-index:6; top:4.31cqh; left:calc(100% - (var(--cw)*3.2));
  display:flex; align-items:center; gap:0; padding:calc(var(--cw)*0.09);
  border-radius:999px; border:1px solid var(--border); background:rgba(6,7,13,.72);
  backdrop-filter:blur(4px);
  transition:padding .28s var(--ease), background .2s var(--ease), border-color .2s var(--ease);}
.sound-ctl.open{padding-right:calc(var(--cw)*0.2);}
.sound-ctl:hover, .sound-ctl:focus-within{background:rgba(6,7,13,.92);
  border-color:color-mix(in srgb,var(--c) 45%,transparent);}
.mute-btn{width:calc(var(--cw)*0.62); height:calc(var(--cw)*0.62); min-width:26px; min-height:26px; flex:none;
  border-radius:999px; border:0; background:transparent;
  color:var(--text); font-size:calc(var(--cw)*0.32); line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:.2s var(--ease);}
.mute-btn:hover{color:var(--c);}
.mute-btn.muted{color:var(--text-faint);}
/* --pct is written by renderSound() in poker.js; paints the filled track */
.vol{-webkit-appearance:none; appearance:none; flex:none; height:calc(var(--cw)*0.12);
  border-radius:999px; cursor:pointer; outline:none;
  width:0; opacity:0; margin-left:0; pointer-events:none;
  transition:width .28s var(--ease), margin-left .28s var(--ease), opacity .2s var(--ease);
  background:linear-gradient(to right,
    var(--c) 0 var(--pct,100%), rgba(255,255,255,.20) var(--pct,100%) 100%);}
.sound-ctl.open .vol{width:calc(var(--cw)*1.7); opacity:1; margin-left:calc(var(--cw)*0.15); pointer-events:auto;}
.sound-ctl.open .vol.muted{opacity:.35;}
.vol:focus-visible{box-shadow:0 0 0 calc(var(--cw)*0.04) color-mix(in srgb,var(--c) 40%,transparent);}
.vol::-webkit-slider-thumb{-webkit-appearance:none; width:calc(var(--cw)*0.28); height:calc(var(--cw)*0.28);
  min-width:12px; min-height:12px; border:0; border-radius:50%; background:#fff; cursor:pointer;
  box-shadow:0 0 calc(var(--cw)*0.08) color-mix(in srgb,var(--c) 75%,transparent);}
.vol::-moz-range-thumb{width:calc(var(--cw)*0.28); height:calc(var(--cw)*0.28); min-width:12px; min-height:12px; border:0;
  border-radius:50%; background:#fff; cursor:pointer;
  box-shadow:0 0 calc(var(--cw)*0.08) color-mix(in srgb,var(--c) 75%,transparent);}

/* ---- two-faced cards: FAȚA e un SVG vectorial, SPATELE rămâne desenat aici ----
   ⚠️ Cartea nu mai e desenată din CSS. Fișierele sunt în `/casino-cards/` (52,
   `viewBox="0 0 744 1039.24"`), COMUNE celor TREI jocuri cu cărți — cele două mese
   de poker și blackjack — ca `/casino-gate.css` și `/casino-wallet.js`.
   ⚠️ Ce era înainte (`.face .corner`, `.pips`, `.pip`, `.ace`, `.court`,
   `.face.front.red`) e salvat în
   `Carti_Poker_SVG/back_up_carti_2026-09-01_16-57/`.
   ⚠️ NU redesena colțurile aici: SVG-ul le poartă deja (rang + simbol, sus-stânga
   și rotit jos-dreapta), deci s-ar suprapune peste cele din fișier.
   ⚠️ Raportul SVG e 744/1039.24 = 0.7159, al cărții 1/1.4 = 0.7143 — 0,2%, adică
   sub o zecime de pixel la mărimile de pe masă. De-aia imaginea umple caseta
   (`width/height:100%`) în loc de `object-fit:contain`, care ar lăsa o dungă. */
.ghost{width:var(--cw); height:calc(var(--cw)*1.4); border-radius:10%; border:2px dashed rgba(255,255,255,.18);}
.card3d{width:var(--cw); height:calc(var(--cw)*1.4); position:relative; flex:0 0 auto;
  transform:rotate(var(--rot,0deg)); transform-style:preserve-3d;}
.card3d.new{animation:dealIn .4s var(--ease) backwards;}
@keyframes dealIn{from{transform:translate(50%,-160%) rotate(10deg); opacity:0;} to{transform:translate(0,0) rotate(var(--rot,0deg)); opacity:1;}}
.cf{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .4s var(--ease);}
.card3d.down .cf{transform:rotateY(180deg);}
.card3d.reveal .cf{animation:holeFlip .55s var(--ease) forwards;}
@keyframes holeFlip{from{transform:rotateY(180deg);}to{transform:rotateY(0deg);}}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:calc(var(--cw)*0.12);}
/* fundal alb plin, nu gradient: cartonul e desenat acum ÎN fișier, iar un gradient
   sub el s-ar vedea doar pe marginea de câțiva px lăsată de viewBox. */
.face.front{background:#fdfdf8; color:#16161d; overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.06);}
.face.front img{width:100%; height:100%; display:block; border-radius:inherit;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none; pointer-events:none;}
.face.back{transform:rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(255,210,63,.16) 0 8px, transparent 8px 16px),
    linear-gradient(160deg,#241b06,#120d02);
  border:6px solid #e7e7dd; box-shadow:0 10px 22px rgba(0,0,0,.55);}
.face.back::after{content:"♠"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:calc(var(--cw)*0.3); color:rgba(255,210,63,.5); text-shadow:0 0 16px rgba(255,210,63,.4);}

/* result banner floating over the felt */
.banner{display:none; position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); z-index:9;
  font-family:var(--mono); font-weight:800; font-size:clamp(14px,2.6cqw,26px); letter-spacing:.03em; text-align:center;
  /* ⚠️ `pre-line`, NU `nowrap`: din 2026-09-01 bannerul poartă o linie per parte
     câștigătoare (vezi finishHandUI), deci `\n` trebuie să rupă rândul. Cu
     `nowrap` cele două poturi s-ar fi lipit într-o singură bandă care iese de pe
     masă. `max-width` e plasa: o linie lungă se rupe în loc să curgă în afară. */
  white-space:pre-line; max-width:86cqw; line-height:1.35;
  color:var(--text); background:rgba(5,7,13,.9); border:1px solid var(--border); border-radius:.6em;
  padding:.5em .9em; backdrop-filter:blur(5px); pointer-events:none;}
.banner.gold{color:var(--yellow); border-color:color-mix(in srgb,var(--yellow) 55%,transparent); text-shadow:0 0 26px color-mix(in srgb,var(--yellow) 70%,transparent);}
/* was 2.8s (2200ms next-hand delay), then 4.5s (4500ms) — scaled up along
   with scheduleNextHandOrRebuy() (poker.js) so it fades right as the next
   hand starts, not long before it. */
.banner.go{animation:bannerPop 6.5s var(--ease) forwards;}
@keyframes bannerPop{0%{opacity:0; transform:translate(-50%,-50%) scale(.7);} 12%{opacity:1; transform:translate(-50%,-50%) scale(1.05);}
  20%{transform:translate(-50%,-50%) scale(1);} 82%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-50%) scale(.96);}}

/* ---- rail controls: small round buttons sitting ON the table's own wood
   rail (bordura), where the hero's cards used to sit — freed up by moving the
   hero's cards onto the felt instead (see .seat.hero / HERO_FELT_POS in
   poker.js). Positioned at the real projected mid-point of the front rail's
   wood band, see Dev_3D_Poker_Table.md. ---- */
.rail-controls{position:absolute; left:50%; top:96.9%; transform:translate(-50%,-50%);
  display:flex; gap:3.95cqw; z-index:6;}
/* ---- round action buttons: layered gradient + bevel for a real "casino
   button" feel instead of a flat tinted circle, one accent colour per action
   via --rbtn-accent so the glow/border/icon tint all stay in sync. 30%
   bigger than the original (9.5cqh/34px -> 12.35cqh/44px), per Vlad. The
   check/call button doubles as "Start Hand" before the first deal — see
   renderControls() in poker.js, which swaps its icon/title/class to "start"
   while G.phase==="idle" — so its accent (green) reads as "go" either way. */
.rbtn{appearance:none; cursor:pointer; font:inherit; width:12.35cqh; height:12.35cqh; min-width:44px; min-height:44px;
  border-radius:50%; display:grid; place-items:center; position:relative; transition:.15s var(--ease);
  --rbtn-accent:var(--text-faint);
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.14), transparent 52%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb,var(--rbtn-accent) 20%,transparent), transparent 65%),
    linear-gradient(160deg,#1d2230,#0a0c12 68%);
  border:2.5px solid color-mix(in srgb,var(--rbtn-accent) 65%,transparent);
  box-shadow:
    0 7px 16px -2px rgba(0,0,0,.6),
    inset 0 1.5px 0 rgba(255,255,255,.14),
    inset 0 -4px 8px rgba(0,0,0,.5),
    0 0 0 1px color-mix(in srgb,var(--rbtn-accent) 16%,transparent);}
.rbtn .ico{font-size:4.7cqh; line-height:1;
  color:color-mix(in srgb,var(--rbtn-accent) 30%,var(--text));
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));}
.rbtn:disabled{opacity:.35; cursor:not-allowed; filter:saturate(.4);}
.rbtn:hover:not(:disabled){transform:translateY(-2px);
  box-shadow:
    0 9px 18px -2px rgba(0,0,0,.6),
    inset 0 1.5px 0 rgba(255,255,255,.16),
    inset 0 -4px 8px rgba(0,0,0,.5),
    0 0 20px color-mix(in srgb,var(--rbtn-accent) 60%,transparent);}
.rbtn:active:not(:disabled){transform:translateY(1px);}
.rbtn.fold{--rbtn-accent:var(--coral);}
.rbtn.check{--rbtn-accent:var(--green);}
.rbtn.raise{--rbtn-accent:var(--c);}

/* ---- bet sizing: a small popover that floats just above the rail buttons
   instead of a permanent panel below the table ---- */
/* ⚠️ PANOUL DE PARIU — 2026-08-23. Ce lipsea când a fost reclamat („momentan e
   confuz"): potul nu se vedea NICĂIERI (iar panoul stă chiar PESTE potul de pe
   pâslă), butoanele nu spuneau ce sumă produc, iar singura cifră nu spunea dacă e
   „ridic LA" sau „mă costă".
   ⚠️ Estetica rămâne A PANOULUI (mono, `--surface`, accent `--c`) — NU se importă
   clasele `.gate-amount`, care sunt Cinzel 22px auriu pe mov, pentru overlay-ul de
   conectare. „Copiază, nu inventa" înseamnă vecinul potrivit, nu orice vecin.

   ⚠️⚠️ BUGETUL DE ÎNĂLȚIME E ~190px, și e o MĂSURĂTOARE: atât încape între cărțile
   comunitare (jos la 55,4% din scenă) și butoanele de acțiune (sus la 90,7%), la
   1440×900. Forma s-a schimbat de două ori — coloană simplă (255px, ACOPEREA
   board-ul, respinsă), bandă lată de 720px (118px, dar „prea alungită pe
   orizontală", respinsă de Vlad) — bugetul nu. Dacă adaugi un rând, RE-MĂSOARĂ. */
/* ⚠️ `bottom:12%`, nu 13%: panoul se așază CENTRAT în banda liberă. Măsurat la
   1440×900: banda dintre cărțile comunitare și butoanele de acțiune e 190px, panoul
   are 159px, deci rămân ~15px de fiecare parte. La 13% rămâneau 4px SUS — adică o
   singură literă în plus într-o explicație și era iar peste board. */
.bet-popover{display:none; position:absolute; left:50%; bottom:10.3%; transform:translateX(-50%); z-index:8;
  width:min(440px, 94%); flex-direction:column; gap:5px;
  background:rgba(8,10,15,.94); border:1px solid var(--border); border-radius:16px;
  padding:9px 11px; backdrop-filter:blur(6px); box-shadow:0 14px 34px -12px rgba(0,0,0,.7);}
.bet-popover.show{display:flex;}

/* stânga: potul + suma de scris. dreapta: cele patru sume + confirmarea. */
.bet-cols{display:flex; gap:9px; align-items:stretch;}
.bet-col{display:flex; flex-direction:column; gap:4px; min-width:0;}
.bet-col:first-child{flex:1 1 0;}
.bet-col-actions{flex:0 0 186px; justify-content:space-between; gap:5px;}

/* ⚠️ A RĂMAS DOAR POTUL. „TO CALL" și „STACK" erau dublură (Vlad, 2026-08-23) —
   stiva o scrie pastila de sub masă, call-ul linia de stare. Potul NU se poate
   scoate: panoul îl acoperă pe cel de pe pâslă. */
.bet-context{display:flex;}
/* ⚠️ POTUL SE CITEȘTE DE LA DISTANȚĂ. Era 12px pe cenușiu — „trebuie să mă chiorăsc
   să văd" (Vlad, 2026-08-23). E numărul după care se judecă toată decizia, deci e cel
   mai mare text din panou, nu cel mai mic. */
.bet-context span{flex:1; display:flex; align-items:baseline; justify-content:center; gap:7px;
  background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:6px 8px;}
/* ⚠️⚠️ ETICHETELE SE CITESC (ales de Vlad, 2026-09-03: „griul ăla spălăcit nu-l
   vezi"). Gri LUMINOS, nu o culoare — fiindcă în panoul ăsta fiecare culoare are
   deja un înțeles: auriu = potul, câmpul de sumă și ALL-IN · verde = CONFIRM ·
   roșu = anulare · albastru = „e în discuție", la voce.
   ⚠️⚠️ S-au randat și verdele și albastrul, și s-au RESPINS uitându-ne la ele:
   pe 3 din 4 butoane, o etichetă colorată FURĂ exact semnalul lui ALL-IN, cerut
   cu două minute înainte. O culoare care înseamnă două lucruri în același ecran
   e o datorie, nu o claritate. */
.bet-context i{font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:#aebccb;}
.bet-context b{font-family:var(--mono); font-size:19px; font-weight:800; color:var(--text); line-height:1.05;}
.bet-context .lead{border-color:color-mix(in srgb,var(--c) 40%,var(--border));}
.bet-context .lead b{color:var(--c);}

.bet-label{font-family:var(--mono); font-size:8px; letter-spacing:.08em; color:#aebccb;
  white-space:nowrap; flex-shrink:0;}
/* ⚠️ CÂMP DE SCRIS, nu doar cursor (cerut explicit). Plafonul de sus e TARE — vezi
   setBetTarget() în poker.js: nu se poate scrie mai mult decât ai LA MASĂ. */
.bet-amt-row{display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.34);
  border:1px solid color-mix(in srgb,var(--c) 38%,transparent); border-radius:10px; padding:5px 9px;}
.bet-amt-row:focus-within{border-color:var(--c);}
/* ⚠️⚠️ `min-width` NU MAI E 0 (reparat 2026-09-03, raportat de Vlad: „cifra 4 se
   vede doar pe jumătate"). Cu `flex:1; min-width:0`, câmpul cedează PRIMUL când
   rândul se strâmtorează — deși e numărul pe care se ia decizia. Măsurat: la un
   panou de 414px conținutul de 57px avea 44px vizibili; la 376px, **6px**.
   ⚠️ 3.7em la 19px ≈ 70px, adică exact cât ocupă cea mai lungă sumă plauzibilă
   („12.345"). Sub atât nu se coboară; cine cedează acum e eticheta și unitatea. */
.bet-input{flex:1 1 auto; min-width:3.7em; background:none; border:none; outline:none; padding:0;
  font-family:var(--mono); font-size:19px; font-weight:800; color:var(--c); text-align:left;}
.bet-input::placeholder{color:#5c6270;}
.bet-unit{font-family:var(--mono); font-size:10px; color:#aebccb; white-space:nowrap;}
/* MAX, ca la restul câmpurilor de sumă din site (`.amt-max` din casino-gate.css) */
.bet-max{flex-shrink:0; appearance:none; cursor:pointer; padding:3px 8px; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent); background:transparent; color:var(--c);
  font:inherit; font-size:9.5px; font-weight:700; transition:background .15s ease;}
.bet-max:hover{background:color-mix(in srgb,var(--c) 14%,transparent);}

.bet-derived,.bet-why,.bet-err{font-family:var(--mono); font-size:10px; line-height:1.3;}
.bet-derived{color:var(--text-dim); margin-top:1px;}
/* ⚠️ EXPLICAȚIA E MAI MARE ȘI MAI LUMINOASĂ decât restul liniilor mici (Vlad,
   2026-08-23: „fă-o mai clară, puțin mai mare"). Era 10px pe `--text-faint`, adică
   cel mai șters text din panou — deși e singurul care spune DE UNDE vine suma.
   ⚠️ Cifrele sunt AURII (`--c`), aceeași culoare ca suma din câmp: ochiul urmărește
   aritmetica, nu fraza. Vlad a propus roșu; roșul e luat în panou de eroare
   (`.bet-err`) și de butonul de anulare, iar o explicație normală colorată la fel
   ar citi „ceva e greșit". Auriu = „valoare", ceea ce chiar sunt. */
.bet-lines{min-height:16px;}
.bet-why{color:var(--text-dim); font-size:12px;}
.bet-why b{color:var(--c); font-weight:800;}
.bet-derived:empty,.bet-why:empty{display:none;}
.bet-err{color:var(--coral);}
.bet-err[hidden]{display:none;}

.bet-panel-row{display:flex; align-items:center;}
.bet-popover input[type=range]{flex:1; min-width:0; accent-color:var(--c);}

/* ⚠️ GRILĂ 2×2, nu un rând de patru: pe un panou de 440px patru butoane în linie
   ar avea ~44px fiecare, adică exact cât să-și rupă eticheta („ALL-" + „IN") și să
   crească rândul în înălțime — direcția în care panoul ajunge iar peste board. */
.bet-quick{display:grid; grid-template-columns:1fr 1fr; gap:4px;}
/* ⚠️ Mărite 2026-08-23 („butoanele de pot sunt prea mici"). Spațiul vine din faptul
   că panoul urcă acum până lângă cărți — potul de pe pâslă e oricum sub el. */
/* ⚠️⚠️ PE DOUĂ RÂNDURI, ȘI TOATE SPUN „RAISE TO" (ales de Vlad, 2026-09-03).
   Butoanele scriau numele sizing-ului lângă sumă — `POT 0.060` — la 3 cm sub
   `POT 0.030`, potul REAL de pe masă. Același cuvânt, două înțelesuri: te aștepți
   ca al doilea număr să fie primul. Vlad a raportat-o exact așa.
   ⚠️ Numele (MIN · ½ POT · POT · ALL-IN) au DISPĂRUT de pe buton, deliberat, și e
   un cost asumat: două butoane pot arăta aceeași sumă (pe poturi mici ½ POT cade
   peste MIN). Informația nu s-a pierdut — după apăsare, `betWhy` spune care e
   („the smallest raise allowed", „½ of the pot after your call"), iar `title` o
   spune la hover, fără să coste niciun pixel.
   ⚠️ S-au respins, MĂSURATE: toate patru pe un rând cu „RAISE TO" lângă sumă
   (butoane care nu se mai deosebesc între ele), un titlu comun peste grup
   (+19px), și „RAISE TO" peste nume pe trei rânduri (+22px) — panoul are ~190px
   până la cărțile comunitare, deja consumați. [DECISIONS §10.87] */
/* ⚠️⚠️ ÎNĂLȚIMEA E CEA A RÂNDULUI DE SUMĂ, MĂSURATĂ, NU GHICITĂ (2026-09-03).
   Cu padding-ul inițial (5px, moștenit de la varianta pe UN rând), butonul pe
   DOUĂ rânduri ieșea la 31px — vizibil mai înalt decât POT (22px) și decât
   rândul RAISE TO/cifra (25px), și mai înalt decât CONFIRM (24px). Raportat de
   Vlad: „nu mai sunt la aceeași mărime cu butoanele rise".
   ⚠️ Comparat cu producția LA ACEEAȘI SCENĂ înainte de schimbare: acolo butonul
   (pe un rând) era 22px — deci ținta e ~22-25px, nu orice. */
.bet-quick button{appearance:none; cursor:pointer; font:inherit; font-weight:700; letter-spacing:.02em;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  line-height:1; white-space:nowrap;
  padding:3px 4px; border-radius:9px; background:var(--surface); border:1px solid var(--border); color:var(--text-dim);}
.bet-quick button i{font-style:normal; font-size:9px; letter-spacing:.1em; opacity:1; color:#aebccb;}
/* ⚠️⚠️ ALL-IN ÎȘI PĂSTREAZĂ NUMELE, ȘI E AURIU (cerut de Vlad, 2026-09-03).
   Celelalte trei sunt fracții de pot — se deosebesc prin sumă, deci pot să spună
   toate „RAISE TO". All-in NU e o fracție: e altă acțiune, singura care îți pune
   toată stiva pe masă, și singura de pe care nu te mai poți întoarce. O etichetă
   care l-ar ascunde printre celelalte trei ar fi exact greșeala scumpă.
   ⚠️ Auriul e `--c`, cel deja folosit pentru pot și pentru câmpul RAISE TO — nu o
   culoare nouă. */
.bet-quick button[data-q="allin"] i{color:var(--c); opacity:1; font-weight:800;}
.bet-quick button b{font-family:var(--mono); font-size:12.5px; font-weight:800; color:var(--text); line-height:1.1;}
.bet-quick button:hover{color:var(--text); border-color:var(--c);}
/* Butonul stins: se vede că e acolo, dar nu invită. Vezi renderBetPanel(). */
.bet-quick button.dead{opacity:.32; cursor:default;}
.bet-quick button.dead:hover{color:var(--text-dim); border-color:var(--border);}
/* pastila apăsată rămâne marcată, ca să se vadă DE UNDE vine suma din câmp */
.bet-quick button.on{border-color:var(--c); color:var(--text);}
.bet-quick button.on b{color:var(--c);}

/* ⚠️ VERDE = mergi, ROȘU = renunți. Verdele e cel de pe rail (`.rbtn` check/call).
   ⚠️⚠️ ROȘUL E AL JETONULUI DE 5, nu coralul mesei: `#f0616d → #b3212e`, exact
   gradientul din `.chip-disc.c5`. Coralul (`--coral`, #FF6B9D) e ROZ, iar Vlad l-a
   respins tocmai pentru asta (2026-08-23) — „roșul ca jetonul, nu roz". Culoarea
   există deja pe masă, deci nu e un roșu inventat.
   ⚠️ PĂTRAT, cu „✕": `aspect-ratio:1` + `align-self:stretch`, deci latura urmează
   singură înălțimea rândului — nu se scrie nicio dimensiune de mână, care s-ar
   desincroniza la prima schimbare de padding a lui CONFIRM. */
.bet-confirm-row{display:flex; gap:6px; align-items:stretch;}
.bet-confirm-row button{appearance:none; cursor:pointer; font:inherit; font-weight:800; font-size:11.5px;
  letter-spacing:.04em; padding:9px 6px; border-radius:10px; border:none;}
.bet-confirm-row .go{flex:1 1 auto; min-width:0; background:linear-gradient(180deg,#6BEFA8,var(--green)); color:#04170c;}
.bet-confirm-row .go:disabled{background:var(--surface-2); color:var(--text-faint); cursor:not-allowed;}
.bet-confirm-row .cancel{flex:0 0 auto; align-self:stretch; aspect-ratio:1; padding:0;
  display:grid; place-items:center; font-size:15px; line-height:1; letter-spacing:0;
  background:linear-gradient(180deg,#f0616d,#b3212e); color:#fff;}

/* ⚠️⚠️ MASA MICĂ: panoul se STRÂNGE, altfel ajunge peste cărțile comunitare.
   Banda liberă e ~35% din ÎNĂLȚIMEA SCENEI (între board la 55,4% și butoane la
   90,7%), iar scena se micșorează cu fereastra — panoul, fiind în px, nu. Măsurat:
   la 1440×900 banda are 190px și panoul de 159px încape; la 1024×700 banda scade la
   ~135px și NU mai încape.
   ⚠️ `@container`, nu `@media`: contează cât e de mare MASA, nu fereastra — cele
   două nu variază la fel, fiindcă scena e `min(1750px, 98vw, 82vh × 2.6283)`.
   ⚠️ Sub ~335px înălțime de scenă nu încape nicio formă; acolo panoul chiar acoperă
   board-ul, ca și cel dinaintea lui. Limită cunoscută, nu ascunsă. */
/* ⚠️⚠️ MASA MICĂ: panoul se STRÂNGE, dar PĂSTREAZĂ forma compactă pe două coloane.
   Banda liberă e ~35% din ÎNĂLȚIMEA SCENEI (între board la 55,4% și butoane la
   90,7%), iar scena se micșorează cu fereastra — panoul, fiind în px, nu. Măsurat:
   la 1440×900 banda are 190px, la 1024×700 doar ~135px.
   ⚠️ `@container`, nu `@media`: contează cât e de mare MASA, nu fereastra — scena e
   `min(1750px, 98vw, 82vh × 2.6283)`, deci cele două nu variază la fel.
   ⚠️ NU se trece pe o bandă lată aici. A fost încercat și respins de Vlad
   (2026-08-23): forma alungită pe orizontală era exact ce nu voia, iar la 1280×800
   ar fi primit-o înapoi fără să ceară nimeni. Se strâng fonturile și spațiile.
   ⚠️ Sub ~330px înălțime de scenă nu încape nicio formă; acolo panoul chiar acoperă
   board-ul, ca și cel dinaintea lui. Limită cunoscută, nu ascunsă. */
@container (max-height: 500px){
  /* ⚠️ și `bottom` se recentrează: pe masa mică slack-ul e de ordinul a 10px, deci
     poziția moștenită ar lăsa aproape zero de o parte. */
  .bet-popover{width:min(430px, 96%); padding:5px 8px; gap:2px; bottom:11.4%;}
  .bet-cols{gap:6px;}
  .bet-col{gap:2px;}
  .bet-col-actions{flex:0 0 176px;}
  /* ⚠️ potul rămâne CEL MAI MARE text și aici — pe o masă mică e cu atât mai
     greu de citit, deci e ultimul lucru din care se taie. */
  .bet-context span{padding:2px 5px;}
  .bet-context b{font-size:15px;}
  .bet-context i{font-size:8.5px;}
  .bet-amt-row{padding:2px 7px; gap:4px;}
  /* ⚠️ La 16px, 3.7em ≈ 59px — tot cât cea mai lungă sumă, la fontul mai mic. */
  .bet-input{font-size:16px;}
  .bet-derived,.bet-err{font-size:9px; line-height:1.2;}
  .bet-why{font-size:10.5px; line-height:1.2;}
  .bet-lines{min-height:13px;}
  .bet-popover input[type=range]{height:11px;}
  .bet-quick{gap:3px;}
  /* ⚠️ ACEEAȘI ȚINTĂ ca la scenă mare — vezi regula din regula de bază: butonul
     pe DOUĂ rânduri nu are voie să depășească înălțimea rândului de sumă. */
  .bet-quick button{padding:1px 2px; gap:0;}
  .bet-quick button b{font-size:10px;}
  .bet-quick button i{font-size:8px;}
  .bet-confirm-row{gap:4px;}
  .bet-confirm-row button{padding:6px; font-size:10.5px;}
  .bet-confirm-row .cancel{padding:0; font-size:13px;}
}
/* ⚠️⚠️ ORDINEA CONTEAZĂ: blocul de mai jos e pentru scene NARROW, ridicat
   DUPĂ cel de „masă mică" (bazat pe înălțime) — vezi de ce, imediat mai jos.
   ⚠️⚠️ De ce e mutat aici, și n-a fost dintru-nceput (2026-09-03): `.scene` are
   `aspect-ratio:1004/382` FIX, deci lățime și înălțime nu variază independent —
   o scenă sub 468px lățime are AUTOMAT sub ~178px înălțime, adică e ÎNTOTDEAUNA
   și în regimul de „masă mică" de mai sus (prag 500px înălțime = ~1314px
   lățime). Cele două seturi de reguli se suprapun mereu la scene mici, nu doar
   uneori.
   ⚠️ Poziționate ÎNAINTE de blocul de „masă mică", regulile astea PIERDEAU:
   `.bet-input{font-size:16px}` din blocul de mai sus (deja în producție din
   2026-08-23, neatins) venea ULTIMUL în sursă și bătea orice font mai mic scris
   aici — măsurat: la scenă 380px, `.bet-input` rămânea la 16px cu `min-width`
   calculat pentru 14.5px, deci conținutul ("12.345") era mai lat decât caseta.
   Mutate DUPĂ, regulile astea sunt cele mai specifice pentru îngustare extremă
   și câștigă, cum trebuie. */
/* ⚠️⚠️ `xEGLD` NU SE ASCUNDE NICIODATĂ (cerut explicit de Vlad, 2026-09-03: „xEGLD
   trebuie să fie mereu"). Prima variantă îl ascundea sub 468px de scenă — greșit
   de două ori: strâmtorarea era pe lățime (era scrisă pe `max-height`, deci nici
   nu se declanșa unde trebuia), și oricum ascunderea unei unități pe o masă de
   BANI nu e o soluție acceptabilă, oricât de rar s-ar declanșa.
   ⚠️ Pe lățime mică, rândul se STRÂNGE (fonturi + spații mai mici), nu se golește
   de conținut. Ordinea rămâne: eticheta cedează cel mai mult, cifra rămâne mereu
   cea mai mare literă din rând. Pragurile sunt pe SCENĂ, nu pe panou — panoul e
   `min(440px, 94%)`, deci scade sub 440 abia când scena trece sub ~468px. */
@container (max-width: 468px){
  .bet-amt-row{gap:4px; padding:4px 7px;}
  .bet-label{font-size:7px;}
  .bet-input{font-size:16px; min-width:3.3em;}
  .bet-unit{font-size:8.5px;}
  .bet-max{padding:2px 6px; font-size:8.5px;}
}
@container (max-width: 400px){
  .bet-label{font-size:6.5px; letter-spacing:.04em;}
  .bet-input{font-size:14.5px; min-width:3.1em;}
  .bet-unit{font-size:7.5px;}
  .bet-max{padding:2px 5px; font-size:8px;}
}
/* ⚠️⚠️ SUB ~390PX DE SCENĂ, VINOVATUL NU MAI E RÂNDUL — E COLOANA DE BUTOANE.
   `.bet-col-actions` are lățime FIXĂ (186px, sau 176px pe masă scundă) și nu
   cedează nimic; la un panou strâns asta lasă coloanei din stânga (POT + suma)
   mai puțin loc decât are nevoie chiar și micșorată la maximum de mai sus.
   ⚠️ Măsurat: la scenă 380px, coloana din stânga rămânea cu ~140px — sub cât
   ocupă „RAISE TO" + „12.345" + „xEGLD" + MAX chiar la fonturile mici. */
@container (max-width: 390px){
  .bet-popover{padding:7px 8px;}
  .bet-cols{gap:5px;}
  .bet-col-actions{flex-basis:150px;}
  .bet-quick{gap:2px;}
  .bet-quick button{padding:3px 2px;}
  .bet-quick button b{font-size:10px;}
  .bet-quick button i{font-size:7px;}
  .bet-confirm-row{gap:3px;}
  .bet-confirm-row button{padding:5px; font-size:9.5px;}
}
@container (max-width: 340px){
  .bet-col-actions{flex-basis:128px;}
  .bet-label{font-size:5.5px;}
  .bet-input{font-size:13px; min-width:2.9em;}
  .bet-unit{font-size:6.5px;}
  .bet-max{padding:1px 4px; font-size:7px;}
}
/* ⚠️ Sub ~330px de scenă panoul nu mai încape curat (măsurat: la 300px cifra se
   taie, chiar și la fonturile minime de mai sus) — mai îngust decât orice telefon
   real la 98vw (cel mai mic ecran obișnuit dă ~353px). Limită CUNOSCUTĂ, ca cea de
   ~330px înălțime de la board mai sus, nu ascunsă: n-are sens micșorat mai mult,
   fontul ar deveni ilizibil înainte să rezolve o lățime pe care niciun telefon n-o
   are. Verificat curat, măsurat, la fiecare prag: 1750 → 320px. */


/* ---- thin strip below the table: status message + secondary links (no more
   boxed console — the real controls now live on the table itself) ---- */
/* ---- avertismentul de inactivitate (doar la masa asta) --------------------
   ⚠️ Deliberat SUB masă, nu peste ea: nu întrerupe o mână în curs și nu acoperă
   cărțile. Nu e o alarmă, e o întrebare — de-aia amber, nu coral, care la masa
   asta înseamnă „ai pierdut" (`.msg.bad`, `.rbtn.fold`). Un avertisment care
   arată ca o pierdere sperie degeaba. */
.idle-note{
  margin:18px auto 0; max-width:640px; text-align:center;
  font-size:14px; font-weight:600; line-height:1.5;
  color:var(--amber); padding:10px 16px; border-radius:12px;
  background:color-mix(in srgb, var(--amber) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--amber) 35%, transparent);
}
.idle-note[hidden]{display:none;}

.below-table{margin:34px 0 0;}
.msg{text-align:center; min-height:24px; font-size:16px; font-weight:600; color:var(--text-dim);}
.msg.good{color:var(--c);}
.msg.bad{color:var(--coral);}

/* ⚠️ GRID, nu flex + space-between: „Leave table" și #handnum au lățimi diferite
   (handnum azi e gol), deci space-between n-ar centra pastila de stack pe
   mijlocul RÂNDULUI, doar pe mijlocul spațiului rămas între ele — cele două
   coloane 1fr sunt garantat egale, indiferent de conținutul lor. */
.below-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-top:14px; font-size:12px; color:var(--text-faint); gap:10px;}
.below-row .leave-btn{justify-self:start;}
.below-row .seat-pill{justify-self:center;}
.below-row #handnum{justify-self:end;}
@media (max-width:560px){.below-row{grid-template-columns:1fr; justify-items:center; gap:10px;}
  .below-row .leave-btn, .below-row .seat-pill, .below-row #handnum{justify-self:center;}}

/* same gold pill design as .lobby-back / the Casino Lobby button */
.leave-btn{appearance:none; cursor:pointer; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; color:#FFE55C; padding:7px 12px;
  border:2px solid rgba(255,215,0,0.3); border-radius:10px;
  background:linear-gradient(145deg, rgba(26,26,46,0.95) 0%, rgba(22,33,62,0.95) 100%);
  backdrop-filter:blur(10px); transition:.15s;}
.leave-btn .ico{font-size:14px; line-height:1;}
.leave-btn:hover:not(:disabled){color:#FFD700; border-color:rgba(255,215,0,0.6);}
.leave-btn:active:not(:disabled){transform:translateY(1px);}
.leave-btn:disabled{color:var(--text-faint); background:var(--surface); border-color:var(--border); opacity:.55; cursor:not-allowed; box-shadow:none; transform:none;}

.rules{margin-top:32px; background:linear-gradient(180deg,#0c1016,#080b10); border:1px solid var(--border); border-radius:14px; padding:0 14px;}
.rules-head{display:flex; align-items:center; justify-content:space-between; padding:13px 0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--text-faint);}
.rules-head button{appearance:none; background:none; border:none; color:var(--text-faint); font:inherit; font-size:10px; cursor:pointer; padding:2px 6px; border-radius:4px;}
.rules-head button:hover{color:var(--text-dim);}
.pt{padding:9px 0; border-top:1px solid var(--border); font-size:13px; color:var(--text-dim); line-height:1.5;}

.history{margin-top:28px; background:linear-gradient(180deg,#0c1016,#080b10); border:1px solid var(--border); border-radius:14px; overflow:hidden;}
.history-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--text-faint);}
.history-head button{appearance:none; background:none; border:none; color:var(--text-faint); font:inherit; font-size:10px; cursor:pointer; padding:2px 6px; border-radius:4px;}
.history-head button:hover{color:var(--text-dim);}
.history-list{max-height:200px; overflow-y:auto;}
.history-list::-webkit-scrollbar{width:4px;}
.history-list::-webkit-scrollbar-track{background:transparent;}
.history-list::-webkit-scrollbar-thumb{background:var(--border); border-radius:2px;}
/* the fade belongs to a row that JUST appeared, not to every row: renderHistory()
   rebuilds the list only when its content changed and tags only the new rows
   `.h-new`. On `.h-row` it replayed for the whole log on every repaint. */
.h-row{padding:7px 14px; border-top:1px solid var(--border); font-size:12px; color:var(--text-dim);}
.h-row.h-new{animation:hfade .25s ease;}
@keyframes hfade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.h-empty{padding:16px 14px; font-size:12px; color:var(--text-faint); font-family:var(--mono); text-align:center; border-top:1px solid var(--border);}
/* the winning hand's actual 5 cards, right in the log line — small rank+suit
   badges, not scaled-down table cards (see miniCardHTML in poker.js). */
.hcards{display:inline-flex; gap:3px; margin-left:6px; vertical-align:middle;}
.hcard{display:inline-block; padding:1px 4px; border-radius:4px; background:var(--surface-2);
  border:1px solid var(--border); font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--text);}
.hcard.red{color:var(--coral);}


/* ---- buy-in modal: a single drag-to-pick slider (like the table's own
   volume control) instead of a 2x2 grid of preset amounts — smaller and
   quieter than the old grid, one control instead of four buttons. ---- */
.modal-overlay{position:fixed; inset:0; background:rgba(2,3,6,.82); backdrop-filter:blur(4px); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:20px;}
.modal{position:relative; width:100%; max-width:320px; background:linear-gradient(180deg,#0f131b,#0a0d12); border:1px solid var(--border);
  border-radius:18px; padding:22px 20px 18px; box-shadow:0 30px 60px -20px rgba(0,0,0,.7);}
/* ⚠️ AL DOILEA DRUM spre aceeași ieșire, nu un al doilea buton (cerut de Vlad,
   2026-08-19): apasă exact `cashOutAndLeave`, funcția lui `.lobby-back` — pusă
   aici fiindcă acest modal (z-index:60) acoperă colțul din stânga-sus cât
   timp e deschis, chiar dacă `.lobby-back` are acum z-index:500. */
.modal-close{position:absolute; top:10px; right:12px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text-dim);
  font:inherit; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:.15s;}
.modal-close:hover{background:rgba(255,255,255,.1); color:#fff; border-color:var(--text-faint);}
.modal h2{margin:0 0 4px; font-size:18px; text-align:center;}
.modal p{color:var(--text-dim); font-size:12px; text-align:center; margin:0 0 14px;}

.buyin-amt{text-align:center; font-family:var(--mono); font-weight:800; font-size:30px; color:var(--c);
  text-shadow:0 0 22px color-mix(in srgb,var(--c) 35%,transparent); margin-bottom:10px;}
/* --pct written by updateBuyinAmt() in poker.js, same technique as .vol */
.buyin-slider{-webkit-appearance:none; appearance:none; display:block; width:100%; height:7px;
  border-radius:999px; cursor:pointer; outline:none; border:1px solid var(--border);
  background:linear-gradient(to right, var(--c) 0 var(--pct,50%), var(--surface-2) var(--pct,50%) 100%);}
.buyin-slider::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; cursor:pointer; margin-top:-1px;
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 0 0 4px color-mix(in srgb,var(--c) 55%,transparent);}
.buyin-slider::-moz-range-thumb{width:20px; height:20px; border:0; border-radius:50%; background:#fff; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 0 0 4px color-mix(in srgb,var(--c) 55%,transparent);}
.buyin-slider:disabled{opacity:.4; cursor:not-allowed;}
.buyin-range-labels{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px;
  color:var(--text-faint); margin:6px 1px 16px;}
.buyin-go{display:block; width:100%; appearance:none; cursor:pointer; font:inherit; font-weight:800; font-size:14px;
  padding:12px; border-radius:12px; border:none; background:linear-gradient(180deg,#ffe27a,var(--c)); color:#06130b;}
.buyin-go:hover:not(:disabled){filter:brightness(1.06);}
.buyin-go:disabled{opacity:.4; cursor:not-allowed; background:var(--surface); color:var(--text-faint);}
/* quiet secondary action under the modal's primary button — same ghost
   treatment as .confirm-leave (outline only, no fill) so it never competes
   with Sit Down / Add Chips for attention. */
.modal-back{display:block; width:100%; margin-top:8px; appearance:none; cursor:pointer; font:inherit;
  font-weight:700; font-size:12.5px; padding:10px; border-radius:12px; background:transparent;
  color:var(--text-faint); border:1px solid var(--border); transition:.15s;}
.modal-back:hover{color:var(--text-dim); border-color:var(--text-faint);}
.modal .avail{text-align:center; font-family:var(--mono); font-size:12px; color:var(--text-faint); margin-top:14px;}

/* ---- buy-in FIELD: a typed amount instead of the slider above, for "sit" and
   "deposit" (2026-08-15, same recipe as the lobby's deposit/withdraw screen and
   Slot xEGLD's buy-in — see renderWalletModal()). The slider stays in the
   markup and in CSS above: openRebuyModal()/setupBuyinModal() (test-only, see
   CLAUDE.md — never wired to a real button) still use it. ---- */
.buyin-field{margin-bottom:10px;}
.buyin-field[hidden]{display:none;}
.buyin-input-row{display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:11px; padding:9px 11px; transition:.13s var(--ease);}
.buyin-input-row:focus-within{border-color:var(--c);}
.buyin-input{flex:1; min-width:0; appearance:none; background:none; border:none; outline:none;
  color:var(--c); font-family:var(--mono); font-size:18px; font-weight:700; letter-spacing:.02em; padding:0;}
/* ⚠️ CENUȘIU (`--text-faint`), NU AURIU ESTOMPAT — aceeași regulă ca la lobby:
   placeholder-ul trebuie să fie clar altă culoare decât textul chiar tastat, nu
   doar o nuanță mai palidă a aceluiași auriu, altfel poate trece drept „o sumă
   deja scrisă acolo". */
.buyin-input::placeholder{color:var(--text-faint);}
.buyin-unit{font-family:var(--mono); font-size:11px; color:var(--text-faint); flex-shrink:0;}
.buyin-max{appearance:none; cursor:pointer; font:inherit; font-family:var(--mono); font-size:10px;
  font-weight:700; letter-spacing:.09em; padding:5px 9px; border-radius:7px; flex-shrink:0;
  color:var(--c); background:color-mix(in srgb,var(--c) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent); transition:.12s;}
.buyin-max:hover{background:color-mix(in srgb,var(--c) 22%,transparent);}
.buyin-max[hidden]{display:none;}
.buyin-hint{font-size:12px; color:var(--text-dim); line-height:1.45; margin:8px 1px 16px; text-align:center;}
.buyin-hint[hidden]{display:none;}
.buyin-err{font-size:12px; color:var(--coral); line-height:1.45; margin:8px 1px 16px; text-align:center;}
.buyin-err[hidden]{display:none;}

/* ---- leave-mid-hand confirm (replaces the native confirm() popup) ----
   "stay" is the safe/recommended choice, so it gets the same prominent gold
   treatment as .buyin-go; "leave" is the one that forfeits money, so it's
   deliberately quieter and coral-outlined (same warning color as .msg.bad),
   not a second gold button competing for attention. ---- */
.modal.leave-confirm p{margin-bottom:18px;}
.confirm-row{display:flex; flex-direction:column; gap:8px;}
.confirm-row button{appearance:none; cursor:pointer; font:inherit; font-weight:800; font-size:13px;
  padding:12px; border-radius:12px; transition:.15s;}
.confirm-stay{border:none; background:linear-gradient(180deg,#ffe27a,var(--c)); color:#06130b;}
.confirm-stay:hover{filter:brightness(1.06);}
.confirm-leave{background:var(--surface); color:var(--coral); border:1.5px solid color-mix(in srgb,var(--coral) 55%,transparent);}
.confirm-leave:hover{background:color-mix(in srgb,var(--coral) 16%,var(--surface)); border-color:var(--coral);}

@media (max-width:640px){
  h1{font-size:36px;}
}

/* ---- cine e la scaunul ăsta (2026-09-02) --------------------------------
   ⚠️ Se deschide la CLICK/TAP, nu la hover: hover nu există pe telefon.
   ⚠️ `z-index` peste scaune, dar sub modalele de conectare — e o lămurire, nu o
   întrerupere. */
.seat-card{position:absolute; transform:translate(-50%,-118%); z-index:9;
  min-width:12cqw; max-width:32cqw; padding:.55em .7em; text-align:left;
  font-family:var(--mono); font-size:clamp(9px,1.05cqw,13px); line-height:1.45;
  color:var(--text); background:rgba(5,7,13,.96); border:1px solid var(--border);
  border-radius:.5em; backdrop-filter:blur(6px); box-shadow:0 6px 24px rgba(0,0,0,.5);}
.seat-card.mine{border-color:color-mix(in srgb,var(--yellow) 45%,transparent);}
.seat-card .sc-name{font-weight:800; margin-bottom:.25em;}
/* ⚠️ `break-all`: o adresă bech32 n-are spații, deci fără asta iese din fereastră. */
.seat-card .sc-addr{opacity:.8; word-break:break-all;}
.seat-card .sc-none{opacity:.6; font-style:italic;}
.seat-card .sc-note{margin-top:.4em; opacity:.55; font-size:.86em;}
.seat-card .sc-copy{margin-top:.5em; width:100%; cursor:pointer;
  font-family:inherit; font-size:inherit; padding:.35em .5em; border-radius:.4em;
  color:var(--text); background:rgba(255,255,255,.06);
  border:1px solid color-mix(in srgb,var(--yellow) 40%,transparent);}
.seat-card .sc-copy:hover{background:rgba(255,255,255,.12);}

/* ⚠️ NOTA DE ASTEPTARE a reconectarii (2026-10-02, cerut de Vlad: „nimeni nu vede" — era gri deschis, 12,5px, 62% opacitate).
   Rosie, ingrosata, in chenar, ca sa nu poata fi ratata. Doar ea: `.hint` ramane gri la restul ecranelor porții. */
.gate-body .hint.wait {
  opacity: 1; font-size: 14.5px; font-weight: 700; line-height: 1.45; color: #FF6B6B;
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(255, 107, 107, .55); background: rgba(255, 107, 107, .10);
}