/* ── Full-screen bonus PLAQUE ("BONUS GAME" intro) ─────────────────────────────
   #bonus-zone is glued to the right edge (right:0); JS animates only `left`. On the
   intro it pulls left→15px, expanding full-screen. The vertical wait line/badge stay
   in Pixi — this overlay is layered on top and only shown during the intro. */
#bonus-zone {
    position: fixed;
    /* WAIT phase: a tall strip (not full height) with inset top/bottom; LEFT corners
       rounded. The intro (.intro) below stretches it full-screen and drops the inset. */
    top: 7vh; bottom: 7vh;
    right: 0; left: 100%;
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
    z-index: var(--z-hud-over);
    overflow: hidden;
    pointer-events: none;
    display: none;
    /* Fallback plaque tint (WebGL mesh canvas .bz-mesh draws over this). */
    background: linear-gradient(to right, #FF3F9F 0%, var(--pink) 100%);
    will-change: left, transform;
}
/* WAIT phase: vertical "BONUS" label rotated 90° left (reads bottom-up), near the LEFT
   edge of the strip (left set from JS), vertically centered. Hidden during the intro. */
.bz-zone-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: var(--ff-head);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
    white-space: nowrap;
    pointer-events: none; user-select: none;
    opacity: 0.92;
    z-index: 2;
    transition: opacity .3s ease;
}
#bonus-zone.intro .bz-zone-label { opacity: 0; }
/* Entrance of the wait strip: quick but soft slide in from the right + fade. */
@keyframes bzAppear {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
}
#bonus-zone.appearing { animation: bzAppear .32s cubic-bezier(.2, .9, .25, 1); }
/* Intro (full-screen): 15px inset all around + rounded corners; layered above all
   chrome. right=15px overrides base right:0; left→15px set by JS (_fireBonusIntro). */
#bonus-zone.intro {
    z-index: var(--z-bonus-intro);
    top: 15px; bottom: 15px; right: 15px;
    border-radius: var(--r-modal);
    background: #FF1E7A;   /* fallback if WebGL unavailable */
}
/* WebGL mesh-gradient background under the content. */
/* Чернила текста окон бонуса. Дефолт = белый текст / белая кнопка с --pink;
   скин переопределяет в skins/<скин>.css (:root[data-skin=…]). */
:root {
    --bonus-ink:     #FFFFFF;
    --bonus-btn-bg:  #FFFFFF;
    --bonus-btn-ink: var(--pink);
    /* HUD коэффициента раунда #bonus-x: заливка и обводка (тема переопределяет, skins/<скин>.css). */
    --bonus-x-fill:   var(--pink);
    --bonus-x-stroke: #FFFFFF;
}
.bz-mesh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
#bonus-zone .bz-title { z-index: 2; }
.bz-title {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ff-head);
    font-weight: 900;
    /* Base size only: fitted down in JS (_fitTitleToWidth) if it overflows the card. */
    font-size: min(72px, 11vw, 9vh);
    line-height: 1.05;
    color: var(--bonus-ink);
    text-align: center;
    letter-spacing: 0.02em;
    /* Wrap to balanced lines within the card; JS only shrinks a single overlong word. */
    white-space: normal;
    text-wrap: balance;
    padding: 0 16px; box-sizing: border-box;
    opacity: 0;                     /* visible only in the intro phase */
    transition: opacity .3s ease;
}
#bonus-zone.intro .bz-title { opacity: 1; }
/* Closing the intro — a SOFT wipe (gradient mask with a blurred edge) instead of a
   hard slide: the edge erases left→right. Cheap (mask composited on GPU). */
#bonus-zone.bz-wipeout {
    -webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) left / 240% 100% no-repeat;
            mask: linear-gradient(90deg, #000 45%, transparent 55%) left / 240% 100% no-repeat;
    animation: bzWipeOut .34s cubic-bezier(.7, 0, .84, 0) forwards;
}
@keyframes bzWipeOut {
    from { -webkit-mask-position: left;  mask-position: left; }
    to   { -webkit-mask-position: right; mask-position: right; }
}

/* ===== Bonus round chrome ============================================================
   During the bonus the bet/autoplay chrome is hidden (bets are not accepted). The class
   body.bonus-mode is toggled by TapiumUI on store.bonusActive. */
body.bonus-mode #pill-bet,
body.bonus-mode #pill-balance,
body.bonus-mode #pill-freebet,
body.bonus-mode #autoplay-btn,
body.bonus-mode #autoplay-count { display: none !important; }

/* No top-centre notifications during the bonus: the outcome is predetermined
   server-side and no longer depends on the socket, so neither the pink
   link-quality pill nor any grey toast (nor a "Connecting…" reconnect hint)
   may cover the frozen bonus board. Belt-and-suspenders with the JS gates in
   TapiumUI._refreshConnPill / CentrifugeClient._refreshConnBanner — this also
   catches generic toasts that render into #notif-stack. */
body.bonus-mode #notif-stack { display: none !important; }

/* START button — the bonus is paused (snake/grid static) until pressed; it hides and the
   on-screen X counter (#bonus-x) appears in its place. */
/* .hud-pill-btn — большая розовая кнопка-пилюля поверх поля (SSoT оформления: START
   бонус-раунда, «Skip Tutorial» обучения). Позицию/видимость задаёт владелец. */
.hud-pill-btn {
    height: min(66px, 15vw);
    padding: 0 min(42px, 10.5vw);
    box-sizing: border-box;
    align-items: center; justify-content: center;
    background: var(--pink);
    border: 3px solid #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 4px 10px 3px rgba(var(--pink-rgb), 0.20);
    font-family: var(--ff-head);
    font-weight: 900; font-size: min(30px, 6.6vw); line-height: 1;
    color: #FFFFFF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#bonus-start {
    position: fixed;
    left: 50%; bottom: 64px;
    transform: translateX(-50%) scale(0.9);
    z-index: var(--z-bonus-start);
    display: none; opacity: 0;
    transition: opacity 200ms var(--ease), transform 220ms var(--ease-spring);
}
#bonus-start .bs-label { display: block; }
#bonus-start.show { display: flex; opacity: 1; transform: translateX(-50%) scale(1); }
@media (hover: hover) and (pointer: fine) {
    #bonus-start.show:hover { transform: translateX(-50%) scale(1.06); }
}
#bonus-start.show:active { transform: translateX(-50%) scale(0.95); }

/* On-screen bonus X counter — top-center, dropped BELOW the logo zone (#logo: top 14px
   + 53px pill height → bottom ≈ 67px, plus a small gap) so the big X never paints over
   the logo on desktop or mobile. The width is clamped to the viewport; since a nowrap
   line ignores max-width, JS (_fitBonusXToWidth) also shrinks the font when a long
   value ("1234.56X") would still overflow on a narrow phone. */
/* .hud-big-title — большая надпись по центру сверху (SSoT оформления и места: счётчик X
   бонус-раунда, «TUTORIAL» обучения). */
.hud-big-title {
    position: fixed; left: 50%;
    top: calc(max(14px, env(safe-area-inset-top)) + 62px);
    transform: translateX(-50%);
    font-family: var(--ff-head); font-weight: 900;
    font-size: min(76px, 15vw); line-height: 1;
    color: var(--bonus-x-fill);
    -webkit-text-stroke: 4.5px var(--bonus-x-stroke);
    paint-order: stroke fill;
    filter: drop-shadow(0 4px 8px rgba(var(--pink-rgb), 0.30));
    pointer-events: none; user-select: none;
    white-space: nowrap;
    max-width: calc(100vw - 24px);
}
#bonus-x {
    z-index: var(--z-bonus-x);
    display: none;
}
#bonus-x.show {
    display: block;
    animation: bxRise .42s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes bxRise {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== End-of-bonus screen (#bonus-end, "MEGA WIN!") — static closer over the game. */
#bonus-end {
    position: fixed; inset: 15px;
    border-radius: var(--r-modal);
    z-index: var(--z-bonus-end);
    display: none;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    box-sizing: border-box;
    background: #FF1E7A;
    -webkit-tap-highlight-color: transparent;
}
/* Full-screen click catcher BEHIND the plaque so clicks in the 15px gap don't reach the
   field (no accidental bet). */
#bonus-end::before { content: ''; position: fixed; inset: 0; z-index: -1; }
#bonus-end .be-win, #bonus-end .be-mult { position: relative; z-index: 1; }
#bonus-end .be-continue { z-index: 1; }
#bonus-end.show {
    display: flex;
    -webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) left / 240% 100% no-repeat;
            mask: linear-gradient(90deg, #000 45%, transparent 55%) left / 240% 100% no-repeat;
    animation: beWipeIn 0.5s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes beWipeIn {
    from { -webkit-mask-position: right; mask-position: right; }
    to   { -webkit-mask-position: left;  mask-position: left; }
}
#bonus-end.closing {
    -webkit-mask: linear-gradient(90deg, transparent 45%, #000 55%) left / 240% 100% no-repeat;
            mask: linear-gradient(90deg, transparent 45%, #000 55%) left / 240% 100% no-repeat;
    animation: beWipeOut 0.42s cubic-bezier(.7, 0, .84, 0) forwards;
}
@keyframes beWipeOut {
    from { -webkit-mask-position: right; mask-position: right; }
    to   { -webkit-mask-position: left;  mask-position: left; }
}
.be-title {
    position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 1;
    font-family: var(--ff-head); font-weight: 900;
    /* Base size only: the FINAL size is fitted in JS (_fitTitleToWidth) so ANY headline
       ("CONGRATULATIONS!", "SUPER MEGA WIN!") fits the card with ~5% side padding. */
    font-size: min(54px, 8.5vw, 8vh); line-height: 1.05; color: var(--bonus-ink);
    /* Wrap multi-word titles ("SUPER MEGA WIN!") to 2 balanced lines at full size instead
       of shrinking to a thin one-liner; JS only shrinks a single overlong word. */
    max-width: calc(100vw - 30px); white-space: normal; text-align: center;
    text-wrap: balance; letter-spacing: .02em;
    padding: 0 16px; box-sizing: border-box;
}
.be-win {
    margin-top: 0;
    font-family: var(--ff-head); font-weight: 900;
    font-size: min(96px, 12vw, 11vh); line-height: 1; color: var(--bonus-ink); white-space: nowrap;
}
.be-mult {
    margin-top: min(34px, 5vw, 4vh);
    font-family: var(--ff-head); font-weight: 900;
    font-size: min(48px, 6.5vw, 5.5vh); line-height: 1; color: var(--bonus-ink); opacity: 0.5; white-space: nowrap;
}
.be-continue {
    position: absolute;
    left: 50%; bottom: 64px;
    transform: translateX(-50%);
    height: min(66px, 15vw);
    padding: 0 min(42px, 10.5vw);
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 999px;
    background: var(--bonus-btn-bg);
    font-family: var(--ff-head); font-weight: 900;
    font-size: min(30px, 6.6vw); line-height: 1;
    color: var(--bonus-btn-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 220ms var(--ease-spring);
}
.be-continue .bc-label { display: block; }
@media (hover: hover) and (pointer: fine) {
    .be-continue:hover { transform: translateX(-50%) scale(1.06); }
}
.be-continue:active { transform: translateX(-50%) scale(0.95); }