/* ============================================
   ⚠️ MUSHROOM xEGLD — portat din `/Library/Documents/slotmachine/slotmachine_mushroom/
   styles.css` (2026-09-26, PLAN_SLOTURI_MULTIPLE.md F5). Tot ce e mai jos, până la
   blocul „CASINO INTEGRATION" de la final, e al sursei, neschimbat — deci o corectură
   vizuală de acolo se poate aduce aici prin `diff`, fără să se amestece cu banii.
   ============================================
   LUCKY 7 SLOTS — 5 reels × 3 rows, 25 lines
   Reference canvas: 2560×1318 px (all values px)
   No cabinet artwork yet — placeholder styling
   ============================================ */

:root {
    --gold: #FFD700;
    --gold-light: #FFE55C;
    --gold-dark: #B8860B;
    --red: #DC143C;
    --red-dark: #8B0000;
    --green: #2ecc40;
    --green-dark: #0f6b1f;
    --dark: #0a0a0a;
    --darker: #050505;
    --panel: #1a1a2e;
    --panel-light: #16213e;
    --text: #e0e0e0;
    --text-dim: #888;
    --neon-pink: #ff2d95;
    --neon-blue: #00d4ff;
    --neon-purple: #b829dd;
    --line: #39ff8a;

    /* Aur metalic pentru ramele cabinetului. Degradeul e VERTICAL, nu oblic:
       pe un element de 1817px lățime, unul oblic își întinde opririle pe toată
       lățimea și fiecare latură prinde doar o bucată din el — iese plat. Vertical,
       laturile stânga/dreapta arată toată trecerea, iar cele de sus/jos prind
       fiecare câte o bandă curată. Relieful propriu-zis îl fac liniile de lumină
       din `box-shadow`, nu degradeul. */
    --gold-metal: linear-gradient(180deg,
        #fff4c8 0%, #e7c152 9%, #b98a1c 22%, #7d5307 38%,
        #a97c14 50%, #e0b53c 63%, #f9e39b 74%, #c99a28 86%,
        #8a5f0b 94%, #ffeeb4 100%);
    /* Același aur, dar pentru bare verticale (delimitatoarele dintre role):
       degradeul traversează GROSIMEA barei — muchie închisă, luciu spre mijloc,
       muchie închisă — ceea ce o face să pară rotunjită. */
    --gold-metal-v: linear-gradient(90deg,
        #4a3204 0%, #8a5f0b 12%, #d5a52f 30%, #fff6d4 46%,
        #e8c455 58%, #a57613 76%, #6b4a08 90%, #3d2903 100%);

    /* Reel geometry — built around the ORIGINAL fruit size (236px) */
    --sym: 236px;          /* symbol cell (and image) size */
    --reel-w: 337px;       /* reel width (236 = 70% of 337) */
    --reel-gap: 22px;
    --sep-bar: 6px;        /* grosimea unei bare de delimitare; golul dintre cele două = --reel-gap − 2×--sep-bar */
    /* Inelul butoanelor mici e mai SUBȚIRE decât o bară dintre role, deși acolo
       tot 6px erau: o linie dreaptă de 6px pe 708px înălțime se citește zveltă,
       dar aceiași 6px înfășurați în jurul unui buton de 64px ocupă mult din el
       și ies ca un inel gros. SPIN e mare, deci rămâne la `--sep-bar`. */
    --btn-ring: 3px;
    --reel-pad: 18px;
    --window-w: 1817px;    /* 4 + 18 + 5×337 + 4×22 + 18 + 4 */
    --window-h: 716px;     /* 4 + 3×236 + 4 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Roboto', sans-serif;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a12 60%, #050505 100%) fixed;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Fixed-size canvas, centered on the viewport, scaled by the inline script */
.game-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2560px;
    height: 1318px;
    transform-origin: center center;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a12 60%, #050505 100%);
    overflow: hidden;
}

/* ============================================
   RAMA AURIE (cabinetul cu role + panoul de control)
   ============================================
   Se desenează SPRE EXTERIOR, cu `::before` la `inset` negativ, tocmai ca
   geometria dinăuntru să rămână neatinsă: bordura proprie a cabinetului e
   numărată în `--window-w`, deci dacă o îngroșam, se strâmtau rolele.

   Inelul: elementul are bordură groasă transparentă, degradeul e pus pe
   `border-box`, iar o mască scoate mijlocul (`mask-composite: exclude`) —
   așa rămâne doar rama, fără să acopere nimic din interior. Măștile sunt
   scumpe doar când se animează; astea sunt fixe. */
.machine-body::before,
.bottom-bar::before {
    content: '';
    position: absolute;
    pointer-events: none;
    background: var(--gold-metal) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    /* Relieful: linii subțiri de lumină și umbră de-a lungul ramei, care o fac
       să citească a bară rotunjită. Ordinea contează — primele sunt deasupra.
         1-2  buza lucioasă de la marginea exterioară
         3-4  umbra dinspre interior, unde bara „coboară" spre sticlă
         5    conturul întunecat de afară, ca rama să nu curgă în fundal
         6-7  lumină difuză aurie + umbra proiectată */
    box-shadow: inset 0 1px 0 rgba(255,252,235,0.85),
                inset 0 2px 1px rgba(255,240,190,0.35),
                inset 0 -2px 1px rgba(90,58,4,0.75),
                inset 0 0 0 2px rgba(0,0,0,0.35),
                0 0 0 1px rgba(46,30,3,0.95),
                0 0 30px rgba(255,190,60,0.25),
                0 8px 20px rgba(0,0,0,0.6);
}
.machine-body::before {
    inset: -12px;
    border: 12px solid transparent;
    border-radius: 30px;
}
.bottom-bar::before {
    inset: -13px;
    border: 13px solid transparent;
    border-radius: 39px;
}

/* ============================================
   REEL WINDOW + LINE NUMBERS
   ============================================ */
.reels-area {
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    height: var(--window-h);
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.machine-body {
    position: relative;
    width: var(--window-w);
    height: var(--window-h);
    background: rgba(0,0,0,0.55);
    /* bordura rămâne la 4px: e numărată în `--window-w` (4 + 18 + 5×337 + 4×22 + 18 + 4),
       deci îngroșarea ei ar strâmta fereastra cu role. Rama aurie se desenează
       ÎN AFARĂ, cu `::before` — vezi `.machine-body::before` */
    border: 4px solid #3a2705;
    border-radius: 18px;
    box-shadow: 0 0 30px rgba(0,0,0,0.7), inset 0 0 40px rgba(0,0,0,0.6);
    flex-shrink: 0;
}

.reels-frame {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    height: 100%;
}

.reels-container {
    display: flex;
    gap: var(--reel-gap);
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 0 var(--reel-pad);
}

.reel {
    flex: 0 0 var(--reel-w);
    width: var(--reel-w);
    height: 100%;
    overflow: visible;
    position: relative;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,215,0,0.15);
}

/* Delimitatoare aurii între role. Stau exact în golul dintre ele
   (`--reel-gap` = 22px), desenate cu `::after` pe fiecare rolă în afară de
   ultima — fără elemente noi în pagină. Sub stratul cu linii de câștig
   (z-index 4), ca liniile verzi să treacă pe deasupra lor, ca în referință. */
.reel:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(-1 * var(--reel-gap));
    width: var(--reel-gap);
    z-index: 3;
    pointer-events: none;
    /* DOUĂ bare subțiri, lipite de marginile golului, cu fundalul cabinetului
       vizibil între ele. Sunt două straturi de fundal pe ACELAȘI element, nu
       două elemente: fiecare strat e degradeul auriu strâns la `--sep-bar`, deci
       trecerea muchie-închisă → luciu → muchie-închisă se comprimă în grosimea
       barei și o face să pară rotunjită. Mijlocul rămâne transparent.
       Strălucirea e `drop-shadow`, nu `box-shadow`, ca să urmeze cele două bare,
       nu dreptunghiul întreg (elementul e fix, deci filtrul nu costă). */
    background: var(--gold-metal-v) left  0 / var(--sep-bar) 100% no-repeat,
                var(--gold-metal-v) right 0 / var(--sep-bar) 100% no-repeat;
    filter: drop-shadow(0 0 7px rgba(255,190,60,0.22));
}

.reel-inner {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.reel-symbol {
    width: 100%;
    height: var(--sym);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.reel-symbol img {
    width: var(--sym);
    height: var(--sym);
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
    pointer-events: none;
}

/* ---- WILD: two layers ----------------------------------------------------
   The reel strip carries wild_fara_text.png (the card without the word); the
   gold word wild_text.png sits on top, hidden, in the exact position it has on
   wild_cu_text.png. When the reel lands, `.wild-in` spins it into place: the
   animation ends on transform:none, so the result is pixel-identical to the
   single-image card. The origin is the CENTRE OF THE WORD (x 192/384 = 50%,
   y 314/384 = 81.8% — measured from the alpha bounding box of wild_text.png),
   so the word spins on the spot instead of orbiting the middle of the card. */
.reel-symbol .wild-word {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
    transform-origin: 50% 81.8%;
}
.reel-symbol.wild-in .wild-word {
    opacity: 1;
    animation: wildWordIn 0.85s cubic-bezier(0.12, 0.72, 0.26, 1) both;
}
@keyframes wildWordIn {
    0%   { opacity: 0; transform: rotate(-540deg) scale(0.12); }
    35%  { opacity: 1; }
    100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Light motion blur while a reel is at full speed (≈19.5 symbols/s) */
.reel.spinning .reel-symbol > * { filter: blur(1.5px) brightness(1.05); }

/* While a win is being shown, everything that is not part of it steps back */
.reel-symbol > * { transition: filter 0.25s ease; }
.reels-frame.has-win .reel-symbol:not(.winning) > * { filter: brightness(0.5) saturate(0.6); }

/* Free spins bonus — ONLY the reel background turns green, the symbols keep
   their normal colours. Colours sampled pixel by pixel from the reference
   screenshot (2026-09-17): each column carries the SAME horizontal gradient,
   bright green on the left edge fading to a flat dark green from ~68% on;
   constant from top to bottom (measured: x=262 is #7bff4b at every y, x=478 is
   #269104 at every y). Stops below reproduce the measured curve to ±2/255. */
body.bonus-mode .reel {
    background: linear-gradient(90deg,
        #79fd4a 0%,
        #64e538 20%,
        #43b81e 40%,
        #319f0e 55%,
        #269104 68%,
        #269104 100%);
    box-shadow: none;
}
body.bonus-mode .spin-btn:disabled {
    filter: none;
    background: radial-gradient(ellipse at 50% 30%, #b8ffd6 0%, var(--line) 40%, #0f6b1f 100%);
    color: #063;
    animation: spinGlow 1s ease-in-out infinite alternate;
}
body.bonus-mode .spin-btn:disabled .spin-text { color: #063; text-shadow: none; }
body.bonus-mode .spin-btn:disabled .spin-sub { color: #0a3d1a; }

/* Bonus anticipation: reels still spinning for a possible bonus glow gold,
   BONUS symbols that already landed pulse */
.reel.anticipating {
    box-shadow: inset 0 0 0 3px var(--gold), 0 0 24px rgba(255,215,0,0.55), inset 0 0 40px rgba(255,215,0,0.25);
    animation: anticipateGlow 0.5s ease-in-out infinite alternate;
}
@keyframes anticipateGlow {
    from { box-shadow: inset 0 0 0 3px var(--gold-dark), 0 0 12px rgba(255,215,0,0.3), inset 0 0 20px rgba(255,215,0,0.15); }
    to   { box-shadow: inset 0 0 0 3px var(--gold-light), 0 0 34px rgba(255,215,0,0.8), inset 0 0 50px rgba(255,215,0,0.35); }
}
.reel-symbol.scatter-hit > * { animation: scatterPulse 0.6s ease-in-out infinite alternate; }
@keyframes scatterPulse {
    from { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(93,255,196,0.5)); }
    to   { transform: scale(1.12); filter: drop-shadow(0 0 22px rgba(93,255,196,1)); }
}

/* BONUS symbol landing: white flash + pop, then back to normal (reference clip) */
.reel-symbol.scatter-land > * { animation: scatterLand 0.45s ease-out; }
@keyframes scatterLand {
    0%   { filter: brightness(4) saturate(0);   transform: scale(1.12); }
    35%  { filter: brightness(2.2) saturate(0.4); transform: scale(1.06); }
    100% { filter: brightness(1) saturate(1);   transform: scale(1); }
}

/* Bonus trigger: while the bell rings, the landed BONUS symbols grow and glow
   (reference: the flowers scale up before the free spins begin) */
.reel-symbol.scatter-trigger > * { animation: scatterTrigger 1.25s ease-in-out forwards; }
@keyframes scatterTrigger {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(93,255,196,0.6)); }
    60%  { transform: scale(1.45); filter: drop-shadow(0 0 30px rgba(93,255,196,1)) brightness(1.2); }
    100% { transform: scale(1.35); filter: drop-shadow(0 0 24px rgba(93,255,196,0.9)) brightness(1.1); }
}

/* "WILD" tag that pops on a wild that is part of a win */
/* The "WILD" label that pops in when a WILD takes part in the shown win. It is
   the gold word of the artwork itself — wild_text.png cropped to its alpha
   bounding box (17,274)-(367,354) → wild_text_tag.png, 350x80 — instead of the
   CSS pill it used to be. The selector has to beat `.reel-symbol img`, which
   would otherwise force it to the full symbol size. */
.reel-symbol img.wild-tag {
    position: absolute;
    left: 50%;
    top: 14px;
    width: 168px;         /* 350x80 → 168x38.4 */
    height: auto;
    transform: translateX(-50%) scale(0);
    filter: drop-shadow(0 0 12px rgba(255,215,0,0.85)) drop-shadow(0 3px 7px rgba(0,0,0,0.8));
    z-index: 5;
    animation: wildTagPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: none;
}
@keyframes wildTagPop { 0% { transform: translateX(-50%) scale(0) rotate(-12deg); } 100% { transform: translateX(-50%) scale(1) rotate(-6deg); } }

/* 5-of-a-kind celebration text */
/* „5 of a kind" — grafică desenată de utilizator (2026-09-21), în același stil de
   cristal ca bannerele: cifra albastră cu ramă aurie + „OF A KIND" auriu. Înainte
   erau două `<span>`-uri cu text (Cinzel albastru + portocaliu, contur alb și halo).

   Cutia: pânza PNG-ului e 904×468 și desenul umple 93.6% din ea. Ca desenul să iasă
   pe ecran cât ieșea textul de dinainte (452px), cutia e 452 × 904/846 ≈ 484px.
   Artwork-ul e desenat DREPT; înclinarea de −6° o pune animația de aici. */
.five-kind {
    position: absolute;
    left: 50%;
    top: 400px;
    width: 484px;
    aspect-ratio: 904 / 468;
    transform: translate(-50%, -50%) scale(1) rotate(-6deg);
    z-index: 95;
    pointer-events: none;
    animation: fiveKindIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));   /* fixă — vezi regula de performanță din SPECS */
}
.five-kind img { display: block; width: 100%; height: 100%; }
.five-kind.out { animation: fiveKindOut 0.5s ease-in forwards; }
@keyframes fiveKindIn {
    from { transform: translate(-50%, -50%) scale(0.2) rotate(-8deg); }
    to   { transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
}
@keyframes fiveKindOut { to { transform: translate(-50%, -50%) scale(1.4) rotate(-6deg); opacity: 0; } }

/* Ploaia de monede: dolarul desenat de utilizator (`efects/dolar_sign/dolar.png`)
   și stelele-nestemate tăiate din bannerul BIG WIN. Înainte moneda era un disc
   desenat din CSS cu un „$" de font peste el. script.js pune `background-image`
   și dimensiunea — dolarul e mai înalt decât lat, deci lățimea urmează raportul
   pânzei lui (141/210), altfel ar ieși turtit. */
/* FĂRĂ `filter` aici. O umbră pe un element care își ANIMEAZĂ transformarea îl
   obligă să se redeseneze în fiecare cadru, în loc să fie doar compus — iar
   particulele sunt zeci deodată. Măsurat pe „5 of a kind" (32 + 22 bucăți):
   cu umbră 4-7 cadre pierdute, fără ea 0. Desenele au oricum volum propriu. */
.particle.coin,
.particle.star-bit {
    border-radius: 0;
    background: center / contain no-repeat;
    box-shadow: none;
}
.particle.coin { animation-name: coinFall; }

/* Stelele mici de la intrarea și ieșirea din rotirile gratuite (2026-09-21, la
   cererea utilizatorului — înainte cădeau pătrățelele colorate desenate din CSS).
   Sunt aceleași nestemate ca pe bannere, doar mai mici. Spre deosebire de monede
   NU se rotesc pe axa Y: o stea plată s-ar vedea din muchie și ar dispărea
   periodic. În schimb se leagănă lateral cu `--drift`, pus de script.js. */
.particle.star-bit { animation-name: starFall; }
@keyframes starFall {
    0%   { transform: translate(0, 0) rotate(0deg) scale(0.75); opacity: 0; }
    6%   { opacity: 1; }
    50%  { transform: translate(var(--drift), 800px) rotate(150deg) scale(1); }
    85%  { opacity: 1; }
    100% { transform: translate(0, 1620px) rotate(290deg) scale(0.9); opacity: 0; }
}
@keyframes coinFall {
    0%   { transform: translateY(0) rotateY(0) rotate(0deg) scale(0.75); opacity: 0; }
    6%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateY(1620px) rotateY(1440deg) rotate(300deg) scale(0.95); opacity: 0; }
}

/* Winning symbol highlight */
.reel-symbol.winning { animation: symbolWin 0.7s ease-in-out infinite alternate; z-index: 3; }
.reel-symbol.winning::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 4px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 0 18px var(--line), inset 0 0 18px rgba(57,255,138,0.25);
    animation: symbolBorderPulse 0.7s ease-in-out infinite alternate;
}
@keyframes symbolWin { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes symbolBorderPulse { from { opacity: 0.6; } to { opacity: 1; } }

/* Payline drawing layer */
.payline-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
}
.payline-layer .payline-path {
    fill: none;
    stroke: var(--line);
    stroke-width: 9px;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px var(--line)) drop-shadow(0 0 16px rgba(57,255,138,0.6));
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: paylineDraw 0.45s ease-out forwards;
}
.payline-layer .payline-path.preview { animation-duration: 0.3s; opacity: 0.85; }
@keyframes paylineDraw { to { stroke-dashoffset: 0; } }

.glass-reflection {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.02) 100%);
    pointer-events: none;
    z-index: 8;
    border-radius: 12px;
}

/* ============================================
   MESSAGE LINE — win texts only since 2026-09-20 (the idle / status texts were
   dropped). The element starts empty, so `.message-line` must not reserve any
   visible decoration of its own; `.win` is the colour it is always shown in.
   ============================================ */
.message-line {
    position: absolute;
    top: 840px;
    left: 0;
    width: 100%;
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 34px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
    letter-spacing: 1px;
    transition: color 0.2s;
}
.message-line.win { color: var(--line); text-shadow: 0 0 12px rgba(57,255,138,0.6), 0 2px 6px rgba(0,0,0,0.8); }
.message-line.pop { animation: msgPop 0.35s ease; }
@keyframes msgPop { 0% { transform: scale(0.9); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }

/* ============================================
   BOTTOM BAR
   ============================================ */
.bottom-bar {
    position: absolute;
    top: 920px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--window-w);
    height: 250px;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 30px;
    background: linear-gradient(180deg, rgba(20,20,40,0.9) 0%, rgba(8,8,16,0.95) 100%);
    border: 3px solid #3a2705;
    border-radius: 26px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
}

.bar-left {
    display: flex;
    flex-direction: column;
    gap: 16px;   /* inele de 3px de fiecare parte → rămân 10px de gol între ele */
    flex-shrink: 0;
}

.top-btn {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: 2px solid transparent;   /* inelul auriu de afară e singura linie; asta ar fi făcut-o dublă */
    background: linear-gradient(145deg, rgba(26,26,46,0.95) 0%, rgba(22,33,62,0.95) 100%);
    font-size: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    color: var(--gold);
}
/* ============================================
   INELE AURII PE BUTOANELE PANOULUI
   ============================================
   Aceeași grosime ca UNA din cele două bare dintre role (`--sep-bar`), ca să
   existe o singură unitate de aur în tot cabinetul.

   Desenate ÎN AFARĂ, cu `::after`, nu ca bordură pe buton, din două motive:
   1. cu `box-sizing: border-box`, o bordură de 6px ar fi mâncat din interiorul
      butonului (64px → 52px la cele rotunde);
   2. mai important, `.bet-btn:hover`, `.spin-btn.auto` și modul free-spins
      **înlocuiesc `background`** — iar trucul cu degrade pe `border-box` ar fi
      fost șters de fiecare dintre ele. Un inel separat e imun la orice stare.

   `pointer-events: none`, altfel inelul ar înghiți clicurile. */
.top-btn, .bet-btn, .info-box { position: relative; }
.top-btn::after,
.bet-btn::after,
.full-btn::after,
.info-box::after,
.spin-btn::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--btn-ring));
    border: var(--btn-ring) solid transparent;
    pointer-events: none;
    background: var(--gold-metal) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    box-shadow: inset 0 1px 0 rgba(255,252,235,0.7),
                inset 0 -1px 0 rgba(90,58,4,0.7),
                0 0 0 1px rgba(46,30,3,0.9),
                0 2px 8px rgba(0,0,0,0.5);
}
/* raza inelului = raza butonului + grosimea lui, ca să rămână concentric */
.top-btn::after  { border-radius: 19px; }
.bet-btn::after  { border-radius: 50%; }
.full-btn::after { border-radius: 25px; }
.info-box::after { border-radius: 17px; }
.spin-btn::after {
    inset: calc(-1 * var(--sep-bar));
    border-width: var(--sep-bar);
    border-radius: 91px;
}

.top-btn:hover { border-color: var(--gold); transform: translateY(-2px); }
.top-btn:active { transform: translateY(0) scale(0.95); }
.top-btn.muted { opacity: 0.4; }

/* Volume slider pops UP above the button */
.volume-control { position: relative; width: 64px; height: 64px; }
.volume-slider-wrap {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(145deg, rgba(26,26,46,0.97) 0%, rgba(22,33,62,0.97) 100%);
    border: 2px solid rgba(255,215,0,0.3);
    border-radius: 30px;
    padding: 12px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    z-index: 30;
}
.volume-slider-wrap.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 200px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--gold) var(--vol, 70%), rgba(255,255,255,0.15) var(--vol, 70%));
    outline: none;
    cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--gold-light);
    border: 2px solid var(--gold-dark);
    box-shadow: 0 0 8px rgba(255,215,0,0.5);
}
.volume-value { font-size: 20px; color: var(--gold); font-weight: 700; min-width: 56px; }

/* Info boxes: CREDITS / TOTAL BET / WIN */
.info-box {
    background: rgba(0,0,0,0.6);
    border: 2px solid transparent;   /* inelul auriu de afară e singura linie */
    border-radius: 14px;
    padding: 10px 14px;
    text-align: center;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 0 12px rgba(255,215,0,0.12);
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.credits-box { flex: 1 1 380px; min-width: 300px; }
.bet-box     { width: 250px; }
.win-box     { width: 260px; }

.info-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--gold);
    margin-top: 6px;
}

.info-value {
    font-family: 'Cinzel', serif;
    font-size: 44px;
    font-weight: 700;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0,255,136,0.5), 0 0 20px rgba(0,255,136,0.2);
    white-space: nowrap;
}
.credits-box .info-value { color: var(--gold-light); text-shadow: 0 0 10px rgba(255,215,0,0.4); }
.win-box .info-value.winning { animation: winValuePop 0.5s ease; }
/* while the amount counts up: warmer gold glow that breathes with the roll */
.win-box .info-value.counting {
    color: var(--gold-light);
    animation: countGlow 0.5s ease-in-out infinite alternate;
}
@keyframes countGlow {
    from { text-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.2); }
    to   { text-shadow: 0 0 18px rgba(255,229,92,0.95), 0 0 36px rgba(255,215,0,0.5); }
}
@keyframes winValuePop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

.bet-group { display: flex; align-items: center; gap: 12px; }

.bet-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid transparent;   /* idem */
    background: linear-gradient(145deg, #2a2a3e, #0a0a14);
    color: var(--gold);
    font-size: 40px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}
.bet-btn:hover:not(:disabled) { background: var(--gold-dark); color: var(--dark); transform: scale(1.1); }
.bet-btn:active { transform: scale(0.95); }
.bet-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Buttons */
.ctrl-btn {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: visible;   /* era `hidden`: ar fi tăiat inelul auriu desenat în afară */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.ctrl-btn:active:not(:disabled) { transform: scale(0.96); }
.ctrl-btn:disabled { filter: grayscale(0.5) brightness(0.6); cursor: not-allowed; }

.full-btn {
    width: 150px;
    height: 110px;
    border-radius: 22px;
    font-size: 34px;
    background: linear-gradient(145deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    color: #2a1a00;
    text-shadow: none;
    border: 3px solid transparent;   /* idem */
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.full-btn small { font-family: 'Roboto', sans-serif; font-size: 13px; letter-spacing: 2px; margin-top: 2px; }

.spin-btn {
    width: 290px;
    height: 170px;
    border-radius: 85px;
    background: radial-gradient(ellipse at 50% 30%, #6dff8a 0%, var(--green) 40%, var(--green-dark) 100%);
    border: 5px solid rgba(255,215,0,0.6);
    box-shadow: 0 8px 26px rgba(0,0,0,0.7), 0 0 30px rgba(46,204,64,0.35), inset 0 -8px 20px rgba(0,0,0,0.3);
    margin-left: auto;
}
.spin-btn:not(:disabled) { animation: spinGlow 2s ease-in-out infinite alternate; }
@keyframes spinGlow {
    from { box-shadow: 0 8px 26px rgba(0,0,0,0.7), 0 0 20px rgba(46,204,64,0.3), inset 0 -8px 20px rgba(0,0,0,0.3); }
    to   { box-shadow: 0 8px 26px rgba(0,0,0,0.7), 0 0 45px rgba(46,204,64,0.7), inset 0 -8px 20px rgba(0,0,0,0.3); }
}
.spin-text { font-size: 62px; line-height: 1; color: var(--gold-light); text-shadow: 0 3px 6px rgba(0,0,0,0.7); }
.spin-sub  { font-family: 'Roboto', sans-serif; font-size: 16px; letter-spacing: 2px; margin-top: 8px; color: #eafff0; }

.spin-btn.auto {
    background: radial-gradient(ellipse at 50% 30%, #ff8aa0 0%, var(--red) 40%, var(--red-dark) 100%);
    box-shadow: 0 8px 26px rgba(0,0,0,0.7), 0 0 30px rgba(220,20,60,0.5);
    animation: none;
}
.spin-btn.auto .spin-text { font-size: 44px; }
.spin-btn.holding { transform: scale(0.94); filter: brightness(1.2); }

/* ============================================
   WIN OVERLAY / CELEBRATION (big wins only)
   ============================================ */
.win-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.win-overlay.show { opacity: 1; }
.win-burst {
    position: absolute;
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.35) 0%, rgba(255,215,0,0) 65%);
    animation: burst 1.2s ease-out infinite;
}
@keyframes burst { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
.win-text {
    font-family: 'Cinzel', serif;
    font-size: 120px;
    font-weight: 900;
    color: var(--gold-light);
    text-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold-dark), 0 0 40px var(--gold-dark), 0 6px 10px rgba(0,0,0,0.8);
    animation: winTextPop 0.6s ease;
    z-index: 2;
}
.win-amount {
    font-family: 'Cinzel', serif;
    font-size: 84px;
    font-weight: 700;
    color: #00ff88;
    text-shadow: 0 0 14px rgba(0,255,136,0.6), 0 4px 8px rgba(0,0,0,0.8);
    margin-top: 10px;
    animation: winAmountSlide 0.8s ease 0.2s both;
    z-index: 2;
}
@keyframes winTextPop {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(3deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes winAmountSlide { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

.particles { position: absolute; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
/* `both`, nu `forwards`: cu `forwards` cadrul 0% NU se aplică în timpul lui
   `animation-delay`, așa că particula stătea vizibilă și opacă la `top`, agățată
   de marginea de sus a ecranului până îi venea rândul (raportat 2026-09-21). */
.particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; animation: particleFall linear both; }
@keyframes particleFall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(1400px) rotate(720deg); opacity: 0; }
}

/* ============================================
   EARTHQUAKE — the SCENE (reel window) sways sideways at 7Hz for 1.9s
   (13 × 145ms) under sounds/BigWin_MegaWin.ogg. Measured frame by frame in the
   reference clips (BigWin.mov / MegaWIN.mov, 2026-09-20): the reels and the
   canyon background move together, a clean sine of ±5-6px on a 1920px-wide
   frame, horizontal only; the HUD (jackpot panel, credits/bet/win bar) does
   not move at all. ±5.5px of the clips' 1330px reel window = ±7.5px of our
   1817px one → --quake-amp 7px (canvas px). ease-in-out per quarter ≈ a sine.
   ============================================ */
.reels-area { --quake-amp: 7px; }
.reels-area.quake { animation: quake 0.145s ease-in-out 13; }
@keyframes quake {
    0%, 100% { translate: 0 0; }
    25%      { translate: var(--quake-amp) 0; }
    75%      { translate: calc(-1 * var(--quake-amp)) 0; }
}

/* ============================================
   BIG WIN / MEGA WIN banner
   (reference clips BigWin.mov / MegaWIN.mov, studied frame by frame 2026-09-20)
   Sizes measured on the 1582px-wide game area of the clips and scaled to the
   1817px reel window: BIG WIN ≈ 25% of the width × 42% of the height, MEGA WIN
   ≈ 65% × 65%. No amount inside — the WIN box counts up meanwhile. Gradient
   lettering = background-clip:text, so the 3D offsets are drop-shadow filters
   (a text-shadow would paint OVER a clipped background).
   ============================================ */
.tier-banner {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 110;
    pointer-events: none;
    display: none;
    --tb-rot: -4deg;
    transform: translate(-50%, -50%) rotate(var(--tb-rot));
}
.tier-banner.show { display: block; }
/* BIG WIN pops in from above the centre (0.28s, small overshoot) */
.tier-banner.big  { animation: tbBigIn 0.28s cubic-bezier(0.34, 1.45, 0.64, 1) both; }
/* MEGA WIN spins in from −75° / 30% while fading up (0.5s) */
.tier-banner.mega { --tb-rot: -5deg; animation: tbMegaIn 0.5s cubic-bezier(0.22, 0.9, 0.3, 1.12) both; }
/* exit, both: blows up to 4× and fades out in 0.22s */
.tier-banner.out  { animation: tbOut 0.22s ease-in forwards; }
@keyframes tbBigIn {
    0%   { transform: translate(-50%, -95%) rotate(var(--tb-rot)) scale(0.3); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(var(--tb-rot)) scale(1); opacity: 1; }
}
@keyframes tbMegaIn {
    0%   { transform: translate(-50%, -50%) rotate(-75deg) scale(0.3); opacity: 0; }
    35%  { opacity: 0.55; }
    100% { transform: translate(-50%, -50%) rotate(var(--tb-rot)) scale(1); opacity: 1; }
}
@keyframes tbOut { to { transform: translate(-50%, -50%) rotate(var(--tb-rot)) scale(4); opacity: 0; } }

/* Rotating gold sunburst behind the words (fades in/out with the banner, which
   owns the opacity). Masked to a soft disc so it has no hard edge. */
.tb-rays {
    position: absolute;
    left: 50%; top: 50%;
    width: 1700px; height: 1700px;
    margin: -850px 0 0 -850px;
    background: repeating-conic-gradient(from 0deg, rgba(255,214,60,0.32) 0deg 7deg, rgba(255,214,60,0) 7deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 18%, rgba(0,0,0,0.5) 40%, transparent 66%);
    mask: radial-gradient(circle, #000 18%, rgba(0,0,0,0.5) 40%, transparent 66%);
    animation: tbRays 16s linear infinite;
    will-change: transform;   /* fără asta rotația redesena degradeul conic în fiecare cadru */
    z-index: 0;
}
@keyframes tbRays { to { transform: rotate(360deg); } }

/* Artwork (2026-09-21): literele și stelele sunt PNG-uri desenate de utilizator
   în `efects/`, nu mai sunt text CSS. Cele două straturi ale unui banner
   (`<tier>.png` + `stars.png`) sunt pe ACEEAȘI pânză, deci se suprapun exact
   dacă primesc aceeași cutie. Stelele au fost tăiate în sprite-uri individuale
   cu `tools/split_sprites.py` — altfel ar fi fost o singură imagine și n-ar fi
   putut clipi fiecare cu întârzierea ei, care a fost chiar motivul separării. */
/* PERFORMANȚĂ (2026-09-21): nimic de aici nu animează `filter`, `mask` sau
   `background-position`. Toate trei redesenează suprafața în fiecare cadru, iar
   împreună depășeau bugetul de 16,7 ms — măsurat: 14 cadre pierdute pe banner,
   1 după rescriere. Se animează doar `transform` și `opacity`, pe care le compune
   placa video. */
.tb {
    position: relative;
    z-index: 1;
    /* umbra e FIXĂ (se rasterizează o dată); pulsul auriu stă pe `.tb-glow` */
    filter: drop-shadow(0 18px 16px rgba(0,0,0,0.55));
    animation: tbBreathe 0.7s ease-in-out infinite alternate;
}
@keyframes tbBreathe { from { transform: scale(1); } to { transform: scale(1.035); } }
/* haloul care respiră: un singur strat radial în spate, animat pe opacitate */
.tb-glow {
    position: absolute;
    inset: -8%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,196,60,0.5) 0%, rgba(255,170,30,0.22) 38%, rgba(255,170,30,0) 68%);
    animation: tbGlow 0.7s ease-in-out infinite alternate;
}
@keyframes tbGlow { from { opacity: 0.35; } to { opacity: 0.95; } }

/* stratul cu litere umple cutia; fiecare stea se așază procentual peste el */
.tb-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb-star {
    position: absolute;
    transform-origin: center;
    /* strălucirea e fixă; clipitul se face din scară + opacitate, nu din `filter` */
    filter: drop-shadow(0 0 8px rgba(255,240,170,0.55));
    animation: tbTwinkle 0.9s ease-in-out infinite alternate;
}
@keyframes tbTwinkle {
    from { transform: scale(0.90) rotate(-5deg); opacity: 0.78; }
    to   { transform: scale(1.10) rotate(5deg);  opacity: 1; }
}

/* Luciul care trece peste litere. E o bandă albă MASCATĂ pe forma artwork-ului
   (`--tb-art`), deci apare doar pe litere — fără mască ar fi o dungă peste tot
   dreptunghiul imaginii. */
.tb-shine {
    position: absolute; inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: var(--tb-art);  mask-image: var(--tb-art);
    -webkit-mask-size: 100% 100%;       mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;
}
.tb-shine::before {
    content: '';
    position: absolute;
    top: -12%; bottom: -12%; left: 0;
    width: 55%;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 50%, rgba(255,255,255,0) 100%);
    animation: tbShine 1.9s ease-in-out infinite;
    will-change: transform;
}
@keyframes tbShine { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } }

/* Sclipiri: o steluță albă în patru colțuri, pusă de script.js într-un loc
   aleator, apare și dispare în 0.65s. Strălucirea stă pe elementul exterior ca
   să n-o taie clip-path-ul formei. */
.tb-spark {
    position: absolute;
    width: var(--sz); height: var(--sz);
    margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px rgba(255,240,180,0.8));
    animation: tbSpark 0.65s ease-out forwards;
}
.tb-spark::before {
    content: '';
    position: absolute; inset: 0;
    background: #fff;
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
@keyframes tbSpark {
    0%   { transform: scale(0) rotate(0deg);   opacity: 0; }
    40%  { transform: scale(1) rotate(45deg);  opacity: 1; }
    100% { transform: scale(0) rotate(90deg);  opacity: 0; }
}

/* Mărimea cutiei = pânza ÎNTREAGĂ a PNG-ului, cu tot cu marginile transparente,
   fiindcă stelele sunt poziționate în procente din acea pânză. La BIG conținutul
   desenat ocupă doar 65% din lățimea pânzei, de-aceea cutia pare exagerat de
   lată: 1380 × 0.65 ≈ 900px de conținut vizibil. La MEGA conținutul umple 89%. */
.tb-big  { width: 1380px; aspect-ratio: 1216 / 880; --tb-art: url('efects/big_win/big_win.png'); }
.tb-mega { width: 1404px; aspect-ratio: 1424 / 750; --tb-art: url('efects/mega_win/mega_win.png'); }

/* ============================================
   PAYTABLE (real viewport units — it's outside the scaled canvas)
   ============================================ */
.paytable-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 190;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.paytable-backdrop.visible { opacity: 1; pointer-events: all; }

.paytable-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 92%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
    background: linear-gradient(145deg, var(--panel) 0%, var(--darker) 100%);
    border: 3px solid var(--gold-dark);
    border-radius: 20px;
    padding: 24px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 80px rgba(0,0,0,0.85), 0 0 40px rgba(255,215,0,0.1);
}
.paytable-panel.open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); }

.paytable-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--gold-dark);
}
.paytable-header h2 { font-family: 'Cinzel', serif; font-size: 18px; color: var(--gold); margin: 0; }
.close-paytable { background: none; border: none; color: var(--text-dim); font-size: 20px; cursor: pointer; }
.close-paytable:hover { color: var(--red); }

.paytable-content { display: flex; flex-direction: column; gap: 10px; }
.pt-intro { font-size: 14px; line-height: 1.6; color: var(--text); padding: 4px 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pt-intro h3 { font-family: 'Cinzel', serif; color: var(--gold); font-size: 20px; margin-bottom: 6px; }
.pt-block {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}
.pt-block.special { background: rgba(184,41,221,0.08); border: 1px solid rgba(184,41,221,0.25); }
.pt-sym { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.pt-sym img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
.pt-info { font-size: 16px; color: var(--text); }
.pt-name { display: flex; justify-content: space-between; font-size: 17px; color: #fff; margin-bottom: 4px; }
.pt-name .pt-pays { color: var(--text-dim); }
.pt-line { display: flex; justify-content: space-between; padding: 1px 0; }
.pt-line span { color: var(--text-dim); }
.pt-line b { font-family: 'Cinzel', serif; color: #fff; font-size: 18px; }
.pt-feature { font-size: 15px; line-height: 1.5; }
.pt-feature b { color: var(--gold); }
.paytable-row {
    display: grid;
    grid-template-columns: 1fr 70px 70px 84px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}
.paytable-row:hover { background: rgba(255,255,255,0.06); }
.paytable-row.header {
    background: rgba(255,215,0,0.1); font-weight: 700; font-size: 12px;
    color: var(--gold); text-transform: uppercase; letter-spacing: 1px;
}
.paytable-row.special { background: rgba(184,41,221,0.08); border: 1px solid rgba(184,41,221,0.25); }
.paytable-row.seven-row { background: rgba(220,20,60,0.08); border: 1px solid rgba(220,20,60,0.2); }
.pt-symbol { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.pt-symbol small { color: var(--text-dim); font-size: 11px; }
.pt-symbol img { width: 36px; height: 36px; object-fit: contain; }
.pt-x3, .pt-x4, .pt-x5 { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700; color: var(--gold); text-align: right; }
.pt-x5 { font-size: 18px; }
.paytable-row.header .pt-x3, .paytable-row.header .pt-x4, .paytable-row.header .pt-x5 { font-family: 'Roboto', sans-serif; font-size: 12px; }
.pt-x3.jackpot, .pt-x4.jackpot, .pt-x5.jackpot { color: var(--red); text-shadow: 0 0 8px rgba(220,20,60,0.5); animation: jackpotPulse 1.5s infinite; }
@keyframes jackpotPulse {
    0%, 100% { text-shadow: 0 0 8px rgba(220,20,60,0.5); }
    50% { text-shadow: 0 0 20px rgba(220,20,60,0.8), 0 0 30px rgba(255,45,149,0.4); }
}
.paytable-note {
    margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.8;
}

/* Reduced-motion users still get a working game */
@media (prefers-reduced-motion: reduce) {
    .spin-btn:not(:disabled) { animation: none; }
}


/* ============================================================================
   CASINO INTEGRATION — tot ce NU e al sursei (2026-09-26)
   ⚠️ Copiat din `public/slot-xegld/slot.css`, nu inventat: butonul de lobby e
   IDENTIC la toate jocurile (regula 1ter, măsurat 194×32 px), pastila de identitate
   la fel. Poarta vine din `/casino-gate.css`, comun.
   ============================================================================ */

/* ⚠️⚠️ `visibility:visible` E AICI, NU ÎN JS — pereche cu `body{visibility:hidden}`
   din `index.html` (intrarea fără flash, DECISIONS §10.123). Ruptă pe jumătate,
   pagina rămâne invizibilă 3 secunde. */
body { visibility: visible; }
body.booting #gameWrapper { visibility: hidden; }

.lobby-back {
    position: fixed;
    left: 16px;
    top: 14px;
    z-index: 500;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 10px;
    border: 2px 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);
    white-space: nowrap;
    transition: .15s;
}
.lobby-back:hover {
    color: var(--gold);
    border-color: rgba(255,215,0,0.6);
}
.top-right-identity {
    position: fixed;
    right: 16px;
    top: 14px;
    z-index: 500;
    display: flex;
    align-items: center;
}
.player-id {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: var(--gold-light);
    letter-spacing: 0.02em;
    padding: 7px 12px;
    border-radius: 10px;
    border: 2px 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);
    white-space: nowrap;
}
.player-id .badge {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-dim);
    margin-right: 6px;
    vertical-align: middle;
}
.player-id.wallet-connected .badge { background: var(--green); }

/* Banda scaunului: există în markup pentru teste și pentru angajament, dar nu se
   arată (ca la Lucky 7, unde `seatStrip.hidden = true`). */
.seat-strip { display: none; }

/* Sub-eticheta cutiilor e unitatea — aici „xEGLD", nu „credits". */
.info-sub { display: none; }