/* ============================================================
   Casino visual overrides
   ------------------------------------------------------------
   The original app.css ships with fixed-pixel text sizes tuned
   for a 1920×1080+ display where the promo banner has enough
   room for 90/70/50 px headings. On 1280–1500 px viewports the
   content overflows the aspect-ratio container and the value
   pill ends up visually crashing into the description.

   This file is loaded *after* app.css from app.blade.php; rules
   here win on specificity (or via !important where the
   original is itself an inline-like base rule).
   ============================================================ */

/* ============================================================
   Kill stray horizontal overflow (mobile jiggle)
   ----------------------------------------
   Full-bleed banners (.bonuses-header breaks out by ±10px) and the
   slick/swiper carousels (their 1300px+ track leaks ~28px past the
   layout viewport on narrow screens) let the page scroll sideways a
   few px on phones. The app uses no position:sticky, so clamping
   overflow-x at the document level is safe and clips the leak without
   affecting carousel swiping (carousels translate, they don't scroll
   the page) or fixed header/nav.
   ============================================================ */
html, body {
    overflow-x: hidden !important;
    max-width: 100%;
}

/* ---------- Hero promo banner: size + spacing ---------- */

.promo-banner-info {
    padding-top: clamp(20px, 4vh, 70px) !important;
    padding-bottom: clamp(20px, 4vh, 40px) !important;
    min-width: 280px !important;
    right: clamp(2%, 5%, 20%) !important;
    gap: 8px;
}

.promo-banner-col {
    gap: 4px;
}

.promo-banner__title {
    font-size: clamp(36px, 5.5vw, 84px) !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}

.promo-banner__value {
    font-size: clamp(18px, 2.4vw, 36px) !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}

.promo-banner__description {
    font-size: clamp(22px, 3.6vw, 56px) !important;
    line-height: 1.05 !important;
    margin: 12px 0 18px 0 !important;
}

.promo-banner__button {
    padding: 12px 28px !important;
    font-size: clamp(13px, 1.4vw, 18px) !important;
}

/* On narrower viewports give the banner more vertical room so the
   content stops fighting for space. */
@media (max-width: 1200px) {
    .promo-banner {
        aspect-ratio: 1800 / 950 !important;
    }
    .promo-banner-info {
        right: 0 !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 720px) {
    .promo-banner {
        aspect-ratio: 4 / 5 !important;
    }
    .promo-banner__title { font-size: 42px !important; }
    .promo-banner__description { font-size: 28px !important; }
    .promo-banner__value { font-size: 18px !important; }
}


/* ============================================================
   Sidebar logo overflow
   ----------------------------------------
   The logo <img> is hard-coded 75×75 px inline in LeftMenu.vue
   but the collapsed sidebar is only 108 px wide with 25 px of
   padding on each side (= 58 px usable). 75 > 58 → it visually
   sticks out chunkier than the 38 px game-item icons below.
   Force a size that matches the rest of the rail.
   ============================================================ */

.left-main__logo-wrapper {
    max-width: 100% !important;
}
.left-main__logo-wrapper img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
/* When the sidebar is expanded we have plenty of room — bring the
   logo back up so the brand isn't dwarfed in expanded mode. */
.left-main.active .left-main__logo-wrapper img {
    width: 72px !important;
    height: 72px !important;
}


/* ============================================================
   Dice settings row — visual consistency
   ----------------------------------------
   Only `.dice-settings__item--button.secondary` (the Min button)
   had a background in the original CSS, leaving Max / X2 / /2 as
   bare text. Result reads as a single styled button in a row of
   ghost buttons. Make every button look like the secondary one.
   ============================================================ */

.dice-settings__item--button {
    background-color: #13152B !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    color: #c9ccdc;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dice-settings__item--button:hover {
    background-color: #1f234d !important;
    color: #fff;
}
.dice-settings__item--button.secondary {
    background-color: #1a1f3c !important;
}
/* The value-wrapper gets explicit min-width so the input doesn't
   collapse on narrow rows. */
.dice-settings__item--value-wrapper {
    min-width: 120px !important;
    flex: 1 1 auto !important;
}


/* ============================================================
   Mines grid breathing room
   ----------------------------------------
   The 5×5 grid was rendered with 15 px gaps and no min-height
   on cells, so cells collapsed flat. Give each cell a square
   floor and tighten the side gap so the playfield reads big.
   ============================================================ */

.minefields {
    grid-gap: 12px !important;
}
.minefields > * {
    min-height: 72px;
    aspect-ratio: 1 / 1;
}
.mines-row {
    gap: 32px !important;
}


/* ============================================================
   Wheel: difficulty-level wheel graphic
   ----------------------------------------
   Wheel.vue line 102 binds `/assets/image/wheel/{level}.png`. The
   source archive shipped without those assets, so we generated three
   palette-matched segmented wheels (1/2/3.png) whose colours mirror
   each level's coefficient legend. The wheel spins via the bundle's
   existing 4.5s rotate transition; the authoritative result is the
   coefficient shown in the centre (.legend-wheel-inner), so we
   intentionally ship no pointer arrow — the spin is decorative.
   ============================================================ */


/* ============================================================
   BIZONE hero banner — clean overlay
   ----------------------------------------
   The partner's main-banner (BIZONE bison artwork) is a complete
   marketing design with its own branding baked in. The template's
   carousel text overlay (100% / Telegram / 550FS headings) clashes
   with it, so we hide the decorative text/images and keep only a
   single clean "Пополнить/Получить бонус" CTA, repositioned to the
   lower-left away from the artwork on the right.
   ============================================================ */

.promo-banner__title,
.promo-banner__value,
.promo-banner__description,
.promo-banner__title--decor,
.promo-banner__value--decor,
.promo-banner--decor {
    display: none !important;
}
.promo-banner-info {
    right: auto !important;
    left: 4% !important;
    min-width: 0 !important;
    width: auto !important;
    justify-content: flex-end !important;
    padding-bottom: clamp(16px, 5vh, 56px) !important;
    align-items: flex-start !important;
}
.promo-banner__button {
    margin: 0 !important;
}

/* ============================================================
   Bonus page header — clean BIZONE banner
   ----------------------------------------
   Bonus.vue hardcodes a "Nomi Casino" title overlay (.bonuses-header-info)
   on top of the banner. The rebranded BIZONE bonus banner already carries
   its own "БОНУСЫ ОТ BIZONE" headline, so the template overlay just clashes
   with the artwork — hide it and let the banner stand on its own.
   ============================================================ */
.bonuses-header-info,
.bonuses-header-decor {
    display: none !important;
}