/* tapium.css — дизайн-хром Tapium (порт из дизайн-прототипа tapium_field.html).
   Поле рисует Pixi (см. themes/tapium.js — те же токены для канваса);
   здесь — прелоадер, пиллы, bet/ap-sheet, sysbar, модалки, кнопки. */

:root {
    --bg:          #FFFFFF;
    --accent:      #FF37C7;            /* база заливки чужих ставок */
    --coef-ink:    rgba(0, 0, 0, 0.70);
    --heat-ink:    #DC009F;
    --hairline:    rgba(26, 16, 22, 0.07);
    --hover-fill:  #FF0080;
    --hover-ink:   #5C0430;
    --bet-fill:    #00E114;
    --bet-coef-ink: #004A00;
    --bet-amt-ink:  rgba(0, 74, 0, 0.50);
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== ПРЕЛОАДЕР (id-контракт: loading-screen / loading-bar / loading-percent) */
#loading-screen {
    position: fixed; inset: 0; z-index: 9999; background: #FFFFFF;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 1; transition: opacity .4s ease;
}
#loading-screen.fade-out { opacity: 0; pointer-events: none; }
#loading-screen .pl-center { display: flex; flex-direction: column; align-items: center; gap: 26px; }
#loading-screen .pl-logo { width: min(190px, 48vw); line-height: 0; }
#loading-screen .pl-logo svg { width: 100%; height: auto; display: block; }
#loading-screen .pl-bar { width: min(150px, 42vw); height: 3px; border-radius: 3px; background: #ECECEF; overflow: hidden; }
#loading-screen .pl-bar-fill { width: 0%; height: 100%; border-radius: 3px; background: #FF0080; transition: width .4s var(--ease); }
#loading-screen .pl-foot { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
#loading-screen .pl-powered {
    font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .16em;
    color: #C2C2C8; text-transform: uppercase;
}
#loading-screen .pl-co { width: 96px; line-height: 0; opacity: .9; }
#loading-screen .pl-co svg { width: 100%; height: auto; display: block; }

/* ===== ЛОГОТИП (верх-лево) ============================================== */
#logo {
    position: fixed;
    top: 14px; left: 20px;
    height: 53px;                /* как высота плашки баланса */
    z-index: 20;
    display: flex; align-items: center;
    pointer-events: none; user-select: none; line-height: 0;
    filter: drop-shadow(0 4px 10px rgba(255, 0, 128, 0.20));
}
#logo svg { display: block; width: 44px; height: auto; overflow: visible; }
/* белая внешняя обводка 3px: stroke под заливкой, ширина 6 → видимые 3px снаружи */
#logo svg path { stroke: #FFFFFF; stroke-width: 6; paint-order: stroke; stroke-linejoin: round; }

/* ===== ПЛАШКИ (pill): баланс верх-центр, ставка низ-лево ================= */
.pill {
    position: fixed;
    z-index: 20;
    height: 53px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 18px;
    background: #FFFFFF;
    border: none;
    border-radius: 100px;
    box-shadow: 0 4px 10px 3px rgba(0, 0, 0, 0.10);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.pill-val {
    position: relative;
    display: inline-flex; align-items: baseline;
    font-family: 'Inter', sans-serif;
    font-weight: 600; font-size: 16px; line-height: 1;
    color: #000000; white-space: nowrap;
}
.pill-cap {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(100% + 2px);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 900; font-size: 9px; line-height: 1;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: rgba(0, 0, 0, 0.50);
    pointer-events: none;
}
.pill-unit {
    margin-left: 4px;
    font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.50);
}
.pill-balance { top: 14px; left: 50%; transform: translateX(-50%); cursor: default; }
.pill-bet { bottom: 44px; left: 20px; }

/* ===== Кольцо «энергии ставок» вокруг BET (token bucket, ChargeMeter.js) ===
   SVG-обводка по периметру плашки; доля заливки = заряды+прогресс к следующему.
   Чистая косметика — гейт ставки только на сервере. Позиция/размер задаёт JS. */
#bet-charge-ring {
    position: fixed;
    z-index: 21;                 /* над плашкой (z20), но pointer-events off */
    pointer-events: none;
    overflow: visible;
}
#bet-charge-ring rect { fill: none; stroke-linecap: round; }
#bet-charge-ring .bcr-track { stroke: rgba(0, 0, 0, 0.08); stroke-width: 3; }
#bet-charge-ring .bcr-fill {
    stroke: var(--accent);       /* heat-розовый Tapium */
    stroke-width: 3;
    filter: drop-shadow(0 0 4px rgba(255, 55, 199, 0.45));
}
#bet-charge-ring .bcr-notch { stroke: #FFFFFF; stroke-width: 4.5; stroke-linecap: butt; }
/* Заряды кончились — красный пульс, чтобы было видно «ставить нельзя». */
#bet-charge-ring.empty .bcr-fill {
    stroke: var(--hover-fill);
    animation: bcr-pulse 1s var(--ease) infinite;
}
@keyframes bcr-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* ===== БАРАБАН (одометр) для сумм ======================================= */
.drum .rd {
    display: inline-block; position: relative; height: 1.4em; overflow: hidden;
    text-align: center; vertical-align: bottom;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, #000 32%, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0%, #000 32%, #000 68%, transparent 100%);
}
.drum .rstatic { display: inline-block; line-height: 1.4em; }
.drum .rbase   { display: inline-block; line-height: 1.4em; }
.drum .rstack  { position: absolute; left: 0; right: 0; top: 0.2em; line-height: 1em; }
/* Барабан в плашках: компактнее по высоте, по базовой линии с USD и подписью */
.pill-num.drum { display: inline-flex; align-items: baseline; }
.pill-num.drum .rd { height: 1.25em; vertical-align: baseline; }
.pill-num.drum .rstack { top: 0.13em; }
/* Плашка баланса: снизу цифр маска сплошная (фейд только сверху) */
#pill-balance .pill-num.drum .rd {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 100%);
}

/* ===== Кнопка возврата камеры (aim) ===================================== */
#aim-btn {
    position: fixed;
    top: 50%; left: 30px;
    transform: translateY(-50%) scale(0.85);
    width: 53px; height: 53px;
    z-index: 21;
    background: #FF0080;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 4px 10px 3px rgba(255, 0, 128, 0.20);
    display: none;
    align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transition: opacity 200ms var(--ease), transform 220ms var(--ease-spring);
}
#aim-btn.show { display: flex; opacity: 1; transform: translateY(-50%) scale(1); }
#aim-btn svg { display: block; width: 25px; height: 25px; transform: translateX(-2px); }
#aim-btn.on-right { left: auto; right: 30px; }
#aim-btn.on-right svg { transform: scaleX(-1) translateX(-2px); }

/* ===== Индикатор головы змейки у края экрана ============================ */
#head-indicator {
    position: fixed;
    left: 4px; top: 50%;
    z-index: 21;
    width: 25px; height: 25px;
    display: none;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(255, 0, 128, 0.20));
    transition: opacity 200ms var(--ease);
    opacity: 0;
}
#head-indicator.show { display: block; opacity: 1; }
#head-indicator.on-right { left: auto; right: 4px; }
#head-indicator.on-right svg { transform: scaleX(-1); }
#head-indicator svg { display: block; width: 25px; height: 25px; overflow: visible; }
#head-indicator svg path { fill: #FF0080; stroke: #FFFFFF; stroke-width: 6; paint-order: stroke; stroke-linejoin: round; }

/* ===== Поповер выбора суммы ставки ====================================== */
.bet-scrim {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.04);
    z-index: 25;
    opacity: 0; visibility: hidden;
    transition: opacity 180ms var(--ease), visibility 180ms var(--ease);
}
.bet-scrim.open { opacity: 1; visibility: visible; }

.bet-sheet {
    position: fixed;
    left: 20px; bottom: 44px;
    z-index: 26;
    width: 264px;
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.12);
    padding: 10px;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
    opacity: 0; visibility: hidden;
    transform: translateY(8px) scale(0.98);
    transform-origin: left bottom;
    transition: opacity 180ms var(--ease), transform 200ms var(--ease-spring),
                visibility 180ms var(--ease);
}
.bet-sheet.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.bet-amount-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 7px;
}
.bet-pm {
    flex: none; width: 40px; height: 40px; border: none; border-radius: 14px;
    background: #F3F3F4; color: #000;
    font-family: inherit; font-weight: 600; font-size: 22px; line-height: 1;
    cursor: pointer; user-select: none;
    transition: background 120ms var(--ease), transform 80ms var(--ease);
}
.bet-pm:active { transform: scale(0.92); background: #E9E9EB; }
.bet-pm.disabled { opacity: 0.32; pointer-events: none; }
.bet-amount-mid {
    flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
    min-width: 0; height: 1.25em;
    font-size: 28px; font-weight: 600; color: #000;
    letter-spacing: 0.01em;
}
.bet-amount-text {
    font-size: 28px; font-weight: 600; color: #000; line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    display: inline-flex; align-items: flex-end;
}
/* Ввод — наложен на барабан в той же метрике; по умолчанию скрыт */
#bet-input {
    outline: none; cursor: text; caret-color: #FF0080;
    position: absolute; left: 50%; transform: translateX(-50%);
    display: none;
    height: 1.4em; line-height: 1.4em;
    align-items: center;
}
.bet-amount-mid.editing #bet-display { visibility: hidden; }
.bet-amount-mid.editing #bet-input { display: inline-flex; }

.bet-presets {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin-bottom: 11px;
}
.bet-preset {
    height: 34px; border: none; border-radius: 12px;
    background: #F3F3F4; color: #000;
    font-family: inherit; font-weight: 600; font-size: 13px;
    letter-spacing: -0.01em; cursor: pointer;
    transition: background 120ms var(--ease), transform 80ms var(--ease);
}
.bet-preset:active { transform: scale(0.94); background: #E9E9EB; }

.bet-confirm {
    width: 100%; height: 46px; border: none; border-radius: 23px;
    background: #FF0080; color: #FFFFFF;
    font-family: 'Anybody', 'Inter', sans-serif; font-weight: 900; font-size: 14px;
    letter-spacing: 0.01em;
    text-transform: uppercase; cursor: pointer;
    transition: transform 100ms var(--ease), filter 120ms var(--ease);
}
.bet-confirm:active { transform: scale(0.97); filter: brightness(0.95); }

/* ===== АВТОПЛЕЙ (инертная заглушка) ===================================== */
#autoplay-btn {
    position: fixed; bottom: 44px; left: 0; z-index: 20;
    width: 53px; height: 53px; border: none; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 4px 10px 3px rgba(0, 0, 0, 0.10);
    display: flex; align-items: center; justify-content: center; padding: 0;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: transform 100ms var(--ease);
}
#autoplay-btn:active { transform: scale(0.96); }
#autoplay-btn .ap-ico { display: flex; align-items: center; justify-content: center; line-height: 0; }
#autoplay-btn .ap-ico svg { display: block; width: 36px; height: 36px; overflow: visible; }
#autoplay-btn .ap-arrows {
    transform-box: fill-box; transform-origin: center;
    transition: transform 420ms cubic-bezier(.2, 1.3, .4, 1);
}
@media (hover: hover) and (pointer: fine) {
    #autoplay-btn:hover .ap-arrows { transform: rotate(40deg); }
}

#autoplay-count {
    position: fixed; z-index: 20; left: 0; top: 0;
    background: #FFFFFF; box-shadow: 0 4px 10px 3px rgba(0, 0, 0, 0.10);
    border-radius: 100px; padding: 6px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; line-height: 1;
    color: #000000; white-space: nowrap;
    display: none; user-select: none; pointer-events: none;
}
#autoplay-count.show { display: block; }

#ap-sheet { transform-origin: left bottom; }
#ap-sheet .bet-presets { margin-bottom: 6px; }
#ap-start { display: flex; align-items: center; justify-content: center; gap: 7px; }
#ap-start .ap-play { display: inline-flex; line-height: 0; }
#ap-start .ap-play svg { display: block; width: 13px; height: auto; }
.ap-inf {
    width: 100%; height: 34px; border: none; border-radius: 12px;
    background: #F3F3F4; color: #000; cursor: pointer; margin-bottom: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: background 120ms var(--ease), transform 80ms var(--ease);
}
.ap-inf:active { transform: scale(0.98); background: #E9E9EB; }
.ap-inf.active { background: rgba(255, 0, 128, 0.10); }
.ap-inf-glyph {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 22px; line-height: 1;
    color: #000;
}
.ap-inf.active .ap-inf-glyph { color: #FF0080; }

/* ===== СИСТЕМНАЯ ПОЛОСА СНИЗУ =========================================== */
#sysbar {
    position: fixed; left: 0; bottom: 0; width: 100%; height: 40px; z-index: 20;
    background: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 30%, rgba(255, 255, 255, 0) 100%);
    display: flex; align-items: flex-end; padding: 0 14px 7px 30px;
    font-family: 'Inter', sans-serif; color: #6E6E73;
    pointer-events: auto; cursor: default;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
#sysbar .sys-ico { display: inline-flex; line-height: 0; }
#sysbar .sys-ico svg { display: block; width: 13px; height: 13px; }
#sysbar .sys-menu {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; cursor: pointer; color: #3A3A3E;
    font-family: 'Inter', sans-serif; pointer-events: auto;
}
#sysbar .sys-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
#sysbar .sys-group { display: flex; align-items: center; gap: 14px; margin-left: 20px; }
#sysbar .sys-stat { display: inline-flex; align-items: center; gap: 5px; cursor: default; }
#sysbar .sys-val {
    font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em;
    color: #4A4A4E; white-space: nowrap;
}
#sysbar .sys-stat.ping { color: #0AA33A; }
#sysbar .sys-stat.ping .sys-val { color: #0AA33A; }
@media (hover: none) and (pointer: coarse) {
    #sysbar .sys-group { margin-left: auto; }
}

/* ===== ТЁМНЫЙ РЕЖИМ НИЖНЕГО ХРОМА НА ВРЕМЯ БОНУСА ======================
   Поле в бонусе инвертировано в чёрное; белый sysbar-градиент на нём смотрится
   неказисто. body.bonus-mode (TapiumUI toggle по store.bonusActive) перекрашивает
   sysbar в тёмный с плавным переходом, текст/иконки — в светлые тона. BET-плашку
   НЕ трогаем (остаётся белой). */
body.bonus-mode #sysbar {
    background: linear-gradient(to top, #000000 0%, #000000 30%, rgba(0, 0, 0, 0) 100%);
    color: #9A9AA0;
}
body.bonus-mode #sysbar .sys-menu { color: #C8C8CE; }
body.bonus-mode #sysbar .sys-val { color: #B0B0B6; }
/* Плавный переход и в обычном состоянии, чтобы возврат тоже был мягким. */
#sysbar { transition: background .35s ease, color .35s ease; }

/* ===== МОДАЛКИ ========================================================== */
.wf-modal-backdrop {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(12, 8, 14, 0.40);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
    font-family: 'Inter', sans-serif;
    overscroll-behavior: none; touch-action: none;
}
.wf-modal-backdrop.show { opacity: 1; pointer-events: auto; }
.wf-modal-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 40px);
    overscroll-behavior: none; touch-action: none;
}
@media (min-width: 600px) {
    .wf-modal-wrap { width: 420px; }
}
.wf-logo {
    display: none; width: 174px; max-width: 62%; line-height: 0;
    opacity: 0; transform: translateY(4px);
    transition: opacity .26s var(--ease), transform .26s var(--ease);
    pointer-events: none;
}
.wf-logo svg, .wf-logo img { display: block; width: 100%; height: auto; }
.wf-modal-wrap.has-logo .wf-logo { display: block; }
.wf-modal-backdrop.show .wf-modal-wrap.has-logo .wf-logo { opacity: 1; transform: translateY(0); }
.wf-modal {
    width: 100%; min-height: 0; display: flex; flex-direction: column;
    background: #FFFFFF; border-radius: 28px; padding: 10px;
    box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.12);
    letter-spacing: -0.01em; -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: translateY(10px) scale(.97);
    transition: transform .3s var(--ease-spring), opacity .22s var(--ease);
    overflow: hidden;
}
.wf-modal-backdrop.show .wf-modal { opacity: 1; transform: translateY(0) scale(1); }
.wf-close-out {
    flex: none; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
    background: #FFFFFF; color: #16161A;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.25);
    opacity: 0; transform: translateY(-6px) scale(.9);
    transition: opacity .24s var(--ease) .04s, transform .3s var(--ease-spring) .04s, background .14s var(--ease);
}
.wf-close-out:hover { background: #F2F2F4; }
.wf-close-out:active { transform: scale(.9); }
.wf-close-out svg { width: 22px; height: 22px; }
.wf-modal-backdrop.show .wf-close-out { opacity: 1; transform: translateY(0) scale(1); }

.wf-head {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: 14px 16px 14px; min-height: 34px;
}
.wf-titlewrap { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; width: 100%; }
.wf-title {
    min-width: 0; max-width: 100%;
    font-family: 'Anybody', 'Inter', sans-serif;
    font-size: 21px; font-weight: 900;
    letter-spacing: -0.01em; color: #16161A; line-height: 1.04;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    text-transform: uppercase; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-subtitle {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    color: #8A8A90; text-transform: uppercase; letter-spacing: 0; text-align: center;
}
.wf-body {
    overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0;
    margin: 0; padding: 0 2px;
}

/* Пункты меню — флэт-список с разделителями */
.wf-mcard { background: transparent; padding: 0 4px; margin: 0 2px; }
.wf-mcard + .wf-mcard { margin-top: 14px; }
.wf-mrow { display: flex; align-items: center; gap: 12px; padding: 18px 10px; cursor: pointer; }
.wf-mrow .mi {
    flex: none; width: 22px; height: 22px; color: #3A3A3E;
    display: flex; align-items: center; justify-content: center;
    transform: translateZ(0); transition: opacity .14s var(--ease);
}
.wf-mrow .mi svg { display: block; width: 22px; height: 22px; backface-visibility: hidden; }
.wf-mrow .mi svg * { stroke-width: 1.85px; }
.wf-mrow .ml {
    flex: 1; font-family: 'Anybody', 'Inter', sans-serif; font-size: 14px; font-weight: 900;
    color: #16161A; letter-spacing: 0.01em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity .14s var(--ease);
}
@media (hover: hover) {
    .wf-mrow:hover .ml, .wf-mrow:hover .mi { opacity: 0.55; }
}
.wf-mdiv2 { height: 2px; background: #E5E5E9; border-radius: 1px; margin: 0 14px; }

/* ── Финальный flourish бонуса: «ставка×коэффициент» улетает в плашку FUN ──
   Спавнится TapiumUI._spawnBonusFlourish строго после анимации бонус-раунда. */
/* Аутентичный Tapium-стиль: чистая белая карточка как плашки/шиты (radius 28,
   мягкая тень), magenta-акцент #FF0080, без «убогого» тёмного гало. Сверху —
   фирменная звёздочка (assets/tapium/logo-head.svg). */
.bonus-payout-fly {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 280px;
    font-family: 'Anybody', system-ui, sans-serif;
    padding: 26px 56px 24px;
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 16px 40px 6px rgba(255, 0, 128, 0.18), 0 4px 14px rgba(0, 0, 0, 0.10);
    user-select: none;
}
.bonus-payout-fly .bpf-star {
    width: 44px; height: auto; display: block; margin-bottom: 2px;
    filter: drop-shadow(0 4px 10px rgba(255, 0, 128, 0.35));
}
/* Сумма (bpf-amt) сверху, уравнение (bpf-mul) под ней — отдельными строками,
   не внахлёст. Слот суммы зарезервирован с фазы 1 (она невидима, но держит
   место), поэтому уравнение не прыгает, когда сумма «выскакивает». */
.bonus-payout-fly .bpf-amt, .bonus-payout-fly .bpf-mul {
    position: relative; white-space: nowrap;
}
.bonus-payout-fly .bpf-amt {
    font-weight: 900; font-size: 46px; line-height: 1;
    color: #FF0080; letter-spacing: 0.5px;
}
.bonus-payout-fly .bpf-mul {
    font-weight: 700; font-size: 26px; line-height: 1;
    color: var(--coef-ink); letter-spacing: 0.5px;
}