/* ============================================================================
   Supernova Roulette xEGLD — masa

   ⚠️ PORTAT o singură dată din `public/roulette/index.html` (cabinetul pe credite),
   2026-08-17, la migrarea pe bani. De acum cele două DIVERG: nu le compara cu
   `diff`, nu le sincroniza. Jocul pe credite oricum dispare.

   ⚠️ VALORILE DE AICI SUNT MĂSURATE, NU ALESE. Poziția rail-ului (top:91.5%), aspectul
   scenei, unitățile de container — toate au fost reglate pe randarea mesei. Înainte să
   muți ceva, citește DECISIONS.md §5.1–§5.7.
   ⚠️ Tot ce stă pe rail se măsoară în unități de CONTAINER (cqw/cqh), niciodată în px:
   `.table3d` are `container-type:size`, deci rail-ul scalează cu masa. Un amestec de
   px și cqw pe același rând se desincronizează la fiecare altă lățime de fereastră.
   ============================================================================ */

  :root{
    --bg:#06070A; --surface:#0E1117; --surface-2:#141821; --border:#1E2330;
    --mint:#23F7DD; --amber:#F5B544; --coral:#FF6B9D; --blue:#5B8DEF; --lavender:#A78BFA;
    --green:#3DDC84;   /* blackjack's accent — the bet-hint glow borrows it, see betHintGlow */
    --text:#F4F6FA; --text-dim:#9BA3B4; --text-faint:#6B7385;
    --mono:'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
    --c:#FF6B9D;
    --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 .table3d-crop{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,107,157,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:1180px; margin:0 auto; padding:14px 18px calc(30px + env(safe-area-inset-bottom));}

  /* Same gold pill design as the "← Casino Lobby" button on the slot machine
     (slot-xegld/slot.css .lobby-back) — unified across every game per Vlad's
     request 2026-08-10, reconfirmed 2026-08-18: SAME TEXT and SAME POSITION
     everywhere, not just the same colours.
     ⚠️ `fixed`, nu `absolute`: cu absolute butonul se plimba cu pagina la derulare,
     iar la celelalte jocuri stă pe loc — adică arăta la fel doar cât timp nu
     derulai. */
  .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:40px; 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 + last win — pills next to the identity badge, same visual
     language, instead of big boxed stats above the table. Roulette's history
     strip is just coloured dots (no amounts), so — unlike blackjack/slots —
     Last Win has no replacement elsewhere and stays, just restyled. */
  .credits-pill, .win-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;}
  .win-pill b{color:var(--c); font-weight:800; font-variant-numeric:tabular-nums; margin-left:5px;}
  .credits-pill b.flash, .win-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 Blender render. Everything live (the
     spinning wheel sprite, the hit areas, the chips) is layered on
     top at percentages measured from that same render's camera.
     ============================================================ */
  /* breaks out of .wrap's 1180px cap and centers on the full page, same trick
     used for the blackjack table — otherwise "100%" here means .wrap's own
     (narrow) content width, which silently caps the vh-based size once it
     grows past it, making further vh increases invisible. */
  /* the render has ~101px (9.7% of 1040) of empty black space above the table
     rail before any content starts. .table3d-crop trims ~17px of that (17% of
     the margin) off the top so the table sits higher, with ZERO risk to the
     wheel-sprite/hit-area/chip alignment: .table3d itself keeps its ORIGINAL
     1600×1040 coordinate system untouched (every existing % position inside
     it still means exactly what it meant before) — only the OUTER wrapper is
     shorter and clips the top sliver via overflow:hidden, while .table3d is
     shifted up by the matching amount so its un-cropped content still lines
     up pixel-for-pixel with what's visible. */
  /* Sized from the REAL available viewport height, not a guessed vh%: header
     (~92px) sits above; result-display + controls + history (~149px) sit
     below. "100vh - 250px" (241px measured + a small buffer) is what's left
     for the table — this adapts to any actual window height (Mac dock,
     browser chrome, whatever is eating into it), so SPIN + history fit
     without knowing the real number in advance. */
  .table3d-crop{position:relative; left:50%; transform:translateX(-50%); z-index:1;
    width:min(1700px, 98vw, calc((100vh - 250px) * 1.5641)); margin:0 auto;
    aspect-ratio:1600/1023; overflow:hidden;}
  .table3d{position:absolute; top:-1.6618%; left:0; z-index:1;
    width:100%; aspect-ratio:1600/1040; container-type:size;}
  /* The render's border pixels are (0,0,0) while --bg is #06070A, so an
     unmasked image reads as a dark rectangle pasted onto the page. Same fix as
     the poker table (Poker_Table/poker.css .scene::before): fade the edges out
     in alpha so the page background takes over.
     The stops are MEASURED off Masa_Ruleta_3D.webp, not guessed: table content
     spans x 26%..74% and y 9.7%..95%, everything outside that is floor, so
     every fade below stays inside the floor margin and never touches the
     betting layout.
     ⚠️ The top fade MUST end before 6.91%: .wheel-sprite is an opaque <img>
     (the frames are RGB, no alpha) pinned at top:6.91%, and the mask does not
     apply to it — any fade still running under the sprite shows up as a
     rectangle around the wheel. 5% also leaves a real gradient, because
     .table3d-crop already eats the first 1.66% of the height.
     ⚠️ Do NOT switch `contain` to `cover` — see DECISIONS.md §1.3. */
  .table3d::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url("Masa_Ruleta_3D.webp") center/contain no-repeat;
    -webkit-mask-image:
      radial-gradient(32% 32% at 0% 0%, transparent 0%, #000 70%),
      radial-gradient(32% 32% at 100% 0%, transparent 0%, #000 70%),
      radial-gradient(32% 32% at 0% 100%, transparent 0%, #000 70%),
      radial-gradient(32% 32% at 100% 100%, transparent 0%, #000 70%),
      linear-gradient(to bottom, transparent 0%, #000 5%),
      linear-gradient(to top, transparent 0%, #000 3.5%),
      linear-gradient(to right, transparent 0%, #000 14%),
      linear-gradient(to left, transparent 0%, #000 14%);
    -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in, source-in;
            mask-image:
      radial-gradient(32% 32% at 0% 0%, transparent 0%, #000 70%),
      radial-gradient(32% 32% at 100% 0%, transparent 0%, #000 70%),
      radial-gradient(32% 32% at 0% 100%, transparent 0%, #000 70%),
      radial-gradient(32% 32% at 100% 100%, transparent 0%, #000 70%),
      linear-gradient(to bottom, transparent 0%, #000 5%),
      linear-gradient(to top, transparent 0%, #000 3.5%),
      linear-gradient(to right, transparent 0%, #000 14%),
      linear-gradient(to left, transparent 0%, #000 14%);
            mask-composite: intersect;
    filter:drop-shadow(0 0 70px rgba(255,107,157,.10));}

  /* Motion blur is DRIVEN PER FRAME from the spin's own easing (see spinWheel),
     not switched by a class. --mblur / --bblur ramp down to 0 across the whole
     spin. The old code held a FIXED 1.1px and dropped it in a single step at
     t=0.82: the numbers snapped into focus in one frame, which reads like the
     wheel is hiding something until it decides to show you. */
  .wheel-sprite{position:absolute; z-index:1; display:block; pointer-events:none;
    filter:blur(var(--mblur,0px));}

  .ball-sprite{position:absolute; z-index:3; width:.85cqw; height:.85cqw; margin:-.425cqw 0 0 -.425cqw;
    display:block; pointer-events:none; opacity:0;
    filter:drop-shadow(0 .15cqw .2cqw rgba(0,0,0,.55)) blur(var(--bblur,0px));}
  .ball-sprite.show{opacity:1;}
  /* .blur now only swaps the SHADOW for the in-motion one; the blur itself
     stays on the variable, so it stays continuous across this class change. */
  .ball-sprite.blur{filter:drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.5)) blur(var(--bblur,0px));}

  /* sound controls: mute + volume, in one pill in the table's top-right corner.
     Sized in cqw like everything else on the table, so it scales with it. */
  /* Collapsed it is just the speaker; .open slides the slider out of it. The
     slider is always in the DOM (so it keeps focus and value) — it is width and
     opacity that animate, and opacity reaching 0 is what hides the thumb too. */
  /* Tucked near the table's top-right corner. Vlad set the final spot by eye,
     in units of the speaker itself: 63cqw (the measured limit) + one and a half
     icon widths = 63 + 1.5 x 3.58 = 68.37cqw.
     The 63% floor is MEASURED and is the value not to go below: in this pill's
     vertical band (y 3.85%..11.3%) the table's silhouette — dark rail included,
     i.e. read at a threshold just above the floor — reaches 61.25% of the frame
     width, so anything under ~63% starts climbing onto the wood.
     ⚠️ Anchored on LEFT, not right: right-anchored it grows LEFTWARDS when the
     panel opens (closed 5.02% of the frame, open 16.35%), which from here would
     put the open panel on the table. Left-anchored it opens away from it —
     the same reason the poker table does it, see DECISIONS.md §6.7. */
  .sound-ctl{position:absolute; z-index:5; top:2.5cqw; left:68.37cqw;
    display:flex; align-items:center; gap:0; padding:.52cqw;
    border-radius:999px; border:1px solid var(--border); background:rgba(6,7,10,.72);
    backdrop-filter:blur(4px);
    transition:padding .28s var(--ease), background .2s var(--ease), border-color .2s var(--ease);}
  .sound-ctl.open{padding-right:1.16cqw;}
  .sound-ctl:hover, .sound-ctl:focus-within{background:rgba(6,7,10,.92);
    border-color:color-mix(in srgb,var(--c) 45%,transparent);}
  .mute-btn{width:3.58cqw; height:3.58cqw; min-width:26px; min-height:26px; flex:none;
    border-radius:999px; border:0; background:transparent;
    color:var(--text); font-size:1.85cqw; 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 renderVolume(); it paints the filled part of the track */
  .vol{-webkit-appearance:none; appearance:none; flex:none; height:.69cqw;
    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:9.83cqw; opacity:1; margin-left:.87cqw; pointer-events:auto;}
  .sound-ctl.open .vol.muted{opacity:.35;}
  .vol:focus-visible{box-shadow:0 0 0 .23cqw color-mix(in srgb,var(--c) 40%,transparent);}
  .vol::-webkit-slider-thumb{-webkit-appearance:none; width:1.62cqw; height:1.62cqw;
    min-width:12px; min-height:12px; border:0;
    border-radius:50%; background:#fff; cursor:pointer;
    box-shadow:0 0 .46cqw color-mix(in srgb,var(--c) 75%,transparent);}
  .vol::-moz-range-thumb{width:1.62cqw; height:1.62cqw; min-width:12px; min-height:12px; border:0; border-radius:50%;
    background:#fff; cursor:pointer;
    box-shadow:0 0 .46cqw color-mix(in srgb,var(--c) 75%,transparent);}

  .hits{position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:visible;}
  .hits polygon{fill:rgba(255,255,255,0); stroke:rgba(255,255,255,0); stroke-width:.22;
    cursor:pointer; transition:fill .1s, stroke .1s;}
  .hits polygon:hover{fill:rgba(255,255,255,.16); stroke:var(--c);}
  .hits polygon.sel{fill:color-mix(in srgb,var(--c) 22%,transparent); stroke:var(--c);}
  .hits.locked polygon{cursor:default; pointer-events:none;}

  .chips{position:absolute; inset:0; z-index:3; pointer-events:none;}
  .chip-on{position:absolute; transform:translate(-50%,-50%);
    width:3.1cqw; height:3.1cqw; border-radius:50%; display:grid; place-items:center;
    /* ⚠️⚠️ FONTUL A COBORÂT 1.25cqw → 0.68cqw pe 2026-09-07, când eticheta a trecut
       în xEGLD. NU e preferință: suma de pe o celulă are acum până la CINCI caractere
       („0.025", „0.135") față de una-trei înainte, iar la mărimea veche ieșea peste
       bordura punctată. Măsurat pe lățimea reală a glifelor; noua valoare o duce la ~90%.
       ⚠️ Sume mari rămân scurte, fiindcă zerourile din coadă se taie: 1000 de jetoane
       scriu „1", nu „1.000". */
    font-family:var(--mono); font-weight:800; font-size:0.68cqw; color:#fff;
    border:0.42cqw dashed rgba(255,255,255,.85);
    box-shadow:0 .25cqw .5cqw rgba(0,0,0,.6), inset 0 .18cqw .35cqw rgba(255,255,255,.28);
    text-shadow:0 1px 2px rgba(0,0,0,.7);}
  /* same colours as the rail chips above (and as blackjack / poker) — a chip
     must not change appearance between the rail and the felt. No ::before inner
     ring here, unlike the rail chips: these carry their label as a bare text
     node, so an absolutely-positioned ring would paint over the number. At
     3.1cqw the ring would barely register anyway; the gradient is what reads. */
  .chip-on.c1 {background:radial-gradient(circle at 50% 35%, #c3cbd6, #8f98a8);}
  .chip-on.c5 {background:radial-gradient(circle at 50% 35%, #f0616d, #b3212e);}
  .chip-on.c10{background:radial-gradient(circle at 50% 35%, #6f9bf2, #3457b8);}
  .chip-on.c25{background:radial-gradient(circle at 50% 35%, #52e394, #1d9c58);}

  .winner{position:absolute; z-index:4; transform:translate(-50%,-50%); pointer-events:none;
    padding:.5cqw 1.1cqw; border-radius:999px; font-family:var(--mono); font-weight:800; font-size:1.5cqw;
    color:#fff; background:var(--win-bg, rgba(6,7,10,.82)); border:.18cqw solid var(--c);
    box-shadow:0 0 2cqw color-mix(in srgb,var(--c) 60%,transparent); opacity:0; transition:opacity .3s;}
  .winner.show{opacity:1;}
  /* The marker carries the winning number's OWN colour. Always-black made you
     look away from the table to find out what came up, which defeats the point
     of flagging it on the table. Only the background changes — the size, the
     border, the glow and the fade are untouched. Same palette as the history
     dots and the result readout, so one colour language everywhere. */
  .winner.red{--win-bg:rgba(196,40,71,.90);}     /* #C42847 */
  .winner.black{--win-bg:rgba(26,26,46,.92);}    /* #1a1a2e */
  .winner.green{--win-bg:rgba(27,122,61,.90);}   /* #1B7A3D */

  .result-display{margin:4px 0 0; font-family:var(--mono); font-size:14px; color:var(--text-dim);
    min-height:34px; display:flex; align-items:center; justify-content:center; gap:10px;}
  .result-number{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
    font-size:17px; font-weight:800; color:#fff; border:2px solid rgba(255,255,255,.3);}
  .result-number.red{background:#C42847;} .result-number.black{background:#1a1a2e;}
  .result-number.green{background:#1B7A3D;}
  /* ⚠️ Descompunerea plății, mai mică și mai stinsă: e acolo ca aritmetica scaunului
     să poată fi verificată, nu ca să concureze cu suma câștigată. */
  .result-sub{font-size:11.5px; opacity:.62; letter-spacing:.02em;}

  /* ---- controls ---- */
  .controls{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:4px;}
  /* ⚠️ `.bet-info` (pastila "Total bet") s-a mutat PE PÂSLĂ — vezi regula ei
     lângă `.seat-pill`, mai jos în fișier. Rândul ăsta (`.controls`) nu-l mai
     ține deloc. */
  /* ---- bottom rail: chips + actions on ONE row (2026-08-13) ----
     Two chips, the three action buttons, two chips — the blackjack rail idea,
     where the chips flank the actions instead of living in a separate strip.

     ⚠️ Everything here is sized in CONTAINER units. `.table3d` has
     container-type:size, so the rail now scales WITH the table. The chips used
     to be a fixed 46px: invisible while they sat alone, but the moment the
     buttons joined them on the same row, a fixed-px group next to a
     container-scaled table drifts apart at every other window size. --cw is the
     rail's own base unit, mirroring poker's chip metric (disc = --cw*0.85). */
  .table-rail{position:absolute; left:50%; top:91.5%; transform:translate(-50%,-50%);
    display:flex; align-items:center; gap:1.3cqw; z-index:4; --cw:4.63cqw;}
  /* chip face imported from Poker_Table/poker.css (.chip-disc) — the chips that
     sit ON the felt, not the bigger ones modelled on the table edge. Same
     proportions and the same colours as blackjack and poker: all three tables
     are meant to show the same physical object.
     ⚠️ SIZE: 40px, set by eye by Vlad (2026-08-13). The starting point was
     blackjack's BET chips — the ones stacked on the felt, NOT its rail chips —
     which measure 30px at a 1440px viewport; from there 33px, then 40px.
     Measured in cqw against roulette's own table (1017px at that viewport):
     40px = 3.93cqw = --cw*0.85 → --cw:4.63cqw.
     ⚠️ Match the RENDERED SIZE, never the cqw number. The two tables have
     different container widths (blackjack's scene 1411px vs this table's 1017px),
     so copying blackjack's 2.466cqw straight across would come out a third
     smaller here. */
  .chip-btn{width:calc(var(--cw)*0.85); height:calc(var(--cw)*0.85); border-radius:50%;
    position:relative; display:grid; place-items:center; cursor:pointer; appearance:none;
    /* ⚠️⚠️ `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;
    /* ⚠️ Coborât 0.26 → 0.20 odată cu trecerea etichetei în xEGLD — aceleași proporții
       (0.26/0.85 din diametru) și aceeași reparație ca la `.chip` din blackjack. */
    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); transition:.15s;}
  .chip-btn::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-btn span{position:relative; z-index:1;}
  .chip-btn:hover{transform:scale(1.1);}
  .chip-btn.active{border-color:var(--c);
    box-shadow:0 0 14px color-mix(in srgb,var(--c) 60%,transparent),
               inset 0 3px 6px rgba(255,255,255,.25);}
  /* exact colours from blackjack.html / poker.css — do not drift. */
  .chip-btn.c1 {background:radial-gradient(circle at 50% 35%, #c3cbd6, #8f98a8);}
  .chip-btn.c5 {background:radial-gradient(circle at 50% 35%, #f0616d, #b3212e);}
  .chip-btn.c10{background:radial-gradient(circle at 50% 35%, #6f9bf2, #3457b8);}
  .chip-btn.c25{background:radial-gradient(circle at 50% 35%, #52e394, #1d9c58);}
  /* ---- "place a bet" hint, ported from blackjack (.scene.need-bet) ----
     A disabled SPIN explains nothing on its own: Chrome doesn't even fire the
     title tooltip on a disabled button, so the rail just looks dead. Pulsing the
     chips points at the actual fix — "click one of these" — instead of hoping
     the player hovers the button that isn't responding.
     Toggled on .table3d in updateButtons(): no chips down, and not spinning. */
  /* ⚠️ GREEN, not --c. Blackjack's glow reads green because ITS --c is #3DDC84;
     roulette's --c is coral, so reusing var(--c) here gave a coral pulse. Vlad
     asked for the blackjack green exactly (2026-08-13), so the colour is pinned
     to --green and does NOT follow the table accent. */
  @keyframes betHintGlow{0%,100%{filter:drop-shadow(0 0 0 transparent);}
                          50%{filter:drop-shadow(0 0 10px var(--green)) drop-shadow(0 0 3px #fff);}}
  .table3d.need-bet .chip-btn{animation:betHintGlow 1.6s ease-in-out infinite;}
  @media (prefers-reduced-motion:reduce){.table3d.need-bet .chip-btn{animation:none;}}

  /* ---- action buttons: the blackjack rail design (.rbtn), ported 2026-08-13.
     Round, layered-gradient bevel, one accent colour per action. Sized in
     container units like the chips beside them — they live inside .table3d
     (container-type:size), so the whole rail scales as one group.
     ⚠️ Diameters are 20% below the blackjack originals (Vlad, 2026-08-13): there
     the buttons sit alone on the rail, here they share it with the chips, and at
     full size they read as the main object with the chips as decoration.
     4.4cqw / 5.66cqw = 45px / 58px on a 1017px table. */
  .rbtn{appearance:none; cursor:pointer; font:inherit; --rd:4.4cqw; 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%);
    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: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);}
  /* SPIN is the primary action, so it takes the table accent and the bigger
     diameter — exactly the role blackjack's .rbtn.play plays there. */
  .rbtn.spin {--rbtn-accent:var(--c); --rd:5.66cqw;}
  .rbtn.clear{--rbtn-accent:var(--amber);}
  .rbtn.rebet{--rbtn-accent:var(--blue);}

  .history{display:flex; gap:4px; flex-wrap:wrap; justify-content:center; margin-top:6px; min-height:26px;}
  .history .dot{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
    font-size:10px; font-weight:700; font-family:var(--mono); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4);}
  .history .dot.red{background:#C42847;} .history .dot.black{background:#1a1a2e;}
  .history .dot.green{background:#1B7A3D;}

  /* ---- onchain tx toast ---- */
  .tx-toast{position:fixed; bottom:16px; left:50%; transform:translateX(-50%) translateY(20px); z-index:50;
    background:linear-gradient(180deg,#0c1016,#080b10); border:1px solid var(--border); border-radius:12px;
    padding:10px 16px; font-family:var(--mono); font-size:11px; color:var(--text-dim);
    opacity:0; transition:.25s var(--ease); pointer-events:none; white-space:nowrap;}
  .tx-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .tx-toast a{color:var(--c); text-decoration:none;}
  .tx-toast a:hover{text-decoration:underline;}

  .foot{margin-top:28px; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.04em;
    text-transform:uppercase; color:var(--text-faint); line-height:1.9;}
  .foot .link{color:var(--text-faint); text-decoration:none;}
  .foot .link:hover{color:var(--c);}

  .warn{margin:14px auto; max-width:640px; padding:12px 16px; border-radius:12px; text-align:center;
    font-family:var(--mono); font-size:12px; line-height:1.7;
    background:rgba(245,181,68,.08); border:1px solid rgba(245,181,68,.35); color:var(--amber);}

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

/* ============================================================================
   xEGLD — ce se adaugă peste masa portată
   ============================================================================ */

/* ⚠️ TREPTELE MESEI PE BANI SUNT 10 · 25 · 50 · 100, nu 1/5/10/25 ca la credite.
   Culorile sunt IDENTICE cu cele de la poker și blackjack — regula din CLAUDE.md:
   100 mov · 50 negru · 25 verde · 10 albastru. Dacă le atingi într-un joc,
   atinge-le în toate, altfel mesele nu mai arată aceleași jetoane.
   Cele două de mai jos lipseau, fiindcă la credite nu existau treptele astea. */
.chip-on.c50 , .chip-btn.c50 {background:radial-gradient(circle at 50% 35%, #55555e, #232328);}
.chip-on.c100, .chip-btn.c100{background:radial-gradient(circle at 50% 35%, #b98bd6, #6b3f8c);}

/* ⚠️ O treaptă pe care masa NU o poate acoperi acum se STINGE, nu se lasă apăsabilă
   ca să fie refuzată după. Banca e partajată, deci ce e disponibil depinde de ce fac
   ceilalți jucători — iar un buton care se apasă și apoi zice „nu" arată ca o
   defecțiune a mesei, nu ca o limită. */
.chip-btn[disabled]{opacity:.32; filter:saturate(.35); cursor:not-allowed;}

/* Expunerea, ca jucătorul să vadă ce a construit: cât riscă masa pe rotirea asta. */
.exposure{
  /* ⚠️ MUTATĂ SUB butonul de play pe 2026-09-07 (cerut de Vlad) — era la 86.4%, adică
     DEASUPRA rail-ului, unde se lipea de butoane. Acum stă la jumătatea distanței
     dintre marginea de jos a butonului de play și pastila „Total bet":
     play se termină la 95.86%, pastila începe la 101.26% → mijloc 98.5%. Măsurat în
     browser, nu ales din ochi.
     ⚠️ Pastila e în flux normal, cu o marjă FIXĂ de 6px sub masă, deci raportul se
     mișcă puțin cu înălțimea mesei — 98.56% la o masă de 478px, 98.27% la una de 900px.
     Sub 3px diferență, deci un procent fix e suficient; nu-i trebuie `calc`. */
  position:absolute; left:50%; top:98.5%; transform:translate(-50%,-50%);
  font:600 1.35cqh/1 ui-sans-serif,system-ui; letter-spacing:.02em;
  color:#9fb3c8; white-space:nowrap; pointer-events:none; text-shadow:0 1px 2px #000a;
}
.exposure b{color:#e8eef6; font-weight:700;}
.exposure.warn b{color:#ffc978;}

/* Pastila de sesiune: stiva de pe scaun, venită de la server — NU din localStorage.
   ⚠️ Jocul ăsta nu scrie NICIODATĂ în `casino.credits`; `check-old-economy.js` verifică.
   ⚠️ Ton auriu, ca la Blackjack/Poker xEGLD (`.lobby-back`/`.player-id`) — era gri-
   albăstrui, neutru, cerut să treacă pe același ton ca restul meselor (Vlad,
   2026-08-21). Poziția (top:4.2%, sus pe pâslă) rămâne neatinsă — doar culoarea. */
.seat-pill{
  position:absolute; left:50%; top:4.2%; transform:translate(-50%,-50%);
  display:flex; gap:.7em; align-items:center; padding:.42em .95em;
  border-radius:999px; border:2px solid rgba(255,215,0,.3);
  background:linear-gradient(145deg, rgba(26,26,46,.95) 0%, rgba(22,33,62,.95) 100%);
  font:600 1.5cqh/1 ui-sans-serif,system-ui; color:#FFE55C; backdrop-filter:blur(10px);
  white-space:nowrap;
}
.seat-pill .amt{font-weight:800; font-variant-numeric:tabular-nums;}
.seat-pill .sep{opacity:.3;}

/* ⚠️ Total pariat — SUB masă, în fluxul paginii, nu pe pâslă (prima variantă
   stătea pe pâslă și cădea peste rândul cu SPIN — Vlad a corectat 2026-08-21).
   Chiar sub `.table3d-crop`; distanța redusă la jumătate (14px → 6px, Vlad,
   2026-08-21) — mai aproape de buton, dar tot fără să atingă rail-ul. Același
   ton auriu ca `.seat-pill` de mai sus. */
.bet-info{
  margin:6px 0 0; display:flex; justify-content:center; gap:.5em; align-items:baseline;
  padding:7px 14px; font-family:var(--mono); font-size:13px; color:#FFE55C;
  border-radius:999px; border:2px solid rgba(255,215,0,.3);
  background:linear-gradient(145deg, rgba(26,26,46,.95) 0%, rgba(22,33,62,.95) 100%);
  width:fit-content; margin-left:auto; margin-right:auto;
}
.bet-info b{font-weight:800; font-variant-numeric:tabular-nums; color:#FFE55C;}

/* ⚠️ `display:flex`/`block` BATE atributul `[hidden]`, care e doar `display:none` din
   foaia implicită a browserului. Deci un element cu display propriu rămâne VIZIBIL cât
   timp îl ascunzi doar cu `hidden` — pastila de scaun se vedea cu „seat 0.000" înainte
   ca jucătorul să se așeze. Prins deschizând pagina, nu citind codul. */
.seat-pill[hidden], .exposure[hidden], .net-banner[hidden],
.controls .act[hidden], #layout-warn[hidden]{display:none !important;}