/* Self-contained theme mirroring /arcade-shell.css. Accent --c = green (felt). */
  :root{
    --bg:#06070A; --surface:#0E1117; --surface-2:#141821; --border:#1E2330;
    --mint:#23F7DD; --amber:#F5B544; --coral:#FF6B9D; --blue:#5B8DEF; --lavender:#A78BFA; --yellow:#FFD23F;
    --text:#F4F6FA; --text-dim:#9BA3B4; --text-faint:#6B7385;
    --mono:'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
    --c:#3DDC84;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  /* ⚠️⚠️ `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. [DECISIONS §10.123] */
/* ⚠️⚠️ MASA NU SE ARATĂ ÎNAINTE DE DECIZIE (Vlad, 2026-09-03). Poarta e ascunsă la
   pornire, deci fără asta ar exista o fereastră — scurtă, dar reală — în care se vede
   masa fără poartă, iar poarta cade peste ea o clipă mai târziu: exact saltul
   reclamat. Clasa se scoate în `showGate()` ȘI în `hideGate()`, adică la prima
   decizie, oricare ar fi ea.
   ⚠️ `visibility`, nu `display:none`: layout-ul rămâne așezat, deci nu sare nimic când
   apare. [DECISIONS §10.123] */
  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(61,220,132,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 the "← Casino Lobby" button on the slot machine
     (slot/slot7/slot.css .lobby-back) — unified across every game per Vlad's
     request 2026-08-10, so the lobby button looks identical everywhere. */
  .lobby-back{position:absolute; top:14px; left:16px; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
    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);}

  /* ---- identity status (read-only — connect/disconnect lives in the lobby) ----
     Pinned top-right, mirroring "← Casino Lobby" top-left, instead of its own
     row — keeps it out of the vertical flow so the table sits higher. */
  .player-bar{position:absolute; 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;}}
  /* Same gold pill design as .player-id on the slot machine (slot/slot7/slot.css)
     — unified across every game per Vlad's request 2026-08-10. */
  .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 — a pill next to the identity badge, same visual language, instead
     of a big boxed stat flanking the table (that ate into the table's width). */
  .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);}}

  /* ============================================================
     THE TABLE — a photoreal rendered felt (Masa_Blackjack.webp) is the
     background; the live cards / chips / totals sit ON TOP as percentages of
     the image, so they track it at any size. Card size uses container units
     (cqw = 1% of table width) so everything scales with the table. The seat/
     bet positions below are % of the image and easy to fine-tune. */
  /* No frame, no card-edge: the felt image sits on its own ::before layer with a
     soft radial mask, so its own baked-in dark vignette dissolves straight into
     the page background — the table reads as part of the room, not a photo in a box. */
  /* breaks out of .wrap's 1000px cap and centers on the full page — same trick
     the old .game-grid used, now applied directly since Credits/Last Win no
     longer flank the table in fixed side columns. */
  .scene{position:relative; left:50%; transform:translateX(-50%); z-index:1;
    /* 2413px = 1700px × (2200/1550) — rescaled so this cap yields the SAME
       table HEIGHT as the old 1700px cap did under the old 1550/960 aspect,
       instead of silently shrinking height now that width buys more image
       (bug caught by Vlad, 2026-08-11: chips ended up overlapping because
       this term wasn't rescaled when the aspect-ratio changed). 98vw moved
       to max-width — a pure viewport-overflow safety net, not part of the
       "what size should this be" formula, so it no longer distorts scale. */
    width:min(2413px, calc(82vh * 2.2917)); max-width:98vw; margin:0 auto; aspect-ratio:2200 / 960;
    container-type:size; --cw:4.227cqw;}
  .scene::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    border-radius:16px; /* rounded corners, matching the onchain build */
    background:url("Masa_Blackjack.webp?v=2") center/cover no-repeat;
    /* Camera widened 2026-08-11 (resolution_x 1690→2200, sensor_fit stays
       VERTICAL so vertical FOV/perspective is untouched — see
       Dev_3D_BlackJack_Table.md) specifically so the leather bumper's own
       outer edge (was cut off ~11% past the old frame on each side,
       confirmed by projecting Rail's vertices through the camera) is now
       fully in frame, with only a small ~3.2% margin of studio background
       beyond it. .scene's aspect-ratio matches the render exactly now, so
       `cover` does zero cropping — no more 70px-per-side crop math to track.
       Fades: all four corners (bottom reach 40%, top reach 42%), a thin band
       along the TOP edge (8% of height), and a 3.3% fade on the two SIDE
       edges — sized to that actual margin (not guessed), so it fades only
       the empty studio background, never the leather itself. Replaces the
       old 5% fade, which pre-dated the wider camera and cut into the
       leather because the margin back then was negative (rail exceeded the
       frame) — visible, ugly cropping is exactly what Vlad flagged. */
    -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 8%),
      linear-gradient(to right, transparent 0%, #000 3.3%),
      linear-gradient(to left, transparent 0%, #000 3.3%);
    -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 8%),
      linear-gradient(to right, transparent 0%, #000 3.3%),
      linear-gradient(to left, transparent 0%, #000 3.3%);
            mask-composite: intersect;
    filter:drop-shadow(0 0 70px rgba(61,220,132,.13));
    transition:filter .5s var(--ease);}
  .scene.win::before {filter:drop-shadow(0 0 90px color-mix(in srgb,var(--c) 55%,transparent));}
  .scene.lose::before{filter:drop-shadow(0 0 90px color-mix(in srgb,var(--coral) 50%,transparent));}

  /* seats — % positions over the rendered felt (tweak to taste) */
  /* z-index above .bet-spot (5) — dealt cards fly in from the shoe, past
     the felt band where the chip row sits, on their way to their landing
     spot. Without this, .bet-spot's own z-index put the (z-index:auto)
     cards BEHIND the chips during that flight, so cards visibly slid in
     under the chip discs — backwards, since the chips were placed first
     and cards are what arrives on top of them (Vlad, 2026-08-12: "nu esti
     magician sa bagi cartile pe sub jetoane"). */
  .hand-spot{position:absolute; left:0; right:0; display:flex; justify-content:center; z-index:7;}
  /* FIX 2026-08-11 (Vlad caught it): these were `calc(29% - 0.5cm)` /
     `calc(63% - 1cm)` — mixing a container-relative % with a FIXED physical
     length. Percentages scale with the table, cm never does, so the
     nudge's relative weight grows as the window shrinks — cards visibly
     "ran up" the felt on a smaller window, even climbing toward the chip
     tray, while the fullscreen view (where the fixed cm is a tiny fraction
     of a tall container) looked correct. Same bug class as the mm-based
     chip-pull fix earlier this session, just never applied here. Fix:
     bake the nudge into a flat, scale-invariant % instead of a formula —
     measured at 1920×1080 (.scene height 821px there) where the physical
     nudge's effect was small enough to trust as "the intended look":
     29% - 0.5cm(18.9px)/821px = 26.70%; 63% - 1cm(37.8px)/821px = 58.40%.
     Verified after the fix: top% now measures IDENTICAL at 1920×1080 and
     at a small 1400×900 window — no more drift. */
  .hand-spot.dealer{top:26.70%;}   /* dealer cards: clear felt just below the chip tray, nudged up (was 0.5cm per Vlad, now baked into this %) */
  .hand-spot.player{top:58.40%;}   /* your cards: on the centre betting circle (chips moved beside them, see .bet-spot), nudged up (was 1cm per Vlad, now baked into this %) */
  .hand{display:flex; justify-content:center; min-height:calc(var(--cw)*1.4);}

  /* a group = a stack of cards + a total pill under it */
  .phand{display:flex; flex-direction:column; align-items:center; transition:filter .2s;}
  /* NOTE on every literal `Ncqw` from here down (card/chip/button sizes,
     gaps, offsets, font-sizes): all rescaled ×(1550/2200 = 0.704545) on
     2026-08-11 alongside the camera widening. Reason: cqw is 1% of
     container WIDTH, and container width now represents MORE of the raw
     render's own pixel grid (2200 image-px, was a 1550-wide crop of a 1690
     one) — the same "6cqw" literal would now target a bigger absolute
     pixel size than the actual card/chip artwork baked into the image,
     which didn't change size at all (same camera distance/lens/vertical
     resolution, only horizontal FOV grew). Rescaling keeps every element
     pixel-matched to the image exactly like before; skipping this step is
     what caused the bet chips to overlap (Vlad caught it). Anything
     computed via calc(var(--cw)*N) does NOT need touching — it inherits
     correctness from --cw's own (rescaled) definitions. */
  .player-hands{display:flex; justify-content:center; align-items:flex-start; gap:2.114cqw;}
  .player-hands[data-count="2"]{--cw:3.523cqw;}
  .player-hands[data-count="3"]{--cw:2.818cqw; gap:1.409cqw;}
  .player-hands[data-count="4"]{--cw:2.395cqw; gap:0.916cqw;}
  .phand.active .hand{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 90%,transparent));}
  .phand.done:not(.active){filter:brightness(.74) saturate(.85);}

  /* total pill under each hand (scales with card size) */
  .hand-total{margin-top:5%; font-family:var(--mono); font-size:calc(var(--cw)*0.18); font-weight:800; font-variant-numeric:tabular-nums;
    color:var(--text-dim); background:rgba(5,7,13,.82); border:1px solid rgba(255,255,255,.16); border-radius:999px;
    padding:.35em .8em; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.55);}
  .hand-total.good{color:var(--c); border-color:color-mix(in srgb,var(--c) 55%,transparent);}
  .hand-total.bust{color:var(--coral); border-color:color-mix(in srgb,var(--coral) 55%,transparent);}
  .phand.active .hand-total{color:var(--c); border-color:var(--c);}
  /* player's total pill nudged down to the midpoint between the cards and
     the wood rail's inner edge (Vlad, 2026-08-11).
     Wood edge: sampled the actual rendered pixels along the vertical
     centerline (x=1100 of the 2200px-wide webp) — sharp felt→wood color
     transition at y≈768-770px = 80.0-80.2% of height. Trusted over the
     raw Blender "Felt" mesh boundary (projects to 81.10%): the Rail object
     physically overlaps the felt's outer edge a little, so the mesh's own
     boundary sits slightly past what's actually visible in the render —
     the rendered pixels are ground truth for a CSS position, the mesh
     isn't.
     Cards' bottom edge: measured live via DOM getBoundingClientRect, as a
     % of scene height (scale-invariant by construction) — but this only
     became a stable, trustworthy number after fixing a real bug just
     above (.hand-spot.player's old `calc(63% - 1cm)` drifted with window
     size — see that fix's comment). At the corrected, stable position:
     cards bottom ≈71.96%, wood edge ≈80.1% → midpoint ≈76.03%.
     translateY is in cqw (width-relative, like --cw) rather than a
     physical cm, for the same scale-invariance reason as the fix above;
     converted via the scene's own aspect ratio (2200/960=2.2917): cqw is
     width-relative, so 1 height-% ≈ (1/2.2917)=0.4364cqw. Value tuned by
     direct measurement (not just formula) to land the pill's center
     exactly on 76.03%, verified at both 1920×1080 and 900×700 giving the
     same %. */
  .hand-spot.player .hand-total{transform:translateY(0.586cqw);}

  /* ⚠️ Stiva jucătorului la masă (contractul, NU pariul curent — ăla e deja pe
     pâslă, .bet-cap) — pastilă aurie, centrată pe lemn, în banda goală dintre
     marginea pâslei (wood edge ≈80.1%, măsurat mai sus la .hand-total) și
     rândul de jetoane de pe rail (începe ~83.8%). Cerut de Vlad, 2026-08-21:
     „banii cu care sunt la masă", nu o repetare a pariului. Același look auriu
     ca .lobby-back / .player-id, ca să citească drept „banii tăi", nu ca un
     total de mână. */
  .seat-pill{position:absolute; left:50%; top:81.9%; transform:translate(-50%,-50%);
    display:flex; align-items:baseline; gap:.42em; z-index:6; white-space:nowrap;
    font-family:var(--mono); font-size:0.80cqw; letter-spacing:.05em; color:#FFE55C;
    padding:.36em 1em; border-radius:999px; border:1.5px solid rgba(255,215,0,.38);
    background:linear-gradient(145deg, rgba(26,26,46,.92) 0%, rgba(22,33,62,.92) 100%);
    box-shadow:0 4px 10px rgba(0,0,0,.5);}
  .seat-pill[hidden]{display:none;}
  .seat-pill-cap{opacity:.72; font-size:.82em;}
  .seat-pill .amt{font-weight:800; font-variant-numeric:tabular-nums;}
  .seat-pill-cur{opacity:.68; font-size:.82em;}

  /* empty-seat ghost slots */
  .ghost{width:var(--cw); height:calc(var(--cw)*1.4); border-radius:10%; border:2px dashed rgba(255,255,255,.18);}
  .ghost + .ghost{margin-left:14px;}

  /* ---- 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 — blackjack și
     cele două mese de poker.
     ⚠️ 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; s-ar suprapune.
     ⚠️ RITMUL ȘI SUPRAPUNEREA SUNT ALE CABINETULUI și rămân neatinse: `dealIn .45s`,
     `holeFlip .6s` și `margin-left:-0.3` sunt mai lente/mai strânse decât la poker,
     deliberat. Nu le alinia la poker „ca să fie la fel". */
  .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 + .card3d{margin-left:calc(var(--cw)*-0.3);}
  .card3d.new{animation:dealIn .45s var(--ease) backwards;}
  @keyframes dealIn{
    from{transform:translate(70%,-200%) rotate(12deg); opacity:0;}
    to{transform:translate(0,0) rotate(var(--rot,0deg)); opacity:1;}
  }
  .cf{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .45s var(--ease);}
  .card3d.down .cf{transform:rotateY(180deg);}
  .card3d.reveal .cf{animation:holeFlip .6s 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. */
  .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(61,220,132,.16) 0 8px, transparent 8px 16px),
      linear-gradient(160deg,#12301c,#0a1810);
    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(61,220,132,.5); text-shadow:0 0 16px rgba(61,220,132,.4);}

  /* ---- bet chips: fixed spot on the felt, NOT anchored to the player's hand
     (2026-08-11, replaces the old "beside your cards" version). That version
     positioned .bet-spot at left:100% of .player-row, whose width == however
     wide the current hand happens to be — so every card dealt (hit, or extra
     cards from a split) widened the hand and yanked the whole chip cluster
     rightward, an ugly jump each time (Vlad flagged it). Fixed instead: a
     flat % position on .scene, in the empty felt band between the dealer row
     (top 26.70%, bottom ~40.26% for a 2-card hand) and player row (top
     58.40%) — that band is only ~18% of the table's height, and a 2D cluster
     box (was 3.6cw square) is ~20% tall, so it never actually fit: even a
     plain 2-card dealer hand's bounding box already touched it (Vlad,
     2026-08-12, "nu merge asta si e greu de aliniat"). Fixed by going from a
     2D cluster to a single horizontal ROW (Vlad: "mai bine daca se-ar pune
     in linie sub supernova casino") — a row is only ~1.3cw tall regardless
     of how many towers it holds, comfortably under the printed "SUPERNOVA
     CASINO" line (measured off Masa_Blackjack.webp pixels:
     text center ~51%/46%) and above the player row, centered at left:50% —
     same axis dealer/player cards center on (Vlad, 2026-08-12: the first
     pass sat at 51%, visibly right of the table's true vertical axis; 50%
     matches .hand-spot's own centering exactly). Row spacing (0.95cw
     between adjacent slots) is solved the same empirical way as
     CHIP_SLOT_DX below: real circle collision via getBoundingClientRect,
     verified at every tower count (1-6) with every tower maxed at 4 discs
     (CHIP_STACK_CAP), plus a 1% buffer.
     Stacking mirrors Poker_Table's chip piles (poker.js
     chipBreakdown/chipPileHTML, poker.css .chip-tower/.chip-disc): one
     "tower" per denomination present, biggest first, up to 4 peeking discs
     before switching to a ×N badge. --cw:2.466cqw sizes a chip's diameter
     (--cw*0.85) the same ratio as Poker_Table's own chip:card ratio. */
  .bet-spot{position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
    width:calc(var(--cw)*7); height:calc(var(--cw)*1.3);
    --cw:2.466cqw; z-index:5;}
  /* above the row, close in (2026-08-12: shrunk from -1.268cqw once the
     cluster became a short row — the felt band here is tight, between the
     printed "SUPERNOVA CASINO" text above and the player row below, so the
     label sits right against the row instead of floating a full chip-height
     above it). */
  /* ⚠️⚠️ AURIU ȘI ÎNGROȘAT din 2026-09-07 (cerut de Vlad, ales din trei variante randate
     una lângă alta). Era `rgba(255,255,255,.62)` la 0.810cqw — un gri care se pierdea pe
     pâslă. A CONTAT MAI MULT DE ATÂT: de când jetoanele nu-și mai scriu valoarea
     (`SHOW_CHIP_VALUES = false`), rândul ăsta e SINGURUL loc în care îți vezi pariul, deci
     nu mai e o etichetă, e informația.
     ⚠️ Auriul nu e o alegere estetică: pe masa asta el înseamnă deja „banii tăi" —
     pastila STACK, butonul de lobby, `.player-id`. Verdele e al mesei, albul e al textului
     tipărit pe pâslă.
     ⚠️ RESPINSĂ pastila de la poker (`.pile-amt`, gradient auriu→verde cu text închis):
     acolo grămada stă în pâslă liberă, aici banda e strâmtă între „SUPERNOVA CASINO"
     tipărit deasupra și rândul de jetoane dedesubt — pastila se suprapunea peste text.
     Verificat în browser, nu dedus. */
  .bet-cap{position:absolute; left:50%; top:-0.6cqw; transform:translateX(-50%);
    font-family:var(--mono); font-size:0.95cqw; font-weight:700; letter-spacing:.14em;
    color:#FFE55C; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.9);}
  #bet-chips{position:absolute; inset:0;}
  /* clone overlay for the loss fly-away (2026-08-12, see flyChipsToTray()) —
     z-index above .hand-spot (7) so it crosses over the resting cards, not
     under them. */
  .chip-flyaway{position:absolute; z-index:8; pointer-events:none;}
  .chip-tower{position:absolute; transform:translate(-50%,-50%); width:calc(var(--cw)*0.85); height:calc(var(--cw)*1.2);}
  .chip{position:absolute; left:0; bottom:calc(var(--i)*var(--cw)*0.11);
    width:100%; height:calc(var(--cw)*0.85); border-radius:50%; display:grid; place-items:center;
    /* ⚠️ Fontul rămâne croit pentru eticheta în xEGLD chiar dacă `SHOW_CHIP_VALUES`
       o ține STINSĂ pe pâslă: un întrerupător care cere și recalibrarea fontului ca să
       fie repus nu e întrerupător. Cu `true`, cifra încape (măsurat: 84%%).
    ⚠️⚠️ FONTUL A COBORÂT 0.26 → 0.20 (rail: 1.002cqw → 0.77cqw) pe 2026-09-07,
       când eticheta a trecut în xEGLD. NU e o preferință: „0.001" are CINCI caractere
       față de cel mult trei înainte, iar la mărimea veche ocupa 117%% din interiorul
       discului — adică textul ieșea peste bordura punctată. Măsurat pe lățimea reală a
       glifelor, nu estimat; noua valoare îl duce la ~90%%.
       ⚠️ Rupe proporția „0.26/0.85 din diametru" moștenită de la jetonul de pe masă,
       și e în regulă: aceea era croită pentru un număr scurt. Cele două jetoane (rail
       și pâslă) rămân însă egale între ele — sunt același obiect fizic. */
    font-family:var(--mono); font-weight:800; font-size:calc(var(--cw)*0.20); 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::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 span{position:relative; z-index:1;}
  .chip.c1  , .rail-chip.c1  {background:radial-gradient(circle at 50% 35%, #c3cbd6, #8f98a8);}
  .chip.c5  , .rail-chip.c5  {background:radial-gradient(circle at 50% 35%, #f0616d, #b3212e);}
  .chip.c10 , .rail-chip.c10 {background:radial-gradient(circle at 50% 35%, #6f9bf2, #3457b8);}
  .chip.c25 , .rail-chip.c25 {background:radial-gradient(circle at 50% 35%, #52e394, #1d9c58);}
  .chip.c50 , .rail-chip.c50 {background:radial-gradient(circle at 50% 35%, #55555e, #232328);}
  /* ⚠️ ȘASE culori, exact ale cabinetului, și nu se adaugă a șaptea. A existat un
     `.c75` chihlimbar cât pariul era o treaptă (2026-08-18, o zi) — a plecat cu
     treptele: 75 se compune din 50+25, deci n-are nevoie de disc propriu, iar un
     al șaptelea jeton pe rail a spart aranjamentul 3+3 al mesei. */
  .chip.c100, .rail-chip.c100{background:radial-gradient(circle at 50% 35%, #b98bd6, #6b3f8c);}
  .chip.new{animation:chipDrop .35s var(--ease) backwards;}
  @keyframes chipDrop{from{transform:translateY(-90px) scale(1.15); opacity:0;}
    to{transform:translateY(0) scale(1); opacity:1;}}

  /* ---- rail chips: the actual bet-selector, resting on the table's rail ----
     Same look as the on-table bet chips (colour + dashed white edge) so the
     "chips you pick" and "chips in play" read as the same physical object.
     Clicking one ADDS one chip of that value to the bet (stacks, doesn't replace). */
  .rail-chips{position:absolute; inset:0; pointer-events:none; z-index:6; transition:opacity .45s ease;}
  /* betting is closed mid-hand — fade the whole bet-selector out instead of
     just leaving it in its dimmed-but-visible .disabled look (that's still
     used for a single unaffordable denomination WHILE betting is open).
     Fades back in the same way once the round returns to idle (Vlad,
     2026-08-11) — toggled in renderStats() alongside .need-bet. */
  .rail-chips.in-hand{opacity:0;}
  .rail-chip{appearance:none; position:absolute; cursor:pointer; font:inherit;
    /* sized off the ACTUAL chip Vlad modeled in blender/table.blend, measured
       live (not the on-table pile, which uses Poker_Table's own tuned ratio):
       Chip_grey_0 diameter 0.1176 vs ShoeCard width 0.137 (Blender units,
       same scene) = 0.858 chip:card ratio, applied to blackjack's own card
       width (var(--cw) on .card3d, 6cqw at the base scene size) →
       0.858*6 = 5.15cqw, then ×0.9 per Vlad 2026-08-11 ("10% mai mici") =
       4.635cqw. Border/font keep the on-table chip's own proportions
       (0.09/0.85 and 0.26/0.85 of diameter). */
    width:3.266cqw; height:3.266cqw; border-radius:50%; display:grid; place-items:center;
    /* ⚠️⚠️ `padding:0` NU E COSMETIC (2026-09-07). Un `<button>` are din browser
       `padding:1px 6px`, iar cu `box-sizing:border-box` cei 6px de fiecare parte
       MĂNÂNCĂ din cutia de conținut: aici rămâneau 10.92px din 22.92. Textul mai lat
       decât atât nu se mai CENTREAZĂ — dă pe dinafară spre dreapta, cu exact
       `(lățime_text − cutie)/2`. Măsurat: „0.025" ieșea 4.78px peste inel, adică `5`
       cădea pe bordură. ⚠️ Era o problemă LATENTĂ: „25" încăpea în 10.92px, deci s-a
       văzut abia când eticheta a trecut în xEGLD. */
    padding:0;
    pointer-events:auto; transform:translate(-50%,-50%);
    /* ⚠️ vezi nota de la `.chip`: coborât odată cu trecerea etichetei în xEGLD. */
    font-family:var(--mono); font-weight:800; font-size:0.77cqw; color:#fff;
    border:0.346cqw 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); transition:.12s;}
  .rail-chip::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);}
  .rail-chip span{position:relative; z-index:1;}
  .rail-chip:hover:not(.disabled){transform:translate(-50%,-50%) translateY(-6%) scale(1.08);}
  .rail-chip:active:not(.disabled){transform:translate(-50%,-50%) scale(.95);}
  .rail-chip.disabled{opacity:.35; pointer-events:none; filter:saturate(.4);}
  /* ---- "place a bet first" hint: disabled buttons show a not-allowed
     cursor with NO other explanation (Chrome doesn't even fire the title
     tooltip on a disabled element — Vlad ran into exactly this: every rail
     button looked dead with no clue why). Pulses the bet chips instead of
     relying on hover text, since the fix is "click one of these", not
     something you'd discover by hovering the disabled buttons themselves.
     Toggled via .scene.need-bet in renderStats() — see playMode() below. */
  @keyframes betHintGlow{0%,100%{filter:drop-shadow(0 0 0 transparent);} 50%{filter:drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 3px #fff);}}
  .scene.need-bet .rail-chip:not(.disabled){animation:betHintGlow 1.6s ease-in-out infinite;}
  /* left trio sits just left of your cards, right trio just right — ON the
     brass rail (Rail_Alama in blender/table.blend), not the wood above it.
     Positions are PROJECTED from Blender, not eyeballed: read Rail_Alama's
     mesh through the scene's own render camera (world_to_camera_view) at
     the SAME world coordinates used since 2026-08-11, re-projected after
     the camera was widened (resolution_x 1690→2200, see Dev_3D_BlackJack_Table.md)
     — `top%` came out within 0.15 of its old value (vertical FOV is
     untouched by that change, as expected); `left%` shifted because more
     of the world is now visible per pixel. Since `.scene`'s aspect-ratio
     matches the render exactly (no more `cover` cropping), this is a
     direct u*100 / (1-v)*100 conversion — no crop offset to fold in.
     Spacing between the 3 chips is still equal ARC LENGTH along the curve
     (not equal `left%` steps — the curve isn't straight); that shape is
     unchanged by the re-projection, only the absolute numbers moved. */
  .rail-left  .rail-chip:nth-child(1){left:28.65%; top:84.50%;}
  .rail-left  .rail-chip:nth-child(2){left:32.29%; top:87.77%;}
  .rail-left  .rail-chip:nth-child(3){left:36.17%; top:89.56%;}
  .rail-right .rail-chip:nth-child(1){left:63.83%; top:89.56%;}
  .rail-right .rail-chip:nth-child(2){left:67.71%; top:87.77%;}
  .rail-right .rail-chip:nth-child(3){left:71.35%; top:84.50%;}

  /* ---- action buttons: imported design + sizing from Poker_Table/poker.css
     .rbtn (round, layered-gradient bevel, per-action accent) — moved onto
     the brass rail like the bet chips instead of a rectangular console below
     the table (Vlad, 2026-08-11). Centered on Rail_Alama's own front-most
     point: projected through the live Blender camera at world x=0, this
     lands at left:50%/top:92.57% (see Dev_3D_BlackJack_Table.md) — within
     this row's narrow span (±0.15 world units either side) the rail's curve
     moves top by well under 1%, flat enough to treat as one row like poker
     does, no per-button curve correction needed.
     PLAY merges DEAL / REBET / HIT into one slot — see playMode() below;
     STAND/DOUBLE/SPLIT stay separate since they're genuine simultaneous
     choices, not phases of the same action. */
  .rail-actions{position:absolute; left:50%; top:92.3%; transform:translate(-50%,-50%);
    display:flex; align-items:center; gap:0.845cqw; z-index:6;}
  .rbtn{appearance:none; cursor:pointer; font:inherit; --rd:3.241cqw; width:var(--rd); height:var(--rd);
    border-radius:50%; display:grid; place-items:center; position:relative; transition:.15s 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%);
    /* ⚠️⚠️ INELUL ȘI UMBRELE SE SCALEAZĂ CU BUTONUL (2026-08-19, cerut de Vlad).
       Butonul e în `cqw`, deci crește și scade cu masa — dar bordura era `2.5px`
       FIX, la fel toate umbrele. Măsurat, inelul ajungea:
           fereastră 1400 → buton 57,98px → inel  3,45% din buton
           fereastră 1074 → buton 44,48px → inel  4,50%
           fereastră  680 → buton 28,16px → inel  7,10%
       Adică la fereastră mică inelul se îngroașă până înghite fața întunecată
       („se vede negru în jur, marginea nu e acoperită"), iar la fereastră mare
       devine un fir. Nu e o impresie: e de peste două ori mai gros la un capăt
       decât la celălalt.
       ⚠️ `--u` e unitatea de scalare, ancorată la 44,48px — mărimea la care arăta
       cum trebuie. La acea lățime NIMIC nu se schimbă față de înainte; la orice
       alta, toate lungimile păstrează aceeași proporție.
       ⚠️ Bordura are podea de 1px: sub ea, browserul o rotunjește la 0 și inelul
       dispare de tot pe ferestre foarte mici. */
    --u:calc(var(--rd) / 44.48);
    /* ⚠️ INELUL NU MAI E `border`, E O UMBRĂ INTERIOARĂ — și asta e miezul reparației.
       `border-width` se rotunjește la pixeli ÎNTREGI: 2,5px cerut se desena 2px,
       1,58px se desena 1px, 3,26px se desena 3px. Deci chiar și scalat corect,
       inelul sărea în trepte și nu putea fi proporțional la lățimi mici — de acolo
       „nu e perfect acoperită marginea". O umbră `inset` se randează cu subpixeli
       și antialiasing, deci grosimea urmărește butonul continuu.
       ⚠️ Fără `border`, cutia nu mai are muchie proprie de rotunjit — deci dispare
       și firul întunecat dintre inel și fața butonului. */
    border:0;
    box-shadow:
      inset 0 0 0 calc(2.5 * var(--u)) color-mix(in srgb,var(--rbtn-accent) 65%,transparent),
      0 calc(7 * var(--u)) calc(16 * var(--u)) calc(-2 * var(--u)) rgba(0,0,0,.6),
      inset 0 calc(1.5 * var(--u)) 0 rgba(255,255,255,.14),
      inset 0 calc(-4 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.5),
      0 0 0 calc(1 * var(--u)) color-mix(in srgb,var(--rbtn-accent) 16%,transparent);}
  .rbtn .ico{font-size:calc(var(--rd)*0.36); 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.play  {--rbtn-accent:var(--c); --rd:4.227cqw;}
  .rbtn.stand {--rbtn-accent:var(--amber);}
  .rbtn.double{--rbtn-accent:var(--blue);}
  .rbtn.split {--rbtn-accent:var(--lavender);}
  /* SPLIT is rare (needs a dealt pair) — removed from the flex row entirely
     rather than just dimmed, so the other 3 buttons re-center as a group
     (DOUBLE/PLAY/STAND reads symmetric, matching poker's 3-button rail; a
     permanently-visible-but-disabled 4th button never let that happen).
     Vlad, 2026-08-11 — "ar ajuta mult la simetria vizuala". */
  .rbtn.split.gone{display:none;}
  .bet-cap{cursor:pointer;}
  .bet-cap:hover{color:rgba(255,255,255,.85);}

  /* result banner floating over the felt */
  .banner{display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:8; /* centered exactly on the "BET" caption text (#bet-amt) — NOT .bet-spot's own top:54% anchor, which is the chip ROW's center; the caption sits above that row via .bet-cap's top:-0.6cqw offset, landing its own visual center at ~50% of .scene, measured via getBoundingClientRect (Vlad, 2026-08-12: "mijlocul mesajului trebuie sa coincida cu mijlocul mesajului bet") */
    font-family:var(--mono); font-weight:800; font-size:clamp(15px,2.395cqw,34px); letter-spacing:.05em; white-space:nowrap;
    color:var(--text); background:rgba(5,7,13,.86); border:1px solid var(--border); border-radius:.6em;
    padding:.5em .9em; backdrop-filter:blur(5px); pointer-events:none;}
  .banner.good{color:var(--c); border-color:color-mix(in srgb,var(--c) 55%,transparent); text-shadow:0 0 22px color-mix(in srgb,var(--c) 60%,transparent);}
  .banner.bad{color:var(--coral); border-color:color-mix(in srgb,var(--coral) 50%,transparent);}
  .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);}
  .banner.go{animation:bannerPop 2.6s var(--ease) forwards;}
  @keyframes bannerPop{
    0%{opacity:0; transform:translate(-50%,-50%) scale(.7);}
    12%{opacity:1; transform:translate(-50%,-50%) scale(1.06);}
    20%{transform:translate(-50%,-50%) scale(1);}
    80%{opacity:1;}
    100%{opacity:0; transform:translate(-50%,-50%) scale(.96);}
  }

  /* ---- the console: chips + actions, clearly BELOW the table ---- */
  /* the whole console box below the table — status text + rounds/shoe/link —
     no longer earns its place now the action buttons live on the rail and
     outcomes show right on the felt via .banner (Vlad, 2026-08-11: "nu isi
     mai are rostul"). Hidden, not deleted: setMsg()/handcount/shoe-info are
     still written throughout the game logic (turn prompts like "Hand 2 of 3"
     have no other surface today) — ripping those calls out is a separate,
     bigger change nobody asked for. This just stops it from taking up room. */
  .controls{display:none;}
  .console-cap{text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--text-faint); margin:0 0 14px;}

  .msg{text-align:center; min-height:30px; margin-top:14px; font-size:20px; font-weight:600; color:var(--text-dim);}
  .msg.good{color:var(--c);}
  .msg.bad{color:var(--coral);}
  .msg.blackjack{color:var(--yellow); font-size:24px; text-shadow:0 0 16px color-mix(in srgb,var(--yellow) 70%,transparent);}

  .row{display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:12px; color:var(--text-faint); gap:10px; flex-wrap:wrap;}
  .link{color:var(--text-faint); background:none; border:none; font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; padding:0;}
  .link:hover{color:var(--text-dim);}

  /* ---- rules: same Hide/Unhide button pattern as Poker_Table/poker.css
     (.rules/.rules-head), replacing the native <details> disclosure — starts
     hidden, same default the collapsed <details> had (Vlad, 2026-08-11). */
  .rules{margin-top:16px; 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{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid var(--border); font-size:14px; gap:14px;}
  .pt .mult{font-family:var(--mono); font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .pt small{color:var(--text-faint); font-size:11px; display:block;}

  /* ---- hand history ---- */
  .history{margin-top:16px; 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:220px; 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;}
  .h-row{display:flex; align-items:center; gap:10px; padding:7px 14px; border-top:1px solid var(--border); font-size:13px; animation:hfade .25s ease;}
  @keyframes hfade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  .h-row .h-num{font-family:var(--mono); font-size:10px; color:var(--text-faint); min-width:28px; text-align:right;}
  .h-row .h-cards{font-family:var(--mono); font-size:12px; flex:1; color:var(--text-dim); letter-spacing:.02em;}
  .h-row .h-result{font-family:var(--mono); font-weight:700; font-size:13px; min-width:64px; text-align:right;}
  .h-row.h-win .h-result{color:var(--c);}
  .h-row.h-bj .h-result{color:var(--yellow); text-shadow:0 0 8px color-mix(in srgb,var(--yellow) 50%,transparent);}
  .h-row.h-loss .h-result{color:var(--coral);}
  .h-row.h-push .h-result{color:var(--text-faint);}
  .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);}


  /* blackjack flash */
  .flashbang{position:fixed; inset:0; background:radial-gradient(circle at 50% 45%, rgba(255,210,63,.35), transparent 60%); z-index:50; pointer-events:none; opacity:0;}
  .flashbang.go{animation:fb 1.1s ease;}
  @keyframes fb{0%{opacity:0;}15%{opacity:1;}100%{opacity:0;}}

  @media (max-width:640px){
    /* the table (image) + everything on it (rail chips + rail-actions
       included) scale by container units already, nothing left to size here */
    h1{font-size:38px;}
  }

  /* ---- sound control: mute + volume, ported from Poker_Table/poker.css's
     own sound-ctl (identical open/close-panel behaviour, same master-gain
     engine ported into the script below) — sits top-right of the felt, clear
     of the rail chips (left/right) and rail-actions (bottom-center).
     Anchored by LEFT, not right, same reasoning as poker's: opening the
     panel only grows the pill rightward, so the speaker itself never moves. */
  .sound-ctl{position:absolute; z-index:6; top:2.4cqh; 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 the script below; 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);}