/* ============================================
   LUCKY 7 SLOTS — Complete Casino Theme
   ============================================ */

:root {
    --gold: #FFD700;
    --gold-light: #FFE55C;
    --gold-dark: #B8860B;
    --red: #DC143C;
    --red-dark: #8B0000;
    --green: #228B22;
    --green-dark: #006400;
    --dark: #0a0a0a;
    --darker: #050505;
    --panel: #1a1a2e;
    --panel-light: #16213e;
    --text: #e0e0e0;
    --text-dim: #888;
    --neon-pink: #ff2d95;
    --neon-blue: #00d4ff;
    --neon-purple: #b829dd;
}

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

/* ⚠️⚠️ `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 #gameWrapper{visibility:hidden}
body {
  visibility:visible;
    font-family: 'Roboto', sans-serif;
    background: #000;
    height: 100vh;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Game wrapper — fixed layout scaled to viewport.
   Centered via position:fixed + translate(-50%,-50%), NOT flexbox —
   flex centering breaks because the wrapper's un-transformed layout
   size (2560x1318) can exceed the viewport, which desyncs the center
   point and crops content (e.g. hides the SPIN button on tall/narrow
   phone screens). Fixed positioning ties centering directly to the
   viewport regardless of the element's own (pre-scale) box size. */
.game-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    background: url('images/Aparat_Butoane5.png') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

/* Button press artwork — instead of swapping .game-wrapper's own
   background-image on click (which caused a black flash: the browser has
   to fetch+decode the new ~1.7MB PNG before it can paint, and there's a gap
   where nothing is painted at all), each pressed variant is its own
   always-present layer, invisible until toggled. Since the image is set via
   CSS from page load, the browser loads/decodes it as part of normal page
   load, not on demand — so showing it is a pure opacity flip (compositing
   only), which is instant and never blanks the screen. */
.press-overlay {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.press-overlay.active {
    opacity: 1;
}

#pressOverlayAuto   { background-image: url('images/btn_auto_pressed.png'); }
#pressOverlaySpin   { background-image: url('images/btn_spin_pressed.png'); }
#pressOverlayMaxbet { background-image: url('images/btn_maxbet_pressed.png'); }

body.mobile-mode #pressOverlayAuto   { background-image: url('images/btn_auto_pressed_mobile.png'); }
body.mobile-mode #pressOverlaySpin   { background-image: url('images/btn_spin_pressed_mobile.png'); }
body.mobile-mode #pressOverlayMaxbet { background-image: url('images/btn_maxbet_pressed_mobile.png'); }

html {
    overflow: hidden;
}

/* Ambient background glow — disabled, image has its own atmosphere */
.ambient-glow {
    display: none;
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.game-container {
    position: absolute;
    z-index: 1;
    width: 1024px;
    height: 1186px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    justify-content: flex-start;
}

/* ============================================
   NEON HEADER / LOGO
   ============================================ */
.machine-header {
    text-align: center;
    padding: 0;
    height: 158px;
    flex-shrink: 0;
}

.neon-sign {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    visibility: hidden;
}

.neon-letter {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--gold-light);
    text-shadow:
        0 0 5px var(--gold),
        0 0 10px var(--gold),
        0 0 20px var(--gold-dark),
        0 0 40px var(--gold-dark);
    animation: neonFlicker 3s infinite;
}

.neon-letter.seven {
    color: var(--red);
    text-shadow:
        0 0 5px var(--red),
        0 0 10px var(--red),
        0 0 20px var(--neon-pink),
        0 0 40px var(--neon-pink);
    font-size: 36px;
    animation: neonFlicker 2s infinite, sevenPulse 1.5s ease-in-out infinite;
}

.neon-space {
    width: 10px;
}

@keyframes neonFlicker {
    0%, 100% { opacity: 1; }
    5% { opacity: 0.8; }
    6% { opacity: 1; }
    10% { opacity: 0.9; }
    11% { opacity: 1; }
    50% { opacity: 1; }
    52% { opacity: 0.7; }
    53% { opacity: 1; }
}

@keyframes sevenPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ============================================
   TOP PANEL (Credits, Bet, Win)
   ============================================ */
.top-panel {
    display: flex;
    justify-content: space-between;
    gap: 6%;
    width: 82%;
    padding: 0;
    height: 53px;
    flex-shrink: 0;
    margin-top: 71px;
    align-items: center;
}

.info-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 10px;
    text-align: center;
    flex: 1;
    min-width: 0;
    box-shadow: none;
}

.info-box.credits-box { transform: translateX(-73px) translateY(-24px); }
.info-box.bet-box     { transform: translateX(8px) translateY(-25px); }
.info-box.win-box     { transform: translateX(92px) translateY(-25px); }

.info-label {
    display: none;
}

.info-value {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    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);
}

.bet-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ⚠️ DUBLATE pe 2026-09-07 (cerut de Vlad: „să fie cam dublu, ca să poată fi văzute").
   Erau 24px, adică 18.6px randate la scara aparatului — greu de observat pe panoul pictat.
   ⚠️ Dublarea NU crește caseta BET: rândul are deja 37.3px randate, înălțime dată de
   valoarea „0.010"; butonul la 48px iese tot 37px randat, adică exact cât rândul. Măsurat
   în browser înainte de schimbare, nu presupus. Bordura crește și ea (1px → 2px), altfel
   la dublu conturul s-ar fi subțiat vizual pe jumătate. */
.bet-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255,215,0,0.4);
    background: rgba(0,0,0,0.5);
    color: var(--gold);
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.bet-btn:hover {
    background: var(--gold-dark);
    color: var(--dark);
    transform: scale(1.1);
}

.bet-btn:active {
    transform: scale(0.95);
}

.win-box .info-value {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0,255,136,0.4);
}

.win-box .info-value.winning {
    animation: winValuePop 0.5s ease;
}

@keyframes winValuePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #fff; }
    100% { transform: scale(1); }
}

/* ============================================
   MACHINE BODY & REELS
   ============================================ */
.machine-body {
    width: 1096px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: relative;
    height: 481px;
    flex-shrink: 0;
    margin-top: 111px;
    transform: translateX(8px) translateY(-4px);
}

.reels-frame {
    position: relative;
    background: transparent;
    border-radius: 0;
    border: none;
    overflow: hidden;
    padding: 0;
    box-shadow: none;
    height: 100%;
}

.reel-stripes {
    display: none;
}

.reels-container {
    display: flex;
    gap: 2%;
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 1% 2%;
}

/* Each reel */
.reel {
    flex: 1;
    height: 100%;
    overflow: visible;
    position: relative;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

#reel0 { height: calc(100% + 22px); transform: translateY(-13px); }
#reel1 { height: calc(100% + 22px); transform: translateY(-13px); }
#reel2 { height: calc(100% + 22px); transform: translateY(-13px); }

.reel::before,
.reel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    z-index: 10;
    pointer-events: none;
}

.reel::before {
    top: 0;
    background: transparent;
}

.reel::after {
    bottom: 0;
    background: transparent;
}

/* The spinning inner container */
.reel-inner {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.reel-symbol {
    width: 100%;
    height: 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    background: transparent;
}

.reel-symbol img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
    transition: transform 0.2s;
}

/* Clean look during spin — no blur */
.reel.spinning .reel-symbol img {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.reel.spinning {
    box-shadow: inset 0 0 20px rgba(255,215,0,0.1);
}

/* Glass reflection overlay */
.glass-reflection {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 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;
}

/* Winning symbol highlight */
.reel-symbol.winning {
    animation: symbolWin 0.8s ease-in-out infinite alternate;
}

.reel-symbol.winning::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 3px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 0 15px var(--gold), inset 0 0 15px rgba(255,215,0,0.2);
    animation: symbolBorderPulse 0.8s ease-in-out infinite alternate;
}

@keyframes symbolWin {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

@keyframes symbolBorderPulse {
    from { box-shadow: 0 0 10px var(--gold), inset 0 0 10px rgba(255,215,0,0.2); }
    to { box-shadow: 0 0 25px var(--gold-light), inset 0 0 20px rgba(255,215,0,0.3); }
}

/* 7 effects — ported from the source cabinet (slotmachine_777 ← bober), 2026-09-26 */
/* A reel that keeps spinning while 777 is still possible: pulsing gold glow */
.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); }
}
/* A 7 landing on the payline: white flash + pop */
.reel-symbol.seven-land img { animation: sevenLand 0.45s ease-out; }
@keyframes sevenLand {
    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); }
}
/* The 7s already landed pulse while the next reel is anticipated (after the flash) */
.reel-symbol.seven-hit img { animation: sevenLand 0.45s ease-out, sevenPulse 0.6s ease-in-out 0.45s infinite alternate; }
@keyframes sevenPulse {
    from { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(255,215,0,0.5)); }
    to   { transform: scale(1.12); filter: drop-shadow(0 0 22px rgba(255,215,0,1)); }
}

/* ============================================
   TOP-RIGHT CONTROLS (Paytable + Volume)
   ============================================ */
/* Absolute within #gameWrapper's own 2560×1318 reference canvas (not fixed
   to the real browser viewport) — scales and repositions together with the
   machine artwork at every window size, same technique as every other
   on-machine element. Position pinpointed with debug-coordinates.js at
   fullscreen: click landed at X:71.8% Y:79.3% of the reference canvas
   (≈1838,1045) — treated as the paytable button's center. The volume
   button keeps sitting right next to it via the container's own
   gap:10px, unchanged. */
.top-right-controls {
    position: absolute;
    left: 1906px;
    top: 230px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Mobile-mode uses a completely different reference canvas (790×768, a crop
   of the same source image the desktop canvas is "cover"-scaled from — see
   .mobile-mode rules further down), so the desktop left/top above would
   place this way outside it. Computed by mapping the desktop midpoint
   (1927,277 in the 2560×1318 canvas) back to the shared 1376×768 source
   image, then into the mobile crop's own coordinate space (crop box
   295,0,1085,768 → 790×768, 1:1) — i.e. the *same physical spot on the
   machine artwork* on both, not just the same percentage of each canvas
   (which would land somewhere different, since the mobile crop excludes
   the side casino scenery desktop's canvas includes). */
body.mobile-mode .top-right-controls {
    left: 720px;
    top: 132px;
}

/* ---- Casino integration: lobby link + read-only identity (added when this
   game was ported into the Supernova Casino, replacing the old emoji Fruit
   Slots). Pinned to the actual viewport corners (position:fixed, real screen
   pixels) — NOT part of #gameWrapper's scaled reference canvas — mirrored
   corners exactly like .lobby-back (top-left) / .player-bar (top-right) in
   blackjack.html/roulette.html (top:14px; left/right:16px there too),
   regardless of how the machine art is scaled to cover the window. Markup
   lives outside #gameWrapper in index.html for the same reason. */
.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);
}

.top-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    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);
    font-size: 18px;
    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), inset 0 1px 0 rgba(255,255,255,0.05);
    color: var(--gold);
}

.top-btn:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 15px rgba(255,215,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}

.top-btn:active {
    transform: translateY(0) scale(0.95);
}

.top-btn.muted {
    opacity: 0.4;
}

/* ============================================
   VOLUME CONTROL
   ============================================ */
.volume-control {
    position: relative;
    height: 42px;
    width: 42px;
}

/* Absolutely positioned off the button itself (right:100% = its own right
   edge sits at the button's left edge) instead of a flex sibling — opens
   to the LEFT regardless of the button's own flex context, and doesn't
   affect .volume-control's layout width (which stays a fixed 42px, so it
   centers correctly next to the paytable button above/below it). */
.volume-slider-wrap {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(145deg, rgba(26,26,46,0.97) 0%, rgba(22,33,62,0.97) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,215,0,0.3);
    border-radius: 24px;
    padding: 8px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    opacity: 0;
    transform: translateX(10px) scale(0.95);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.volume-slider-wrap.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: all;
}

.volume-slider {
    -webkit-appearance: none;
    width: 110px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--vol, 70%), #333 var(--vol, 70%), #333 100%);
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--gold-light) 0%, var(--gold) 100%);
    border: 2px solid var(--gold-dark);
    box-shadow: 0 0 8px rgba(255,215,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    box-shadow: 0 0 12px rgba(255,215,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
}

.volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--gold-light) 0%, var(--gold) 100%);
    border: 2px solid var(--gold-dark);
    box-shadow: 0 0 8px rgba(255,215,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
}

.volume-value {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--gold);
    min-width: 36px;
    text-align: right;
    text-shadow: 0 0 8px rgba(255,215,0,0.3);
}

/* ============================================
   CONTROLS PANEL (bottom buttons)
   ============================================ */
.controls-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 74%;
    padding: 0;
    height: 79px;
    flex-shrink: 0;
    margin-top: 149px;
}

.ctrl-btn {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    /* ⚠️ Fără asta, browserul mobil așteaptă ~300ms după un tap ca să
       decidă dacă nu cumva urmează un dublu-tap de zoom, înainte să
       livreze evenimentele de pointer — ambiguitatea aia e exact locul
       unde un tap se pierde pe SPIN (ținta cea mai mare, cea mai des
       atinsă), lăsând overlay-ul de "apăsat" blocat și click-ul nelivrat.
       "manipulation" spune explicit: buton, nu gest de zoom. */
    touch-action: manipulation;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    background: transparent;
    color: transparent;
    width: 82px;
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ctrl-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.5s ease;
}

.ctrl-btn:hover::before {
    left: 100%;
}

.ctrl-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}

.ctrl-btn:active {
    transform: translateY(0) scale(0.97);
}

.ctrl-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.spin-btn {
    background: transparent;
    color: transparent;
    width: 213px;
    height: 152px;
    min-width: 0;
    gap: 0;
    position: relative;
    top: -37px;
    left: 9px;
}

.spin-btn:hover:not(:disabled) {
    background: rgba(220,20,60,0.15);
    box-shadow: 0 0 30px rgba(220,20,60,0.3);
}

.spin-text {
    display: none;
}

.spin-icon {
    display: none;
}

.auto-btn {
    background: transparent;
    color: transparent;
    min-width: 0;
    gap: 0;
    width: 159px;
    height: 108px;
    position: relative;
    top: -38px;
    left: -75px;
    /* ⚠️ AUTO e singurul buton cu glow PERSISTENT (`.active`, cât timp
       auto-spin rulează) — SPIN/MAX BET au glow doar la :hover, temporar.
       Moștenit de la `.ctrl-btn`, `transition: all … cubic-bezier(0.34,
       1.56, 0.64, 1)` are overshoot (bun pentru apăsarea butonului), dar
       aplicat unui glow de 20px care apare brusc și RĂMÂNE, overshoot-ul
       arată ca un puls/salt vizual pe toată mașina. Aici se păstrează
       arcul doar pentru transform, iar glow-ul se estompează lin. */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease, box-shadow 0.2s ease;
}

.auto-btn:hover:not(:disabled) {
    background: rgba(255,215,0,0.1);
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
    /* ⚠️ Fără asta, ridicarea de la `.ctrl-btn:hover` (translateY(-3px))
       revine la eliberare CU tot arcul din `transition: all …` — și cum
       AUTO e singurul buton cu glow atașat vizibil, arcul ăla se vede ca
       un salt al întregii mașini. SPIN/MAX BET păstrează ridicarea, fiindcă
       n-au glow care s-o dea de gol. */
    transform: none;
}

.auto-btn.active {
    background: rgba(0,255,136,0.1);
    box-shadow: 0 0 20px rgba(0,255,136,0.3);
}

/* ⚠️ `.auto-btn:hover:not(:disabled)` de mai sus are specificitate mai mare
   (3 selectoare) decât `.auto-btn.active` (2) — fără regula asta, glow-ul
   verde de "auto pornit" nu se vedea niciodată cât timp mouse-ul stătea pe
   buton, rămânea mereu cel auriu de hover. */
.auto-btn.active:hover:not(:disabled) {
    background: rgba(0,255,136,0.1);
    box-shadow: 0 0 20px rgba(0,255,136,0.3);
    transform: none;
}

.auto-indicator {
    display: none;
}

.auto-btn.active .auto-indicator {
    display: none;
}

@keyframes autoBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.max-btn {
    background: transparent;
    color: transparent;
    min-width: 0;
    width: 166px;
    height: 110px;
    position: relative;
    top: -38px;
    left: 87px;
}

.max-btn:hover:not(:disabled) {
    background: rgba(255,215,0,0.15);
    box-shadow: 0 0 20px rgba(255,215,0,0.3);
}

/* ============================================
   WIN OVERLAY / CELEBRATION
   ============================================ */
.win-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
    animation: burstExpand 1s ease-out;
}

@keyframes burstExpand {
    from { transform: scale(0); opacity: 1; }
    to { transform: scale(3); opacity: 0; }
}

.win-text {
    font-family: 'Cinzel', serif;
    font-size: 56px;
    font-weight: 900;
    color: var(--gold);
    text-shadow:
        0 0 10px var(--gold),
        0 0 20px var(--gold-dark),
        0 0 40px var(--gold-dark);
    animation: winTextPop 0.6s ease;
    z-index: 2;
}

.win-amount {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    font-weight: 700;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0,255,136,0.5);
    margin-top: 10px;
    animation: winAmountSlide 0.8s ease 0.2s both;
}

@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; }
}

/* ============================================
   PAYTABLE BACKDROP
   ============================================ */
.paytable-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 190;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.paytable-backdrop.visible {
    opacity: 1;
    pointer-events: all;
}

/* ============================================
   PAYTABLE
   ============================================ */
.paytable-toggle {
    background: transparent;
    border: 1px solid var(--gold-dark);
    color: var(--text-dim);
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.paytable-toggle:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(255,215,0,0.05);
}

.paytable-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 460px;
    max-height: 85vh;
    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),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.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;
    transition: color 0.2s;
}

.close-paytable:hover {
    color: var(--red);
}

.paytable-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.paytable-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    transition: background 0.2s;
}

.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;
}

.pt-symbol {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
}

.pt-symbol img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.pt-x3 {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
}

.pt-x3.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); }
}

.seven-row {
    background: rgba(220,20,60,0.08) !important;
    border: 1px solid rgba(220,20,60,0.2);
}

.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;
}

/* ============================================
   PARTICLES
   ============================================ */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 90;
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: particleFall linear forwards;
}

@keyframes particleFall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ============================================
   SCREEN SHAKE (on big win)
   ============================================ */
.shake {
    animation: screenShake 0.4s ease;
}

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-2px, 1px); }
    20% { transform: translate(2px, -1px); }
    30% { transform: translate(-1px, 2px); }
    40% { transform: translate(1px, -2px); }
    50% { transform: translate(-1px, 1px); }
    60% { transform: translate(1px, -1px); }
    70% { transform: translate(-1px, 1px); }
    80% { transform: translate(1px, -1px); }
    90% { transform: translate(0, 1px); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* Landscape/desktop: no breakpoint overrides needed — .game-wrapper uses a
   fixed 2560×1318 reference layout uniformly scaled via transform to cover
   any viewport (see inline script in Index.html).
   Portrait/phone: the desktop background is a very wide (2560×1318) cabinet
   shot; "cover" scaling on a tall narrow screen crops AUTO/MAX BET off the
   sides. Below, body.mobile-mode (toggled by the inline script when
   vw/vh < 0.8) swaps in a tight cabinet-only crop (790×768,
   images/Aparat_Butoane5_mobile.png) and repositions every element with
   absolute coordinates measured against that crop, so all three buttons
   stay fully on screen. */

body.mobile-mode .game-wrapper {
    background-image: url('images/Aparat_Butoane5_mobile.png');
}

body.mobile-mode .game-container {
    position: absolute;
    inset: 0;
    width: 790px;
    height: 768px;
    transform: none;
    display: block;
}

body.mobile-mode .machine-header {
    display: none;
}

body.mobile-mode .top-panel {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: block;
    margin: 0;
}

body.mobile-mode .info-box {
    position: absolute;
    flex: none;
    width: auto;
    height: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.mobile-mode .credits-box { left: 88px;  top: 159px; width: 205px; height: 60px; }
body.mobile-mode .bet-box     { left: 308px; top: 159px; width: 180px; height: 60px; }
body.mobile-mode .win-box     { left: 500px; top: 161px; width: 210px; height: 60px; }

body.mobile-mode .info-value {
    font-size: 22px;
}

/* ⚠️ Și pe mobil, în aceeași proporție (20 → 40). */
body.mobile-mode .bet-btn {
    width: 40px;
    height: 40px;
    font-size: 24px;
}

body.mobile-mode .machine-body {
    position: absolute;
    left: 112px;
    top: 277px;
    width: 575px;
    height: 254px;
    margin: 0;
    transform: none;
}

/* Reels have no mobile-specific override otherwise, so they'd inherit the
   desktop calc(100% + 22px) height / translateY(-13px) — sized against the
   desktop-height REELS-BOX, not the shorter mobile one above. Fixed height
   + transform calibrated the same way (debug-coordinates.js measurement,
   converted from real screen px to reference-canvas px). */
body.mobile-mode #reel0,
body.mobile-mode #reel1,
body.mobile-mode #reel2 {
    height: 256px;
    transform: translateY(-8px);
}

body.mobile-mode .controls-panel {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: block;
    margin: 0;
}

body.mobile-mode .auto-btn,
body.mobile-mode .spin-btn,
body.mobile-mode .max-btn {
    position: absolute !important;
}

body.mobile-mode .auto-btn { left: 142px; top: 589px; width: 100px; height: 60px; }
body.mobile-mode .spin-btn { left: 332px; top: 574px; width: 130px; height: 90px; }
body.mobile-mode .max-btn  { left: 552px; top: 587px; width: 95px;  height: 60px; }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ============================================
   CONFETTI / CELEBRATION ENHANCEMENTS
   ============================================ */
@keyframes confettiSpin {
    0% { transform: translateY(-20px) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translateY(100vh) rotate(1080deg) scale(0.3); opacity: 0; }
}

.particle.confetti {
    animation: confettiSpin linear forwards;
    border-radius: 2px;
    width: 12px !important;
    height: 6px !important;
}

/* ============================================
   ANIMATED BACKGROUND STARS
   ============================================ */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255,215,0,0.4), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,215,0,0.3), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,215,0,0.3), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 250px 190px, rgba(255,215,0,0.4), transparent),
        radial-gradient(1px 1px at 320px 80px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 400px 150px, rgba(255,215,0,0.3), transparent),
        radial-gradient(1px 1px at 480px 50px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 550px 200px, rgba(255,215,0,0.3), transparent);
    background-size: 600px 250px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
    animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 0.8; }
}

/* ============================================
   REEL LED LIGHTS
   ============================================ */
.reels-frame::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 10px;
    right: 10px;
    height: 4px;
    background: linear-gradient(90deg,
        var(--gold) 0%, var(--gold-light) 20%, var(--gold) 40%,
        var(--gold-light) 60%, var(--gold) 80%, var(--gold-light) 100%);
    border-radius: 2px;
    box-shadow: 0 0 15px var(--gold), 0 0 30px rgba(255,215,0,0.3);
    animation: ledChase 2s linear infinite;
    z-index: 20;
}

@keyframes ledChase {
    0% { background-position: 0 0; }
    100% { background-position: 200px 0; }
}

/* ============================================
   MACHINE BODY SHIMMER
   ============================================ */
.machine-body::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255,215,0,0.03) 50%,
        transparent 70%
    );
    animation: shimmer 8s linear infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* ============================================
   SPIN BUTTON GLOW PULSE
   ============================================ */
.spin-btn:not(:disabled)::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: transparent;
    box-shadow: 0 0 20px rgba(220,20,60,0.4);
    animation: btnGlow 2s ease-in-out infinite alternate;
}

@keyframes btnGlow {
    from { box-shadow: 0 0 10px rgba(220,20,60,0.2); }
    to { box-shadow: 0 0 30px rgba(220,20,60,0.6), 0 0 60px rgba(255,45,149,0.2); }
}

/* ============================================
   CREDIT DISPLAY FLASH ON CHANGE
   ============================================ */
.info-value.flash {
    animation: creditFlash 0.4s ease;
}

@keyframes creditFlash {
    0% { color: var(--gold); }
    50% { color: #fff; text-shadow: 0 0 20px #fff; }
    100% { color: var(--gold); }
}

/* Old duplicate breakpoint overrides removed (same reason as above) — see RESPONSIVE note near line 984 */

/* Old duplicate .volume-control rule removed — using .top-right-controls layout above (was overriding button position) */