/* ============================================================================
   BIZONE — full redesign (Stake-inspired, premium dark casino)
   ----------------------------------------------------------------------------
   The frontend is a pre-compiled Vue 2 bundle, so the entire visual language is
   rebuilt in CSS: deep cool-dark structure, crisp glass panels, a signature
   green action colour, blue/violet brand accents, real depth, and smooth
   compositor-only micro-interactions. Loaded last → wins. Ref: stake.com.
   Follows Web Interface Guidelines: focus-visible rings, prefers-reduced-motion,
   transform/opacity animation, touch-action.
   ============================================================================ */

:root {
    --bz-bg:        #0f212e;
    --bz-bg-deep:   #0a1822;
    --bz-surface:   rgba(23,42,55,.72);
    --bz-surface-s: #172a37;
    --bz-raised:    #1f3543;
    --bz-raised-h:  #294a5d;
    --bz-border:    rgba(255,255,255,.07);
    --bz-border-s:  #21384697;
    --bz-line:      #213846;

    --bz-text:   #eaf2f8;
    --bz-muted:  #8da8bc;
    --bz-faint:  #5d7488;
    --bz-faint2: #5b7689;

    --bz-brand:   #6c87f5;
    --bz-brand-2: #8a5cff;
    --bz-green:   #2fd36a;
    --bz-green-h: #27c160;
    --bz-green-ink:#04210e;
    --bz-red:     #f1486a;
    --bz-red-h:   #e23a5c;
    --bz-gold:    #ffd24a;

    --bz-radius:    14px;
    --bz-radius-sm: 10px;
    --bz-shadow:    0 14px 38px -12px rgba(0,0,0,.55);
    --bz-shadow-sm: 0 6px 18px -6px rgba(0,0,0,.5);
    --bz-ring:      0 0 0 3px rgba(108,135,245,.35);
    --bz-font:      'Manrope', system-ui, sans-serif;
    --bz-display:   'Unbounded', 'Manrope', sans-serif;
    --bz-ease:      cubic-bezier(.4,0,.2,1);
    --bz-spring:    cubic-bezier(.34,1.56,.64,1);
}
html { color-scheme: dark; }

/* ---------- Base atmosphere ---------- */
html, body { background: var(--bz-bg-deep) !important; }
body {
    font-family: var(--bz-font) !important;
    color: var(--bz-text);
    background:
        radial-gradient(1100px 640px at 80% -10%, rgba(108,135,245,.12), transparent 60%),
        radial-gradient(900px 560px at -5% 105%, rgba(138,92,255,.10), transparent 55%),
        radial-gradient(700px 500px at 50% 120%, rgba(47,211,106,.05), transparent 60%),
        var(--bz-bg-deep) !important;
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #244050; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2f5466; }

/* accessible focus ring everywhere (WIG) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, .button:focus-visible, .dice-settings__play:focus-visible,
.cash__button:focus-visible, .pay-box:focus-visible {
    outline: none !important;
    box-shadow: var(--bz-ring) !important;
}
button, a, [role="button"], .button, .dice-settings__play, .minefields > *,
.cash__button, .pay-box, input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- Typography ---------- */
h1, h2, h3,
.dice-game > h1, .mines > h1, .bonuses-header__title,
[class$="__title"]:not(.cash__button--title):not(.pay-title),
.content-header, .auth__title {
    font-family: var(--bz-display) !important;
    letter-spacing: -.015em;
    font-weight: 700 !important;
}

/* ---------- entrance animation (respect reduced-motion) ---------- */
@keyframes bzUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bzGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(108,135,245,.0); } 50% { box-shadow: 0 0 38px -6px rgba(108,135,245,.35); } }
@keyframes bzPop { 0% { transform: scale(.9); opacity: .4; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
.dice-game, .mines, .bonuses, .cash, .auth-wrapper, .casino-play__wrapper-place, .legend-wheel {
    animation: bzUp .4s var(--bz-ease) both;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.button, button.button, .btn, .btn-play, .dice-settings__play, .cash__button,
.pay-box, .menu-deposit, .slot-card__play, .slot-filter__button {
    transition: transform .14s var(--bz-ease), background .16s var(--bz-ease),
                box-shadow .18s var(--bz-ease), border-color .16s var(--bz-ease),
                filter .16s var(--bz-ease) !important;
    position: relative;
    cursor: pointer;
}

/* Primary GREEN action */
.button.primary, .button.green, button.button.primary,
.desktop-mines__play, .mobile-mines__play, .mines-auto__button,
.btn-play {
    background: linear-gradient(180deg, #38e078, var(--bz-green-h)) !important;
    color: var(--bz-green-ink) !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: var(--bz-radius-sm) !important;
    box-shadow: 0 8px 22px -8px rgba(47,211,106,.6), inset 0 1px 0 rgba(255,255,255,.35) !important;
    letter-spacing: .01em;
    overflow: hidden;
}
/* shine sweep on hover */
.button.primary::after, .button.green::after, .btn-play::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .55s var(--bz-ease);
}
.button.primary:hover::after, .button.green:hover::after, .btn-play:hover::after { transform: translateX(120%); }
.button.primary:hover, .button.green:hover, .desktop-mines__play:hover,
.mobile-mines__play:hover, button.button.primary:hover, .btn-play:hover {
    filter: brightness(1.05); transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(47,211,106,.65), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.button.primary:active, .button.green:active, button.button.primary:active,
.desktop-mines__play:active, .btn-play:active { transform: translateY(0) scale(.985); }

/* Blue (brand) */
.button.blue {
    background: linear-gradient(180deg, #7e94ff, #5a73e6) !important;
    color: #fff !important; font-weight: 700 !important; border: none !important;
    border-radius: var(--bz-radius-sm) !important;
    box-shadow: 0 8px 22px -8px rgba(108,135,245,.55), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.button.blue:hover { filter: brightness(1.06); transform: translateY(-2px); }
.button.blue:active { transform: translateY(0) scale(.985); }

/* Secondary / neutral */
.button.secondary, .slot-filter__button {
    background: var(--bz-raised) !important; color: var(--bz-text) !important;
    font-weight: 600 !important; border: 1px solid var(--bz-border-s) !important;
    border-radius: var(--bz-radius-sm) !important;
}
.button.secondary:hover, .slot-filter__button:hover { background: var(--bz-raised-h) !important; border-color: #34566a !important; transform: translateY(-1px); }

/* Error / red */
.button.error {
    background: linear-gradient(180deg, #ff5f7e, var(--bz-red-h)) !important;
    color: #fff !important; font-weight: 700 !important; border: none !important;
    border-radius: var(--bz-radius-sm) !important;
    box-shadow: 0 8px 22px -8px rgba(241,72,106,.55) !important;
}
.button.error:hover { filter: brightness(1.05); transform: translateY(-2px); }

/* Deposit in the rail — make it pop */
.menu-deposit, .button.primary.menu-deposit { text-transform: none; }

/* ============================================================
   INPUTS
   ============================================================ */
.form-control, .auth__input, input[type="text"], input[type="password"],
input[type="number"], input[type="email"], .dice-settings__item--value,
.Header-input {
    background: var(--bz-bg) !important;
    border: 1px solid var(--bz-border-s) !important;
    border-radius: var(--bz-radius-sm) !important;
    color: var(--bz-text) !important;
    font-family: var(--bz-font) !important;
    transition: border-color .16s var(--bz-ease), box-shadow .16s var(--bz-ease), background .16s !important;
}
.form-control::placeholder, .auth__input::placeholder, input::placeholder { color: #5b7488 !important; }
.form-control:focus, .auth__input:focus, input:focus, .dice-settings__item--value:focus {
    outline: none !important; border-color: var(--bz-brand) !important;
    box-shadow: var(--bz-ring) !important; background: var(--bz-bg-deep) !important;
}

/* ============================================================
   PANELS / CONTENT
   ============================================================ */
.content, .content-box, .content-body, .cards, .card, .users-box,
.provider-card, .ref-faq__item, .cash, .legend-wheel-inner {
    background: var(--bz-surface) !important;
    border: 1px solid var(--bz-border) !important;
    border-radius: var(--bz-radius) !important;
    box-shadow: var(--bz-shadow-sm);
    backdrop-filter: blur(8px);
}

/* ============================================================
   HEADER / NAV / BALANCE
   ============================================================ */
.header, .header-menu { background: transparent !important; }
.header a, .header-menu a, nav a {
    color: var(--bz-muted) !important; font-weight: 600 !important;
    transition: color .15s var(--bz-ease); border-radius: 8px;
}
.header a:hover, .header-menu a:hover { color: #fff !important; }
.header__wallet, .header-balance, [class*="header__wallet"] {
    background: linear-gradient(180deg, #7d93ff, #5a73e6) !important;
    border-radius: var(--bz-radius-sm) !important; border: none !important;
    box-shadow: 0 8px 20px -8px rgba(108,135,245,.6), inset 0 1px 0 rgba(255,255,255,.2) !important;
    font-weight: 700 !important;
}
.Header-input-wrapper, .Header-input {
    border-radius: var(--bz-radius-sm) !important;
}

/* ============================================================
   LEFT SIDEBAR
   ============================================================ */
.left-main {
    background: linear-gradient(180deg, #12252f, #0c1a23) !important;
    border-right: 1px solid var(--bz-border) !important;
}
.left-main a, .games-menu a, .games-item {
    transition: background .15s var(--bz-ease), transform .12s var(--bz-ease) !important;
    border-radius: 12px;
}
.left-main a:hover, .games-item:hover { background: rgba(255,255,255,.05) !important; transform: translateY(-1px); }
.left-main a.active, .games-item.active, .left-main a[class*="active"] {
    background: rgba(108,135,245,.16) !important; box-shadow: inset 3px 0 0 var(--bz-brand);
}

/* ============================================================
   LIVE WINS feed
   ============================================================ */
.live-games__item {
    background: var(--bz-surface-s) !important;
    border: 1px solid var(--bz-border) !important;
    border-radius: 11px !important;
    transition: background .15s var(--bz-ease), transform .12s var(--bz-ease) !important;
}
.live-games__item:hover { background: var(--bz-raised) !important; transform: translateX(3px); }
.live-games__item--amount { color: var(--bz-green) !important; font-weight: 800 !important; }
.live-games__item--game { color: var(--bz-brand) !important; font-weight: 600; }

/* ============================================================
   DICE — the showcase
   ============================================================ */
.dice-game { max-width: 880px; }
.dice__result {
    background:
        radial-gradient(130% 160% at 50% -30%, rgba(108,135,245,.30), transparent 62%),
        linear-gradient(180deg, #1c3a4d, #16293590) !important;
    border: 1px solid #2c5066 !important;
    border-radius: 18px !important;
    box-shadow: var(--bz-shadow), inset 0 1px 0 rgba(255,255,255,.07) !important;
    padding: 30px 22px !important;
    text-align: center;
    animation: bzGlow 4s ease-in-out infinite;
}
/* the big multiplier number (first text child) */
.dice__result > *:first-child, .dice__result span:first-child, .dice__result .result {
    font-family: var(--bz-display) !important;
    font-weight: 800 !important;
    font-size: clamp(38px, 4.5vw, 58px) !important;
    line-height: 1 !important;
    background: linear-gradient(180deg, #ffffff, #aecbff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: bzPop .35s var(--bz-spring);
}
.dice__result > *:last-child {
    color: var(--bz-muted) !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .12em; font-size: 11px !important; margin-top: 8px;
}

/* bet rows */
.dice-settings { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; }
.dice-settings__item {
    background: var(--bz-surface-s) !important;
    border: 1px solid var(--bz-border) !important;
    border-radius: 14px !important; gap: 8px !important; padding: 8px !important;
    box-shadow: var(--bz-shadow-sm);
}
.dice-settings__item--button {
    background: var(--bz-raised) !important; border: 1px solid var(--bz-border-s) !important;
    border-radius: 9px !important; color: var(--bz-muted) !important; font-weight: 700 !important; min-width: 44px;
}
.dice-settings__item--button:hover { background: var(--bz-raised-h) !important; color: #fff !important; transform: translateY(-1px); }
.dice-settings__item--value-wrapper { background: var(--bz-bg) !important; border: 1px solid var(--bz-border-s) !important; border-radius: 10px !important; }
.dice-settings__item--value { background: transparent !important; border: none !important; font-weight: 800 !important; font-size: 20px !important; font-family: var(--bz-display) !important; }
.dice-settings__item--value:focus { box-shadow: none !important; }
.dice-settings__item--value__label { color: var(--bz-muted) !important; }

/* the 3 bet-direction buttons — big, semantic, animated */
.dice-settings-buttons { gap: 14px !important; }
.dice-settings__play {
    border-radius: var(--bz-radius-sm) !important; font-weight: 800 !important;
    font-size: 16px !important; padding: 18px 12px !important;
    border: 1px solid var(--bz-border-s) !important; background: var(--bz-raised) !important;
    color: #fff !important; letter-spacing: .01em; box-shadow: var(--bz-shadow-sm); overflow: hidden;
}
.dice-settings__play:hover { transform: translateY(-3px); }
.dice-settings__play:active { transform: translateY(-1px) scale(.99); }
.dice-settings-buttons .dice-settings__play:nth-child(1) {
    background: linear-gradient(180deg, rgba(241,72,106,.22), rgba(241,72,106,.07)) !important; border-color: rgba(241,72,106,.45) !important;
}
.dice-settings-buttons .dice-settings__play:nth-child(1):hover { box-shadow: 0 14px 30px -10px rgba(241,72,106,.5); border-color: var(--bz-red) !important; }
.dice-settings-buttons .dice-settings__play:nth-child(2) {
    background: linear-gradient(180deg, rgba(108,135,245,.22), rgba(108,135,245,.07)) !important; border-color: rgba(108,135,245,.45) !important;
}
.dice-settings-buttons .dice-settings__play:nth-child(2):hover { box-shadow: 0 14px 30px -10px rgba(108,135,245,.5); border-color: var(--bz-brand) !important; }
.dice-settings-buttons .dice-settings__play:nth-child(3) {
    background: linear-gradient(180deg, rgba(47,211,106,.24), rgba(47,211,106,.07)) !important; border-color: rgba(47,211,106,.45) !important;
}
.dice-settings-buttons .dice-settings__play:nth-child(3):hover { box-shadow: 0 14px 30px -10px rgba(47,211,106,.5); border-color: var(--bz-green) !important; }

/* ============================================================
   MINES — tactile 3D tiles
   ============================================================ */
.mines-amount, .mines-left, .mines-control, .minefields-col {
    background: var(--bz-surface-s) !important; border: 1px solid var(--bz-border) !important;
    border-radius: var(--bz-radius) !important; box-shadow: var(--bz-shadow-sm);
}
.minefields__value { font-family: var(--bz-display) !important; font-weight: 800 !important; font-size: 26px !important; }
.minefields__title { color: var(--bz-muted) !important; text-transform: uppercase; letter-spacing: .08em; font-size: 12px !important; }

/* the actual clickable cells = children of each row */
.minefields > .cell {
    background: linear-gradient(155deg, #29485a, #1a3441) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.10), inset 0 -5px 11px rgba(0,0,0,.4), 0 5px 12px -3px rgba(0,0,0,.4) !important;
    transition: transform .13s var(--bz-spring), box-shadow .18s var(--bz-ease), background .15s, border-color .15s !important;
    cursor: pointer; position: relative;
}
/* subtle centre hint dot on unopened cells */
.minefields > .cell::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.16);
    transition: transform .18s var(--bz-spring), background .15s;
}
.minefields > .cell:hover {
    background: linear-gradient(155deg, #35596d, #224455) !important;
    transform: translateY(-3px) scale(1.04);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 16px 30px -9px rgba(108,135,245,.6), 0 0 0 1px var(--bz-brand) !important;
    border-color: var(--bz-brand) !important;
}
.minefields > .cell:hover::after { transform: scale(2); background: var(--bz-brand); }
.minefields > .cell:active { transform: translateY(-1px) scale(1.0); }
/* revealed cells (have the diamond/mine image) — drop the hint dot, soften */
.minefields > .cell:has(.minefields__image)::after { display: none; }
.minefields__image { filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }

.mines__steps-item, .step-coff {
    background: var(--bz-raised) !important; border: 1px solid var(--bz-border-s) !important;
    border-radius: 10px !important; font-weight: 700;
}
.mines-control__check {
    border-radius: var(--bz-radius-sm) !important; border-style: solid !important;
    border-color: var(--bz-border-s) !important;
}

/* ============================================================
   BUBBLES / ALLIN
   ============================================================ */
.casino-play__wrapper-place, .casino-play__wrapper-controls {
    background: var(--bz-surface) !important; border: 1px solid var(--bz-border) !important;
    border-radius: var(--bz-radius) !important; box-shadow: var(--bz-shadow-sm);
}
.casino-play__control--button {
    background: var(--bz-raised) !important; border: 1px solid var(--bz-border-s) !important;
    border-radius: 10px !important; transition: all .15s var(--bz-ease);
}
.casino-play__control--button:hover { background: var(--bz-raised-h) !important; transform: translateY(-1px); }

/* ============================================================
   AUTH MODAL (login / register)
   ============================================================ */
.auth-modal, .auth-wrapper {
    background: linear-gradient(180deg, #173040, #102230) !important;
    border: 1px solid var(--bz-border-s) !important; border-radius: 20px !important;
    box-shadow: 0 40px 90px -24px rgba(0,0,0,.75) !important;
    overscroll-behavior: contain;
}
.auth-modal__bg { background: rgba(6,16,22,.7) !important; backdrop-filter: blur(6px); }
.auth__title { font-family: var(--bz-display) !important; }
.auth-vk-icon, .button.blue.auth-vk { }
.auth__close:hover { color: #fff !important; transform: rotate(90deg); transition: transform .2s var(--bz-ease); }

/* ============================================================
   CASHIER + WITHDRAW
   ============================================================ */
.cash, .cash-right { background: var(--bz-surface) !important; border: 1px solid var(--bz-border) !important; border-radius: var(--bz-radius) !important; }
.cash__button, .cash__button--amount {
    background: var(--bz-raised) !important; border: 1px solid var(--bz-border-s) !important;
    border-radius: 13px !important;
}
.cash__button:hover, .cash__button.active, .cash__button--amount:hover {
    background: var(--bz-raised-h) !important; border-color: var(--bz-brand) !important;
    transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(108,135,245,.45);
}
.cash__button.active { box-shadow: 0 0 0 2px var(--bz-brand) inset, 0 12px 24px -10px rgba(108,135,245,.4); }
.pay-box {
    background: var(--bz-raised) !important; border: 1px solid var(--bz-border-s) !important; border-radius: 12px !important;
}
.pay-box:hover, .pay-box.isActive { border-color: var(--bz-brand) !important; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(108,135,245,.45); }
.cash__close:hover { color:#fff !important; transform: rotate(90deg); transition: transform .2s var(--bz-ease); }
.cash__status { border-radius: 999px !important; font-weight: 700; }

/* ============================================================
   BONUS / REF / PROFILE / SLOTS / GAMES tiles / FOOTER
   ============================================================ */
.bonuses__card, .ref-card, .profile-info, .profile-cash {
    background: var(--bz-surface) !important; border: 1px solid var(--bz-border) !important;
    border-radius: var(--bz-radius) !important; box-shadow: var(--bz-shadow-sm);
    transition: transform .15s var(--bz-ease), box-shadow .18s var(--bz-ease);
}
.bonuses__card:hover, .ref-card:hover { transform: translateY(-3px); box-shadow: var(--bz-shadow); }

.slot-card, .games-item__icon-wrapper {
    border-radius: 14px !important; overflow: hidden;
    transition: transform .15s var(--bz-ease), box-shadow .18s var(--bz-ease) !important;
}
.slot-card:hover, .games-item:hover .games-item__icon-wrapper {
    transform: translateY(-4px); box-shadow: 0 16px 34px -12px rgba(0,0,0,.6);
}
.games-title, .slot-card__name { font-weight: 700 !important; }

.footer__link { color: var(--bz-muted) !important; transition: color .15s var(--bz-ease); }
.footer__link:hover { color: #fff !important; }

/* promo banner CTA polish */
.promo-banner__button {
    border-radius: var(--bz-radius-sm) !important; font-weight: 800 !important;
    box-shadow: 0 10px 26px -8px rgba(47,211,106,.55) !important;
}

a { transition: color .15s var(--bz-ease); }