/* ============================================================================
   ROCKET MOON xEGLD — theme

   ⚠️ REFĂCUT ESTETIC 2026-09-07 (cerut de Vlad): casete, butoane și scară de
   pariu pe LIMBAJUL VIZUAL AL CELORLALTE MESE — bevel-ul `.rbtn` de la
   blackjack/ruletă (gradient stratificat, inel interior, accent per acțiune) și
   jetoanele `.chip-btn` ale ruletei (aceleași culori exacte ca la blackjack și
   poker). Luna și racheta sunt SVG (în index.html), flacăra e animată aici.
   ⚠️ Id-urile din markup sunt citite de rocket-moon.js — nu se redenumesc.
   ============================================================================ */

:root {
    --gold: #FFD700;
    --gold-light: #FFE55C;
    --gold-dark: #B8860B;
    --c: #7B6CFF;          /* accent al mesei — violet „spațiu", ca la ruletă/blackjack */
    --c-dark: #4A3FBF;
    --green: #3DDC84;
    --red: #FF6B6B;
    --amber: #FFB347;
    --blue: #6f9bf2;
    --dark: #05060f;
    --panel: #12132a;
    --panel-light: #1a1c3d;
    --text: #e6e6f0;
    --text-dim: #888a9c;
    --text-faint: #5f6275;
    --mono: 'Roboto', sans-serif;
}

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

/* ⚠️⚠️ `visibility:visible` E AICI, NU ÎN JS — aceeași regulă la toate cinci
   mesele. [DECISIONS §10.123] */
body.booting .scene { visibility: hidden; }
body {
    visibility: visible;
    font-family: 'Roboto', sans-serif;
    background: radial-gradient(ellipse at 50% -10%, #1a1c3d 0%, #05060f 55%);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

.ambient-glow {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(circle at 50% 20%, rgba(123, 108, 255, 0.12) 0%, transparent 60%);
}

/* ---- lobby link + identity pill — IDENTICE la toate cinci mesele (regula
   1ter din CLAUDE.md): markup, poziție, font, pastilă, 194×32px măsurat. ---- */
.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); }
.player-id.wallet-connected { color: var(--gold-light); }

/* ---------------------------------------------------------------- scene -- */
/* ⚠️ 760px, nu 560 — Vlad a cerut cerul mai mare (2026-09-07). */
.scene {
    position: relative; z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 74px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------------------------------------------------------- info boxes -- */
/* Aceeași „carne" ca butoanele .rbtn: gradient stratificat, muchie luminoasă
   sus, umbră adâncă jos, inel subțire de accent. Fără emoji în etichete. */
.top-panel {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 12px;
}
.info-box {
    --acc: var(--gold);
    position: relative;
    border-radius: 14px;
    padding: 12px 14px 11px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.07), transparent 60%),
        linear-gradient(160deg, #1d2236 0%, #0d0f1c 70%);
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 38%, transparent),
        inset 0 1.5px 0 rgba(255,255,255,.12),
        inset 0 -6px 12px rgba(0,0,0,.45),
        0 8px 18px -4px rgba(0,0,0,.65);
}
.info-box.bet-box { --acc: var(--c); }
.info-box.win-box { --acc: var(--green); }
.info-label {
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: color-mix(in srgb, var(--acc) 55%, var(--text-dim));
    font-weight: 500;
}
.info-value {
    font-family: 'Cinzel', serif; font-size: 22px; font-weight: 700;
    color: var(--gold-light); margin-top: 5px; line-height: 1.1;
    text-shadow: 0 0 14px rgba(255,229,92,.22), 0 1px 0 rgba(0,0,0,.6);
    font-variant-numeric: tabular-nums;
}
.win-box .info-value { color: var(--text); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.info-sub { font-size: 10px; color: var(--text-dim); margin-top: 3px; min-height: 12px; letter-spacing: .04em; }

.bet-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 3px; }
.bet-controls .info-value { margin-top: 0; min-width: 5.2ch; }
/* −/+ sunt .rbtn în miniatură — același bevel, inel violet. */
.bet-btn {
    appearance: none; cursor: pointer; border: 0; font: inherit;
    --rd: 26px; --u: calc(var(--rd) / 44.48); --rbtn-accent: var(--c);
    width: var(--rd); height: var(--rd); border-radius: 50%;
    display: grid; place-items: center;
    color: color-mix(in srgb, var(--rbtn-accent) 30%, var(--text));
    font-size: 16px; font-weight: 700; line-height: 1;
    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%);
    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);
    transition: .15s ease;
}
.bet-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow:
        inset 0 0 0 calc(2.5 * var(--u)) color-mix(in srgb,var(--rbtn-accent) 80%,transparent),
        0 0 14px color-mix(in srgb,var(--rbtn-accent) 55%,transparent),
        inset 0 calc(1.5 * var(--u)) 0 rgba(255,255,255,.16); }
.bet-btn:active:not(:disabled) { transform: translateY(1px); }
.bet-btn:disabled { opacity: .35; cursor: not-allowed; filter: saturate(.4); }

/* ---------------------------------------------------------------- sky ---- */
.launchpad { position: relative; }
.sky {
    position: relative;
    height: 58vh;
    min-height: 380px;
    max-height: 600px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 40% at 50% 110%, rgba(123,108,255,.18), transparent 70%),
        linear-gradient(180deg, #0b0d2a 0%, #070819 55%, #030310 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(123,108,255,.32),
        inset 0 0 80px rgba(123,108,255,.08),
        0 14px 34px -10px rgba(0,0,0,.8);
}
.stars {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1.6px 1.6px at 10% 20%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 80% 15%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 35% 65%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 60% 45%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 90% 70%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 20% 85%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 50% 25%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 70% 90%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 15% 50%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 45% 8%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 27% 38%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 66% 72%, #fff, transparent),
        radial-gradient(1.0px 1.0px at 84% 44%, #fff, transparent),
        radial-gradient(1.0px 1.0px at 6% 72%, #fff, transparent);
    opacity: .85;
    animation: twinkle 4s ease-in-out infinite alternate;
}
.stars-far {
    background-image:
        radial-gradient(.9px .9px at 22% 12%, #cfd8ff, transparent),
        radial-gradient(.9px .9px at 58% 58%, #cfd8ff, transparent),
        radial-gradient(.9px .9px at 91% 28%, #cfd8ff, transparent),
        radial-gradient(.9px .9px at 40% 92%, #cfd8ff, transparent),
        radial-gradient(.9px .9px at 74% 32%, #cfd8ff, transparent),
        radial-gradient(.9px .9px at 12% 96%, #cfd8ff, transparent),
        radial-gradient(.9px .9px at 96% 88%, #cfd8ff, transparent),
        radial-gradient(.9px .9px at 33% 50%, #cfd8ff, transparent);
    opacity: .5;
    animation-duration: 6s; animation-delay: -2s;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: .95; } }

/* ⚠️ LUNA CREȘTE CU MULTIPLICATORUL (2026-09-07, cerut de Vlad). `--moon-scale`
   și `--moon-drop` sunt puse de `paintMoon()` la fiecare cadru, din progresul
   spre PLAFON — vezi rocket-moon.js. Aici nu e nicio tranziție: ar rămâne în
   urma cadrului; singura tranziție se pune inline, la retragere.
   ⚠️ `z-index:1` — SUB rachetă (3), ca la plafon racheta să apară PE ea.
   ⚠️⚠️ SELECTORUL E `.sky .moon`, NU `.moon` — ca selector NUD, orice alt element
   cu clasa `moon` moștenea poziționarea lunii (absolut, 150×150, `top:4%`). S-a
   întâmplat imediat: pastila de istoric și multiplicatorul unei sosiri primiseră
   clasa `moon` și au aterizat, ca discuri aurii de 150px, PESTE caseta BET.
   Modificatorii aceia se numesc acum `landed`; legarea de `.sky` e a doua plasă. */
.sky .moon {
    position: absolute; top: 4%; left: 50%;
    transform: translate(-50%, var(--moon-drop, 0px)) scale(var(--moon-scale, 1));
    width: 150px; height: 150px;
    filter: drop-shadow(0 0 calc(26px + var(--approach, 0) * 34px)
                        rgba(255,250,210, calc(.35 + var(--approach, 0) * .3)));
    user-select: none; z-index: 1;
}

/* ⚠️ STANDUL (2026-09-07, refăcut la cererea lui Vlad: „doar un stativ pe care
   stă racheta, ca la Starship în primele zile — fără turn"). Două piese, CSS:
   `.pad-apron` = placa de beton, lată și joasă; `.pad-mount` = suportul de oțel,
   cât racheta, cu două picioare. Înălțimea totală `4%` — EXACT `bottom`-ul de
   repaus al rachetei (`resetRocket()` / `paintFlight()` pornesc de la 4), deci
   racheta STĂ pe suport la orice înălțime de cer.
   ⚠️ LA DECOLARE STANDUL RĂMÂNE ÎN URMĂ: `.sky.pad-away .pad` alunecă sub
   marginea cerului (camera urmărește racheta), și revine odată cu racheta
   (`resetRocket()` / revenirea de după explozie). Sub rachetă (z 1). */
.pad { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 220px; height: 4%; min-height: 14px; z-index: 1; pointer-events: none;
    transition: transform 2.2s cubic-bezier(.5,0,.9,.4); }
.sky.pad-away .pad { transform: translate(-50%, 260%); }
.pad-apron { position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
    background: linear-gradient(180deg, #4a4f5a 0%, #33373f 30%, #23262d 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 -10px 24px rgba(123,108,255,.10); }
.pad-mount { position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%);
    width: 70px; height: 62%;
    background: linear-gradient(180deg, #7c8494 0%, #4d5462 25%, #2b2f38 100%);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.5); }
/* picioarele suportului — două umbre verticale în placa de oțel */
.pad-mount::before, .pad-mount::after { content: ""; position: absolute; top: 35%; bottom: 0; width: 9px;
    background: linear-gradient(90deg, #1c1f27, #454b58 50%, #1c1f27); }
.pad-mount::before { left: 12px; }
.pad-mount::after  { right: 12px; }

/* ⚠️ STELELE CURG CÂT ZBOARĂ (2026-09-07, cerut de Vlad): „să dea impresia că
   racheta călătorește în cosmos către lună". Fundalul de stele e un tile cât
   cerul, deci `background-position` de la 0 la 100% pe Y se leagă fără cusătură.
   Două straturi, două viteze — cele apropiate (mari) mai repede, cele
   îndepărtate (mici, albăstrui) mai încet — asta dă adâncimea. Luna NU se mișcă:
   e ținta, la distanță. Pornesc odată cu `.sky.flying` (pusă de `updateUI`). */
.sky.in-flight .stars     { animation: twinkle 4s ease-in-out infinite alternate, starsScroll 5s linear infinite; }
.sky.in-flight .stars-far { animation: twinkle 6s ease-in-out infinite alternate, starsScroll 11s linear infinite; animation-delay: -2s, 0s; }
@keyframes starsScroll { from { background-position: 0 0; } to { background-position: 0 100%; } }
/* ⚠️⚠️ SE ÎNGHEAȚĂ, NU SE OPRESC (2026-09-07, bug găsit de Vlad: „dacă a explodat
   trebuie să înghețe efectul de mișcare"). `animation-play-state:paused` lasă
   stelele EXACT unde sunt; scoaterea animației le-ar SĂRI înapoi la poziția 0 —
   un salt al întregului câmp de stele, fix în clipa exploziei. De-aia clasa
   `in-flight` NU se mai scoate niciodată după primul zbor: se pauzează între
   zboruri și se reia de unde a rămas, deci nu există nicio cusătură. */
.sky.frozen .stars, .sky.frozen .stars-far { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .sky.in-flight .stars, .sky.in-flight .stars-far { animation: none; }
    .pad { transition: none; }
}

/* Racheta: BAZA ei (duza) stă la `bottom` (setat de JS) — de-aia doar
   `translateX(-50%)`. Emoji-ul vechi era ancorat pe centru; la 147px înălțime
   asta îl tăia pe jumătate sub marginea cerului. Ușoară legănare cât zboară.
   ⚠️ `8.6%` pe Y: în viewBox aripioarele se termină la 128/140, deci cutia SVG
   are ~12px goi sub duză — fără corecție, racheta ar pluti deasupra plăcii. */
.rocket {
    position: absolute; left: 50%; bottom: 4%;
    width: 84px; height: 147px;
    transform: translate(-50%, 8.6%);
    transition: bottom .12s linear;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(123,108,255,.35));
    user-select: none; z-index: 3;
}
.rocket[hidden] { display: none; }
.rocket svg { display: block; }
/* revenirea pe rampă după explozie: apare din ceață, coborând ușor pe placă */
.rocket.relanded { animation: reland .6s ease-out; }
@keyframes reland { from { opacity: 0; transform: translate(-50%, 8.6%) translateY(-14px); }
                    to   { opacity: 1; transform: translate(-50%, 8.6%); } }
.sky.flying .rocket svg { animation: sway 1.6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes sway { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }

/* ⚠️ FLACĂRA. #trail e cutia rachetei (aceeași mărime, aceeași ancoră), iar
   flacăra atârnă de MARGINEA EI DE JOS — deci pornește exact din duză, oricât
   urcă racheta. Trei straturi cu trei ritmuri diferite (0.19s / 0.13s / 0.09s),
   toate ancorate SUS (`transform-origin: 50% 0`), ca să „bată" ca o flacără
   reală, nu ca un neon care clipește. */
.trail {
    position: absolute; left: 50%; bottom: 4%;
    width: 84px; height: 147px;
    transform: translate(-50%, 8.6%);   /* aceeași corecție ca .rocket — aceeași cutie */
    z-index: 2;
    pointer-events: none;
}
.trail[hidden] { display: none; }
.flame {
    position: absolute; left: 50%; top: 83%;
    width: 46px; height: 92px;
    transform: translateX(-50%);
    transform-origin: 50% 0;
    filter: blur(.3px) drop-shadow(0 0 12px rgba(255,140,30,.65));
    animation: flameBreath .19s ease-in-out infinite alternate;
}
.flame svg { display: block; overflow: visible; }
.flame-glow  { transform-origin: 50% 0; animation: flameGlow .23s ease-in-out infinite alternate; }
.flame-outer { transform-origin: 50% 0; animation: flameOuter .19s ease-in-out infinite alternate; }
.flame-mid   { transform-origin: 50% 0; animation: flameMid   .13s ease-in-out infinite alternate; }
.flame-core  { transform-origin: 50% 0; animation: flameCore  .09s ease-in-out infinite alternate; }
@keyframes flameBreath { from { transform: translateX(-50%) scaleY(.94); } to { transform: translateX(-50%) scaleY(1.06); } }
@keyframes flameGlow   { from { opacity: .55; transform: scale(.92); }        to { opacity: .9;  transform: scale(1.08); } }
@keyframes flameOuter  { from { transform: scale(.96, .82) skewX(-3deg); }    to { transform: scale(1.04, 1.12) skewX(3deg); } }
@keyframes flameMid    { from { transform: scale(1.05, .88) skewX(3deg); }    to { transform: scale(.95, 1.1) skewX(-3deg); } }
@keyframes flameCore   { from { transform: scaleY(.8); opacity: .85; }        to { transform: scaleY(1.15); opacity: 1; } }

/* Explozia primește același `bottom` ca racheta (baza), deci urcă cu ~30px ca
   să stea pe corpul rachetei, nu sub el. */
.boom { position: absolute; left: 50%; width: 150px; height: 150px; transform: translate(-50%, 10px); z-index: 4;
    filter: drop-shadow(0 0 26px rgba(255,120,40,.85)); animation: boomPop .38s cubic-bezier(.2,1.4,.4,1); }
.boom[hidden] { display: none; }
.boom svg { display: block; overflow: visible; }
.boom-outer { transform-origin: 50% 50%; animation: boomSpin 3s linear infinite; }
.boom-inner { transform-origin: 50% 50%; animation: boomSpin 2s linear infinite reverse; }
.boom-sparks { transform-origin: 50% 50%; animation: boomSparks 1.1s ease-out infinite; }
@keyframes boomPop { from { transform: translate(-50%, 10px) scale(.2); opacity: 0; } to { transform: translate(-50%, 10px) scale(1); opacity: 1; } }
@keyframes boomSpin { to { transform: rotate(360deg); } }
@keyframes boomSparks { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

.readout { text-align: center; margin-top: 14px; }
.multiplier {
    font-family: 'Cinzel', serif;
    font-size: 54px; font-weight: 900; line-height: 1;
    color: var(--gold-light);
    text-shadow: 0 0 22px rgba(255,229,92,.35), 0 2px 0 rgba(0,0,0,.6);
    transition: color .15s;
    font-variant-numeric: tabular-nums;
}
.multiplier.flying { color: var(--green); text-shadow: 0 0 26px rgba(61,220,132,.5), 0 2px 0 rgba(0,0,0,.6); }
.multiplier.crashed { color: var(--red); text-shadow: 0 0 26px rgba(255,107,107,.5), 0 2px 0 rgba(0,0,0,.6); }
/* ⚠️ SOSIREA PE LUNĂ — plata maximă a mesei. Aur, nu verde: verdele înseamnă
   deja „cash-out obișnuit", iar asta se întâmplă la ~1 zbor din 250. */
.multiplier.landed { color: #fff3b0;
    text-shadow: 0 0 30px rgba(255,235,150,.85), 0 0 60px rgba(255,215,0,.45), 0 2px 0 rgba(0,0,0,.6);
    animation: moonPulse 1.1s ease-in-out infinite; }
@keyframes moonPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
/* haloul cerului la aterizare */
.sky.landed { box-shadow: inset 0 0 0 2px rgba(255,235,150,.55),
                          inset 0 0 120px rgba(255,235,150,.22),
                          0 14px 34px -10px rgba(0,0,0,.8); }
.status-line { font-size: 13px; color: var(--text-dim); margin-top: 6px; min-height: 16px; letter-spacing: .03em; }

/* ------------------------------------------------------------- controls -- */
.controls-panel { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* ⚠️ Scara de pariu = PASTILE CU SUMA REALĂ în xEGLD (Vlad, 2026-09-07). S-au
   încercat jetoanele `.chip-btn` ale ruletei și au fost RESPINSE: numărul de
   pe jeton (1·2·5·7·10) nu e pariul, deci minte, și nici nu arătau bine aici.
   Pastila poartă același bevel ca butoanele; cea activă e plină, aurie. */
.bet-ladder { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bet-pill {
    appearance: none; cursor: pointer; border: 0; font: inherit;
    --rbtn-accent: var(--gold); --u: 1px;
    min-width: 92px; padding: 10px 14px;
    border-radius: 999px;
    font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
    letter-spacing: .04em; font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--rbtn-accent) 70%, #fff);
    text-shadow: 0 1px 0 rgba(0,0,0,.7);
    background:
        radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.10), transparent 55%),
        radial-gradient(ellipse at 50% 110%, color-mix(in srgb,var(--rbtn-accent) 18%,transparent), transparent 65%),
        linear-gradient(160deg,#1f2434,#0a0c12 70%);
    box-shadow:
        inset 0 0 0 calc(2 * var(--u)) color-mix(in srgb,var(--rbtn-accent) 45%,transparent),
        0 6px 14px -3px rgba(0,0,0,.6),
        inset 0 1.5px 0 rgba(255,255,255,.12),
        inset 0 -4px 8px rgba(0,0,0,.5);
    transition: .15s ease;
}
.bet-pill:hover:not(:disabled) { transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 calc(2 * var(--u)) color-mix(in srgb,var(--rbtn-accent) 75%,transparent),
        0 8px 16px -2px rgba(0,0,0,.6),
        inset 0 1.5px 0 rgba(255,255,255,.14),
        0 0 18px color-mix(in srgb,var(--rbtn-accent) 45%,transparent); }
.bet-pill:active:not(:disabled) { transform: translateY(1px); }
.bet-pill.active {
    color: #1a1a2e; text-shadow: 0 1px 0 rgba(255,255,255,.35);
    background:
        radial-gradient(ellipse at 50% 15%, rgba(255,255,255,.35), transparent 55%),
        linear-gradient(160deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
    box-shadow:
        inset 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,.35),
        0 6px 16px -3px rgba(0,0,0,.6),
        inset 0 -4px 8px rgba(0,0,0,.25),
        0 0 18px rgba(255,215,0,.35);
}
.bet-pill:disabled { opacity: .35; cursor: not-allowed; filter: saturate(.4); }
/* fără nicio miză aleasă și fără zbor: pastilele pulsează verde, ca la
   blackjack/ruletă (.need-bet) — un LAUNCH stins nu explică nimic singur. */
@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);}}
.scene.need-bet .bet-pill:not(:disabled){animation:betHintGlow 1.6s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.scene.need-bet .bet-pill{animation:none;}}

/* LAUNCH / CASH OUT: bevel-ul .rbtn întins pe o pastilă lată — aceeași
   „carne" (gradient stratificat, inel de accent, muchie luminoasă sus, umbră
   jos), doar forma diferă: la un joc de crash butonul principal e unul singur
   și trebuie să fie mare. */
.ctrl-btn {
    appearance: none; cursor: pointer; border: 0; font: inherit;
    --rbtn-accent: var(--gold); --u: 1.2px;
    width: 100%; max-width: 360px;
    padding: 17px 24px;
    border-radius: 999px;
    font-family: 'Cinzel', serif; font-size: 20px; font-weight: 900;
    letter-spacing: .12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--rbtn-accent) 78%, #fff);
    text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 14px color-mix(in srgb, var(--rbtn-accent) 45%, transparent);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.12), transparent 55%),
        radial-gradient(ellipse at 50% 110%, color-mix(in srgb,var(--rbtn-accent) 26%,transparent), transparent 65%),
        linear-gradient(160deg,#1f2434,#0a0c12 70%);
    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);
    transition: .15s ease;
}
.ctrl-btn:hover:not(:disabled) { transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 calc(2.5 * var(--u)) color-mix(in srgb,var(--rbtn-accent) 80%,transparent),
        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 22px color-mix(in srgb,var(--rbtn-accent) 55%,transparent); }
.ctrl-btn:active:not(:disabled) { transform: translateY(1px); }
.ctrl-btn[disabled] { opacity: .4; cursor: not-allowed; filter: saturate(.4); }
/* ⚠️ `[hidden]` altfel PIERDE contra lui `.ctrl-btn{display:flex}` — aceeași
   specificitate (o clasă), iar regula de autor bate stilul implicit al
   browserului indiferent de ordine. Fără linia asta, LAUNCH rămânea vizibil
   peste CASH OUT tot timpul zborului (găsit testând în browser). */
.ctrl-btn[hidden] { display: none; }
.launch-btn  { --rbtn-accent: var(--gold); }
.cashout-btn { --rbtn-accent: var(--green); animation: cashPulse 1.1s ease-in-out infinite; }
@keyframes cashPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }
.cashout-amount { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: none; opacity: .9; }

/* --------------------------------------------------------------- history -- */
.history-strip {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
    padding-top: 2px;
}
.history-pill {
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    font-variant-numeric: tabular-nums;
}
.history-pill.win  { color: var(--green); background: rgba(61,220,132,0.10); box-shadow: inset 0 0 0 1px rgba(61,220,132,.3); }
.history-pill.loss { color: var(--red);   background: rgba(255,107,107,0.10); box-shadow: inset 0 0 0 1px rgba(255,107,107,.3); }
.history-pill.landed { color: #1a1a2e; font-weight: 800;
    background: linear-gradient(160deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
    box-shadow: 0 0 14px rgba(255,215,0,.45); }

@media (max-width: 560px) {
    .scene { padding-top: 64px; }
    .multiplier { font-size: 38px; }
    .sky { height: 46vh; min-height: 300px; }
    .sky .moon { width: 110px; height: 110px; }
    .rocket, .trail { width: 64px; height: 112px; }
    .flame { width: 36px; height: 72px; }
    .info-value { font-size: 18px; }
    .top-panel { gap: 8px; }
}