/* ============================================================
   MOOD · ЭКРАН ЗАПУСКА ИГРЫ
   Полностью заменяет раскладку из casino.css (скин Dune), который
   в mood не подключён. Разметка статична — index.html, строки
   384–621; состояния навешивает casino.js.

   Два независимых режима:
   · #pagePlay          — полноценный экран (body.play-page-active)
   · #gameFrameOverlay  — упрощённый оверлей запуска (body.game-active)

   Хуки состояний из JS:
   body.play-page-active | .game-active | .play-page-menu-open |
   .play-page-game-tools-open, #playPageHeaderRight.expanded,
   #playPageBg.play-page-bg--space, .active на кнопках и вкладках.
   ============================================================ */

:root {
    /* Выше рейла и шапки, ниже чата и модалок: депозит из шапки
       игры должен открываться поверх. */
    --z-play: 800;
    --play-header-h: 58px;
    --play-gap: var(--space-3);
}

/* ------------------------------------------------------------
   1. КАРКАС
   ------------------------------------------------------------ */
/* Экран лежит внутри .casino-main, где у страниц ограничена ширина и
   есть авто-поля, — для фиксированного слоя их надо снять. */
#pagePlay.page-play {
    position: fixed;
    inset: 0;
    z-index: var(--z-play);
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-deep);
    color: var(--text);
    font-family: var(--font-sans);
}

/* Скролл страницы под экраном игры не нужен: экран занимает вьюпорт */
body.play-page-active,
body.game-active { overflow: hidden; }

/* Приветствие поддержки и полоса уведомлений живут выше экрана игры —
   всплывать поверх барабанов они не должны. */
body.game-active .support-chat-welcome-teaser,
body.game-active .support-chat-notify-bar { display: none !important; }

/* ------------------------------------------------------------
   2. ФОН
   Обложку игры подставляет JS инлайном в background-image, поэтому
   здесь только фильтры и подложка.
   ------------------------------------------------------------ */
.play-page-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    filter: blur(38px) saturate(1.15) brightness(0.42);
    transform: scale(1.12);
    transition: opacity var(--dur-3) var(--ease-out);
}
.play-page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90% 70% at 50% 0%, transparent 0%, rgba(5, 8, 13, 0.55) 100%),
        linear-gradient(180deg, rgba(5, 8, 13, 0.45) 0%, rgba(5, 8, 13, 0.78) 100%);
}
/* Режим «космос»: вместо обложки — фирменное свечение бренда */
.play-page-bg.play-page-bg--space {
    filter: none;
    transform: none;
    background-image: none !important;
    background-color: var(--bg-deep);
}
.play-page-bg.play-page-bg--space::after {
    background:
        radial-gradient(60% 50% at 12% 8%, var(--accent-glow) 0%, transparent 60%),
        radial-gradient(55% 45% at 88% 92%, var(--accent-2-dim) 0%, transparent 62%),
        linear-gradient(160deg, var(--bg-deep) 0%, var(--bg) 100%);
}

/* ------------------------------------------------------------
   3. ШАПКА ЭКРАНА
   ------------------------------------------------------------ */
.play-page-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    min-height: var(--play-header-h);
    padding: 8px var(--space-4);
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-bottom: 1px solid var(--glass-border);
}
.play-page-header-block { display: flex; align-items: center; gap: var(--space-2); }
.play-page-header-left-inner { display: flex; align-items: center; gap: 6px; }

/* Аккаунт-группа прижата к правым иконкам: все действия игрока рядом */
.play-page-header-center {
    margin-left: auto;
    gap: var(--space-3);
}
.play-page-header-right { gap: 6px; }
.play-page-header-right-icons { display: flex; align-items: center; gap: 4px; }

/* Кнопка «Закрыть» в шапке нужна только на телефоне: на десктопе
   тот же крест есть в правой группе иконок. */
.play-page-header-close-mobile { display: none; }

/* ——— Иконочные кнопки шапки ——— */
.play-page-icon-btn,
.play-page-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.play-page-icon-btn:hover,
.play-page-menu-btn:hover {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--border);
}
.play-page-icon-btn svg,
.play-page-menu-btn svg,
.play-page-menu-btn-icon svg,
.play-page-game-tools-btn-icon svg,
.play-page-actions-toggle-icon svg {
    width: 18px;
    height: 18px;
}
.play-page-icon-btn.active {
    color: var(--accent);
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
#playPageClose:hover,
#playPageCloseMobile:hover {
    color: var(--danger);
    background: var(--danger-dim);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

/* Иконки «открыть/закрыть» переключает CSS: JS их не трогает.
   .hidden в mood-base объявлен через !important, поэтому здесь тоже. */
.play-page-menu-btn-icon,
.play-page-actions-toggle-icon,
.play-page-game-tools-btn-icon { display: inline-flex; }
body.play-page-menu-open .play-page-menu-btn-icon--open { display: none !important; }
body.play-page-menu-open #playPageMenuBtn .play-page-menu-btn-icon--close { display: inline-flex !important; }
#playPageHeaderRight.expanded .play-page-actions-toggle-icon--dots { display: none !important; }
#playPageHeaderRight.expanded .play-page-actions-toggle-icon--close { display: inline-flex !important; }
body.play-page-game-tools-open .play-page-game-tools-btn {
    color: var(--accent);
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Переключатель действий — только на узком экране */
.play-page-actions-toggle { display: none; }

/* ——— Профиль ——— */
.play-page-profile-dropdown-wrap { position: relative; }
.play-page-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.play-page-profile-trigger:hover { border-color: var(--border-strong); background: var(--surface-3); }
.play-page-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--grad-brand);
    font-size: 12px;
    font-weight: 800;
    color: var(--btn-primary-text);
}
.play-page-profile-label {
    overflow: hidden;
    max-width: 130px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.play-page-profile-chevron { font-size: 10px; color: var(--text-dim); }

.play-page-profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-lg);
    animation: mood-play-pop var(--dur-2) var(--ease-out);
}
@keyframes mood-play-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.play-page-profile-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.play-page-profile-item:hover { background: var(--surface-2); color: var(--accent); }
.play-page-profile-logout:hover,
.play-page-report-item:hover { color: var(--danger); background: var(--danger-dim); }

/* ——— Баланс и депозит ——— */
.play-page-deposit-btn.btn {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    white-space: nowrap;
}
.play-page-balance-block { display: flex; align-items: center; gap: 6px; }
.play-page-balance-card {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    line-height: 1.15;
}
.play-page-balance-card--bonus {
    border-color: color-mix(in srgb, var(--accent-2) 32%, transparent);
    background: var(--accent-2-dim);
}
.play-page-balance-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.play-page-balance-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text);
}
.play-page-balance-card--bonus .play-page-balance-value { color: var(--accent-2); }

/* ——— Кольцо отыгрыша ——— */
.play-page-wagering {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
}
.play-page-wagering-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.play-page-wagering-ring-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
}
.play-page-wagering-ring-svg {
    width: 34px;
    height: 34px;
    transform: rotate(-90deg);
}
.play-page-wagering-track {
    stroke: var(--border-strong);
    stroke-width: 3;
}
/* stroke-dashoffset задаёт JS — прогресс отыгрыша */
.play-page-wagering-prog {
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--dur-3) var(--ease-out);
}
.play-page-wagering-pct {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--text);
}

/* ------------------------------------------------------------
   4. ТЕЛО: КАРТОЧКА С ИГРОЙ
   ------------------------------------------------------------ */
.play-page-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    min-height: 0;
    padding: var(--play-gap);
}
.play-page-center {
    display: flex;
    justify-content: center;
    flex: 1;
    min-width: 0;
    transition: padding var(--dur-3) var(--ease-out);
}
/* Открытая панель победителей не должна закрывать барабаны:
   освобождаем под неё место справа. */
@media (min-width: 1024px) {
    #pagePlay:has(#playPageWinners:not(.hidden)) .play-page-center {
        padding-right: calc(300px + var(--play-gap));
    }
}
.play-page-frame-wrap {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(100%, 1320px);
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
/* Нативный полноэкранный режим вешается на эту же карточку */
.play-page-frame-wrap:fullscreen {
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
}
.play-page-frame-wrap:fullscreen .play-page-toolbar { display: none; }

.play-page-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
    padding: 9px var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.play-page-toolbar-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.play-page-frame-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
.play-page-slot-info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    color: var(--text-dim);
}
.play-page-toolbar-actions { display: flex; align-items: center; gap: 4px; }
.play-page-favorite-btn.active {
    color: var(--accent-2);
    background: var(--accent-2-dim);
    border-color: color-mix(in srgb, var(--accent-2) 35%, transparent);
}
.play-page-favorite-btn.active svg { fill: currentColor; }

.play-page-iframe-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #05070B;
}
.play-page-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.play-page-iframe-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 2;
    padding: var(--space-5);
    text-align: center;
    font-size: 13px;
    background: var(--bg-deep);
}

/* ——— Гео-блок и подсказка про баланс ——— */
.play-page-geo-block,
.play-page-funds-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: rgba(5, 8, 13, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.play-page-geo-block-inner,
.play-page-funds-overlay-inner {
    width: min(100%, 420px);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.play-page-geo-block-title,
.play-page-funds-overlay-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}
.play-page-geo-block-text,
.play-page-funds-overlay-text {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
}
.play-page-geo-block-actions,
.play-page-funds-overlay-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   5. БОКОВОЕ МЕНЮ ИГРЫ
   ------------------------------------------------------------ */
.play-page-menu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    width: min(310px, 88vw);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), visibility var(--dur-3);
    -webkit-overflow-scrolling: touch;
}
body.play-page-menu-open .play-page-menu {
    transform: none;
    visibility: visible;
}
.play-page-menu-backdrop {
    position: absolute;
    inset: 0;
    z-index: 19;
    background: rgba(5, 8, 13, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
body.play-page-menu-open .play-page-menu-backdrop { opacity: 1; pointer-events: auto; }

.play-page-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.play-page-menu-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.play-page-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.play-page-menu-close:hover { color: var(--text); border-color: var(--border-strong); }
.play-page-menu-close svg { width: 15px; height: 15px; }

.play-page-menu-section-title,
.play-page-menu-quests-title {
    margin: 0 0 var(--space-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ——— Отыгрыш в меню ——— */
.play-page-menu-wagering-card {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--accent-dim);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.play-page-menu-wagering-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.play-page-menu-wagering-meta {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}
.play-page-menu-wagering-deposit.btn {
    width: 100%;
    margin-top: var(--space-3);
    height: 36px;
    font-size: 13px;
}

/* ——— Избранное и недавние ——— */
.play-page-menu-favorites-list,
.play-page-menu-recent-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.play-page-menu-game-link {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
    text-decoration: none;
    color: var(--text-muted);
    transition: border-color var(--transition), transform var(--transition);
}
.play-page-menu-game-link:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    color: var(--text);
}
.play-page-menu-game-link img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* Название игры в плитке только для скринридеров и подсказки —
   в сетке 4 колонки для него нет места. */
.play-page-menu-game-link span {
    display: block;
    overflow: hidden;
    padding: 3px 4px;
    font-size: 9.5px;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.play-page-menu-empty {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px dashed var(--border);
    font-size: 12px;
    color: var(--text-dim);
}
.play-page-menu-favorites-list:has(.play-page-menu-empty),
.play-page-menu-recent-list:has(.play-page-menu-empty) { display: block; }

/* ——— Квесты ——— */
.play-page-menu-quests-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.play-page-quest-item {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}
/* Квест, который засчитывает текущая игра, — с акцентной рамкой */
.play-page-quest-item--relevant {
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    background: var(--accent-dim);
}
.play-page-quest-item--completed { border-color: color-mix(in srgb, var(--success) 42%, transparent); }
.play-page-quest-item-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
}
.play-page-quest-item-progress {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-dim);
}
.play-page-quest-item-bar {
    overflow: hidden;
    height: 5px;
    margin-top: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
}
/* Ширину заливки задаёт JS инлайном */
.play-page-quest-item-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--grad-brand);
    transition: width var(--dur-3) var(--ease-out);
}
.play-page-quest-item--completed .play-page-quest-item-bar-fill { background: var(--success); }
.play-page-quest-claim-btn,
.play-page-quests-login-cta {
    width: 100%;
    margin-top: 8px;
    padding: 7px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--grad-brand);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--btn-primary-text);
    cursor: pointer;
    transition: filter var(--transition);
}
.play-page-quest-claim-btn:hover,
.play-page-quests-login-cta:hover { filter: brightness(1.06); }
.play-page-quests-login-cta { margin-top: 0; }

/* ——— Навигация меню ——— */
.play-page-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.play-page-menu-item,
.play-page-menu-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.play-page-menu-item:hover,
.play-page-menu-action-btn:hover {
    color: var(--text);
    background: var(--surface-2);
}
.play-page-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--accent);
}
.play-page-menu-icon svg { width: 16px; height: 16px; }
.play-page-menu-action-btn--danger { color: var(--danger); }
.play-page-menu-action-btn--danger:hover { background: var(--danger-dim); color: var(--danger); }
.play-page-menu-action-btn--danger .play-page-menu-icon { color: var(--danger); }

/* ------------------------------------------------------------
   6. ПОПАП «В ЭТОЙ ИГРЕ»
   ------------------------------------------------------------ */
.play-page-game-tools-backdrop {
    position: absolute;
    inset: 0;
    z-index: 24;
    background: rgba(5, 8, 13, 0.55);
}
.play-page-game-tools-popover {
    position: absolute;
    top: calc(var(--play-header-h) + 6px);
    left: var(--space-4);
    z-index: 25;
    width: min(280px, calc(100vw - 2 * var(--space-4)));
}
.play-page-game-tools-popover-panel {
    padding: 6px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: mood-play-pop var(--dur-2) var(--ease-out);
}
.play-page-game-tools-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 6px 8px 8px;
}
.play-page-game-tools-popover-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.play-page-game-tools-popover-close {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}
.play-page-game-tools-popover-close:hover { color: var(--text); }
.play-page-menu-actions-list { display: flex; flex-direction: column; gap: 2px; }

/* ------------------------------------------------------------
   7. ПАНЕЛЬ ПОБЕДИТЕЛЕЙ
   ------------------------------------------------------------ */
.play-page-winners {
    position: absolute;
    top: calc(var(--play-header-h) + var(--play-gap));
    right: var(--play-gap);
    bottom: var(--play-gap);
    z-index: 18;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(300px, calc(100vw - 2 * var(--play-gap)));
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: mood-play-slide-left var(--dur-3) var(--ease-out);
}
@keyframes mood-play-slide-left {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}
.play-page-winners-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: none;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}
.play-page-winners-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
}
.play-page-winners-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.play-page-winners-close:hover { color: var(--text); border-color: var(--border-strong); }
.play-page-winners-close svg { width: 14px; height: 14px; }
.play-page-winners-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-3);
}
.play-page-winner-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}
.play-page-winner-item.player-preview-trigger { cursor: pointer; }
.play-page-winner-item.player-preview-trigger:hover { border-color: var(--border-strong); }
.play-page-winner-item-img {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-2);
}
.play-page-winner-item > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 8px;
    flex: 1;
    min-width: 0;
}
.play-page-winner-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}
.play-page-winner-item-mult {
    justify-self: end;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-2);
}
.play-page-winner-item-win {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--success);
}

/* ------------------------------------------------------------
   8. МОДАЛКА СТАТИСТИКИ
   ------------------------------------------------------------ */
.play-page-stats-modal {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.play-page-stats-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 13, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.play-page-stats-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(100%, 620px);
    max-height: min(86vh, 720px);
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: mood-play-pop var(--dur-3) var(--ease-out);
}
.play-page-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: none;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
}
.play-page-stats-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.play-page-stats-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.play-page-stats-close:hover { color: var(--text); border-color: var(--border-strong); }
.play-page-stats-close svg { width: 15px; height: 15px; }
.play-page-stats-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4);
}
.play-page-stats-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}
.play-page-stats-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}
.play-page-stats-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.play-page-stats-value {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.play-page-stats-value.positive { color: var(--success); }
.play-page-stats-value.negative { color: var(--danger); }

.play-page-stats-tabs {
    display: flex;
    gap: 4px;
    margin: var(--space-4) 0 var(--space-3);
    padding: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
}
.play-page-stats-tab {
    flex: 1;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.play-page-stats-tab:hover { color: var(--text); }
.play-page-stats-tab.active {
    background: var(--grad-brand);
    color: var(--btn-primary-text);
}
.play-page-stats-table-wrap { overflow-x: auto; }
.play-page-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.play-page-stats-table th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    white-space: nowrap;
}
.play-page-stats-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}
.play-page-stats-table tbody tr:last-child td { border-bottom: 0; }
.play-page-stats-table td:nth-child(2) {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text);
}
.play-page-stats-empty {
    margin: var(--space-4) 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
}

/* ------------------------------------------------------------
   9. УПРОЩЁННЫЙ ОВЕРЛЕЙ ЗАПУСКА (#gameFrameOverlay)
   Используется, когда игру открывают вне маршрута /play.
   ------------------------------------------------------------ */
.game-frame-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-play);
    display: flex;
    flex-direction: column;
    background: var(--bg-deep);
    color: var(--text);
}
.game-frame-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    padding: 10px var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.game-frame-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.game-frame-back:hover { color: var(--text); border-color: var(--border-strong); }
.game-frame-back-icon { font-size: 14px; line-height: 1; }
.game-frame-title {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
}
.game-frame-body {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #05070B;
}
.game-frame-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------------------------------------------
   10. ПЛАНШЕТ И ТЕЛЕФОН
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
    .play-page-body { padding: 0; }
    .play-page-frame-wrap {
        width: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .play-page-winners {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        animation: mood-play-slide-up var(--dur-3) var(--ease-out);
    }
    @keyframes mood-play-slide-up {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: none; }
    }
    .play-page-menu-favorites-list,
    .play-page-menu-recent-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .play-page-header {
        padding: 6px var(--space-3);
        gap: 6px;
    }
    /* Правая группа сворачивается в одну кнопку: на телефоне в шапке
       помещаются только меню, баланс, депозит и закрытие. */
    .play-page-actions-toggle { display: inline-flex; }
    .play-page-header-right-icons {
        position: absolute;
        top: calc(100% + 6px);
        right: var(--space-3);
        z-index: 26;
        display: none;
        flex-direction: column;
        gap: 2px;
        padding: 6px;
        border-radius: var(--radius-lg);
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    #playPageHeaderRight.expanded .play-page-header-right-icons {
        display: flex;
        animation: mood-play-pop var(--dur-2) var(--ease-out);
    }
    /* Подписи берём из title: в разметке у этих кнопок только иконки,
       а в выпадающем списке одни пиктограммы читаются плохо. */
    .play-page-header-right-icons .play-page-icon-btn {
        justify-content: flex-start;
        gap: 10px;
        width: auto;
        height: 40px;
        padding: 0 12px;
    }
    .play-page-header-right-icons .play-page-icon-btn::after {
        content: attr(title);
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
    }
    /* Крест закрытия дублируется в свёрнутом списке — на телефоне
       он всегда под рукой отдельной кнопкой. */
    .play-page-header-right-icons #playPageClose { display: none; }
    .play-page-header-close-mobile { display: flex; }

    .play-page-header-center { gap: 6px; }
    .play-page-profile-dropdown-wrap { display: none; }
    .play-page-deposit-btn.btn { height: 34px; padding: 0 12px; font-size: 12.5px; }
    .play-page-balance-card { padding: 3px 9px; }
    .play-page-balance-value { font-size: 12px; }
    .play-page-balance-card--bonus { display: none; }
    .play-page-wagering { display: none; }

    .play-page-toolbar { padding: 7px var(--space-3); }
    .play-page-slot-info { display: none; }

    .play-page-menu { width: min(320px, 92vw); }
    .play-page-game-tools-popover {
        top: auto;
        left: var(--space-3);
        right: var(--space-3);
        bottom: max(var(--space-3), env(safe-area-inset-bottom));
        width: auto;
    }
    .play-page-stats-modal { padding: 0; }
    .play-page-stats-dialog {
        width: 100%;
        max-height: 92vh;
        margin-top: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    .play-page-stats-summary { grid-template-columns: 1fr; }

    .game-frame-header { padding: 8px var(--space-3); }
    .game-frame-newtab-btn.btn,
    .game-frame-report-btn.btn { display: none; }
}

/* Ландшафт на телефоне: в игре важен каждый пиксель по высоте */
@media (max-height: 500px) and (orientation: landscape) {
    .play-page-toolbar { display: none; }
    .play-page-header {
        min-height: 44px;
        padding: 4px var(--space-3);
    }
}

/* ------------------------------------------------------------
   11. СВЕТЛАЯ ТЕМА
   ------------------------------------------------------------ */
html[data-theme="light"] .play-page-bg::after {
    background:
        radial-gradient(90% 70% at 50% 0%, transparent 0%, rgba(16, 24, 40, 0.35) 100%),
        linear-gradient(180deg, rgba(16, 24, 40, 0.28) 0%, rgba(16, 24, 40, 0.52) 100%);
}
html[data-theme="light"] .play-page-menu-backdrop,
html[data-theme="light"] .play-page-game-tools-backdrop,
html[data-theme="light"] .play-page-stats-backdrop { background: rgba(16, 24, 40, 0.44); }
html[data-theme="light"] .play-page-geo-block,
html[data-theme="light"] .play-page-funds-overlay { background: rgba(16, 24, 40, 0.55); }
html[data-theme="light"] .play-page-iframe-wrap,
html[data-theme="light"] .game-frame-body { background: #0B0E14; }

/* ------------------------------------------------------------
   12. СНИЖЕННАЯ АНИМАЦИЯ
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .play-page-menu,
    .play-page-winners,
    .play-page-stats-dialog,
    .play-page-profile-dropdown,
    .play-page-game-tools-popover-panel,
    .play-page-quest-item-bar-fill,
    .play-page-wagering-prog {
        animation: none;
        transition: none;
    }
}