image.pngВ /* Базовые стили для Telegram Web App — приложение всегда в тёмном стиле */
:root {
    --tg-theme-bg-color: #0d0d0d;
    --tg-theme-text-color: #ffffff;
    --tg-theme-hint-color: rgba(255, 255, 255, 0.55);
    --tg-theme-link-color: #5eb3f6;
    --tg-theme-button-color: #2481cc;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #1c1c1e;
}

/* Принудительный тёмный стиль — не трогаем background body (градиент + паттерн) */
.game-details-page,
.game-details-content,
.game-details-wrapper,
.page {
    background-color: transparent !important;
    color: #ffffff !important;
}
.game-info-block,
#game-details-content .game-info-block {
    background: #1c1c1e !important;
    color: #ffffff !important;
}
.game-info-block--info .game-info-item--card,
.game-info-description--card {
    background: #0d0d0d !important;
    color: #ffffff !important;
}
.game-info-title,
.game-info-label,
.game-info-value,
.game-info-description-text {
    color: #ffffff !important;
}
.game-info-label,
.game-info-sub {
    color: rgba(255, 255, 255, 0.55) !important;
}
.game-reservation-card {
    background: #1c1c1e !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.game-reservation-card .my-reservation-title-main,
.game-reservation-card .my-reservation-title-sub,
.game-reservation-card .my-reservation-meta,
.game-reservation-card .my-reservation-hint,
.game-reservation-card .my-chip {
    color: #ffffff !important;
}
.game-reservation-card .my-reservation-title-sub,
.game-reservation-card .my-reservation-hint {
    color: rgba(255, 255, 255, 0.85) !important;
}
.game-reservation-card .my-chip--paid { color: #4caf50 !important; }
.game-reservation-card .my-chip--unpaid { color: #ff9800 !important; }
.game-reservation-card .my-chip--free { color: #9c27b0 !important; }
.game-reservation-card--confirmed {
    background: rgba(76, 175, 80, 0.12) !important;
    border-color: rgba(76, 175, 80, 0.25) !important;
}
.reservations-list-block,
.reservations-list-header,
.reservations-list-body {
    background: rgba(28, 28, 30, 0.98) !important;
    color: #ffffff !important;
}
.reservation-expand-all-btn {
    background: #1c1c1e !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.reservation-section-header-title,
.reservation-section-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}
.reservation-player-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
.profile-section,
.admin-page .profile-section,
.admin-settings-page .profile-section {
    background: #292929 !important;
    color: #ffffff !important;
}
.profile-item-value,
.admin-edit-value {
    color: #ffffff !important;
}
.profile-item-label,
.admin-edit-label {
    color: rgba(255, 255, 255, 0.7) !important;
}
.admin-edit-form-group label,
.admin-edit-player-page label {
    color: #ffffff !important;
}
.admin-edit-player-page input[disabled],
.admin-edit-player-page input:disabled {
    color: rgba(255, 255, 255, 0.85) !important;
    background: #1c1c1e !important;
}
.profile-input,
.admin-edit-input,
.admin-edit-select,
.admin-search-input {
    background: #0d0d0d !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
.admin-modal-content {
    background: #1a1a1a !important;
    color: #ffffff !important;
}
.simple-section,
.games-page .simple-section {
    background: transparent !important;
    color: #ffffff !important;
}
.simple-section-title,
.simple-page-title,
.simple-page-subtitle {
    color: #ffffff !important;
}
.simple-page-subtitle {
    color: rgba(255, 255, 255, 0.55) !important;
}
/* Cards styling is defined later in home section; keep this block minimal to avoid conflicts */
.cc-game-card,
.cc-game-card--featured {
    color: #ffffff !important;
}
.elim-card,
.elim-search-input,
.elim-sort-btn,
.elim-place,
.elim-badge {
    background: #1c1c1e !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.elim-search-input {
    background: #0d0d0d !important;
}
.table-details-header,
.table-view-toggle {
    background: #0d0d0d !important;
    color: #ffffff !important;
}
.game-details-header,
.game-details-tabs {
    background: #1c1c1e !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.game-management-block {
    background: rgba(28, 28, 30, 0.98) !important;
    color: #ffffff !important;
}
.my-reservation-hint {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.my-chip {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.home-about-card,
.next-game-details {
    background: #1c1c1e !important;
    color: #ffffff !important;
}
.home-block,
.home-featured-slot,
.simple-section {
    color: #ffffff !important;
}

/* Бонусы, Транзакции, Шаблоны — один тёмный стиль, белый текст */
.bonus-item,
.transaction-item {
    background: #1c1c1e !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}
.bonus-item *,
.transaction-item * {
    color: inherit;
}
.bonus-item div[style*="color"],
.transaction-item div[style*="color"] {
    color: #ffffff !important;
}
.bonus-item div[style*="hint-color"],
.transaction-item div[style*="hint-color"] {
    color: rgba(255, 255, 255, 0.7) !important;
}
.admin-timer-card,
#admin-timer-templates-list .admin-timer-card {
    background: #1c1c1e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}
.admin-timer-round-label {
    color: rgba(255, 255, 255, 0.65) !important;
}
.admin-timer-round-row .modal-input,
.admin-timer-round-row input {
    background: #0d0d0d !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
#admin-timer-template-modal .modal-title,
#admin-timer-template-modal .modal-label,
#admin-timer-template-modal .modal-input,
#create-bonus-modal .modal-title,
#create-bonus-modal .modal-label,
#create-bonus-modal .modal-input,
#create-bonus-modal .modal-textarea,
#edit-transaction-modal .modal-title,
#edit-transaction-modal .modal-label,
#edit-transaction-modal .modal-input,
#edit-transaction-modal .modal-textarea {
    color: #ffffff !important;
}
#admin-timer-template-modal .modal-input,
#create-bonus-modal .modal-input,
#create-bonus-modal .modal-textarea,
#edit-transaction-modal .modal-input,
#edit-transaction-modal .modal-textarea {
    background: #0d0d0d !important;
    color: #ffffff !important;
}
.pagination-info {
    color: rgba(255, 255, 255, 0.7) !important;
}

body {
    margin: 0;
    font-family: var(--app-font-family);
    font-weight: var(--app-font-weight, 500);
    --app-pattern-opacity: 0.12;
    --app-pattern-y: 10%;
    background-color: #000000;
    background-image:
        radial-gradient(800px 420px at 50% -120px, rgba(255,255,255,0.08), transparent 60%),
        radial-gradient(520px 380px at 18% 26%, rgba(255,255,255,0.03), transparent 60%),
        linear-gradient(180deg, #000000 0%, #000000 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, cover;
    background-position: center, center, center;
    color: var(--tg-theme-text-color);
    min-height: 100vh;
    padding-bottom: 70px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* На главной — фон покер-рума (как на профиле) с тёмным оверлеем для читаемости.
   Тот же ассет, что на /profile (.profile-page--modern), но затемнение чуть мягче,
   чтобы фон оставался видимым за фигурой персонажа в реферальной секции.
   Селектор гейтит фон классом-модификатором .srp-home-page--bg — главная без него
   остаётся на чёрном (управляется настройкой home_show_background в админке).
   !important нужен, чтобы перебить «BASELINE» html/body и body::before в конце файла. */
body:has(#home-page.srp-home-page--bg.active) {
    background: url('/img/profile-poker-room-bg.png') center top / cover no-repeat #000 !important;
    background-image: url('/img/profile-poker-room-bg.png') !important;
    background-attachment: fixed !important;
}
body:has(#home-page.srp-home-page--bg.active)::before {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    /* var(--home-bg-dim) задаётся в HomePage из settings.home_background_dim_percent
       (0..1) и пересчитывается в реальном времени, когда админ двигает ползунок
       в режиме предпросмотра (?dim-preview=1). Дефолт 0.5 страхует, если переменная
       не была задана. */
    background: rgba(0, 0, 0, var(--home-bg-dim, 0.5)) !important;
    background-image: none !important;
    /* Перебиваем default body::before (mix-blend-mode: screen + opacity: var(--app-pattern-opacity)).
       Без этого чёрный overlay в screen-режиме рендерится как прозрачный — затемнение не видно. */
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Профиль и переходы — чёрный фон, без серого и без паттерна */
body:has(#profile-page.active),
body:has(#player-profile-page.active) {
    background: #000;
}
body:has(#profile-page.active)::before,
body:has(#player-profile-page.active)::before {
    display: none;
}

/* Современный профиль: фиксированный «экран» без лишнего скролла из-за padding-bottom у body */
body:has(#profile-page.profile-page--modern.active),
body:has(#player-profile-page.profile-page--modern.active) {
    padding-bottom: 0 !important;
}

/* Псевдоэлемент фона: по умолчанию скрыт (чтобы при переходах не мелькал серый/паттерн) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    display: none;
    background-image: none;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center var(--app-pattern-y);
    opacity: var(--app-pattern-opacity);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
    transform: translateZ(0);
}

/* Games page: чуть больше визуала (паттерн заметнее), без pokerback */
body:has(#games-page.active) {
    --app-pattern-opacity: 0.18;
    --app-pattern-y: 6%;
}

/* Games page background (Figma): verticalPoker.png as fixed backdrop */
body:has(#games-page.active)::before {
    display: block;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.60) 38%, rgba(0,0,0,0.86) 100%),
        url('/img/verticalPoker.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    opacity: 1;
    mix-blend-mode: normal;
}

/* Preload / splash при загрузке бота */
.app-preload {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(241, 188, 79, 0.12) 0%, rgba(241, 188, 79, 0.03) 18%, transparent 42%),
        radial-gradient(circle at 18% 24%, rgba(221, 175, 84, 0.18) 0%, transparent 30%),
        radial-gradient(circle at 78% 74%, rgba(193, 141, 55, 0.16) 0%, transparent 28%),
        linear-gradient(180deg, #08090b 0%, #090a0d 44%, #050608 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: opacity 0.25s ease-out;
}
.app-preload.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.app-preload-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.app-preload-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: 0.16;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.78), transparent 88%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.78), transparent 88%);
}
.app-preload-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(36px);
    opacity: 0.75;
    animation: app-preload-orb-drift 10s ease-in-out infinite;
}
.app-preload-orb-left {
    top: 10%;
    left: -8%;
    width: 38vw;
    height: 38vw;
    min-width: 220px;
    min-height: 220px;
    background: radial-gradient(circle, rgba(231, 190, 90, 0.34) 0%, rgba(231, 190, 90, 0.08) 42%, transparent 72%);
}
.app-preload-orb-right {
    top: 24%;
    right: -10%;
    width: 34vw;
    height: 34vw;
    min-width: 220px;
    min-height: 220px;
    background: radial-gradient(circle, rgba(188, 144, 56, 0.28) 0%, rgba(188, 144, 56, 0.07) 40%, transparent 70%);
    animation-delay: -3.2s;
}
.app-preload-orb-bottom {
    bottom: -8%;
    left: 50%;
    width: 26vw;
    height: 26vw;
    min-width: 180px;
    min-height: 180px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 213, 117, 0.22) 0%, rgba(255, 213, 117, 0.04) 46%, transparent 74%);
    animation-delay: -6s;
}
.app-preload-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 480px);
    padding: 28px;
}
.app-preload-shell {
    width: min(100%, 360px);
    padding: 28px 26px 24px;
    border-radius: 30px;
    border: 1px solid rgba(255, 232, 179, 0.14);
    background:
        linear-gradient(180deg, rgba(30, 24, 16, 0.72) 0%, rgba(12, 13, 16, 0.84) 100%);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 244, 212, 0.08),
        inset 0 0 0 1px rgba(255, 214, 122, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: app-preload-shell-float 4.4s ease-in-out infinite;
}
.app-preload-brand {
    margin-bottom: 18px;
    text-align: center;
    color: rgba(255, 231, 181, 0.8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}
.app-preload-media {
    position: relative;
    width: 146px;
    height: 146px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-preload-ring {
    position: absolute;
    inset: 12px;
    border-radius: 28px;
    border: 1px solid rgba(255, 214, 122, 0.18);
    box-shadow:
        0 0 34px rgba(241, 188, 79, 0.18),
        inset 0 0 18px rgba(255, 210, 110, 0.06);
    animation: app-preload-ring-spin 8s linear infinite;
}
.app-preload-logo-frame {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 112px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(81, 61, 24, 0.35) 0%, rgba(18, 18, 20, 0.88) 100%);
    border: 1px solid rgba(255, 220, 142, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 247, 227, 0.1),
        0 16px 38px rgba(0, 0, 0, 0.45);
}
.app-preload-logo-image {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 6px 20px rgba(247, 199, 86, 0.3));
    animation: loader-pulse 1.8s ease-in-out infinite;
}
.app-preload-logo-fallback {
    color: #ffd24f;
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.app-preload-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.app-preload-kicker {
    margin: 0;
    color: rgba(255, 217, 139, 0.68);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.app-preload-phrase-window {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-preload-phrase {
    margin: 0;
    max-width: 250px;
    text-align: center;
    color: #f7e4ba;
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-shadow: 0 0 24px rgba(241, 188, 79, 0.14);
    animation: app-preload-phrase-in 360ms ease;
}
.app-preload-suits {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 2px;
    color: rgba(255, 212, 104, 0.7);
    font-size: 17px;
}
.app-preload-suits span {
    animation: app-preload-suit-breathe 1.6s ease-in-out infinite;
}
.app-preload-suits span:nth-child(2) {
    animation-delay: 0.16s;
}
.app-preload-suits span:nth-child(3) {
    animation-delay: 0.32s;
}
.app-preload-suits span:nth-child(4) {
    animation-delay: 0.48s;
}
@keyframes app-preload-orb-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -18px, 0) scale(1.06); }
}
@keyframes app-preload-shell-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes app-preload-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes app-preload-phrase-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes app-preload-suit-breathe {
    0%, 100% {
        opacity: 0.45;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-2px) scale(1.08);
    }
}
@media (max-width: 480px) {
    .app-preload-content {
        padding: 22px;
    }
    .app-preload-shell {
        width: min(100%, 340px);
        padding: 24px 20px 22px;
        border-radius: 26px;
    }
    .app-preload-media {
        width: 132px;
        height: 132px;
        margin-bottom: 18px;
    }
    .app-preload-logo-frame {
        width: 102px;
        height: 102px;
        border-radius: 26px;
    }
    .app-preload-logo-image {
        width: 62px;
        height: 62px;
    }
    .app-preload-phrase-window {
        min-height: 48px;
    }
    .app-preload-phrase {
        font-size: 18px;
    }
}

.app-action-preloader {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.app-action-preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.app-action-preloader-spinner {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-image: var(--app-loader-image, url('/img/chip.png'));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    animation: loader-pulse 1.3s ease-in-out infinite;
}
@keyframes app-action-preloader-spin {
    to { transform: rotate(360deg); }
}
.app-action-preloader-spinner {
    animation-name: loader-pulse;
}
.registration-gate-avatar-loading-spinner {
    animation-name: loader-pulse;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-pulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* Boot phase: hide loader icon to avoid "default flash" before settings/custom image are resolved. */
:root[data-loader-boot="1"] .app-preload-img,
:root[data-loader-boot="1"] .app-action-preloader-spinner,
:root[data-loader-boot="1"] .registration-gate-avatar-loading-spinner {
    opacity: 0 !important;
    background-image: none !important;
}
:root[data-loader-anim="static"] .app-action-preloader-spinner,
:root[data-loader-anim="static"] .registration-gate-avatar-loading-spinner,
:root[data-loader-anim="static"] .app-preload-img {
    animation: none !important;
}
:root[data-loader-anim="spin"] .app-action-preloader-spinner,
:root[data-loader-anim="spin"] .registration-gate-avatar-loading-spinner,
:root[data-loader-anim="spin"] .app-preload-img {
    animation: loader-spin 0.9s linear infinite !important;
}
:root[data-loader-anim="pulse"] .app-action-preloader-spinner,
:root[data-loader-anim="pulse"] .registration-gate-avatar-loading-spinner,
:root[data-loader-anim="pulse"] .app-preload-img {
    animation: loader-pulse 1.3s ease-in-out infinite !important;
}
.app-action-preloader-text {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.9);
}

/* Регистрация — полноэкранный стиль, единый шрифт приложения */
#registration-gate {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    background: #111111;
    color: #ffffff;
    font-family: var(--app-font-family);
}
#registration-gate::before { display: none; }
.registration-gate-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.registration-gate-scroll::-webkit-scrollbar { width: 0; }
.registration-gate-inner {
    max-width: 400px;
    margin: 0 auto;
    padding: 32px 24px 24px 24px;
    box-sizing: border-box;
    width: 100%;
}
.registration-gate-title {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 20px;
    color: #ffffff;
    line-height: 1.2;
}
.registration-gate-subtitle {
    margin: 0 0 24px;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
}
.registration-gate-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}
.registration-gate-avatar-label {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.registration-gate-avatar-preview-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    /* Обводка внутрь, чтобы не «вылезала» за круг */
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}
.registration-gate-avatar-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: transparent;
    border: none;
    display: block;
}
.registration-gate-avatar-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    border: 2px dashed rgba(255,255,255,0.18);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}
.registration-gate-avatar-placeholder::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-image: var(--app-loader-image, url('/img/chip.png'));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    opacity: 0.9;
    animation: loader-pulse 1.3s ease-in-out infinite;
}
:root[data-loader-anim="static"] .registration-gate-avatar-placeholder::before { animation: none !important; }
:root[data-loader-anim="spin"] .registration-gate-avatar-placeholder::before { animation: loader-spin 0.9s linear infinite !important; }
:root[data-loader-anim="pulse"] .registration-gate-avatar-placeholder::before { animation: loader-pulse 1.3s ease-in-out infinite !important; }
.registration-gate-avatar-loading {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 50%;
    /* Делать фон почти непрозрачным, чтобы не просвечивала обводка круга */
    background: #111111;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    z-index: 3;
    pointer-events: none;
}
.registration-gate-avatar-loading-spinner {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background-image: var(--app-loader-image, url('/img/chip.png'));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
@keyframes registration-avatar-spin {
    to { transform: rotate(360deg); }
}
.registration-gate-avatar-loading-text {
    font-size: 10px;
    color: rgba(255,255,255,0.9);
}
.registration-gate-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.registration-gate-avatar-actions .reg-btn-secondary {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.registration-gate-avatar-actions .reg-btn-secondary:active { opacity: 0.7; }
.registration-gate-avatar-actions .reg-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.registration-gate-avatar-actions input[type="file"] { display: none; }
.registration-gate-avatar-hint {
    margin: 0;
    font-size: 12px;
    color: #e53935;
    text-align: center;
    min-height: 0;
}
.registration-gate-avatar-hint--muted {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    line-height: 1.35;
}
.reg-tg-unavailable {
    padding: 7px 16px;
    font-size: 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: transparent;
    color: rgba(255,255,255,0.4);
    cursor: default;
}
.registration-gate-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.registration-gate-label--primary {
    color: rgba(255,255,255,0.98);
}
.registration-gate-label .optional {
    color: rgba(255,255,255,0.4);
    font-weight: 400;
}
.registration-gate-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 18px;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.registration-gate-input--primary {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
}
.registration-gate-input:focus {
    border-color: rgba(255,255,255,0.20);
    background: rgba(255,255,255,0.07);
}
.registration-gate-input::placeholder {
    color: rgba(255,255,255,0.35);
}
.registration-gate-error {
    color: #e53935;
    font-size: 13px;
    margin-bottom: 12px;
    min-height: 0;
}
.registration-gate-footer {
    flex-shrink: 0;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)) 24px;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.registration-gate-submit {
    display: block;
    width: 100%;
    margin-top: 8px;
    height: 48px;
    background: #ffffff;
    color: #111111;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
.registration-gate-submit:active { opacity: 0.85; }
.registration-gate-submit:disabled { opacity: 0.3; cursor: default; }

/* Строго: только одна страница видна — та, у которой есть .active */
.page {
    display: none !important;
    flex-direction: column;
    padding: 16px;
    min-height: calc(100vh - 70px);
    padding-bottom: 90px;
    position: relative;
    z-index: auto;
}

.page.active {
    display: flex !important;
    opacity: 1;
}

/* Гаснет при уходе */
.page.active.page-exit {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

/* Появляется при входе */
.page.active.page-enter {
    opacity: 0;
    animation: page-fade-in 0.2s ease-out forwards;
}

@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -----------------------------
   Home / simplified main UI
------------------------------ */
.home-page {
    gap: 18px;
    padding: 26px 20px 120px !important;
    color: #ffffff;
    border: 0;
}

.home-page-caption {
    font-size: 8.62px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0;
    margin-bottom: 10px;
}

.home-hero {
    padding: 18px 16px;
    border-radius: 18px;
    background:
        radial-gradient(120px 120px at 20% 10%, rgba(36, 129, 204, 0.22), transparent 60%),
        radial-gradient(160px 160px at 85% 30%, rgba(102, 187, 106, 0.18), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
    border: 1px solid rgba(0,0,0,0.06);
    /* Информационный блок (без действий) */
    cursor: default;
    user-select: none;
}

.home-brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.2px;
    margin: 0;
}

.home-tagline {
    margin-top: 6px;
    font-size: 13px;
    color: var(--tg-theme-hint-color);
    line-height: 1.35;
}

.home-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    user-select: none;
}

.home-logo-circle {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    overflow: hidden;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.home-logo-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.home-logo-mark {
    width: 44px;
    height: 44px;
    display: block;
}

.home-title {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: 6px;
    line-height: 1;
    margin-top: 6px;
}

.home-subtitle {
    font-size: 14px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.60);
    text-align: center;
    max-width: 22em;
}

.home-cta-btn {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 18px 16px;
    background: linear-gradient(180deg, #b30000 0%, #6f0000 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 14px 30px rgba(160, 0, 0, 0.25);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.home-cta-btn:active {
    transform: translateY(1px);
    opacity: 0.95;
}

.home-cta-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.home-cta-btn:disabled:active {
    transform: none;
    opacity: 0.5;
}

.home-cta-btn--pay-cancel {
    background: linear-gradient(180deg, #ffb300 0%, #ff8f00 100%);
    color: #ffffff;
    font-weight: 900;
}

.home-cta-btn--cancel-only {
    background: transparent;
    border: 2px solid var(--tg-theme-hint-color, #666);
    color: var(--tg-theme-hint-color, #999);
    font-weight: 700;
}
.home-cta-btn--cancel-only:active {
    border-color: var(--tg-theme-text-color);
    color: var(--tg-theme-text-color);
}

.home-reserve {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.home-reserve-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.home-reserve-hint--pending {
    color: #ff9800;
    font-weight: 600;
}

.home-reserve-cancellation-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

.home-reserve-cancellation-hint.is-visible {
    color: rgba(255, 200, 100, 0.95);
}

.home-reserve-cancel {
    margin-top: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--tg-theme-hint-color, #666);
    border-radius: 999px;
    color: var(--tg-theme-hint-color, #999);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.home-reserve-cancel:hover,
.home-reserve-cancel:active {
    color: var(--tg-theme-text-color);
    border-color: var(--tg-theme-text-color);
}

.home-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-block-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.2px;
    margin-top: 8px;
}

.home-page .loading {
    color: rgba(255, 255, 255, 0.60);
}

.home-skeleton-card {
    border-radius: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.home-next-game-card {
    border-radius: 18px;
    padding: 18px 18px 14px;
    background:
        radial-gradient(240px 160px at 85% 20%, rgba(255, 215, 0, 0.10), transparent 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0.10) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.home-next-game-card:active {
    opacity: 0.92;
    transform: translateY(1px);
}

.home-next-game-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.home-next-game-title {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.05;
}

.home-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid rgba(255, 215, 0, 0.28);
    background: rgba(255, 215, 0, 0.10);
    color: rgba(255, 215, 0, 0.92);
}

.home-status-emoji {
    font-size: 13px;
    line-height: 1;
}

.home-status-badge--active {
    border-color: rgba(76, 175, 80, 0.35);
    background: rgba(76, 175, 80, 0.12);
    color: rgba(146, 255, 158, 0.95);
}

.home-status-badge--completed {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
}

.home-status-badge--cancelled {
    border-color: rgba(255, 107, 107, 0.35);
    background: rgba(255, 107, 107, 0.12);
    color: rgba(255, 165, 165, 0.95);
}

.home-date-pill {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.home-date-ico {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.92);
}

.home-date-ico svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.95;
}

.home-next-game-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.home-next-game-open {
    font-size: 8.62px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.70);
}

.home-next-game-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
}

.home-next-game-arrow {
    font-size: 18px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.85);
}

.home-next-game-card--empty .home-next-game-title {
    text-transform: none;
    letter-spacing: 0.2px;
}

.home-next-game-empty-hint {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.35;
}

.home-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 6px;
}

.home-tile {
    border-radius: 18px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}

.home-tile:active {
    opacity: 0.92;
    transform: translateY(1px);
}

.home-tile-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
}

.home-icon-img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
    /* Slight depth on dark backgrounds */
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

.home-tile-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.95;
}

.home-tile-title {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.home-tile-subtitle {
    font-size: 12px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.62);
}

.home-tile--rating {
    background: linear-gradient(135deg, rgba(90, 40, 10, 0.55) 0%, rgba(35, 20, 15, 0.95) 100%);
}

.home-tile.is-disabled {
    opacity: 0.5;
    filter: grayscale(0.8);
    cursor: not-allowed;
    pointer-events: none;
}

.home-tile--games {
    background: linear-gradient(135deg, rgba(20, 40, 110, 0.55) 0%, rgba(12, 16, 40, 0.95) 100%);
}

.home-tile--timer {
    background: linear-gradient(135deg, rgba(18, 70, 40, 0.55) 0%, rgba(10, 22, 18, 0.95) 100%);
}

.home-tile--about {
    background: linear-gradient(135deg, rgba(75, 75, 75, 0.55) 0%, rgba(18, 18, 18, 0.95) 100%);
}

/* ----- Shared app font is loaded from /css/fonts.css ----- */

/* ----- Главная: типографика и размеры из Figma, без absolute ----- */
:root {
    --srp-font: var(--app-font-family);
    --srp-fs-header: 14px;
    --srp-lh-header: 1.1;
    --srp-fs-stat: 10px;
    --srp-lh-stat: 1.2;
    --srp-fs-xs: 10px;
    --srp-fs-sm: 12px;
    --srp-fs-md: 14px;
    --srp-fs-lg: 16px;
    --srp-fs-xl: 20px;
    --srp-fs-2xl: 24px;
    --srp-fs-hero: 28px;
    --srp-lh-tight: 1.1;
    --srp-lh-normal: 1.25;
    --srp-lh-relaxed: 1.35;
    --srp-space-xs: 6px;
    --srp-space-sm: 8px;
    --srp-space-md: 12px;
    --srp-space-lg: 16px;
    --srp-space-xl: 20px;
}
.srp-home-page.page {
    padding: 0 !important;
    gap: 0;
    background: #000;
    min-height: 100vh;
}
/* На широких экранах ограничиваем главный контейнер по ширине нижнего меню
   (400px), чтобы шапка профиля, селектор филиала, рефералка и сама карточка
   игры визуально совпадали с пилюлей tab-bar внизу. */
.srp-home-page .srp-stage {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.srp-stage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px 13px 90px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: transparent;
    color: #fff;
    font-family: var(--srp-font);
    font-weight: var(--app-font-weight, 500);
    font-size: var(--srp-fs-md);
    line-height: var(--srp-lh-normal);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Home: uses Games filters component (same markup/classes) */
.games-top-controls--home {
    margin: 2px 0 10px;
}
.games-top-controls--home .games-filters {
    margin-bottom: 0;
}
.games-top-controls--home .games-top-controls-divider {
    margin-bottom: 10px;
}

/* Branch selector toggle (from settings) */
#home-top-controls[data-show-branch-selector="0"] { display: none !important; }
#games-top-controls[data-show-branch-selector="0"] .games-filters,
#games-top-controls[data-show-branch-selector="0"] .games-top-controls-divider {
    display: none !important;
}
.home-season-rating-card {
    position: relative;
    width: 100%;
    margin-top: 22px;
    padding: 18px 18px 18px;
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: 28px;
    background:
        radial-gradient(110% 145% at 0% 0%, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0.05) 30%, transparent 62%),
        linear-gradient(135deg, rgba(44,31,11,0.92) 0%, rgba(21,16,10,0.96) 46%, rgba(5,5,6,0.98) 100%);
    box-shadow:
        0 14px 34px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,231,177,0.08);
    color: #fff;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.home-season-rating-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(65% 120% at 100% 0%, rgba(255,209,102,0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 26%);
}
.home-season-rating-card:active {
    opacity: 0.96;
}
.home-season-rating-card-badge,
.home-season-rating-card-head,
.home-season-rating-card-title-wrap,
.home-season-rating-card-eyebrow,
.home-season-rating-card-title,
.home-season-rating-card-subtitle,
.home-season-rating-card-stats,
.home-season-rating-card-note,
.home-season-rating-card-empty {
    position: relative;
    z-index: 1;
}
.home-season-rating-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.home-season-rating-card-title-wrap {
    min-width: 0;
    flex: 1;
}
.home-season-rating-card-eyebrow {
    font-family: 'Bounded', var(--srp-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,216,131,0.68);
}
.home-season-rating-card-badge {
    width: fit-content;
    max-width: min(52%, 200px);
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212,175,55,0.14);
    color: #f4c64b;
    font-family: 'Bounded', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,231,177,0.08);
    flex-shrink: 0;
    margin-top: 2px;
}
.home-season-rating-card-badge > span:last-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-season-rating-card-badge-star {
    font-size: 17px;
    line-height: 1;
}
.home-season-rating-card-title {
    margin-top: 12px;
    max-width: 100%;
    font-family: 'Bounded', var(--srp-font);
    font-size: 28px;
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #f7c548;
    word-break: break-word;
}
.home-season-rating-card-subtitle {
    margin-top: 14px;
    max-width: 70%;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
}
.home-season-rating-card-stats {
    margin-top: 26px;
    display: flex;
    align-items: flex-end;
    gap: 42px;
}
.home-season-rating-card-stat {
    min-width: 0;
    flex: 0 0 auto;
}
.home-season-rating-card-num {
    font-size: 56px;
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.home-season-rating-card-label {
    margin-top: 8px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.68);
}
.home-season-rating-card-note {
    margin-top: 18px;
    max-width: 64%;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
}
.home-season-rating-card-stat:last-child .home-season-rating-card-num {
    font-size: 54px;
}
.home-season-rating-card-stat:last-child .home-season-rating-card-label {
    white-space: nowrap;
}
@media (max-width: 420px) {
    .home-season-rating-card {
        margin-top: 20px;
        padding: 16px 15px 16px;
        border-radius: 24px;
    }
    .home-season-rating-card-head {
        gap: 14px;
    }
    .home-season-rating-card-badge {
        min-height: 34px;
        padding: 0 14px;
        font-size: 11px;
    }
    .home-season-rating-card-title {
        margin-top: 10px;
        font-size: 22px;
    }
    .home-season-rating-card-subtitle {
        max-width: 76%;
    }
    .home-season-rating-card-note {
        max-width: 76%;
        margin-top: 18px;
    }
    .home-season-rating-card-num,
    .home-season-rating-card-stat:last-child .home-season-rating-card-num {
        font-size: 42px;
    }
    .home-season-rating-card-stats {
        gap: 26px;
    }
}
@media (max-width: 360px) {
    .home-season-rating-card-head {
        flex-direction: column;
        gap: 10px;
    }
    .home-season-rating-card-badge {
        align-self: flex-start;
    }
    .home-season-rating-card-subtitle,
    .home-season-rating-card-note {
        max-width: 100%;
    }
}
.srp-stage > * {
    position: relative;
    z-index: 1;
}
/* Group 117 — гексагоны-фон: в Figma начинается ~80px от верха контента,
   занимает полную ширину + overflow по бокам (491px в 402-фрейме) */
.srp-stage-bg {
    position: absolute;
    left: -13px;
    right: -13px;
    top: 80px;
    height: 0;
    padding-bottom: 57.46%; /* сохраняем пропорции SVG 402×231 */
    background: url("/img/Group%20117.svg") center top / 100% auto no-repeat;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}
/* header — flow (flex), без absolute */
.srp-header {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    pointer-events: auto;
}
.srp-header-logo {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin-right: -24px;
    z-index: 2;
}
/* Круг аватара с плавным переходом в бар (как в референсе) */
.srp-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(145deg, #1a1a1c 0%, #0d0d0f 100%);
    box-shadow:
        0 6px 20px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.08);
    border: 2px solid rgba(212,175,55,0.58);
    overflow: visible;
}
.srp-avatar-inner {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
}
.srp-avatar-photo-wrap {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
}
.srp-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.srp-avatar-photo-wrap:not(:has(img[src])) .srp-avatar-photo,
.srp-avatar-photo[src=""],
.srp-avatar-photo:not([src]) {
    display: none !important;
}
.srp-avatar-logo {
    position: relative;
    z-index: 1;
    max-width: 38px;
    max-height: 16px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
}
.srp-avatar-photo-wrap:has(img[src]) ~ .srp-avatar-logo,
.srp-avatar-photo-wrap:has(.srp-avatar-fallback) ~ .srp-avatar-logo {
    display: none;
}
.srp-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.88);
    background: linear-gradient(160deg, rgba(42, 34, 24, 0.95) 0%, rgba(18, 15, 12, 0.98) 100%);
    letter-spacing: 0.02em;
    user-select: none;
}
/* Круглый бейдж звания (вместо шестиугольника), внизу слева на аватаре */
.srp-avatar-badge {
    display: none;
    position: absolute;
    left: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    z-index: 3;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #2a2a2c 0%, #1a1a1c 100%);
    border: 2px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    pointer-events: none;
}
.srp-avatar-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
:root[data-ranks-enabled="1"] .srp-avatar-badge:has(img) {
    display: flex;
}

/* ---- Старая hex-разметка для страницы профиля и модалок (оставляем для совместимости) ---- */
.srp-hex {
    position: absolute;
    left: 0;
    top: 22px;
    width: 76px;
    height: 44px;
    background: linear-gradient(to bottom, #930400 0%, #2D0100 100%);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}
.srp-hex::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 38px solid transparent;
    border-right: 38px solid transparent;
    border-bottom: 22px solid #930400;
    bottom: 100%;
    left: 0;
}
.srp-hex::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 38px solid transparent;
    border-right: 38px solid transparent;
    border-top: 22px solid #2D0100;
    top: 100%;
    left: 0;
}
.srp-hex-inner {
    position: absolute;
    left: 9px;
    top: 9px;
    width: 58px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 1;
}
.srp-hex-inner-shape {
    position: absolute;
    left: 0;
    top: 17.5px;
    width: 58px;
    height: 35px;
    background: #fff;
    filter: drop-shadow(2px 4px 10px rgba(0,0,0,0.4));
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8);
}
.srp-hex-inner-shape::before,
.srp-hex-inner-shape::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 29px solid transparent;
    border-right: 29px solid transparent;
    left: 0;
}
.srp-hex-inner-shape::before {
    border-bottom: 17.5px solid #fff;
    bottom: 100%;
}
.srp-hex-inner-shape::after {
    border-top: 17.5px solid #fff;
    top: 100%;
}
.srp-hex-photo-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 58px;
    height: 70px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
    z-index: 0;
}
.srp-hex-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.srp-hex-photo-wrap:not(:has(img[src])) .srp-hex-photo,
.srp-hex-photo[src=""],
.srp-hex-photo:not([src]) { display: none !important; }
.srp-hex-logo {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}
.srp-hex-photo-wrap:has(img[src]) ~ .srp-hex-mark .srp-hex-logo { display: none; }
.srp-hex-mark {
    position: relative;
    width: 51px;
    height: 21px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srp-hex-dot {
    display: none;
    position: absolute;
    left: 44px;
    top: 19px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    z-index: 3;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: none;
}
.srp-hex-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.srp-header-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0;
    align-self: center;
}

/* Home: header card is clickable (open Profile) */
#home-profile-card {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#home-profile-card:active {
    opacity: 0.96;
}
.srp-header-bar {
    width: 100%;
    min-height: 52px;
    border-radius: 0 28px 28px 0;
    background: linear-gradient(180deg, #252528 0%, #1c1c1e 50%, #18181a 100%);
    box-sizing: border-box;
    padding: 8px 20px 10px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    z-index: 1;
    box-shadow:
        inset 0 1px 0 rgba(212,175,55,0.18),
        0 4px 16px rgba(0,0,0,0.3),
        0 0 24px rgba(212,175,55,0.06);
    border: 1px solid rgba(212,175,55,0.12);
    border-left: none;
}
.srp-header-bar-top {
    display: flex;
    align-items: center;
}
.srp-header-bar-title {
    font-family: var(--app-font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #fff;
}
.srp-header-bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    min-height: 0;
}
.srp-header-meta-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.srp-header-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.srp-header-meta-lbl {
    font-family: var(--app-font-family);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    white-space: nowrap;
}
.srp-header-meta-val {
    font-family: var(--app-font-family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
}
.srp-header-meta-sep {
    width: 1px;
    height: 10px;
    background: linear-gradient(180deg, transparent 0%, rgba(212,175,55,0.35) 50%, transparent 100%);
    flex-shrink: 0;
    border-radius: 1px;
}
.srp-header-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.srp-header-meta-ico {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}
.srp-header-meta-ico svg {
    width: 12px;
    height: 12px;
    stroke: rgba(255,255,255,0.8);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.srp-header-bar-stats {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin-top: 4px;
}
.srp-header-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 var(--srp-space-md);
    white-space: nowrap;
}
.srp-header-stat:first-child { padding-left: 0; }
.srp-header-stat-sep {
    width: 1px;
    height: 12px;
    background: #d9d9d9;
    flex-shrink: 0;
    align-self: center;
}
.srp-header-stat-num {
    font-family: 'Satoshi', var(--srp-font);
    font-size: var(--srp-fs-stat);
    font-weight: 700;
    line-height: var(--srp-lh-stat);
    color: #fff;
    align-self: stretch;
    text-align: center;
}
.srp-header-stat-lbl {
    font-family: 'Bounded', var(--srp-font);
    font-size: 8px;
    font-weight: 700;
    line-height: var(--srp-lh-stat);
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 1px;
}
.srp-profi {
    flex-shrink: 0;
    width: fit-content;
    min-height: 24px;
    padding: 4px 12px 6px 14px;
    border-radius: 0 0 8px 0;
    background: linear-gradient(180deg, #e8c547 0%, #c9a227 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bounded', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #0d0d0d;
    align-self: flex-start;
    margin-left: 40px;
    margin-top: 2px;
    box-sizing: border-box;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

/* Ranks disabled: hide rank badge + icon everywhere */
:root[data-ranks-enabled="0"] #home-srp-rank,
:root[data-ranks-enabled="0"] #profile-srp-rank,
:root[data-ranks-enabled="0"] #fp-rank {
    display: none !important;
}
:root[data-ranks-enabled="0"] #home-srp-rank-icon,
:root[data-ranks-enabled="0"] #profile-srp-rank-icon {
    display: none !important;
}

/* hero — один раздел под шапкой, компактно как в Figma */
.srp-hero-slot {
    width: 100%;
    margin-top: 16px;
}

/* Декоративный разделитель с названием проекта по центру.
   Тонкие золотые линии по бокам, текст в центре — между шапкой профиля
   и заголовком «Записаться на игру». */
.home-brand-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 14px 4px 6px;
    user-select: none;
}
.home-brand-divider-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(212, 175, 55, 0) 0%,
        rgba(212, 175, 55, 0.45) 35%,
        rgba(212, 175, 55, 0.55) 50%,
        rgba(212, 175, 55, 0.45) 65%,
        rgba(212, 175, 55, 0) 100%
    );
}
.home-brand-divider-text {
    flex: 0 0 auto;
    font-family: 'Bounded', var(--srp-font);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.home-featured-game-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 8px 6px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
.home-featured-game-heading-dash {
    flex-shrink: 0;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #d4af37 0%, #b08c28 100%);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.40);
}
.home-featured-game-heading-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-featured-game-heading-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.home-featured-game-heading-nav-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.42);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    padding: 0;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.home-featured-game-heading-nav-btn svg {
    width: 14px;
    height: 14px;
}
.home-featured-game-heading-nav-btn:hover,
.home-featured-game-heading-nav-btn:focus-visible {
    background: rgba(212, 175, 55, 0.10);
    border-color: rgba(212, 175, 55, 0.7);
    color: #f1c84f;
}
.home-featured-game-heading-nav-btn:active:not(:disabled) {
    background: rgba(212, 175, 55, 0.18);
    transform: translateY(1px);
}
.home-featured-game-heading-nav-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.4);
}
/* Под этим заголовком карточка идёт почти впритык — у .srp-hero-slot стандартный
   margin-top 16px на главной избыточен (см. .home-featured-game-slot).
   На карточке доступен свайп влево/вправо для переключения, см. handleSwipe* в HomePage. */
.home-featured-game-slot {
    margin-top: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.home-featured-game-slot--swiping {
    cursor: grabbing;
}
/* Слайд-анимация при смене карточки через стрелки в заголовке. Триггер — класс
   на слоте; key={game.id} на карточке заставляет React её перемонтировать,
   так что animation отыгрывается с нуля при каждом переключении. */
@keyframes home-featured-slide-from-right {
    0% { transform: translateX(36%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes home-featured-slide-from-left {
    0% { transform: translateX(-36%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.home-featured-game-slot--slide-from-right > * {
    animation: home-featured-slide-from-right 280ms cubic-bezier(0.2, 0.9, 0.2, 1);
    will-change: transform, opacity;
}
.home-featured-game-slot--slide-from-left > * {
    animation: home-featured-slide-from-left 280ms cubic-bezier(0.2, 0.9, 0.2, 1);
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
    .home-featured-game-slot--slide-from-right > *,
    .home-featured-game-slot--slide-from-left > * {
        animation: none;
    }
}

/* Главная: блок «Рефералка» с фигурой персонажа на фоне.
   Inline-секция между селектором филиала и карточкой ближайшей игры —
   в отличие от профиля, где этот же контент прижат к низу страницы.
   overflow: visible + отрицательный margin-bottom — чтобы фигура выходила
   ниже своей секции и карточка ближайшей игры визуально «наезжала» на
   нижнюю часть персонажа (см. эталонный макет главной). */
.home-referral-hero {
    position: relative;
    width: 100%;
    min-height: 460px;
    margin: 4px 0 -160px;
    overflow: visible;
}
.home-referral-hero-figure {
    position: absolute;
    right: -8px;
    bottom: -40px;
    height: 500px;
    width: auto;
    max-width: none;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0;
    transform: translateY(28px);
    animation: home-referral-hero-figure-enter 700ms cubic-bezier(0.2, 0.9, 0.2, 1) 120ms forwards;
}
@keyframes home-referral-hero-figure-enter {
    0% { opacity: 0; transform: translateY(36px); }
    100% { opacity: 1; transform: translateY(0); }
}
.home-referral-hero-content {
    position: absolute;
    left: 4px;
    right: 12px;
    bottom: 180px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: none;
}
.home-referral-hero-content .profile-page-referral-title {
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .home-referral-hero-figure {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* Hero: pokerback.png фон на всю карточку, сверху затемнение + стекло для читабельности */
.srp-hero {
    position: relative;
    width: 100%;
    min-height: 172px;
    border-radius: 21px;
    background-color: #1a1a1a;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: stretch;
    padding: 14px;
    box-sizing: border-box;
}
.srp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 95% 70% at 92% 22%, rgba(255, 170, 72, 0.14) 0%, transparent 52%),
        linear-gradient(118deg, #16120f 0%, #0f0b08 42%, #1a1412 100%);
    z-index: 0;
}
.srp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.40) 45%, rgba(0,0,0,0.0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.srp-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    /* оставляем место справа под картинку */
    padding-right: 110px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}
.srp-hero-title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
}
.srp-hero-pills {
    margin-top: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.srp-pill {
    height: 22px;
    padding: 0 8px;
    border-radius: 18px;
    background: #1a1a1a;
    border: 1px solid #505050;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}
.srp-pill-ico {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.95;
}
.srp-pill-ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.srp-pill-ico svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.srp-hero-btn {
    margin-top: 10px;
    min-width: 140px;
    height: 32px;
    padding: 0 14px;
    border-radius: 18px;
    background: #930400;
    border: 1px solid #505050;
    color: #fff;
    font-family: 'Bounded', var(--srp-font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.srp-hero-btn:active { opacity: 0.92; }
.srp-hero-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.srp-hero-btn.home-cta-btn--cancel-only {
    background: transparent;
    border-color: rgba(255,255,255,0.35);
    letter-spacing: 0.2px;
}
.srp-hero-btn.home-cta-btn--pay-cancel {
    background: #930400;
}
/* правый блок-картинка убран: фон hero — pokerback на всю плашку */

/* «Показать ещё»: Figma — Bounded Medium 8px, скруглённый серый бадж */
.srp-show-more {
    margin: var(--srp-space-lg) auto 0;
    width: fit-content;
    height: 36px;
    padding: 0 22px;
    border-radius: 999px;
    background: #5c5c5c;
    border: none;
    color: #fff;
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}
.srp-show-more-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.srp-show-more-ico svg {
    width: 8px;
    height: 12px;
    color: #fff;
}

/* tiles — отступ сверху от кнопки «Показать еще» */
.srp-tiles {
    width: 100%;
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.srp-tile {
    position: relative;
    min-height: 101px;
    border-radius: 21px;
    border: none;
    color: #fff;
    text-align: left;
    padding: 46px 14px 10px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}
.srp-tile:active { opacity: 0.88; }
.srp-tile--dark {
    background: linear-gradient(180deg, #292929 0%, #000000 100%);
    border: none;
    box-shadow:
        0 4px 4px rgba(0,0,0,0.25),
        inset 0 4px 4px rgba(0,0,0,0.25),
        0 0 0 1px rgba(255, 60, 60, 0.18),
        0 0 24px rgba(255, 0, 0, 0.06);
}
.srp-tile--mid {
    background: linear-gradient(180deg, #5c5c5c 0%, #000000 100%);
    border: none;
    box-shadow:
        0 4px 4px rgba(0,0,0,0.25),
        inset 0 4px 4px rgba(0,0,0,0.25),
        0 0 0 1px rgba(255, 60, 60, 0.18),
        0 0 24px rgba(255, 0, 0, 0.06);
}
.srp-tile-dot {
    position: absolute;
    right: 10px;
    top: 16px;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 3px 12px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.06);
}
.srp-tile-dot svg {
    width: 20px;
    height: 20px;
    color: rgba(255,255,255,0.85);
}
.srp-tile-ico {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter:
        drop-shadow(2px 3px 8px rgba(0,0,0,0.33))
        drop-shadow(10px 12px 15px rgba(0,0,0,0.29))
        drop-shadow(21px 27px 21px rgba(0,0,0,0.17));
}
.srp-tile-title {
    display: block;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    /* Reserve space for the right-side icon circle so the title never goes under it */
    max-width: calc(100% - 90px);
    white-space: normal;
    /* Never break words into letters */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}
.srp-tile-sub {
    display: block;
    margin-top: 4px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255,255,255,0.9);
    max-width: 55%;
}

/* Слот под карточку адреса на главной (сама плашка — VenueAddressCard) */
.srp-home-page .venue-address-slot--home {
    margin-top: 28px;
}
/* Plain-вариант на главной — даём ту же тонкую золотую полоску слева, что
   у секций таба «Информация» в карточке игры (gd-section--info). */
.srp-home-page .venue-address-slot--home .venue-address-plain {
    padding-left: 14px;
    border-left: 2px solid rgba(197, 158, 71, 0.55);
}
/* Карточка адреса / площадки (VenueAddressCard — главная и детали игры, один стиль) */
.venue-address-card {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    border-radius: 28px;
    padding: 24px 24px 20px;
    border: 1px solid rgba(184, 158, 91, 0.42);
    background: #121212;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #fff;
    overflow: hidden;
}

/* Plain-вариант: без рамки/фона/тени — просто текст в потоке.
   Используется в табе «Информация» карточки игры. */
.venue-address-plain {
    display: block;
    color: #fff;
    margin: 0;
}
.venue-address-plain__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
}
.venue-address-plain__title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    word-break: break-word;
}
.venue-address-plain__address {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
    word-break: break-word;
}
.venue-address-plain__address--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f1d37a;
    text-decoration: underline;
    text-decoration-color: rgba(241, 211, 122, 0.55);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    cursor: pointer;
}
.venue-address-plain__address--link:hover,
.venue-address-plain__address--link:focus-visible {
    color: #fbe6a0;
    text-decoration-color: rgba(251, 230, 160, 0.85);
    outline: none;
}
.venue-address-plain__ext-icon {
    display: inline-flex;
    align-items: center;
    color: rgba(241, 211, 122, 0.78);
    flex-shrink: 0;
}
.venue-address-plain__meta {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.74);
}
.venue-address-plain__meta-sep {
    color: rgba(255, 255, 255, 0.32);
}
.venue-address-card__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.venue-address-card__eyebrow {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.2;
}
.venue-address-card__title {
    font-family: 'Satoshi', var(--srp-font);
    font-size: clamp(20px, 4.7vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #fff;
    word-break: break-word;
}
.venue-address-card__address {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 15px;
    line-height: 1.45;
    color: #9a9a9a;
    white-space: pre-wrap;
    word-break: break-word;
}
.venue-address-card__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 4px;
}
.venue-address-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.venue-address-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    max-width: 100%;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    word-break: break-word;
}
.venue-address-badge--metro {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #333333;
    color: rgba(255, 255, 255, 0.88);
}
.venue-address-badge__m {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0d0d0d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.venue-address-badge--outline {
    border: 1px solid rgba(184, 158, 91, 0.55);
    background: transparent;
    color: #c9a85a;
    padding: 0 14px;
}
.venue-address-card__map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(184, 158, 91, 0.52);
    background: transparent;
    color: #c9a85a;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.venue-address-card__map:hover {
    transform: translateY(-1px);
    border-color: rgba(184, 158, 91, 0.78);
    background: rgba(184, 158, 91, 0.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.venue-address-card__map:active {
    opacity: 0.92;
    transform: translateY(0);
}
.venue-address-card__map-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #d4b45c 0%, #c59e47 52%, #b08d3f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.venue-address-card__map-icon svg {
    display: block;
}
@media (max-width: 640px) {
    .venue-address-card {
        padding: 20px 18px 18px;
        border-radius: 24px;
    }
    .venue-address-card__inner {
        gap: 8px;
    }
    .venue-address-card__title {
        font-size: clamp(18px, 5.8vw, 24px);
    }
    .venue-address-card__address {
        font-size: 14px;
    }
    .venue-address-badge {
        min-height: 30px;
        padding: 0 10px 0 8px;
        font-size: 12px;
    }
    .venue-address-badge--outline {
        padding: 0 12px;
    }
    .venue-address-card__map {
        min-height: 34px;
        padding: 0 14px 0 10px;
        font-size: 12px;
    }
}

.srp-bottom-bar { display: none; }

/* bottom nav on home page — unified, no special overrides */

.home-page .home-about-card {
    border-radius: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

.home-about-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #ffffff;
}

.home-page .home-about-text {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.65);
}

.home-about-chat-wrap {
    padding-top: 4px;
}

.home-about-chat-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--tg-theme-button-color);
    text-decoration: none;
    padding: 8px 0;
}

.home-about-chat-link:active {
    opacity: 0.8;
}

.home-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.home-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.home-section-link {
    font-size: 13px;
    color: var(--tg-theme-link-color);
    text-decoration: none;
}

.home-section-link:active {
    opacity: 0.7;
}

.home-featured-slot {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-about-card {
    background: var(--tg-theme-secondary-bg-color);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.home-about-text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--tg-theme-text-color);
}

.home-about-list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--tg-theme-hint-color);
    font-size: 13px;
    line-height: 1.45;
}

.home-tournament-rating-card {
    background: linear-gradient(135deg, var(--tg-theme-button-color) 0%, rgba(36, 129, 204, 0.8) 100%);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.home-tournament-rating-card:active {
    opacity: 0.9;
    transform: translateY(1px);
}

/* ============================================
   Games feed
   ============================================ */
.simple-page-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.simple-page-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.simple-page-title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.3px;
    color: #fff;
}
.simple-page-subtitle {
    margin: 0;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}
.simple-page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.games-page-admin-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 14px 16px;
    background: #292929;
    border: none;
    border-radius: 21px;
}
.games-page-admin-label {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
}
.games-page-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}
.games-page-admin-actions .create-game-btn {
    flex: 1;
    min-width: 120px;
}
.create-game-btn--outline {
    background: #5c5c5c !important;
    border: none !important;
    color: #fff !important;
}

.simple-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.simple-section-title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.simple-link-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 18px;
    background: #5c5c5c;
    color: #fff;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.simple-link-btn:active { opacity: 0.7; }

.simple-games-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.next-games-more-wrap {
    margin-top: 10px;
}

/* ---- Game / Tournament cards ---- */
.cc-game-card {
    position: relative;
    border-radius: 21px;
    padding: 16px 18px 14px;
    background: #292929;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.cc-game-card:active {
    opacity: 0.88;
    transform: translateY(1px);
}
.cc-game-card--featured {
    padding: 18px 18px 16px;
    background: #1a1a1a;
}

/* Featured game card (hero) */
.cc-game-card--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 95% 70% at 92% 22%, rgba(255, 170, 72, 0.14) 0%, transparent 52%),
        linear-gradient(118deg, #16120f 0%, #0f0b08 42%, #1a1412 100%);
    z-index: 0;
}
.cc-game-card--featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.40) 45%, rgba(0,0,0,0.0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.cc-game-card--featured > * {
    position: relative;
    z-index: 2;
}

/* ---- Featured card (Figma node 131:9) ---- */
.cc-game-card--featured.srp-featured-card {
    height: auto;
    min-height: 220px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.18);
    box-shadow: 0 12px 28px rgba(0,0,0,0.26);
}
.cc-game-card--featured.srp-featured-card::before,
.cc-game-card--featured.srp-featured-card::after {
    content: none;
}
.srp-featured-inner {
    position: relative;
    min-height: 220px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 80% 34%, rgba(255, 68, 43, 0.18) 0%, rgba(255, 68, 43, 0.05) 24%, rgba(255, 68, 43, 0.0) 46%),
        linear-gradient(135deg, #191a20 0%, #17171d 56%, #24161a 100%);
    box-shadow:
        0 16px 30px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.06);
    display: flex;
    overflow: hidden;
}
.srp-featured-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(110deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.0) 35%);
    pointer-events: none;
}
.srp-featured-inner::after {
    content: none;
}
.srp-featured-left {
    flex: 1 1 auto;
    padding: 18px 20px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    justify-content: flex-start;
}
.srp-featured-right {
    position: relative;
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px 10px 0;
    background: transparent;
}
.srp-featured-visual {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srp-featured-visual::before {
    content: "";
    position: absolute;
    inset: 18% 14%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 74, 45, 0.18) 0%, rgba(255, 74, 45, 0.05) 36%, rgba(255, 74, 45, 0) 68%);
    filter: blur(6px);
}
.srp-featured-visual::after {
    content: none;
}
.srp-featured-chip-img {
    position: relative;
    z-index: 1;
    width: min(100%, 320px);
    max-height: 248px;
    object-fit: contain;
    background: transparent;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.34));
}
.srp-featured-top {
    flex: 0 0 auto;
}
.srp-featured-title {
    min-width: 0;
    font-family: 'Bounded', var(--srp-font);
    font-weight: 800;
    font-size: clamp(28px, 6vw, 44px);
    line-height: 1.02;
    color: #fff;
    text-transform: uppercase;
    word-break: break-word;
    overflow-wrap: anywhere;
    letter-spacing: -0.02em;
}
/* Длинные названия: меньший шрифт, без ограничения строк — весь текст виден */
.srp-featured-title--long {
    font-size: clamp(22px, 5vw, 34px);
}
.srp-featured-title--longer {
    font-size: clamp(18px, 4vw, 26px);
}
.srp-featured-title--longest {
    font-size: clamp(16px, 3.5vw, 22px);
}
.srp-featured-bottom {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.srp-featured-pills {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}
.srp-featured-pills .srp-pill {
    height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(20,20,28,0.82);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 6px 12px rgba(0,0,0,0.18);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.srp-pill-ico {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    opacity: 0.95;
    background: center center / contain no-repeat;
}
/* Simple inline SVG icons via data URI (monochrome, matches Figma vectors) */
.srp-pill-ico--calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.srp-pill-ico--clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E");
}
.srp-pill-ico--users {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.srp-featured-cta {
    width: 100%;
    max-width: 180px;
    height: 56px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 8px 16px rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.82);
    font-family: 'Bounded', var(--srp-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.srp-featured-cta:active { opacity: 0.96; transform: translateY(1px); }
.srp-featured-cta-arrow {
    font-size: 28px;
    line-height: 0.8;
    margin-top: -2px;
}
.srp-featured-cta--cancel {
    background: rgba(245,87,108,0.16);
    border-color: rgba(245,87,108,0.42);
    color: #fff;
    box-shadow: none;
}
.srp-featured-cta--inactive {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.86);
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}
.srp-featured-cta--results {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}
.srp-featured-subtitle {
    margin-top: 10px;
    max-width: 360px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255,255,255,0.74);
}
.srp-featured-note {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,0.62);
}

/* Карточка игры — премиум-тёмная тема (золото #c59e47, слои как на экране «Информация») */
.srp-game-card {
    position: relative;
    margin-bottom: 14px;
    padding: 0;
    border-radius: 22px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    background: linear-gradient(165deg, #0d0d0d 0%, #050505 52%, #0a0a0a 100%);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Анимированный «золотой rim» — узкая дуга бежит по периметру.
   Реализовано через @property --srp-rim-angle (animatable angle) + conic-gradient
   на ::before и mask-composite, чтобы оставить только тонкую рамку. */
@property --srp-rim-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.srp-game-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1.5px;
    background: conic-gradient(
        from var(--srp-rim-angle),
        transparent 0deg,
        transparent 270deg,
        rgba(212, 175, 55, 0.85) 320deg,
        #fff5cc 340deg,
        rgba(212, 175, 55, 0.85) 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    animation: srp-card-rim-spin 4s linear infinite;
}
@keyframes srp-card-rim-spin {
    to { --srp-rim-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
    .srp-game-card::before { animation: none; }
}
.srp-game-card__edit {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.92);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.srp-game-card__edit svg {
    color: #d4af37;
    flex-shrink: 0;
}
.srp-game-card__edit:hover,
.srp-game-card__edit:focus-visible {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.85);
    outline: none;
}
.srp-game-card__edit:active {
    transform: translateY(1px);
}
.srp-game-card__inner {
    position: relative;
    min-height: 156px;
    display: flex;
    overflow: hidden;
    border-radius: 22px;
}
.srp-game-card__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 24%);
    pointer-events: none;
}
.srp-game-card__content,
.srp-game-card__art {
    position: relative;
    z-index: 1;
}
.srp-game-card__content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 8px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cc-badge--danger {
    border-color: rgba(245,87,108,0.52);
    color: #ff8b9a;
}
.srp-game-card__title {
    margin: 0;
    font-family: 'Bounded', var(--srp-font);
    font-size: clamp(22px, 5.2vw, 32px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #fff;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.srp-game-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.srp-game-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 0;
    border-radius: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.srp-game-card__chip svg {
    color: #d4af37;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
.srp-game-card__chip-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.28);
    user-select: none;
    margin: 0 2px;
    color: transparent;
    font-size: 0;
}
.srp-game-card__admin-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 4px;
    width: 100%;
    max-width: 360px;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.52);
    position: relative;
    z-index: 2;
}
.srp-game-card__admin-tournament {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}
.srp-game-card__admin-row-dot {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    user-select: none;
    line-height: 1;
}
.srp-game-card__admin-players {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.srp-game-card__admin-players svg {
    color: rgba(212, 175, 55, 0.75);
}
.srp-game-card__admin-players strong {
    color: #fff;
    font-weight: 900;
}
.srp-game-card__cta {
    margin-top: 4px;
    width: 100%;
    max-width: 360px;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.65);
    background: transparent;
    color: #fff;
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.srp-game-card__cta:hover,
.srp-game-card__cta:focus-visible {
    background: rgba(212, 175, 55, 0.10);
    border-color: rgba(212, 175, 55, 0.85);
    outline: none;
}
.srp-game-card__cta:active {
    background: rgba(212, 175, 55, 0.16);
}
.srp-game-card__cta-arrow {
    font-size: 22px;
    line-height: 0.8;
    margin-top: -2px;
    color: #d4af37;
}
.srp-game-card__cta--cancel {
    border-color: rgba(245,87,108,0.55);
    color: #fff;
}
.srp-game-card__cta--cancel:hover,
.srp-game-card__cta--cancel:focus-visible {
    background: rgba(245,87,108,0.12);
    border-color: rgba(245,87,108,0.75);
}
.srp-game-card__cta--cancel .srp-game-card__cta-arrow {
    color: #fff;
}
.srp-game-card__cta--inactive,
.srp-game-card__cta--results {
    border-color: rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.78);
}
.srp-game-card__cta--inactive {
    pointer-events: none;
}
.srp-game-card__cta--inactive .srp-game-card__cta-arrow,
.srp-game-card__cta--results .srp-game-card__cta-arrow {
    color: rgba(255, 255, 255, 0.5);
}
.srp-game-card__subtitle {
    margin-top: 6px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.52);
}
.srp-game-card__note {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.48);
}
.srp-game-card--status-completed .srp-game-card__note,
.srp-game-card--status-cancelled .srp-game-card__note {
    color: rgba(255, 255, 255, 0.4);
}
.srp-game-card__art {
    flex: 0 0 42%;
    min-width: 150px;
    max-width: 280px;
    padding: 6px 8px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srp-game-card__art-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srp-game-card__art-wrap::before {
    content: "";
    position: absolute;
    inset: 8% 2%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(197, 158, 71, 0.22) 0%, rgba(197, 158, 71, 0.06) 40%, transparent 70%);
    filter: blur(2px);
}
.srp-game-card__art-img {
    position: relative;
    z-index: 1;
}
.srp-game-card__art-img {
    width: min(100%, 260px);
    max-height: 188px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 14px rgba(197, 158, 71, 0.18))
        drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
    /* Прозрачность для pointer-событий: свайп карусели на главной не должен
       перехватываться нативным image-drag (desktop) или iOS-меню «сохранить
       картинку» при long-press. Клики по карточке всё равно работают, потому
       что обработчик висит на родительском .srp-game-card. */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

@media (max-width: 720px) {
    .cc-game-card--featured.srp-featured-card,
    .srp-featured-inner {
        min-height: 204px;
    }
    .srp-featured-left {
        padding: 16px 16px 16px 18px;
    }
    .srp-featured-right {
        flex-basis: 38%;
        padding-right: 4px;
    }
    .srp-featured-title {
        font-size: clamp(24px, 7vw, 34px);
    }
    .srp-featured-pills .srp-pill {
        height: 40px;
        padding: 0 12px;
        font-size: 12px;
    }
    .srp-featured-cta {
        max-width: 156px;
        height: 50px;
        font-size: 15px;
    }
    .srp-featured-chip-img {
        width: min(100%, 238px);
        max-height: 188px;
    }
    .srp-game-card__inner {
        min-height: 164px;
    }
    .srp-game-card__title {
        font-size: clamp(20px, 6vw, 28px);
    }
    .srp-game-card__cta {
        height: 42px;
        min-width: 112px;
        font-size: 13px;
    }
}

/* Карточка турнира: без тяжёлой плашки, лёгкий стеклянный вид */
.cc-tournament-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.cc-tournament-card .cc-chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
.cc-tournament-card .cc-cta {
    color: rgba(255, 255, 255, 0.65);
}
.cc-tournament-card .cc-cta strong {
    color: rgba(255, 255, 255, 0.9);
}

/* ---- About page (О клубе) ---- */
.about-page.page {
    padding: 0 !important;
    gap: 0;
    background: #000 !important;
    padding-bottom: 70px !important;
    display: flex;
    flex-direction: column;
}
.about-back-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.about-back-btn:active { opacity: 0.7; }
.about-page-title {
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-weight: 800;
    font-size: 28px;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    padding: 16px 16px 12px 56px;
}
.about-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 16px;
}
.about-page-head .about-page-title {
    flex: 1 1 auto;
    min-width: 0;
}
.about-edit-btn {
    flex: 0 0 auto;
    border: 1px solid rgba(212,175,55,0.35);
    background: rgba(212,175,55,0.12);
    color: #e7c86a;
    border-radius: 999px;
    padding: 10px 14px;
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.about-banner {
    width: 100%;
    display: block;
    height: auto;
    object-fit: contain;
}
.about-body {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.about-text {
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    margin: 0;
}
.about-text strong {
    color: #fff;
    font-weight: 600;
}
.about-text--accent {
    color: #e0e0e0;
    font-weight: 600;
    font-size: 15px;
}
.about-empty-text {
    opacity: 0.55;
}
.about-editor-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.about-editor-textarea {
    width: 100%;
    min-height: 280px;
    resize: vertical;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.22);
    color: #fff;
    padding: 14px;
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 14px;
    line-height: 1.6;
}
.about-editor-textarea::placeholder {
    color: rgba(255,255,255,0.32);
}
.about-editor-error {
    color: #ff7a8a;
    font-size: 13px;
    line-height: 1.4;
}
.about-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.about-editor-primary-btn,
.about-editor-secondary-btn {
    border-radius: 12px;
    padding: 10px 14px;
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.about-editor-primary-btn {
    border: 1px solid rgba(212,175,55,0.35);
    background: rgba(212,175,55,0.14);
    color: #e7c86a;
}
.about-editor-secondary-btn {
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.82);
}
.about-section-title {
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    margin: 0 0 4px;
}
.about-contacts {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.about-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.about-link-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.about-link-btn:active { background: rgba(255,255,255,0.12); }
.about-link-ico {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
}
.about-bottom-img {
    width: 100%;
    display: block;
    height: auto;
    margin-top: auto;
}

/* ---- Bonuses page (Бонусы): сетка 2x2, как на втором скрине ---- */
.bonuses-page.page {
    padding: 0 !important;
    gap: 0;
    background: #000 !important;
    padding-bottom: 90px !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.rating-page.page {
    padding: 0 !important;
    gap: 0;
    background: #000 !important;
    padding-bottom: 90px !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.bonuses-page-title {
    font-family: 'Bounded', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.15;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 52px 16px 20px 52px;
}
.srp-bonuses-page.page{
    padding: 0 !important;
    gap: 0;
    background: #000;
    min-height: 100vh;
}
.srp-bonuses-title{
    font-family: 'Bounded', sans-serif;
    font-weight: 900;
    font-size: 26px;
    line-height: 1.15;
    color: #fff;
    margin: 14px 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0 2px;
}
.bonuses-table-wrap{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0 16px 24px;
}
.srp-bonuses-page .srp-bonuses-table-wrap{
    /* srp-stage уже даёт горизонтальные отступы — не сжимаем таблицу второй раз */
    padding: 0 0 24px;
    gap: 14px;
}
.bonuses-alert{
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;
    padding:12px 14px;
    background:rgba(18,18,18,0.72);
    color:rgba(255,255,255,0.9);
    font-family:'Satoshi', sans-serif;
    font-size:13px;
}
.bonuses-alert--error{
    border-color: rgba(255, 90, 90, 0.35);
    background: rgba(80, 0, 0, 0.35);
}
.bonuses-table{
    border:1px solid rgba(255,255,255,0.14);
    border-radius:18px;
    overflow:hidden;
    background:rgba(18,18,18,0.92);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.bonuses-table-head,
.bonuses-table-row{
    display:grid;
    grid-template-columns: 1.15fr 1.9fr 1fr;
    gap:14px;
    padding:14px 16px;
    align-items:start;
}
.bonuses-table-head{
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.9);
    font-family:'Bounded','Satoshi', sans-serif;
    font-weight:800;
    font-size:12px;
    letter-spacing:0.02em;
    text-transform:uppercase;
}
.bonuses-table-row{
    border-top:1px solid rgba(255,255,255,0.10);
}
.bonuses-td{
    min-width:0;
    font-family:'Satoshi', sans-serif;
    font-size:13px;
    line-height:1.42;
    color:rgba(255,255,255,0.92);
}
.bonuses-td--name{
    font-weight:800;
    color:#fff;
}
.bonuses-td--desc{
    color:rgba(255,255,255,0.84);
    font-size:12.5px;
}
.bonuses-td--reward{
    text-align:right;
    font-weight:900;
    color:rgba(216, 178, 90, 0.98);
    font-family:'Bounded','Satoshi', sans-serif;
    line-height: 1.15;
}
.bonuses-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 16px 24px;
}
.bonus-card {
    border-radius: 22px;
    padding: 16px 14px 16px 16px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 168px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.bonus-card--dark {
    background: #1e1e1e;
}
.bonus-card--red {
    background: #930400;
}
.bonus-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding-right: 10px;
}
.bonus-card-title {
    font-family: 'Bounded', 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 8px;
}
.bonus-card-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    flex: 1;
}
.bonus-card-reward {
    font-family: 'Bounded', 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    margin-top: 12px;
}
.bonus-card-img-wrap {
    flex-shrink: 0;
    width: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bonus-card-img {
    max-width: 100%;
    max-height: 124px;
    object-fit: contain;
}

/* ---- FAQ / Support page ---- */
.faq-page.page {
    padding: 0 !important;
    gap: 0;
    background: #000 !important;
    padding-bottom: 70px !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.faq-body {
    padding: 20px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.faq-item {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.faq-item.open {
    border-color: rgba(255,255,255,0.3);
}
.faq-item-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
}
.faq-item-chevron {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.25s ease;
}
.faq-item.open .faq-item-chevron {
    transform: rotate(180deg);
}
.faq-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-item.open .faq-item-body {
    max-height: 600px;
}
.faq-item-answer {
    padding: 0 16px 14px;
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
    white-space: pre-line;
}

/* Admin actions inside expanded FAQ item */
.faq-admin-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 10px;
}
.faq-admin-action-btn {
    padding: 5px 14px;
    border-radius: 8px;
    border: none;
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.faq-admin-action-btn:active { opacity: 0.7; }
.faq-admin-edit {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.faq-admin-delete {
    background: rgba(200,40,40,0.25);
    color: #ff6b6b;
}

/* Admin add button */
.faq-admin-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px dashed rgba(255,255,255,0.25);
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 4px;
}
.faq-admin-add-btn:active {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.4);
}

/* Show more */
.faq-show-more-wrap {
    text-align: center;
    padding: 10px 0;
}
.faq-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 14px;
    cursor: pointer;
}
.faq-show-more-btn:active { opacity: 0.7; }

/* Contact support button */
.faq-contact-wrap {
    padding: 20px 16px 30px;
    margin-top: auto;
}
.faq-contact-btn {
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    border: none;
    background: #c0272d;
    color: #fff;
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}
.faq-contact-btn:active {
    background: #a02025;
}

/* FAQ modal */
.faq-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.faq-modal {
    width: 100%;
    max-width: 400px;
    background: #1a1a1a;
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-modal-title {
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}
.faq-modal-label {
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-bottom: -6px;
}
.faq-modal-input,
.faq-modal-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.faq-modal-input:focus,
.faq-modal-textarea:focus {
    border-color: rgba(255,255,255,0.35);
}
.faq-modal-textarea {
    resize: vertical;
    min-height: 80px;
}
.faq-modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.faq-modal-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-family: 'Satoshi', var(--srp-font, sans-serif);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.faq-modal-cancel {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.faq-modal-save {
    background: #c0272d;
    color: #fff;
}

.cc-game-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.cc-game-top-left {
    min-width: 0;
    flex: 1 1 auto;
}
.cc-game-top-right {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
}
.cc-game-icon-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: transparent;
    pointer-events: none;
    flex: 0 0 auto;
}
.cc-game-title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}
.cc-game-subtitle {
    margin-top: 4px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    line-height: 1.3;
}

.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    height: 22px;
    border-radius: 18px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: #1a1a1a;
    border: 1px solid #505050;
    color: #fff;
    white-space: nowrap;
    line-height: 1;
}
.cc-badge--active {
    border-color: rgba(102, 187, 106, 0.5);
    color: #81c784;
}
.cc-badge--upcoming {
    border-color: rgba(255, 167, 38, 0.5);
    color: #ffb74d;
}
.cc-badge--completed {
    border-color: #505050;
    color: rgba(255,255,255,0.45);
}

.cc-game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.cc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    height: 24px;
    border-radius: 18px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.85);
    background: #1a1a1a;
    border: 1px solid #505050;
    line-height: 1;
}

/* Chip with icon (Figma card) */
.cc-chip--icon::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: url("/img/chip.png") center center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.cc-cta {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
.cc-cta strong {
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    font-size: 16px;
}

.cc-cta-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.cc-cta-row .cc-cta {
    margin-top: 0;
}
.cc-game-reserve-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(147, 4, 0, 0.85);
    color: #fff;
    font-family: 'Bounded', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cc-game-reserve-btn:hover,
.cc-game-reserve-btn:active {
    background: rgba(180, 0, 0, 0.95);
    opacity: 0.95;
}

.cc-game-reserve-btn--cancel {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--tg-theme-hint-color, rgba(255, 255, 255, 0.8));
}
.cc-game-reserve-btn--cancel:hover,
.cc-game-reserve-btn--cancel:active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}
.cc-game-reserve-btn--inactive {
    background: transparent;
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.55);
    cursor: default;
    pointer-events: none;
}

/* Фон под главную: все страницы приложения в одной тёмной стилистике */
.games-page,
.profile-page,
.admin-page,
.admin-players-page,
.admin-edit-player-page,
.admin-bonuses-page,
.admin-transactions-page,
.game-details-page {
    background: transparent;
    color: #ffffff;
}

/* Games page layout */
.games-page {
    gap: 0;
    padding: 8px 12px 90px !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Шапка экрана «Игры»: заголовок + меню «+» */
.games-page .games-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 26px;
    min-width: 0;
    overflow: visible;
}

.games-page .games-page-screen-title {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Bounded', var(--srp-font);
    font-size: clamp(23px, 6.4vw, 30px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.games-page .games-page-create-wrap {
    position: relative;
    flex: 0 0 auto;
}

.games-page .games-page-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(180deg, rgba(36, 36, 38, 0.95) 0%, rgba(16, 16, 18, 0.98) 100%);
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 120ms ease, border-color 160ms ease, background 160ms ease, opacity 120ms ease;
}

.games-page .games-page-create-btn:hover {
    border-color: rgba(212, 175, 55, 0.45);
    color: #fff;
}

.games-page .games-page-create-btn:active {
    opacity: 0.92;
    transform: scale(0.96);
}

.games-page .games-page-create-btn:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.55);
    outline-offset: 2px;
}

.games-page .games-page-create-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    min-width: 168px;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(20, 20, 22, 0.98);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 14px 36px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.games-page .games-page-create-menu-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, color 140ms ease;
}

.games-page .games-page-create-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.games-page .games-page-create-menu-item:active {
    background: rgba(255, 255, 255, 0.12);
}

/* Games top controls (filters + tabs) */
.games-top-controls {
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}
.games-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.games-filter-btn {
    height: 44px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 14px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(18,18,18,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    box-shadow:
        0 6px 20px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.games-filter-btn:active { opacity: 0.88; }
.games-filter-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.games-filter-ico {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.92);
    flex: 0 0 18px;
}
.games-filter-ico svg { width: 16px; height: 16px; }
.games-filter-text {
    display: block;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1px;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.games-filter-chevron {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    flex: 0 0 18px;
}
.games-filter-chevron svg { width: 14px; height: 14px; }

.games-filter-wrap {
    position: relative;
    min-width: 0; /* иначе длинный текст в кнопке ломает сетку/flex */
}
.games-filter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 20;
    background: rgba(22,22,22,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 4px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.games-filter-wrap.is-open .games-filter-dropdown { display: block; }
.games-filter-wrap.is-open .games-filter-chevron { transform: rotate(180deg); }
.games-filter-option {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    color: rgba(255,255,255,0.85);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.games-filter-option:active { background: rgba(255,255,255,0.08); }
.games-filter-option.is-active {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

/* ---- Branch trigger (compact link) + picker modal ----
   Один инлайн-триггер «📍 Город • Филиал» вместо двух pill-дропдаунов.
   Клик → portal-модалка с двумя секциями (город + филиал). */
.branch-trigger-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 4px;
}
.branch-trigger-row--home {
    justify-content: center;
}
/* Если включён персонаж на главной — выравниваем триггер по левому краю,
   чтобы он не «терялся» поверх фигуры. */
.home-branch-selector-wrap[data-character="1"] .branch-trigger-row--home {
    justify-content: flex-start;
}
.branch-trigger-row--games {
    margin-bottom: 4px;
}
.branch-trigger-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 4px 2px;
    background: none;
    border: none;
    color: #d4af37;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: underline;
    text-decoration-color: rgba(212, 175, 55, 0.55);
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 120ms ease, text-decoration-color 120ms ease, text-decoration-thickness 120ms ease;
}
.branch-trigger-link:hover,
.branch-trigger-link:focus-visible {
    color: #e9cf6e;
    text-decoration-color: #e9cf6e;
    text-decoration-thickness: 2px;
    outline: none;
}
.branch-trigger-link:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.branch-trigger-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    flex-shrink: 0;
}
.branch-trigger-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    flex-shrink: 0;
    margin-left: 2px;
    transition: transform 120ms ease;
}
.branch-trigger-link:hover .branch-trigger-chevron,
.branch-trigger-link:focus-visible .branch-trigger-chevron {
    transform: translateY(1px);
}
.branch-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.branch-trigger-empty {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(18, 18, 18, 0.65);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
}
.branch-trigger-empty-title {
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 4px;
}
.branch-trigger-empty-text {
    font-size: 12px;
    opacity: 0.7;
    line-height: 1.35;
}

.branch-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: branch-picker-fade-in 140ms ease-out;
}
@keyframes branch-picker-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.branch-picker-modal {
    width: 100%;
    max-width: 360px;
    padding: 18px 18px 16px;
    border-radius: 22px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    background: linear-gradient(165deg, #0d0d0d 0%, #050505 52%, #0a0a0a 100%);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: branch-picker-pop-in 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes branch-picker-pop-in {
    from { transform: translateY(8px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.branch-picker-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.branch-picker-modal-title {
    margin: 0;
    font-family: 'Bounded', var(--srp-font);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.01em;
    color: #fff;
    text-transform: uppercase;
}
.branch-picker-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.branch-picker-modal-close:hover,
.branch-picker-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.32);
    outline: none;
}
.branch-picker-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.branch-picker-section-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.branch-picker-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.branch-picker-option {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.92);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
.branch-picker-option:hover,
.branch-picker-option:focus-visible {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.7);
    outline: none;
}
.branch-picker-option.is-active {
    background: linear-gradient(180deg, #e9cf6e 0%, #d4af37 60%, #b08c28 100%);
    border-color: transparent;
    color: #1a1410;
}
.branch-picker-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.games-admin-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 14px;
}
.games-admin-btn {
    flex: 1 1 0;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.22);
    background:
        radial-gradient(180px 120px at 20% 20%, rgba(255, 215, 0, 0.12), transparent 58%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(0, 0, 0, 0.12) 100%);
    color: rgba(255, 255, 255, 0.96);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    transition: transform 120ms ease, opacity 120ms ease, border-color 160ms ease, background 160ms ease;
}
.games-admin-btn:active { opacity: 0.92; transform: translateY(1px); }
.games-admin-btn:focus-visible { outline: 2px solid rgba(255, 215, 0, 0.40); outline-offset: 2px; }
.games-admin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.games-top-controls-divider {
    height: 1px;
    background: rgba(255,255,255,0.18);
    margin-top: 4px;
    margin-bottom: 16px;
}

.games-tabs {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
    margin-top: 0;
    padding: 0;
    border-bottom: none;
}
.games-tab {
    flex: 1 1 0;
    min-height: 44px;
    padding: 10px 12px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(14, 14, 16, 0.92);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.52);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 120ms ease,
        opacity 120ms ease;
}
.games-tab:hover:not(.is-active) {
    color: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(22, 22, 24, 0.95);
}
.games-tab:active { opacity: 0.9; transform: scale(0.98); }
.games-tab:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.55);
    outline-offset: 2px;
}
.games-tab.is-active {
    border-color: rgba(201, 162, 39, 0.65);
    background: linear-gradient(180deg, #e9cf6e 0%, #d4af37 42%, #b8891a 100%);
    color: #0c0c0c;
    font-weight: 800;
    box-shadow:
        0 0 0 1px rgba(255, 235, 160, 0.22),
        0 6px 18px rgba(184, 137, 26, 0.38);
}

/* Tabs content: smooth switch between "Ближайшие" and "Прошедшие" */
.games-tab-panel {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
    will-change: opacity, transform;
}
.games-tab-panel.is-tab-hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

/* Games page fixed background (Figma) — без :has(), чтобы работало в Telegram WebView */
.games-page.active::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.48) 38%, rgba(0,0,0,0.80) 100%),
        url('/img/verticalPoker.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    pointer-events: none;
    z-index: 0;
}
.games-page.active > * {
    position: relative;
    z-index: 1;
}

/* Шапка с меню «+» должна быть выше блока вкладок (иначе «Прошедшие» рисуется поверх dropdown) */
.games-page.active > .games-page-head {
    z-index: 30;
}

.games-page.active > #games-top-controls {
    z-index: 10;
}

.games-page.active > .simple-section {
    z-index: 5;
}

/* Modern "glass" header and sections for games list */
.games-page .simple-page-header {
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 21px;
    padding: 18px 18px 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.games-page .simple-page-title {
    font-family: 'Bounded', var(--srp-font);
    font-weight: 800;
    letter-spacing: 0.2px;
}

.games-page .simple-section-title {
    font-family: 'Bounded', var(--srp-font);
    font-weight: 800;
    letter-spacing: 0.15px;
}

.games-page .simple-section {
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 21px;
    padding: 16px 16px 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Без блока: только заголовок и плашки под ним */
.games-page .simple-section--plain {
    background: transparent !important;
    border: none;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.games-page .simple-section {
    margin-top: 18px;
}

.games-page .simple-games-list {
    gap: 14px;
}

.games-page .simple-link-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 18px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    background: #5c5c5c;
}
.games-page .simple-page-header,
.games-page .simple-section,
.games-page .simple-games-list,
.games-page .games-page-admin-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.simple-section-hint {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 10px;
}

/* Пустые состояния и загрузка */
.games-page .simple-games-list .loading,
.games-page .simple-games-list > div[style*="color: var"] {
    color: rgba(255, 255, 255, 0.55) !important;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--tg-theme-text-color);
    margin: 0;
    flex: 1;
}

.section-toggle {
    background: none;
    border: none;
    color: var(--tg-theme-hint-color);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
}

.section-toggle:active {
    opacity: 0.7;
}

.section.collapsed .section-toggle {
    transform: rotate(-90deg);
}

.section-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    max-height: 5000px;
    opacity: 1;
}

.section.collapsed .section-content {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.create-game-btn {
    padding: 0 14px;
    height: 32px;
    background: #930400;
    color: #fff;
    border: none;
    border-radius: 18px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    line-height: 1;
}
.create-game-btn:active {
    opacity: 0.7;
}

/* Блок таймера в карточке игры (админ) */
.game-timer-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 10px;
    text-align: center;
}

.game-timer-card--readonly {
    padding: 14px 18px;
}

.game-timer-header {
    margin-bottom: 14px;
    text-align: center;
}

.game-timer-room {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: var(--tg-theme-text-color);
}

.game-timer-room-icon {
    opacity: 0.9;
}

.game-timer-room strong {
    font-weight: 600;
}

.game-timer-meta {
    font-size: 12px;
    color: var(--tg-theme-hint-color);
    margin-top: 4px;
}

.game-timer-meta--muted {
    color: rgba(255, 255, 255, 0.5);
}

.game-timer-actions--top {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.game-timer-main {
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.game-timer-round-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--tg-theme-text-color);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

.game-timer-blinds {
    font-size: 13px;
    color: var(--tg-theme-hint-color);
    margin-bottom: 12px;
}

.game-timer-blinds strong {
    color: var(--tg-theme-text-color);
    font-weight: 600;
}

.game-timer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.game-timer-status {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
}

.game-timer-status--running {
    background: rgba(76, 175, 80, 0.28);
    color: #81c784;
}

.game-timer-status--paused {
    background: rgba(255, 152, 0, 0.28);
    color: #ffb74d;
}

.game-timer-remaining-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.game-timer-remaining-label {
    font-size: 10px;
    color: var(--tg-theme-hint-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.game-timer-time-and-pause {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.game-timer-remaining-value {
    font-size: 28px;
    font-weight: 700;
    color: #81c784;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.game-timer-status-inline {
    font-size: 18px;
    line-height: 1;
    opacity: 0.9;
}
.game-timer-status-inline--running {
    color: #81c784;
}
.game-timer-status-inline--paused {
    color: #ffb74d;
}

.game-timer-break {
    font-size: 12px;
    color: var(--tg-theme-hint-color);
    margin-top: 12px;
    max-width: 100%;
}

.game-timer-actions--change {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.game-timer-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.game-timer-btn {
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.game-timer-btn:active {
    opacity: 0.85;
}

.game-timer-btn--scan {
    background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%);
    color: #fff;
}

.game-timer-btn--danger {
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.4);
}

.game-timer-btn--link {
    background: transparent;
    color: var(--tg-theme-link-color, #2481cc);
    border: 1px solid rgba(36, 129, 204, 0.4);
}

.game-timer-btn--nav {
    background: rgba(33, 150, 243, 0.25);
    color: #64b5f6;
    flex: 1;
    min-width: 80px;
}

.game-timer-btn--pause {
    background: rgba(255, 152, 0, 0.3);
    color: #ffb74d;
    flex: 1;
    min-width: 80px;
}

.game-timer-btn--nav:last-of-type {
    background: rgba(76, 175, 80, 0.25);
    color: #81c784;
}

/* Ближайшие игры */
.next-games-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.next-game-card {
    background: var(--tg-theme-secondary-bg-color);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.next-game-card:active {
    opacity: 0.7;
}

.next-game-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.next-game-icon {
    font-size: 32px;
}

.next-game-info {
    flex: 1;
}

.next-game-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.next-game-date {
    font-size: 14px;
    color: var(--tg-theme-hint-color);
    margin-bottom: 8px;
}

.next-game-description {
    font-size: 13px;
    color: var(--tg-theme-hint-color);
    line-height: 1.4;
    margin-bottom: 12px;
}

.next-game-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.next-game-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.detail-label {
    color: var(--tg-theme-hint-color);
}

.detail-value {
    font-weight: 500;
    color: var(--tg-theme-text-color);
}

.next-game-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.next-game-stats {
    display: flex;
    gap: 16px;
}

.next-game-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-label {
    font-size: 13px;
    color: var(--tg-theme-hint-color);
}

.stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--tg-theme-button-color);
}

.stat-value.reserved {
    color: var(--tg-theme-hint-color);
}

.next-game-location {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 1;
    text-align: right;
}

.location-label {
    font-size: 12px;
    color: var(--tg-theme-hint-color);
}

.location-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--tg-theme-button-color);
    text-decoration: none;
    word-break: break-word;
    max-width: 200px;
}

.location-link:active {
    opacity: 0.7;
}

.next-game-action {
    text-align: center;
    font-size: 14px;
    color: var(--tg-theme-button-color);
    font-weight: 500;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Список турниров */
.tournaments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tournament-card {
    background: var(--tg-theme-secondary-bg-color);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.tournament-card:active {
    opacity: 0.7;
}

.tournament-card.past {
    cursor: default;
    opacity: 0.8;
}

.tournament-card.past:active {
    opacity: 0.8;
}

.tournament-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.tournament-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    flex: 1;
}

.tournament-status {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--tg-theme-button-color);
    color: var(--tg-theme-button-text-color);
}

.tournament-status.past {
    background: var(--tg-theme-hint-color);
}

.tournament-status.upcoming {
    background: #ff9500;
    color: #ffffff;
}

.tournament-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tournament-detail {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    gap: 16px;
}

.tournament-detail-label {
    color: var(--tg-theme-hint-color);
    font-weight: 600;
}

.tournament-detail-value {
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.tournament-detail-value.reserved {
    color: var(--tg-theme-hint-color);
}

.tournament-action {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 14px;
    color: var(--tg-theme-button-color);
    font-weight: 500;
}

/* Пагинация */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.pagination-btn {
    padding: 0 14px;
    height: 32px;
    background: #5c5c5c;
    color: #fff;
    border: none;
    border-radius: 18px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    line-height: 1;
}

.pagination-btn:active {
    opacity: 0.7;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 14px;
    color: var(--tg-theme-hint-color);
}

/* Акцент модалок */
:root {
    --app-modal-bg: #292929;
    --app-modal-border: rgba(255, 255, 255, 0.08);
    --app-modal-accent: #930400;
    --app-modal-accent-hover: #b00500;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

.modal-content,
.modal {
    background: #292929;
    border: none;
    border-radius: 21px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    color: #ffffff;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 0.2s;
}

.modal-close:hover,
.modal-close:active {
    opacity: 0.7;
}

.modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.modal-section {
    margin-bottom: 16px;
}

.modal-section:last-child {
    margin-bottom: 0;
}

.modal-label {
    display: block;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.8);
}

.modal-label__required {
    color: #ff8f9a;
}

.modal-required-note {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(255,255,255,0.52);
}

.modal-input,
.modal-select,
.modal-textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    background: #0d0d0d;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
}

.modal-input::placeholder,
.modal-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.modal-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M2.5 4.5L6 8l3.5-3.5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: #0d0d0d;
}

.modal-select option {
    background: #1a1a1a;
    color: #ffffff;
}

.modal-input:focus,
.modal-select:focus,
.modal-textarea:focus {
    border-color: #930400;
}

.modal-input.is-error,
.modal-select.is-error,
.modal-textarea.is-error {
    border-color: rgba(245,87,108,0.85);
    box-shadow: 0 0 0 1px rgba(245,87,108,0.2);
}

.modal-input.is-error:focus,
.modal-select.is-error:focus,
.modal-textarea.is-error:focus {
    border-color: rgba(245,87,108,0.95);
    box-shadow: 0 0 0 2px rgba(245,87,108,0.18);
}

.modal-field-error {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: #ff9aa5;
}

.modal-alert-error {
    padding: 10px 12px;
    background: rgba(245,87,108,0.15);
    border: 1px solid rgba(245,87,108,0.22);
    border-radius: 12px;
    color: #ffb3bc;
    font-size: 13px;
    margin-bottom: 12px;
}

.modal-textarea {
    resize: vertical;
    min-height: 80px;
}

.modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-footer--stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.modal-footer-actions {
    display: flex;
    gap: 10px;
}
.modal-alert-error--footer {
    margin-bottom: 0;
}
.modal-btn {
    flex: 1;
    padding: 0 24px;
    height: 40px;
    border: none;
    border-radius: 18px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    line-height: 1;
}
.modal-btn:active { opacity: 0.7; }
.modal-btn-primary {
    background: #930400;
    color: #fff;
}
.modal-btn-primary:hover { background: #b00500; }
.modal-btn-primary--gold {
    background: linear-gradient(180deg, #e8c547 0%, #c9a227 100%);
    color: #0d0d0d;
    box-shadow: 0 10px 22px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.modal-btn-primary--gold:hover {
    filter: brightness(1.02);
}
.modal-btn-secondary {
    background: #5c5c5c;
    color: #fff;
    border: none;
}

/* CreateGameModal (React) layout helpers */
.cg-stepper {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: 0 0 16px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.cg-stepper__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
}
.cg-stepper__item:active { opacity: 0.85; }
.cg-stepper__item.is-active {
    background: rgba(255, 215, 0, 0.12);
    color: #f5d97a;
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35);
}
.cg-stepper__item.is-done {
    color: #9afcb0;
}
.cg-stepper__num {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bounded', var(--srp-font);
    font-size: 11px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
}
.cg-stepper__item.is-active .cg-stepper__num {
    background: linear-gradient(180deg, #e0c56f 0%, #caa24a 100%);
    color: #101010;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.cg-stepper__item.is-done .cg-stepper__num {
    background: rgba(110, 210, 130, 0.18);
    color: #b4ffc6;
}
.cg-stepper__title {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
@media (max-width: 380px) {
    .cg-stepper__title { display: none; }
}

.cg-section {
    margin-top: 14px;
    margin-bottom: 10px;
}
.cg-section-title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.70);
    padding-left: 2px;
}
.cg-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
@media (max-width: 420px) {
    .cg-grid-2 { grid-template-columns: 1fr; }
}

.cg-pay-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.cg-pay-card__title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #e7c86a;
    margin-bottom: 10px;
}
.cg-pay-card .cg-grid-2 { margin-bottom: 0; }
.cg-pay-card__note {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 8px;
    line-height: 1.3;
}
.cg-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cg-help {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
    line-height: 1.25;
}

.cg-hint {
    display: inline-flex;
    position: relative;
    margin-left: 6px;
    vertical-align: baseline;
}
.cg-hint__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.32);
    background: rgba(255, 215, 0, 0.08);
    color: rgba(255, 215, 0, 0.92);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.cg-hint__btn:active { opacity: 0.85; }
.cg-hint__bubble {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 5;
    min-width: 220px;
    max-width: min(320px, 80vw);
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(20, 20, 20, 0.98);
    border: 1px solid rgba(255, 215, 0, 0.25);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
}
/* Portal-вариант пузырька — рендерится в document.body, чтобы не клиппился
   overflow:hidden родительских контейнеров (модалок). Координаты top/left
   проставляются inline-стилем из JSX. z-index должен быть > чем у модалки
   (.modal-overlay использует z-index: 9999). */
.cg-hint__bubble--portal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    min-width: 0;
    max-width: 320px;
    cursor: pointer;
}
.cg-mini-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.22);
    background: rgba(255, 215, 0, 0.10);
    color: rgba(255, 215, 0, 0.92);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cg-mini-btn:active { opacity: 0.85; }
.cg-mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cg-icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cg-icon-preview {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    overflow: hidden;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cg-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Per-game icon scale editor (toggle button + inline slider panel) */
.cg-icon-scale {
    margin-top: 10px;
}
.cg-icon-scale-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.92);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.cg-icon-scale-btn:hover,
.cg-icon-scale-btn:focus-visible {
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.85);
    outline: none;
}
.cg-icon-scale-btn-value {
    color: #d4af37;
    font-variant-numeric: tabular-nums;
}
.cg-icon-scale-panel {
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.32);
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cg-icon-scale-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.cg-icon-scale-panel-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.cg-icon-scale-panel-value {
    font-size: 16px;
    font-weight: 800;
    color: #d4af37;
    font-variant-numeric: tabular-nums;
}
.cg-icon-scale-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.cg-icon-scale-preview-stage {
    width: 100%;
    height: 168px;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: linear-gradient(165deg, #0d0d0d 0%, #050505 52%, #0a0a0a 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cg-icon-scale-preview-img {
    width: min(100%, 240px);
    max-height: 152px;
    object-fit: contain;
    transition: transform 80ms linear;
    filter:
        drop-shadow(0 0 14px rgba(212, 175, 55, 0.18))
        drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}
.cg-icon-scale-preview-caption {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}
.cg-icon-scale-slider {
    width: 100%;
    accent-color: #d4af37;
}
.cg-icon-scale-panel-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.cg-icon-scale-cancel,
.cg-icon-scale-apply {
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.cg-icon-scale-cancel {
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
}
.cg-icon-scale-cancel:hover,
.cg-icon-scale-cancel:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}
.cg-icon-scale-apply {
    border: 1px solid transparent;
    background: linear-gradient(180deg, #e9cf6e 0%, #d4af37 60%, #b08c28 100%);
    color: #1a1410;
}
.cg-icon-scale-apply:hover,
.cg-icon-scale-apply:focus-visible {
    filter: brightness(1.05);
    outline: none;
}

.cg-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cg-step-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 32px;
    gap: 10px;
    align-items: center;
}
@media (max-width: 420px) {
    .cg-step-row { grid-template-columns: 1fr 1fr; }
}

.cg-bonuses {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cg-bonus-row {
    display: grid;
    grid-template-columns: 1fr 32px;
    gap: 10px;
    align-items: center;
}

.cg-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cg-icon-btn:active { opacity: 0.85; transform: translateY(1px); }

.cg-check {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    cursor: pointer;
}
.cg-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: rgba(255, 215, 0, 0.92);
}
.cg-check span {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
}
.modal .radio-label,
.modal .radio-label span {
    color: #ffffff;
}
.modal input[type="radio"],
.modal input[type="checkbox"] {
    accent-color: #2481cc;
}

/* Модалка «уведомление» (showAlertModal) — в стиле приложения */
.app-alert-modal {
    background: var(--app-modal-bg) !important;
    border: 1px solid var(--app-modal-border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    width: 100% !important;
    max-width: 340px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.app-alert-modal .app-alert-modal-message {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: 20px;
}

.app-alert-modal .app-alert-modal-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: var(--app-modal-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.app-alert-modal .app-alert-modal-btn:hover,
.app-alert-modal .app-alert-modal-btn:active {
    background: var(--app-modal-accent-hover);
}

/* Модалка «Оплата» — общий стиль приложения, контрастный и читаемый */
.modal--payment .modal-title {
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #ffffff;
}
.modal--payment .modal-close {
    color: #ffffff;
}
.modal--payment .payment-amount-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
}
.modal--payment .payment-amount-value {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
}
.modal--payment .payment-balance {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.modal--payment .payment-btn-balance {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, #b30000 0%, #6f0000 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(160, 0, 0, 0.22);
    -webkit-tap-highlight-color: transparent;
}
.modal--payment .payment-btn-balance:active {
    opacity: 0.95;
    transform: translateY(1px);
}
.modal--payment .payment-btn-balance:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.modal--payment .payment-balance-hint {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}
.modal--payment .payment-section-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
}
.modal--payment .payment-requisites-box {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.modal--payment .payment-proof-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 10px;
    line-height: 1.4;
}
.modal--payment .payment-proof-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    box-sizing: border-box;
}
.modal--payment .payment-proof-input::file-selector-button {
    padding: 8px 12px;
    margin-right: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}
.modal--payment .payment-proof-filename {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.modal--payment .payment-alert {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
}
.modal--payment .payment-alert--warning {
    background: rgba(255, 152, 0, 0.2);
    color: #fff;
}
.modal--payment .payment-alert--pending {
    background: rgba(255, 152, 0, 0.15);
    color: #fff;
}
.modal--payment .modal-btn-primary {
    background: linear-gradient(180deg, #b30000 0%, #6f0000 100%);
    color: #ffffff;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(160, 0, 0, 0.2);
}
.modal--payment .modal-btn-primary:active {
    opacity: 0.95;
    transform: translateY(1px);
}
.modal--payment .modal-btn-secondary {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.modal--payment .modal-footer {
    gap: 10px;
}

.modal--finance-ops {
    max-width: 560px;
}

.modal--finance-ops .modal-body {
    padding-top: 16px;
}

.finance-ops-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.62);
}

.finance-ops-segment {
    width: 100%;
    display: flex;
}

.finance-ops-segment .admin-segment-btn {
    flex: 1;
}

.finance-ops-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
}

.finance-ops-toggle input {
    width: 16px;
    height: 16px;
}

.finance-ops-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.finance-ops-summary-card {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.finance-ops-summary-label {
    font-size: 12px;
    color: rgba(255,255,255,0.52);
    margin-bottom: 6px;
}

.finance-ops-summary-value {
    font-size: 18px;
    font-weight: 800;
}

.finance-ops-summary-value--positive {
    color: #7CFF95;
}

.finance-ops-summary-value--negative {
    color: #ffb0b0;
}

.finance-ops-empty {
    padding: 18px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.52);
    font-size: 13px;
}

.finance-ops-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 52vh;
    overflow-y: auto;
}

.finance-ops-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.finance-ops-row.is-deleted {
    opacity: 0.58;
}

.finance-ops-row-main {
    flex: 1;
    min-width: 0;
}

.finance-ops-row-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}

.finance-ops-row.is-deleted .finance-ops-row-title,
.finance-ops-row.is-deleted .finance-ops-amount {
    text-decoration: line-through;
}

.finance-ops-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
    font-size: 11px;
    color: rgba(255,255,255,0.34);
}

.finance-ops-deleted-note {
    font-size: 10px;
    color: rgba(255,152,0,0.9);
    margin-top: 6px;
    line-height: 1.35;
}

.finance-ops-amount {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
}

@media (max-width: 560px) {
    .finance-ops-summary {
        grid-template-columns: 1fr;
    }
}

.admin-finance-page {
    gap: 14px;
}

.admin-finance-page .admin-finance-toolbar {
    margin-top: -2px;
}

.admin-finance-page .admin-finance-tabs.admin-segment {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    border-color: rgba(212, 175, 55, 0.16);
    background:
        radial-gradient(200px 90px at 12% 20%, rgba(212, 175, 55, 0.08), transparent 58%),
        rgba(12, 12, 14, 0.72);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.admin-finance-page .admin-finance-tabs.admin-segment::-webkit-scrollbar {
    display: none;
}

.admin-finance-page .admin-finance-tabs .admin-segment-btn {
    padding: 0 16px;
    white-space: nowrap;
}

.admin-finance-page .admin-finance-tabs .admin-segment-btn.is-active {
    color: rgba(255, 252, 235, 0.98);
    background:
        radial-gradient(120px 70px at 50% 0%, rgba(212, 175, 55, 0.22), transparent 72%),
        rgba(255, 255, 255, 0.07);
    box-shadow:
        inset 0 -2px 0 rgba(212, 175, 55, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.finance-players-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(220px 140px at 10% 10%, rgba(212, 175, 55, 0.08), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.finance-players-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 2px 6px;
}

.finance-players-summary-divider {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.03) 100%);
}

.finance-players-summary-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.finance-players-summary-icon svg {
    width: 20px;
    height: 20px;
}

.finance-players-summary-icon--players {
    color: rgba(255, 209, 93, 0.98);
    background: rgba(255, 193, 7, 0.08);
}

.finance-players-summary-icon--debtors {
    color: rgba(255, 110, 110, 0.98);
    background: rgba(255, 90, 90, 0.08);
}

.finance-players-summary-icon--amount {
    color: rgba(117, 240, 142, 0.98);
    background: rgba(76, 175, 80, 0.08);
}

.finance-players-summary-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.finance-players-summary-value {
    font-size: 16px;
    line-height: 1.1;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.98);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-players-summary-caption {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-players-summary-extra {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-players-summary-extra--danger {
    color: rgba(255, 110, 110, 0.98);
}

.finance-players-stack {
    display: grid;
    gap: 12px;
}

.finance-analytics-stack {
    display: grid;
    gap: 12px;
}

.finance-analytics-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.finance-analytics-period-segment.admin-segment {
    flex: 1 1 320px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.finance-analytics-period-segment.admin-segment::-webkit-scrollbar {
    display: none;
}

.finance-analytics-period-segment .admin-segment-btn {
    white-space: nowrap;
}

.finance-analytics-branch-toggle {
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(18, 18, 18, 0.55);
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.finance-analytics-branch-toggle-icon {
    width: 14px;
    height: 14px;
    color: rgba(255, 215, 120, 0.92);
    transition: transform 160ms ease;
}

.finance-analytics-branch-toggle.is-open .finance-analytics-branch-toggle-icon {
    transform: rotate(180deg);
}

.finance-analytics-branch-toggle-icon svg {
    width: 100%;
    height: 100%;
}

.finance-analytics-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.finance-analytics-date-field {
    position: relative;
    flex: 1 1 180px;
    min-width: 0;
}

.finance-analytics-date-input.admin-input {
    padding-right: 40px;
}

.finance-analytics-date-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.45);
    transform: translateY(-50%);
    pointer-events: none;
}

.finance-analytics-date-icon svg {
    width: 100%;
    height: 100%;
}

.finance-analytics-date-sep {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 700;
}

.finance-analytics-branches-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
}

.finance-analytics-branches-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.finance-analytics-branches-hint {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.56);
}

.finance-analytics-branches-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.finance-analytics-branch-chip {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 700;
}

.finance-analytics-branch-chip.is-active {
    border-color: rgba(212, 175, 55, 0.34);
    color: rgba(255, 250, 225, 0.98);
    background: rgba(212, 175, 55, 0.1);
}

.finance-analytics-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    padding: 12px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(220px 140px at 10% 10%, rgba(212, 175, 55, 0.06), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.finance-analytics-summary-item {
    min-width: 0;
    padding: 4px 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.finance-analytics-summary-divider {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.03) 100%);
}

.finance-analytics-summary-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
}

.finance-analytics-summary-icon svg {
    width: 18px;
    height: 18px;
}

.finance-analytics-summary-icon--players {
    color: rgba(255, 209, 93, 0.98);
}

.finance-analytics-summary-icon--debtors {
    color: rgba(255, 110, 110, 0.98);
}

.finance-analytics-summary-icon--amount {
    color: rgba(117, 240, 142, 0.98);
}

.finance-analytics-summary-icon--neutral {
    color: rgba(240, 240, 240, 0.9);
}

.finance-analytics-summary-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.finance-analytics-summary-value {
    font-size: 14px;
    line-height: 1.15;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.98);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-analytics-summary-caption {
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.62);
}

.finance-analytics-summary-extra {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
}

.finance-analytics-summary-extra--danger {
    color: rgba(255, 110, 110, 0.98);
}

.finance-analytics-kpi-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 2px 0 4px;
}

.finance-analytics-kpi-item {
    min-width: 0;
    padding: 6px 10px 0;
}

.finance-analytics-kpi-value {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.98);
}

.finance-analytics-kpi-caption {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.62);
}

.finance-analytics-kpi-divider {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.02) 100%);
}

.finance-analytics-section-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
}

.finance-analytics-section-title {
    font-size: 15px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.96);
}

.finance-analytics-list {
    display: grid;
    gap: 0;
}

.finance-analytics-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.finance-analytics-row:first-child {
    border-top: 0;
}

.finance-analytics-row-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.finance-analytics-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.finance-analytics-row-icon svg {
    width: 22px;
    height: 22px;
}

.finance-analytics-row-icon--method {
    color: rgba(117, 240, 142, 0.98);
    background: rgba(76, 175, 80, 0.1);
}

.finance-analytics-row-icon--branch {
    color: rgba(255, 209, 93, 0.98);
    background: rgba(212, 175, 55, 0.1);
}

.finance-analytics-row-copy {
    min-width: 0;
}

.finance-analytics-row-title {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.97);
}

.finance-analytics-row-meta {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.56);
}

.finance-analytics-row-tail {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.finance-analytics-row-amount {
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.finance-analytics-row-amount--ok {
    color: rgba(117, 240, 142, 0.98);
}

.finance-analytics-row-amount--warn {
    color: rgba(255, 212, 124, 0.98);
}

.finance-analytics-row-chevron {
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.34);
    user-select: none;
}

button.finance-analytics-row.finance-analytics-row--clickable {
    width: 100%;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin: 0;
    padding: 12px 0;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    transition: background 140ms ease, transform 100ms ease;
}
button.finance-analytics-row.finance-analytics-row--clickable:first-child {
    border-top: 0;
}
button.finance-analytics-row.finance-analytics-row--clickable:hover {
    background: rgba(255, 255, 255, 0.03);
}
button.finance-analytics-row.finance-analytics-row--clickable:hover .finance-analytics-row-chevron {
    color: rgba(255, 215, 0, 0.78);
}
button.finance-analytics-row.finance-analytics-row--clickable:active {
    transform: translateY(1px);
}
button.finance-analytics-row.finance-analytics-row--clickable:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.42);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Finance: Method games drill-down modal */
.finance-method-games-modal.admin-modal { z-index: 1200; }
.finance-method-games-modal__panel {
    max-width: min(520px, 100%);
    max-height: min(82vh, 720px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.finance-method-games-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.finance-method-games-summary-item {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 18, 20, 0.55);
    padding: 10px 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.finance-method-games-summary-num {
    font-family: 'Bounded', var(--srp-font);
    font-size: 16px;
    font-weight: 700;
    color: rgba(170, 235, 180, 0.98);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.finance-method-games-summary-item:nth-child(2) .finance-method-games-summary-num,
.finance-method-games-summary-item:nth-child(3) .finance-method-games-summary-num {
    color: rgba(255, 255, 255, 0.96);
}
.finance-method-games-summary-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.finance-method-games-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}
.finance-method-games-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.94);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.finance-method-games-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 215, 0, 0.20);
}
.finance-method-games-row:active { transform: translateY(1px); }
.finance-method-games-row:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.45);
    outline-offset: 2px;
}
.finance-method-games-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.finance-method-games-row-name {
    font-size: 14px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.98);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.finance-method-games-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}
.finance-method-games-row-dot { color: rgba(255, 255, 255, 0.22); font-weight: 700; }
.finance-method-games-row-status {
    text-transform: lowercase;
    color: rgba(255, 215, 130, 0.85);
}
.finance-method-games-row-sub {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.46);
}
.finance-method-games-row-tail {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.finance-method-games-row-amount {
    font-family: 'Bounded', var(--srp-font);
    font-size: 14px;
    font-weight: 700;
    color: rgba(170, 235, 180, 0.98);
    white-space: nowrap;
}
.finance-method-games-row-chevron {
    font-size: 20px;
    line-height: 1;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.32);
    user-select: none;
}
.finance-method-games-row:hover .finance-method-games-row-chevron {
    color: rgba(255, 215, 0, 0.78);
}

@media (max-width: 380px) {
    .finance-method-games-summary { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .finance-method-games-summary-item { padding: 8px 10px; }
    .finance-method-games-summary-num { font-size: 14px; }
    .finance-method-games-row { padding: 10px 12px; }
}

.finance-players-search-wrap {
    position: relative;
    display: block;
}

.finance-players-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.42);
    transform: translateY(-50%);
    pointer-events: none;
}

.finance-players-search-icon svg {
    width: 100%;
    height: 100%;
}

.finance-players-search-input.admin-input {
    padding-left: 46px;
}

.finance-players-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.finance-players-chip-group {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.finance-players-chip-group::-webkit-scrollbar {
    display: none;
}

.finance-players-chip {
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(18, 18, 18, 0.55);
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 120ms ease, opacity 120ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.finance-players-chip:active {
    opacity: 0.9;
    transform: translateY(1px);
}

.finance-players-chip.is-active {
    border-color: rgba(212, 175, 55, 0.36);
    color: rgba(255, 252, 235, 0.98);
    background:
        radial-gradient(140px 90px at 18% 18%, rgba(212, 175, 55, 0.18), transparent 64%),
        rgba(255, 255, 255, 0.06);
}

.finance-players-chip-amount {
    color: rgba(255, 110, 110, 0.98);
}

.finance-players-sort-wrap {
    position: relative;
    flex: 0 0 auto;
    min-width: 170px;
}

.finance-players-sort-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 38px;
    padding: 0 38px 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.26);
    background:
        radial-gradient(160px 90px at 18% 18%, rgba(212, 175, 55, 0.12), transparent 64%),
        rgba(18, 18, 18, 0.55);
    color: rgba(255, 236, 184, 0.98);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 800;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    outline: none;
    cursor: pointer;
}

.finance-players-sort-select:focus {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.32),
        0 0 0 4px rgba(212, 175, 55, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.finance-players-sort-icon {
    position: absolute;
    right: 13px;
    top: 50%;
    width: 16px;
    height: 16px;
    color: rgba(255, 215, 120, 0.92);
    transform: translateY(-50%);
    pointer-events: none;
}

.finance-players-sort-icon svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 720px) {
    .finance-players-summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .finance-players-summary-divider {
        width: 100%;
        height: 1px;
    }

    .finance-players-sort-wrap {
        width: 100%;
    }

    .finance-analytics-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .finance-analytics-summary-divider {
        display: none;
    }

    .finance-analytics-kpi-strip {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .finance-analytics-kpi-divider {
        display: none;
    }

    .finance-analytics-branch-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .finance-analytics-date-sep {
        display: none;
    }
}

/* Profile Page */
.profile-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #121111 0%, #191612 38%, #100f0d 100%);
    font-family: var(--srp-font);
}
.profile-page--modern {
    position: relative;
    overflow: hidden;
    background: url('/img/profile-poker-room-bg.png') center top / cover no-repeat !important;
    /* top подобран так, чтобы при transform:scale(1.4) c origin:right bottom видимая
       верхушка фигуры (= голова) садилась чуть ниже плашки хедера независимо от высоты
       вьюпорта. Формула: T = 100 + 0.3·H ⇒ scaled_top ≈ 150px при любом H. */
    --profile-preview-figure-top: calc(100px + 30vh);
}
.profile-page--modern::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 1;
}
.modern-profile-hero {
    position: relative;
    z-index: 4;
}
.profile-page-modern-stack {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: min(calc(100% - 24px), 460px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: profile-preview-top-enter 500ms cubic-bezier(0.2, 0.9, 0.2, 1) 80ms both;
}
.profile-page-modern-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
    border: 1px solid rgba(212, 175, 55, 0.20);
    background: linear-gradient(180deg, rgba(28, 24, 20, 0.94) 0%, rgba(20, 17, 14, 0.88) 100%);
    backdrop-filter: blur(14px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 22px rgba(0, 0, 0, 0.28);
}
.profile-page-modern-avatar {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-page-modern-avatar .srp-avatar {
    width: 52px;
    height: 52px;
    border-width: 2px;
    border-color: rgba(212, 175, 55, 0.85);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.10);
}
.profile-page-modern-avatar .srp-avatar-inner {
    inset: 3px;
}
.profile-page-modern-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-page-modern-id-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.profile-page-modern-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
}
.profile-page-modern-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-page-modern-games-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(212,175,55,0.22);
    background: linear-gradient(180deg, rgba(36,28,16,0.85) 0%, rgba(24,19,12,0.75) 100%);
    color: #f1d26d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}
.profile-page-modern-games-badge:active {
    opacity: 0.88;
    transform: translateY(1px);
}
.profile-page-modern-games-badge-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f0c84f;
}
.profile-page-modern-games-badge-value {
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    color: #fff4c2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.profile-page-coins-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 7, 6, 0.72);
    backdrop-filter: blur(10px);
}
.profile-page-coins-modal {
    width: min(100%, 380px);
    border-radius: 22px;
    border: 1px solid rgba(212,175,55,0.22);
    background: linear-gradient(180deg, rgba(31,27,24,0.98) 0%, rgba(20,17,15,0.96) 100%);
    box-shadow: 0 24px 54px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    color: #fff;
    overflow: hidden;
}
.profile-page-coins-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 14px;
}
.profile-page-coins-modal-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, rgba(255,220,120,0.24), rgba(102,74,9,0.2));
    color: #f0c84f;
    border: 1px solid rgba(212,175,55,0.24);
}
.profile-page-coins-modal-title {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
}
.profile-page-coins-modal-balance {
    margin-top: 4px;
    color: rgba(241,210,109,0.9);
    font-size: 13px;
    font-weight: 700;
}
.profile-page-coins-modal-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.76);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.profile-page-coins-modal-body {
    padding: 0 18px 18px;
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    line-height: 1.55;
}
.profile-page-coins-modal-body p {
    margin: 0;
}
.profile-page-coins-modal-body p + p {
    margin-top: 10px;
}
.profile-page-modern-edit-btn {
    width: 32px;
    height: 32px;
    margin-left: 0;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid rgba(212,175,55,0.28);
    background: linear-gradient(180deg, rgba(29,23,17,0.84) 0%, rgba(18,15,11,0.7) 100%);
    color: #e6d38a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 10px rgba(0,0,0,0.18);
    backdrop-filter: blur(12px);
}
.profile-page-modern-edit-btn:active {
    opacity: 0.88;
}
.profile-page-modern-chips-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.modern-profile-hero--stacked {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 6px auto 6px;
}
.modern-profile-hero--stacked .profile-page-modern-stack {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
    animation: none;
}
/* Два FAB на экране профиля: рефералка выше, друзья ниже */
.profile-page-modern-profile-fabs {
    position: fixed;
    right: 18px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}
.profile-page-modern-friends-fab {
    position: static;
    right: auto;
    bottom: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #e8c256;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}
.profile-page-modern-friends-fab--referral .profile-page-modern-friends-fab-label {
    max-width: 100px;
}
@keyframes friends-fab-disk-pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0 rgba(232, 194, 86, 0));
    }
    50% {
        transform: scale(1.075);
        filter: brightness(1.12) drop-shadow(0 0 12px rgba(232, 194, 86, 0.28));
    }
}

@keyframes friends-fab-label-pulse {
    0%, 100% {
        opacity: 0.82;
    }
    50% {
        opacity: 1;
    }
}

.profile-page-modern-friends-fab-disk {
    width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: transform 0.12s ease;
    animation: friends-fab-disk-pulse 2.8s ease-in-out infinite;
    will-change: transform;
}
.profile-page-modern-friends-fab-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
}
.profile-page-modern-friends-fab-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-top: 0;
    padding-top: 0;
    max-width: 92px;
    white-space: normal;
    text-align: center;
    color: rgba(232, 194, 86, 0.92);
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    animation: friends-fab-label-pulse 2.8s ease-in-out infinite;
}
.profile-page-modern-friends-fab:active .profile-page-modern-friends-fab-disk {
    transform: translateY(1px) scale(0.96);
    animation: none;
}
.profile-page-modern-friends-fab:active .profile-page-modern-friends-fab-label {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .profile-page-modern-friends-fab-disk,
    .profile-page-modern-friends-fab-label {
        animation: none !important;
    }
}
.profile-page-modern-debt-badge {
    position: fixed;
    left: 18px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    min-width: 96px;
    max-width: min(calc(100vw - 116px), 144px);
    padding: 10px 12px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-radius: 18px;
    border: 1px solid rgba(232, 194, 86, 0.28);
    background: linear-gradient(180deg, rgba(19,16,14,0.92) 0%, rgba(11,10,9,0.82) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
}
.profile-page-modern-debt-badge.is-debt {
    border-color: rgba(255, 126, 103, 0.42);
    background: linear-gradient(180deg, rgba(58,18,13,0.94) 0%, rgba(28,11,10,0.86) 100%);
}
.profile-page-modern-debt-badge.is-clear {
    border-color: rgba(126, 211, 142, 0.34);
    background: linear-gradient(180deg, rgba(18,38,22,0.92) 0%, rgba(11,20,12,0.84) 100%);
}
.profile-page-modern-debt-badge-title {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 2px rgba(0,0,0,0.32);
}
.profile-page-modern-debt-badge-value {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
    color: #f7d97b;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.profile-page-modern-chip {
    border-radius: 14px;
    border: 1px solid rgba(212,175,55,0.18);
    background: linear-gradient(180deg, rgba(18,15,13,0.78) 0%, rgba(12,10,9,0.66) 100%);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 14px rgba(0,0,0,0.16);
    padding: 0 10px;
    min-height: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-page-modern-chip-button {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    cursor: default;
}
.profile-page-modern-chip-button.is-clickable {
    cursor: pointer;
}
.profile-page-modern-chip-button.is-clickable:active {
    transform: translateY(1px);
}
.profile-page-modern-chip-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.profile-page-modern-chip-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(230, 211, 138, 0.85);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
}
.profile-page-modern-chip--tone-games .profile-page-modern-chip-icon {
    color: #6ee29a;
    background: linear-gradient(180deg, rgba(95,210,140,0.18) 0%, rgba(43,128,80,0.18) 100%);
    border-color: rgba(110, 226, 154, 0.28);
}
.profile-page-modern-chip--tone-seasons .profile-page-modern-chip-icon {
    color: #b89dff;
    background: linear-gradient(180deg, rgba(157,127,255,0.20) 0%, rgba(86,62,168,0.20) 100%);
    border-color: rgba(180, 156, 255, 0.30);
}
.profile-page-modern-chip-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(230, 211, 138, 0.82);
    line-height: 1;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-page-modern-chip-value {
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Профильный hero — без плашки/контейнера: текстовый заголовок «Привет, ник 👋»
   в одну строку, ниже мелкий сабтайтл с инфой об играх/сезонах, справа outlined-
   пиллы Edit + Stats. По умолчанию — обычный блок в потоке (для главной).
   Внутри `.profile-page--modern` — абсолютное позиционирование над фоном. */
.profile-hero {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 460px;
    margin: 4px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.profile-page--modern .profile-hero {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 36px), 460px);
    max-width: none;
    margin: 0;
    animation: profile-preview-top-enter 500ms cubic-bezier(0.2, 0.9, 0.2, 1) 80ms both;
}
.profile-hero-text {
    flex: 1 1 auto;
    min-width: 0;
}
.profile-hero-title {
    margin: 0;
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-hero-title-greeting {
    color: #fff;
}
.profile-hero-title-name {
    color: #d4af37;
}
.profile-hero-title-crown {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 0;
}
.profile-hero-title-wave {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    line-height: 1;
    margin-left: 4px;
}
.profile-hero-subtitle {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.profile-hero-subtitle-link {
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.38);
    padding: 2px 9px;
    margin: 0;
    border-radius: 999px;
    color: #f1d37a;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.profile-hero-subtitle-link::after {
    content: '›';
    font-size: 14px;
    line-height: 1;
    color: rgba(241, 211, 122, 0.7);
    margin-left: 1px;
    transform: translateY(-1px);
}
.profile-hero-subtitle-link:hover,
.profile-hero-subtitle-link:focus-visible {
    background: rgba(212, 175, 55, 0.22);
    border-color: rgba(212, 175, 55, 0.62);
    color: #fbe6a0;
    outline: none;
}
.profile-hero-subtitle-link:active {
    transform: scale(0.97);
}
.profile-hero-subtitle-sep {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 2px;
}
.profile-hero-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    align-self: center;
    margin-top: 2px;
}
.profile-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    background: transparent;
    color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    flex-shrink: 0;
    line-height: 1;
}
.profile-hero-pill:active {
    opacity: 0.85;
    transform: translateY(1px);
}
.profile-hero-pill--edit,
.profile-hero-pill--stats {
    width: 38px;
    padding: 0;
    justify-content: center;
}
.profile-hero-pill--edit svg {
    color: #e6d38a;
}
.profile-hero-pill--stats svg {
    color: #f0c84f;
}

/* Страница «Мои игры» (/profile/games) */
.my-games-page {
    padding: 8px 12px 90px;
    max-width: 100%;
    box-sizing: border-box;
    color: #fff;
}
.my-games-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 4px 0;
}
.my-games-back-btn {
    position: static;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.my-games-back-btn:active { opacity: 0.7; }
.my-games-title {
    margin: 0;
    font-family: 'Bounded', var(--srp-font);
    font-size: clamp(18px, 4.8vw, 22px);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.96);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.my-games-muted {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}
.my-games-alert {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(245, 87, 108, 0.14);
    border: 1px solid rgba(245, 87, 108, 0.35);
    color: #ffb3bc;
    font-size: 14px;
}
.my-games-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.my-games-card {
    width: 100%;
    margin: 0;
    padding: 14px 14px 12px;
    border-radius: 18px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: linear-gradient(180deg, rgba(28, 26, 22, 0.95) 0%, rgba(14, 13, 11, 0.98) 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    font: inherit;
    box-sizing: border-box;
    transition: transform 120ms ease, border-color 160ms ease, opacity 120ms ease;
}
.my-games-card:active {
    transform: scale(0.99);
    opacity: 0.94;
}
.my-games-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.my-games-card-name {
    font-weight: 800;
    font-size: 15px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.95);
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.my-games-card-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.72);
}
.my-games-card-badge--completed {
    border-color: rgba(110, 200, 140, 0.45);
    color: rgba(170, 235, 190, 0.95);
}
.my-games-card-badge--active {
    border-color: rgba(212, 175, 55, 0.5);
    color: #f5e0b2;
}
.my-games-card-badge--upcoming {
    border-color: rgba(120, 170, 255, 0.4);
    color: rgba(190, 210, 255, 0.92);
}
.my-games-card-badge--cancelled {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.45);
}
.my-games-card-date {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}
.my-games-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.my-games-stat {
    padding: 8px 8px 6px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.my-games-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(230, 211, 138, 0.65);
    margin-bottom: 4px;
}
.my-games-stat-value {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.92);
}

/* Реферальный блок внизу /profile: заголовок + пилл-кнопка. Заменяет правый floating FAB. */
.profile-page-referral-block {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 32px), 460px);
    bottom: calc(128px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: none;
    animation: profile-referral-block-enter 600ms cubic-bezier(0.2, 0.9, 0.2, 1) 220ms both;
}
.profile-page-referral-title {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0.005em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}
.profile-page-referral-title-accent {
    display: inline-block;
    color: #f1c84f;
    text-shadow: none;
}
/* Анимация акцентного слова включается, только когда у заголовка стоит модификатор --animated. */
.profile-page-referral-title--animated .profile-page-referral-title-accent {
    background: linear-gradient(
        90deg,
        #c08a1f 0%,
        #f1c84f 25%,
        #fff8d0 45%,
        #ffffff 50%,
        #fff8d0 55%,
        #f1c84f 75%,
        #c08a1f 100%
    );
    background-size: 240% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation:
        profile-referral-accent-shimmer 4.5s linear infinite,
        profile-referral-accent-glow 5s ease-in-out infinite;
    will-change: background-position, filter, transform;
}
@keyframes profile-referral-accent-shimmer {
    0% { background-position: 240% center; }
    100% { background-position: -140% center; }
}
@keyframes profile-referral-accent-glow {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(241, 200, 79, 0.22));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(241, 200, 79, 0.4)) drop-shadow(0 0 10px rgba(255, 240, 180, 0.22));
        transform: scale(1.01);
    }
}
@media (prefers-reduced-motion: reduce) {
    .profile-page-referral-title--animated .profile-page-referral-title-accent {
        animation: none;
        -webkit-text-fill-color: #f1c84f;
        color: #f1c84f;
        filter: none;
        transform: none;
    }
}
.profile-page-referral-pill {
    pointer-events: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: 100%;
    height: 56px;
    padding: 0 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(28, 24, 20, 0.94) 0%, rgba(18, 15, 12, 0.92) 100%);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    text-align: left;
}
.profile-page-referral-pill:active {
    transform: translateY(1px);
}
.profile-page-referral-pill-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f1c84f;
}
.profile-page-referral-pill-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-page-referral-pill-chevron {
    flex-shrink: 0;
    color: rgba(241, 200, 79, 0.85);
}
@keyframes profile-referral-block-enter {
    0% { opacity: 0; transform: translate(-50%, 20px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}
/* На странице чужого профиля внизу — строка из двух пилюль (друзья + управление). */
.profile-page-referral-block--actions-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
}
.profile-page-referral-block--actions-row .profile-page-referral-pill {
    align-self: stretch;
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 0 12px;
    gap: 8px;
}
.profile-page-referral-block--actions-row .profile-page-referral-pill-label {
    font-size: 14px;
}
.profile-page-referral-pill--admin-menu {
    border-color: rgba(212, 175, 55, 0.32);
    color: #f1c84f;
}
.profile-page-referral-pill--admin-menu .profile-page-referral-pill-label {
    color: #f1c84f;
}
/* Компактная инфо-строка «Долг по играм» в профиле игрока — не делит ряд
   с action-кнопками (Удалить из друзей / Управление), поэтому текст не
   обрезается. Кликабельна — открывает ту же модалку, что в админ-списке. */
.profile-page-debt-row {
    position: fixed;
    left: 14px;
    right: 14px;
    /* Над action-row (bottom: 128 + pill ~56 = 184) с зазором. */
    bottom: 196px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(232, 168, 64, 0.45);
    background: rgba(232, 168, 64, 0.10);
    color: #ffd58a;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.profile-page-debt-row:hover,
.profile-page-debt-row:focus-visible {
    background: rgba(232, 168, 64, 0.16);
    border-color: rgba(232, 168, 64, 0.7);
    outline: none;
}
.profile-page-debt-row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(232, 168, 64, 0.18);
}
.profile-page-debt-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.profile-page-debt-row-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 213, 138, 0.7);
}
.profile-page-debt-row-value {
    font-size: 15px;
    font-weight: 700;
    color: #ffd58a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-page-debt-row-meta {
    font-weight: 500;
    color: rgba(255, 213, 138, 0.78);
}
.profile-page-debt-row-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 213, 138, 0.65);
}

/* Меню «Управление» — центрированная модалка с админ-действиями. */
.player-admin-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    animation: player-admin-menu-fade 160ms ease-out;
}
@keyframes player-admin-menu-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.player-admin-menu {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 48px);
    background: linear-gradient(180deg, rgba(28, 24, 20, 0.98) 0%, rgba(18, 15, 12, 0.96) 100%);
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: player-admin-menu-pop 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes player-admin-menu-pop {
    0% { opacity: 0; transform: scale(0.94); }
    100% { opacity: 1; transform: scale(1); }
}
.player-admin-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.player-admin-menu-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
}
.player-admin-menu-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.player-admin-menu-close:active { opacity: 0.7; }
.player-admin-menu-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.player-admin-menu-item {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
}
.player-admin-menu-item:active { transform: translateY(1px); }
.player-admin-menu-item.is-danger {
    color: #ff8b8b;
    border-color: rgba(255, 110, 110, 0.18);
    background: rgba(255, 90, 90, 0.06);
}
@media (prefers-reduced-motion: reduce) {
    .profile-page-referral-block { animation: none; opacity: 1; }
}

/* Картинка персонажа задаётся inline (resolveProfileFigureImageUrl) — см. profileAssets.js */
.profile-page-preview-figure {
    position: absolute;
    left: auto;
    /* На узких экранах прижимаем фигуру к правому краю (16px), на широких —
       равняем правую границу фигуры по правому краю контейнера .srp-stage
       (max-width 400px, центрирован) с небольшим overhang ~30px.
       Формула: 50vw − 200 ⇒ figure_right ≈ stage_right + 30. */
    right: max(16px, calc(50vw - 200px));
    top: var(--profile-preview-figure-top, calc(78px + 34px + 180px));
    bottom: 0;
    width: min(96vw, 840px);
    height: auto;
    transform-origin: right bottom;
    transform: scale(1.4);
    background-position: right bottom;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: profile-preview-figure-enter 700ms cubic-bezier(0.2, 0.9, 0.2, 1) 120ms forwards;
}
@keyframes profile-preview-figure-enter {
    0% {
        opacity: 0;
        transform: translateY(42px) scale(1.28);
    }
    70% {
        opacity: 1;
        transform: translateY(-6px) scale(1.418);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1.4);
    }
}
@keyframes profile-preview-top-enter {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-18px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .profile-page-modern-top,
    .profile-page-modern-chips,
    .profile-page-preview-figure {
        opacity: 1;
        animation: none;
    }
}
.profile-page .srp-header-main {
    position: relative;
}
.profile-page .srp-header-bar {
    padding-right: 20px;
}
.srp-header-bar-top--with-edit {
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile-edit-pencil-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 6px;
}
.profile-edit-pencil-btn:hover,
.profile-edit-pencil-btn:focus-visible {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.profile-edit-pencil-btn:active { opacity: 0.85; }
.profile-edit-pencil-btn svg {
    flex-shrink: 0;
    display: block;
}
.profile-gear-btn {
    position: absolute;
    right: 10px;
    top: 12px;
    z-index: 10;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    background: #930400;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.profile-gear-btn:active { opacity: 0.85; }
.profile-gear-btn svg { flex-shrink: 0; }

/* Блок статистики профиля — 4 плашки без центрального hex */
.profile-rank-block {
    margin-top: 12px;
    padding: 0 12px 16px;
}
.profile-hex-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 0;
}
.profile-hex-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 0;
    padding: 0 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.profile-hex-stat-val {
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    flex-shrink: 0;
}
.profile-hex-stat-lbl {
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    line-height: 1.25;
    text-transform: lowercase;
    min-width: 0;
}
.profile-hex-stat--tl { grid-column: 1; grid-row: 1; }
.profile-hex-stat--bl { grid-column: 1; grid-row: 2; }
.profile-hex-stat--tr { grid-column: 2; grid-row: 1; }
.profile-hex-stat--br { grid-column: 2; grid-row: 2; }
@media (max-width: 360px) {
    .profile-hex-stats { gap: 8px; }
    .profile-hex-stat { min-height: 40px; padding: 0 12px; }
    .profile-hex-stat-val { font-size: 14px; }
    .profile-hex-stat-lbl { font-size: 12px; }
}

.profile-rating-tabs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 0 4px;
}
.profile-rating-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border: none;
    border-radius: 14px;
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
    transition: background 0.2s, opacity 0.2s;
}
.profile-rating-tab:hover { opacity: 0.95; }
.profile-rating-tab.active {
    background: #930400;
    box-shadow: 0 2px 8px rgba(147, 4, 0, 0.35);
}
.profile-rating-tab.profile-rating-tab--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.profile-rating-tab.profile-rating-tab--disabled:hover { opacity: 0.45; }
.profile-rating-tab-ico {
    flex-shrink: 0;
}

.profile-referral {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 0 4px;
}
.profile-referral-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.14);
}
.profile-referral-label {
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    flex-shrink: 0;
    min-width: 76px;
}
.profile-referral-value {
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-referral-btn {
    border: none;
    cursor: pointer;
    border-radius: 12px;
    padding: 8px 10px;
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #930400;
    box-shadow: 0 2px 8px rgba(147, 4, 0, 0.35);
    flex-shrink: 0;
}
.profile-referral-btn:active { opacity: 0.9; }

#profile-referral-section .profile-referral {
    margin-top: 0;
    padding: 0;
}
#profile-referral-section .profile-referral-row {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
}
#profile-referral-section .profile-referral-label {
    min-width: 92px;
}
#profile-referral-section .profile-referral-btn {
    padding: 7px 10px;
    border-radius: 999px;
    box-shadow: none;
}
#profile-referral-section .profile-referral-btn--primary {
    background: #930400;
}
#profile-referral-section .profile-referral-btn--ghost {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.95);
}
.profile-referral-split {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 2px 2px;
    opacity: 0.85;
}
.profile-referral-split-line {
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,0.10);
}
.profile-referral-split-title {
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.profile-referral-link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-referral-link-btn:active { opacity: 0.85; }
.profile-referral-hint {
    margin-top: 2px;
    padding: 0 4px;
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.25;
}

.fp-admin-referral-card {
    padding: 12px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.14);
}
.fp-admin-referral-line {
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.fp-admin-referral-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fp-admin-referral-chip {
    border: none;
    cursor: pointer;
    border-radius: 12px;
    padding: 10px 12px;
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: rgba(36,129,204,0.18);
    border: 1px solid rgba(36,129,204,0.35);
}
.fp-admin-referral-chip:active { opacity: 0.9; }
.fp-admin-referral-sum {
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    text-align: right;
}
.fp-admin-referral-hint {
    margin-top: 10px;
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.25;
}

/* ---- История игр (горизонтальный скролл) ---- */
.profile-history-section {
    margin-top: 20px;
    padding: 0 12px 24px;
}
.profile-history-title {
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
}
.profile-history-sep {
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);
    margin-bottom: 12px;
    border-radius: 1px;
}
.profile-tournament-context {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.14);
}
.profile-tournament-context .profile-tournament-select {
    width: 100%;
    margin: 0 0 8px;
    display: none;
}
.profile-tournament-name {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.profile-tournament-dates {
    margin-top: 4px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.2;
}
.profile-tournament-summary {
    margin-top: 10px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.profile-tournament-summary .pts {
    font-weight: 800;
    color: #fff;
}
.profile-tournament-summary .muted {
    color: rgba(255,255,255,0.65);
}
.profile-history-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
}
.profile-history-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 13px;
}
.profile-history-table th,
.profile-history-table td {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    text-align: left;
    white-space: nowrap;
}
.profile-history-table th {
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-weight: 600;
}
.profile-history-table td {
    background: #0d0d0d;
    color: #fff;
}
.profile-history-table th:nth-child(1),
.profile-history-table td:nth-child(1),
.profile-history-table th:nth-child(4),
.profile-history-table td:nth-child(4),
.profile-history-table th:nth-child(5),
.profile-history-table td:nth-child(5),
.profile-history-table th:nth-child(6),
.profile-history-table td:nth-child(6),
.profile-history-table th:nth-child(7),
.profile-history-table td:nth-child(7),
.profile-history-table th:nth-child(8),
.profile-history-table td:nth-child(8),
.profile-history-table th:nth-child(9),
.profile-history-table td:nth-child(9),
.profile-history-table th:nth-child(10),
.profile-history-table td:nth-child(10),
.profile-history-table th:nth-child(11),
.profile-history-table td:nth-child(11) {
    text-align: right;
}
.profile-history-table td.profile-history-delta--plus { color: #4caf50; font-weight: 600; }
.profile-history-table td.profile-history-delta--minus { color: #f44336; font-weight: 600; }
.profile-history-row--delta-plus td {
    background-image: linear-gradient(90deg, rgba(76,175,80,0.14) 0%, rgba(76,175,80,0.00) 65%);
}
.profile-history-row--delta-minus td {
    background-image: linear-gradient(90deg, rgba(244,67,54,0.14) 0%, rgba(244,67,54,0.00) 65%);
}
.profile-history-place-points {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    margin-left: 6px;
    white-space: nowrap;
}
.profile-history-empty {
    text-align: center !important;
    color: rgba(255,255,255,0.5);
    padding: 20px !important;
}

/* ---- Штрафы в профиле (только для админов) ---- */
.profile-penalties-section {
    margin-top: 20px;
    padding: 0 12px 24px;
}
.profile-penalties-summary-wrap {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
    font-size: 13px;
}
.profile-penalties-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.profile-penalties-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.profile-penalties-count {
    font-size: 16px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}
.profile-penalties-table {
    min-width: 280px;
}

.profile-history-mock-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255,255,255,0.15);
}
.profile-history-mock-title {
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
}

/* Clickable rows in game history */
.profile-history-row--clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.profile-history-row--clickable:active td {
    background: rgba(255,255,255,0.08);
}

/* Game Players Modal */
.game-players-modal-content {
    max-width: 520px !important;
}

.bounty-kills-modal-content {
    max-width: 400px !important;
}
.bounty-kills-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 24px;
}
.bounty-kills-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: app-action-preloader-spin 0.8s linear infinite;
}
.bounty-kills-loading-text {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
}
.bounty-kills-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bounty-kills-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bounty-kills-item:last-child {
    border-bottom: none;
}
.bounty-kills-victim {
    font-weight: 600;
    color: rgba(255,255,255,0.95);
}
.bounty-kills-hand {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
}
.poker-suit {
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    vertical-align: baseline;
}
.poker-suit.suit-red { color: #ff5b5b; }
.poker-suit.suit-black { color: rgba(255,255,255,0.85); }
.profile-history-knockouts-cell--clickable,
.gpm-knockouts-cell--clickable,
.gd-results-knockouts-cell--clickable {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: rgba(255,255,255,0.85);
}
.profile-history-knockouts-cell--clickable:hover,
.gpm-knockouts-cell--clickable:hover,
.gd-results-knockouts-cell--clickable:hover {
    color: #fff;
}
.gpm-toolbar {
    margin-bottom: 12px;
}
.gpm-search-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 14px;
    outline: none;
}
.gpm-search-input::placeholder {
    color: rgba(255,255,255,0.4);
}
.gpm-th--sortable {
    cursor: pointer;
    user-select: none;
}
.gpm-th--sortable:hover {
    background: rgba(255,255,255,0.12);
}
.gpm-th--sorted {
    color: rgba(255,255,255,0.95);
}
.gpm-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gpm-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-family: var(--srp-font, 'Satoshi', sans-serif);
    font-size: 13px;
}
.gpm-table th,
.gpm-table td {
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    text-align: left;
    white-space: nowrap;
}
.gpm-table th {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gpm-table td {
    background: #0d0d0d;
    color: #fff;
}
.gpm-place {
    font-weight: 700;
    text-align: center !important;
    min-width: 44px;
}
.gpm-nick {
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gpm-table td.gpm-delta--plus { color: #4caf50; font-weight: 600; }
.gpm-table td.gpm-delta--minus { color: #f44336; font-weight: 600; }
.gpm-row--delta-plus td {
    background-image: linear-gradient(90deg, rgba(76,175,80,0.14) 0%, rgba(76,175,80,0.00) 65%);
}
.gpm-row--delta-minus td {
    background-image: linear-gradient(90deg, rgba(244,67,54,0.14) 0%, rgba(244,67,54,0.00) 65%);
}
.gpm-row--clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.gpm-row--clickable:active td {
    background: rgba(255,255,255,0.08);
}

.gpm-table tbody tr:first-child td {
    background: rgba(255, 215, 0, 0.08);
}
.gpm-table tbody tr:nth-child(2) td {
    background: rgba(192, 192, 192, 0.06);
}
.gpm-table tbody tr:nth-child(3) td {
    background: rgba(205, 127, 50, 0.06);
}

/* Рейтинг игроков (глобальный топ) */
/* ===== Rating page (rt-*) ===== */
.rt-plaque {
    margin: 48px 12px 24px;
    padding: 0 0 12px;
    border-radius: 14px;
    background: rgba(22, 22, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    min-height: 120px;
}
.rt-header {
    padding: 12px 12px 6px;
}
.rt-header-title {
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
}
.rt-toolbar {
    padding: 0 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Rating page redesign */
.rating-shell {
    padding: 0 0 24px;
}
.rating-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 0;
}
.rating-page-title {
    margin: 0;
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.rating-topbar-search {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.68);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rating-topbar-search:active {
    opacity: 0.8;
}
.rating-branch-chip-wrap {
    margin-bottom: 12px;
}
.rating-branch-chip {
    width: 100%;
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    background:
        linear-gradient(180deg, rgba(22, 22, 26, 0.92) 0%, rgba(16, 16, 19, 0.96) 100%);
    color: rgba(255,255,255,0.92);
    padding: 0 38px 0 13px;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 1.5L7 6.5L12 1.5' stroke='rgba(255,255,255,0.72)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.rating-hero-card,
.rating-section-card,
.rating-search-card,
.rating-select,
.rating-order-btn,
.rating-player-row,
.rating-table-head {
    box-sizing: border-box;
}
.rating-hero-card,
.rating-section-card,
.rating-search-card,
.rating-filter-row .rating-select,
.rating-order-btn,
.rating-table-head,
.rating-player-row {
    border: 1px solid rgba(201, 162, 39, 0.22);
    background: linear-gradient(180deg, rgba(31, 29, 24, 0.96) 0%, rgba(19, 18, 16, 0.98) 100%);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.04);
}
.rating-hero-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 18px;
    margin-bottom: 14px;
}
.rating-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.05) 30%, transparent 56%),
        radial-gradient(140% 120% at 0% 100%, rgba(255,90,58,0.12) 0%, transparent 48%);
    pointer-events: none;
}
.rating-hero-card > * {
    position: relative;
    z-index: 1;
}
.rating-hero-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 152px;
    gap: 12px;
    align-items: stretch;
}
.rating-hero-copy {
    min-width: 0;
}
.rating-hero-eyebrow,
.rating-section-label,
.rating-hero-place-label,
.rating-hero-leader-label {
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.46);
}
.rating-hero-title {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.02;
    font-weight: 900;
    color: #fff;
}
.rating-hero-place-card {
    border-radius: 20px;
    padding: 16px 14px;
    border: 1px solid rgba(201, 162, 39, 0.22);
    background: linear-gradient(180deg, rgba(67, 56, 24, 0.70) 0%, rgba(46, 39, 20, 0.45) 100%);
    text-align: right;
}
.rating-hero-place-value {
    margin-top: 10px;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    color: #f4dd93;
}
.rating-hero-leader {
    margin-top: 16px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.rating-hero-leader-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.rating-hero-leader-rank {
    font-size: 14px;
    font-weight: 900;
    color: #f4dd93;
}
.rating-hero-leader-name {
    margin-top: 10px;
    font-size: 24px;
    line-height: 1.04;
    font-weight: 900;
    color: #fff;
    word-break: break-word;
}
.rating-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.rating-hero-pill,
.rating-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.18);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}
.rating-hero-pill-label {
    color: rgba(255,255,255,0.52);
    font-weight: 700;
}
.rating-section-card {
    border-radius: 24px;
    padding: 16px;
    margin-bottom: 14px;
}
.rating-select {
    width: 100%;
    margin-top: 10px;
    height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, rgba(44, 42, 38, 0.88) 0%, rgba(30, 29, 26, 0.96) 100%);
    color: #fff;
    padding: 0 44px 0 14px;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 1.5L7 6.5L12 1.5' stroke='rgba(255,255,255,0.72)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.rating-select--wide {
    margin-top: 0;
}
.rating-section-note {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,0.56);
}
.rating-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
}
.rating-mode-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.rating-mode-tab.is-active {
    border-color: rgba(255,255,255,0.10);
    background: #fff;
    color: #0f1114;
}
.rating-tournament-card {
    margin-bottom: 12px;
}
.rating-tournament-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    padding: 0 2px;
}
.rating-tournament-card-label {
    font-family: 'Bounded', var(--srp-font, sans-serif);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.46);
}
.rating-tournament-card-hint {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255,255,255,0.34);
}
.rating-tournament-trigger {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 15px;
    background:
        linear-gradient(180deg, rgba(22, 22, 26, 0.94) 0%, rgba(18, 18, 20, 0.98) 100%);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.03);
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.rating-tournament-trigger:disabled {
    opacity: 0.7;
    cursor: default;
}
.rating-tournament-trigger.is-open {
    border-color: rgba(201, 162, 39, 0.32);
}
.rating-tournament-trigger-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rating-tournament-trigger-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
}
.rating-tournament-trigger-subtitle {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255,255,255,0.34);
}
.rating-tournament-trigger-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.72);
    transition: transform 0.18s ease, background-color 0.18s ease;
}
.rating-tournament-trigger.is-open .rating-tournament-trigger-icon {
    transform: rotate(180deg);
    background: rgba(201, 162, 39, 0.14);
}
.rating-tournament-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(18, 18, 22, 0.98) 0%, rgba(14, 14, 18, 0.99) 100%);
    box-shadow:
        0 18px 42px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.04);
}
.rating-tournament-option {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.rating-tournament-option.is-active {
    border-color: rgba(201, 162, 39, 0.24);
    background: linear-gradient(180deg, rgba(56, 49, 29, 0.72) 0%, rgba(34, 29, 20, 0.88) 100%);
}
.rating-tournament-option-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rating-tournament-option-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
}
.rating-tournament-option-meta {
    display: block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255,255,255,0.34);
}
.rating-tournament-option-check {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(201, 162, 39, 0.14);
    color: #f0d479;
}
.rating-search-card {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 11px;
    border-radius: 16px;
    margin-bottom: 8px;
}
.rating-search-icon {
    color: rgba(255,255,255,0.42);
    flex-shrink: 0;
}
.rating-search-icon svg {
    width: 16px;
    height: 16px;
}
.rating-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
}
.rating-search-input::placeholder {
    color: rgba(255,255,255,0.38);
}
.rating-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
    margin-bottom: 8px;
}
.rating-filter-row .rating-select {
    height: 44px;
    border-radius: 14px;
    padding: 0 38px 0 12px;
    font-size: 13px;
}
.rating-order-btn {
    height: 44px;
    border-radius: 14px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}
.rating-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.rating-meta-chip {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.76);
}
.rating-meta-chip--accent {
    border: 1px solid rgba(201, 162, 39, 0.22);
    background: linear-gradient(180deg, rgba(56, 49, 29, 0.62) 0%, rgba(33, 29, 21, 0.82) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 8px 20px rgba(0,0,0,0.18);
    color: rgba(255, 241, 194, 0.96);
}
.rating-list-wrap {
    margin-top: 2px;
}
.rating-table-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px 88px;
    gap: 8px;
    align-items: center;
    min-height: 50px;
    padding: 0 12px;
    border-radius: 16px;
    margin-bottom: 8px;
    background:
        linear-gradient(90deg, rgba(160, 10, 20, 0.95) 0%, rgba(192, 39, 83, 0.94) 100%);
    border: 1px solid rgba(255,255,255,0.06);
}
.rating-table-head-player,
.rating-table-head-stat {
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    color: #fff;
}
.rating-table-head-stat {
    text-align: right;
}
.rating-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rating-list-state {
    padding: 24px 14px;
    text-align: center;
    color: rgba(255,255,255,0.62);
}
.rating-list-state--muted {
    color: rgba(255,255,255,0.45);
}
.rating-player-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px 88px;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border-radius: 18px;
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.rating-player-row:active {
    opacity: 0.9;
}
.rating-player-row.is-top {
    border-color: rgba(212,175,55,0.30);
    background:
        radial-gradient(120% 160% at 0% 50%, rgba(212,175,55,0.12) 0%, transparent 38%),
        linear-gradient(180deg, rgba(40, 34, 21, 0.98) 0%, rgba(24, 21, 17, 0.98) 100%);
}
.rating-player-row.is-top-1 {
    background:
        radial-gradient(120% 160% at 0% 50%, rgba(212,175,55,0.22) 0%, transparent 40%),
        linear-gradient(180deg, rgba(44, 37, 19, 0.98) 0%, rgba(25, 22, 17, 0.98) 100%);
}
.rating-player-row.is-top-2 {
    border-color: rgba(214,214,214,0.22);
}
.rating-player-row.is-top-3 {
    border-color: rgba(183,117,66,0.25);
    background:
        radial-gradient(120% 160% at 0% 50%, rgba(164,96,42,0.18) 0%, transparent 40%),
        linear-gradient(180deg, rgba(46, 28, 18, 0.98) 0%, rgba(25, 20, 17, 0.98) 100%);
}
.rating-player-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.rating-player-rank {
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 900;
    color: rgba(255,255,255,0.76);
}
.rating-player-rank.is-top {
    font-size: 18px;
}
.rating-player-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    flex-shrink: 0;
}
.rating-player-avatar-img,
.rating-player-avatar-fallback {
    width: 100%;
    height: 100%;
}
.rating-player-avatar-img {
    object-fit: cover;
    display: block;
}
.rating-player-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: rgba(255,255,255,0.7);
}
.rating-player-copy {
    min-width: 0;
}
.rating-player-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.rating-player-name {
    min-width: 0;
    font-size: 15px;
    line-height: 1.08;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rating-player-crown {
    flex-shrink: 0;
    font-size: 16px;
}
.rating-player-subtitle {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.25;
    color: rgba(255,255,255,0.52);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rating-player-stat {
    text-align: right;
}
.rating-player-stat-value {
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    color: #fff;
}
.rating-player-stat--primary .rating-player-stat-value {
    color: #fff;
}
.rating-player-row.is-top .rating-player-stat--primary .rating-player-stat-value {
    color: #f4dd93;
}
@media (max-width: 560px) {
    .rating-page-title {
        font-size: 28px;
    }
}
@media (max-width: 420px) {
    .rating-shell {
        padding: 0 0 22px;
    }
    .rating-branch-chip {
        min-height: 40px;
        font-size: 12px;
    }
    .rating-hero-card,
    .rating-section-card {
        padding: 14px;
        border-radius: 24px;
    }
    .rating-hero-title,
    .rating-hero-leader-name {
        font-size: 20px;
    }
    .rating-filter-row {
        grid-template-columns: minmax(0, 1fr) 66px;
    }
    .rating-tournament-card-hint {
        font-size: 10px;
    }
    .rating-tournament-trigger {
        min-height: 52px;
        padding: 10px 12px;
    }
    .rating-tournament-trigger-title {
        font-size: 13px;
    }
    .rating-tournament-trigger-subtitle,
    .rating-tournament-option-meta {
        font-size: 10px;
    }
    .rating-tournament-option {
        min-height: 46px;
        padding: 9px 10px;
    }
    .rating-tournament-option-title {
        font-size: 12px;
    }
    .rating-table-head,
    .rating-player-row {
        grid-template-columns: minmax(0, 1fr) 64px 78px;
        gap: 6px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .rating-player-name {
        font-size: 14px;
    }
    .rating-player-stat-value {
        font-size: 14px;
    }
    .rating-player-avatar {
        width: 34px;
        height: 34px;
    }
}
.rt-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.rt-search-icon {
    position: absolute;
    left: 10px;
    color: rgba(255,255,255,0.4);
    pointer-events: none;
}
.rt-search {
    width: 100%;
    padding: 8px 10px 8px 30px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}
.rt-search::placeholder { color: rgba(255,255,255,0.35); }
.rt-search:focus { border-color: rgba(147,4,0,0.6); }
.rt-filters {
    display: flex;
    gap: 6px;
}
.rt-select {
    flex: 1;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 12px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}
.rt-select--sm { flex: 0 0 44px; text-align: center; padding-right: 8px; background-image: none; }
.rt-legend {
    padding: 6px 12px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.rt-legend-item strong {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}
.rt-list {
    padding: 0 8px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.rt-loading, .rt-empty, .rt-error {
    text-align: center;
    padding: 24px 12px;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}
.rt-error { color: #e55; }

/* Таблица в стиле «РЕЗУЛЬТАТЫ ИГРЫ» */
.rt-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #fff;
}
.rt-table th {
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
}
.rt-table th.rt-th-n { width: 36px; }
.rt-table th.rt-th-name { text-align: left; min-width: 100px; }
.rt-table th.rt-th-rps { width: 52px; }
.rt-table td {
    padding: 7px 10px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.rt-table td.rt-n {
    width: 36px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}
.rt-table td.rt-name {
    text-align: left !important;
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-table td.rt-rps {
    font-weight: 700;
    width: 52px;
}
.rt-row {
    cursor: pointer;
    transition: background .1s;
}
.rt-row:hover td {
    background: rgba(255,255,255,0.06);
}
.rt-row:active td { background: rgba(255,255,255,0.08); }
.rt-row--top1 { background: rgba(255,215,0,0.06); }
.rt-row--top2 { background: rgba(192,192,192,0.05); }
.rt-row--top3 { background: rgba(205,127,50,0.05); }
.rt-row--pinned { background: rgba(147, 4, 0, 0.12); }
.rt-pin-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: #930400;
    text-transform: uppercase;
    margin-right: 6px;
    vertical-align: middle;
}

.rt-name .rt-nick {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-name .rt-fio {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    font-weight: normal;
}
.rt-name .rt-rank {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #930400;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-top: 1px;
}

.profile-header-card--compact {
    margin: 0 12px 16px;
    padding: 14px 16px;
}
.profile-header-card--compact .profile-header-top { gap: 12px; }
.profile-header-card--compact .profile-avatar-container,
.profile-header-card--compact .profile-avatar {
    width: 48px;
    height: 48px;
}
.profile-header-card--compact .profile-name { font-size: 16px; }
.profile-header-card--compact .profile-username,
.profile-header-card--compact .profile-tg-id,
.profile-header-card--compact .profile-user-id { font-size: 12px; }
.profile-header-card--compact .profile-edit-btn { display: none; }

.admin-page, .admin-players-page, .admin-edit-player-page, .admin-bonuses-page, .admin-ranks-page, .admin-transactions-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
}

.game-details-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
}

.game-details-content {
    flex: 1;
    overflow-y: auto;
}

.admin-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -6px -12px 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.60) 70%, rgba(0,0,0,0.00) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.admin-back-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(120px 70px at 20% 20%, rgba(255,255,255,0.10), transparent 60%),
        rgba(18,18,18,0.65);
    color: rgba(255,255,255,0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.admin-back-btn:active { opacity: 0.88; transform: translateY(1px); }
.admin-back-btn:focus-visible { outline: 2px solid rgba(255, 215, 0, 0.35); outline-offset: 2px; }

.admin-title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.96);
    margin: 0;
}

.admin-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Admin: shared UI kit (toolbar / inputs / cards) */
.admin-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 6px;
}
.admin-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.admin-toolbar--stack {
    display: grid;
    gap: 10px;
}
.admin-search {
    flex: 1 1 240px;
    min-width: 0;
}
.admin-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(18,18,18,0.65);
    color: rgba(255,255,255,0.96);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 10px 24px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.admin-input::placeholder {
    color: rgba(255,255,255,0.45);
    font-weight: 600;
}
.admin-input:focus {
    border-color: rgba(255, 215, 0, 0.26);
    box-shadow:
        0 12px 26px rgba(0,0,0,0.32),
        0 0 0 4px rgba(255, 215, 0, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.admin-segment {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(18,18,18,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 10px 22px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.admin-segment-btn {
    height: 38px;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.70);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.2px;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 160ms ease, opacity 160ms ease, color 160ms ease, transform 120ms ease;
}
.admin-segment-btn:active { opacity: 0.88; transform: translateY(1px); }
.admin-segment-btn.is-active {
    color: rgba(255,255,255,0.96);
    background:
        radial-gradient(140px 90px at 20% 20%, rgba(255, 215, 0, 0.14), transparent 62%),
        rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-btn {
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(18,18,18,0.55);
    color: rgba(255,255,255,0.92);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 10px 22px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 120ms ease, opacity 120ms ease, border-color 160ms ease, background 160ms ease;
}
.admin-btn:active { opacity: 0.90; transform: translateY(1px); }
.admin-btn:disabled { opacity: 0.55; cursor: default; }
.admin-btn--primary {
    border-color: rgba(255, 215, 0, 0.22);
    background:
        radial-gradient(180px 120px at 20% 20%, rgba(255, 215, 0, 0.14), transparent 58%),
        rgba(18,18,18,0.55);
}
.admin-btn--danger {
    border-color: rgba(255, 90, 90, 0.20);
    color: rgba(255, 140, 140, 0.95);
    background:
        radial-gradient(160px 110px at 20% 20%, rgba(255, 90, 90, 0.14), transparent 60%),
        rgba(18,18,18,0.55);
}
.admin-mini-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(18,18,18,0.50);
    color: rgba(255,255,255,0.90);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 120ms ease, opacity 120ms ease;
}
.admin-mini-btn:active { opacity: 0.90; transform: translateY(1px); }
.admin-mini-btn:disabled { opacity: 0.55; cursor: default; }
.admin-mini-btn--danger {
    border-color: rgba(255, 90, 90, 0.20);
    color: rgba(255, 160, 160, 0.96);
    background: rgba(255, 90, 90, 0.10);
}
.admin-mini-btn--primary {
    border-color: rgba(255, 215, 0, 0.22);
    background: rgba(255, 215, 0, 0.10);
}
.admin-mini-btn--success {
    border-color: rgba(76, 175, 80, 0.22);
    background: rgba(76, 175, 80, 0.12);
    color: rgba(155, 255, 165, 0.96);
}
.admin-card-pad { padding: 12px; }
.admin-alert {
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.86);
    font-size: 13px;
    line-height: 1.35;
}
.admin-alert--error {
    border-color: rgba(255, 90, 90, 0.22);
    background: rgba(255, 90, 90, 0.12);
    color: rgba(255, 160, 160, 0.96);
}
.admin-muted {
    font-size: 12px;
    color: rgba(255,255,255,0.60);
}
.admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-card {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
        radial-gradient(220px 140px at 20% 20%, rgba(255,255,255,0.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    box-shadow: 0 12px 28px rgba(0,0,0,0.32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.game-icon-upload-card {
    display: grid;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
        radial-gradient(220px 140px at 20% 20%, rgba(255, 215, 0, 0.08), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    box-shadow: 0 12px 28px rgba(0,0,0,0.32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.game-icon-upload-preview {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.24);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.game-icon-upload-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: rgba(255,255,255,0.02);
}
.game-icon-upload-preview-placeholder {
    width: 100%;
    height: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
}
.game-icon-upload-selected {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.game-icon-upload-fields {
    min-width: 0;
    display: grid;
    gap: 8px;
}
.game-icon-file-picker {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    box-sizing: border-box;
}
.game-icon-file-picker-btn {
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(18,18,18,0.55);
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.game-icon-file-picker-name {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.68);
    word-break: break-word;
    line-height: 1.35;
}
.game-icon-upload-file-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.game-icon-upload-file-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
}
.game-icon-upload-file-value {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    word-break: break-word;
    line-height: 1.35;
}
.game-icon-upload-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 640px) {
    .game-icon-upload-selected {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 10px;
    }
    .game-icon-upload-preview {
        width: 56px;
        height: 56px;
    }
    .game-icon-upload-actions {
        grid-template-columns: 1fr;
    }
}
.admin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
}
.admin-row:active { opacity: 0.90; transform: translateY(1px); }
.admin-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.12);
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.70);
    font-weight: 900;
}
.admin-row-main {
    flex: 1;
    min-width: 0;
}
.admin-row-title {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.admin-row-title-text {
    font-size: 14px;
    font-weight: 900;
    color: rgba(255,255,255,0.96);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-tag {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,215,0,0.22);
    background: rgba(255,215,0,0.10);
    color: rgba(255, 235, 170, 0.98);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.3px;
    flex: 0 0 auto;
}
.admin-row-sub {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255,255,255,0.60);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-status {
    flex: 0 0 auto;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.80);
}
.admin-status--ok {
    border-color: rgba(76, 175, 80, 0.25);
    background: rgba(76, 175, 80, 0.14);
    color: rgba(155, 255, 165, 0.95);
}
.admin-status--warn {
    border-color: rgba(255, 180, 0, 0.24);
    background: rgba(255, 180, 0, 0.12);
    color: rgba(255, 220, 150, 0.96);
}
.admin-status--bad {
    border-color: rgba(255, 90, 90, 0.24);
    background: rgba(255, 90, 90, 0.12);
    color: rgba(255, 170, 170, 0.96);
}
.admin-badges {
    display: grid;
    gap: 6px;
    justify-items: end;
    align-content: center;
}

/* Admin: Players list (поиск + фильтр, сегменты, карточки — палитра и сетка) */
.admin-players-page.admin-content {
    gap: 14px;
}
.admin-players-page .admin-list {
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-players-page .admin-card.admin-players-row {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.admin-players-page .admin-card.admin-players-row:active {
    background: rgba(255, 255, 255, 0.03);
}
.admin-players-page .admin-players-search-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.admin-players-page .admin-players-segment-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
.admin-players-page .admin-players-online-meta {
    margin-top: -2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.48);
}
/* «Все» / «Админы» — на всю ширину, две равные колонки */
.admin-players-page .admin-players-audience-segment.admin-segment {
    width: 100%;
    display: flex;
    box-sizing: border-box;
}
.admin-players-page .admin-players-audience-segment .admin-segment-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.admin-players-page .admin-players-segment--scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.admin-players-page .admin-players-segment--scroll::-webkit-scrollbar {
    display: none;
}
/* Вторая строка вкладок (Игроки / Долги / Рефералы) — чуть контрастнее «золотой» дорожке */
.admin-players-page .admin-players-mode-segment.admin-segment {
    width: 100%;
    justify-content: space-between;
    border-color: rgba(212, 175, 55, 0.16);
    background:
        radial-gradient(200px 90px at 12% 20%, rgba(212, 175, 55, 0.08), transparent 58%),
        rgba(12, 12, 14, 0.72);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.admin-players-page .admin-players-mode-segment .admin-segment-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    font-size: 12px;
}
.admin-players-page .admin-players-mode-segment .admin-segment-btn.is-active {
    color: rgba(255, 252, 235, 0.98);
    background:
        radial-gradient(120px 70px at 50% 0%, rgba(212, 175, 55, 0.22), transparent 72%),
        rgba(255, 255, 255, 0.07);
    box-shadow:
        inset 0 -2px 0 rgba(212, 175, 55, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.admin-players-page .admin-players-row {
    align-items: center;
    gap: 12px;
    padding: 14px 6px 14px 2px;
}
.admin-players-page .admin-players-row-main {
    padding-top: 0;
    min-width: 0;
}
.admin-players-page .admin-players-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.admin-players-page .admin-players-name {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.98);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-players-page .admin-players-name-email {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    white-space: nowrap;
}
.admin-players-page .admin-players-name-email--none {
    color: rgba(255, 255, 255, 0.28);
}
.admin-players-page .admin-players-meta {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.56);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-players-page .admin-players-meta-email {
    color: rgba(255, 255, 255, 0.34);
}
.admin-players-page .admin-players-meta-email--ok {
    color: rgba(135, 220, 155, 0.68);
}
.admin-players-page .admin-players-meta-email--pending {
    color: rgba(236, 202, 138, 0.68);
}
.admin-players-page .admin-players-avatar-wrap {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
}
.admin-players-page .admin-players-avatar-wrap .admin-players-avatar {
    flex: none;
    width: 100%;
    height: 100%;
    background: rgba(24, 24, 26, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.58);
    font-size: 16px;
}
.admin-players-page .admin-players-avatar-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid #000;
    background: rgba(255, 255, 255, 0.28);
    box-sizing: border-box;
    pointer-events: none;
    box-shadow: none;
}
.admin-players-page .admin-players-avatar-dot.is-on {
    background: rgba(76, 175, 80, 0.98);
}
.admin-players-page .admin-players-stats {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
}
.admin-players-page .admin-players-stats--single-line {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}
.admin-players-page .admin-players-stats--single-line .admin-players-kv,
.admin-players-page .admin-players-stats--single-line .admin-players-stat-sep {
    flex: 0 0 auto;
}
.admin-players-page .admin-players-kv {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: wrap;
}
.admin-players-page .admin-players-kv--icon-only {
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.admin-players-page .admin-players-kv--debt-row {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 4px;
    max-width: 100%;
}
.admin-players-page .admin-players-kv--debt-row .admin-players-kv-label {
    flex-shrink: 0;
}
.admin-players-page .admin-players-kv-label {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}
.admin-players-page .admin-players-kv-val {
    font-weight: 700;
}
.admin-players-page .admin-players-kv-icon {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.admin-players-page .admin-players-kv-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.admin-players-page .admin-players-kv-icon--balance {
    color: rgba(255, 255, 255, 0.72);
}
.admin-players-page .admin-players-kv-icon--coins {
    color: rgba(255, 214, 100, 0.96);
}
.admin-players-page .admin-players-kv-val--balance.is-pos {
    color: rgba(110, 220, 130, 0.98);
}
.admin-players-page .admin-players-kv-val--balance.is-neg {
    color: rgba(255, 130, 130, 0.98);
}
.admin-players-page .admin-players-kv-val--coins {
    color: rgba(255, 214, 100, 0.96);
}
.admin-players-page .admin-players-kv-val--debt {
    color: rgba(255, 175, 140, 0.96);
}
.admin-players-page .admin-players-kv--debt-zero .admin-players-kv-label,
.admin-players-page .admin-players-kv--debt-zero .admin-players-kv-val {
    color: rgba(255, 255, 255, 0.52);
    font-weight: 500;
}
.admin-players-page .admin-players-stats--wallet {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.admin-players-page .admin-players-stats--wallet::-webkit-scrollbar {
    display: none;
}
.admin-players-page .admin-players-stats--wallet > * {
    flex: 0 0 auto;
}
.admin-players-page .admin-players-ref-tail {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}
.admin-players-page .admin-players-ref-tail .admin-players-kv-val--ref {
    color: rgba(255, 235, 200, 0.72);
    font-weight: 700;
}
.admin-players-page .admin-players-stat-sep {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}
.admin-players-page .admin-players-row-trail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}
.admin-players-page .admin-players-trail-badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}
.admin-players-page .admin-players-email,
.admin-players-page .admin-players-reg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.admin-players-page .admin-players-email {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-players-page .admin-players-email--none {
    color: rgba(255, 255, 255, 0.33);
}
.admin-players-page .admin-players-email--ok {
    color: rgba(150, 220, 165, 0.72);
}
.admin-players-page .admin-players-email--pending {
    color: rgba(240, 205, 140, 0.72);
}
.admin-players-page .admin-players-reg {
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    background: rgba(7, 7, 8, 0.92);
}
.admin-players-page .admin-players-reg--ok {
    border: 1px solid rgba(76, 175, 80, 0.65);
    color: rgba(120, 230, 145, 0.98);
}
.admin-players-page .admin-players-reg--warn {
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: rgba(255, 220, 170, 0.98);
}
.admin-players-page .admin-players-chevron {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.34);
    user-select: none;
    margin-right: 0;
}
.admin-players-page button.admin-players-kv.admin-players-money-hit {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}
.admin-players-page button.admin-players-kv.admin-players-money-hit:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.5);
    outline-offset: 2px;
    border-radius: 6px;
}
.admin-players-page button.admin-players-kv.admin-players-money-hit:hover {
    filter: brightness(1.06);
}

/* =========================================================================
   Admin: Players list — v2 (clean grid, summary tiles, stat chips)
   ========================================================================= */
.admin-pl2 {
    gap: 12px;
}
.admin-pl2 .admin-pl2-search {
    position: relative;
    width: 100%;
    min-width: 0;
}
.admin-pl2 .admin-pl2-search-input {
    padding-left: 42px;
    padding-right: 38px;
}
.admin-pl2 .admin-pl2-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-pl2 .admin-pl2-search-icon svg {
    width: 100%;
    height: 100%;
}
.admin-pl2 .admin-pl2-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 140ms ease, transform 100ms ease;
}
.admin-pl2 .admin-pl2-search-clear:hover { background: rgba(255, 255, 255, 0.14); }
.admin-pl2 .admin-pl2-search-clear:active { transform: translateY(-50%) scale(0.94); }

/* Summary KPI tiles row */
.admin-pl2 .admin-pl2-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}
.admin-pl2 .admin-pl2-summary-tile {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(160px 100px at 20% 10%, rgba(255, 255, 255, 0.06), transparent 65%),
        rgba(18, 18, 20, 0.55);
    padding: 10px 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.admin-pl2 .admin-pl2-summary-num {
    font-family: 'Bounded', var(--srp-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-pl2 .admin-pl2-summary-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.admin-pl2 .admin-pl2-summary-tile--online {
    border-color: rgba(76, 175, 80, 0.22);
    background:
        radial-gradient(160px 100px at 20% 10%, rgba(76, 175, 80, 0.16), transparent 65%),
        rgba(18, 18, 20, 0.55);
}
.admin-pl2 .admin-pl2-summary-tile--online .admin-pl2-summary-num { color: rgba(170, 235, 180, 0.98); }
.admin-pl2 .admin-pl2-summary-tile--debt {
    border-color: rgba(255, 130, 100, 0.24);
    background:
        radial-gradient(160px 100px at 20% 10%, rgba(255, 130, 100, 0.16), transparent 65%),
        rgba(18, 18, 20, 0.55);
}
.admin-pl2 .admin-pl2-summary-tile--debt .admin-pl2-summary-num { color: rgba(255, 195, 165, 0.98); }
.admin-pl2 .admin-pl2-summary-tile--ref {
    border-color: rgba(212, 175, 55, 0.26);
    background:
        radial-gradient(160px 100px at 20% 10%, rgba(212, 175, 55, 0.18), transparent 65%),
        rgba(18, 18, 20, 0.55);
}
.admin-pl2 .admin-pl2-summary-tile--ref .admin-pl2-summary-num { color: rgba(255, 232, 178, 0.98); }

/* Mode tabs (primary navigation) */
.admin-pl2 .admin-pl2-mode.admin-segment {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(10, 10, 12, 0.78);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.admin-pl2 .admin-pl2-mode .admin-segment-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.62);
    transition: color 160ms ease, background 200ms ease, box-shadow 200ms ease, transform 120ms ease;
}
.admin-pl2 .admin-pl2-mode .admin-segment-btn:hover {
    color: rgba(255, 255, 255, 0.86);
}
.admin-pl2 .admin-pl2-mode .admin-segment-btn.is-active {
    color: rgba(255, 250, 230, 0.98);
    background: linear-gradient(180deg,
        rgba(46, 40, 22, 0.96) 0%,
        rgba(28, 24, 12, 0.96) 100%);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(212, 175, 55, 0.38),
        inset 0 1px 0 rgba(255, 215, 0, 0.16);
}
.admin-pl2 .admin-pl2-mode-label { font-size: 13px; }
.admin-pl2 .admin-pl2-mode-count {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    line-height: 1;
}
.admin-pl2 .admin-pl2-mode .admin-segment-btn.is-active .admin-pl2-mode-count {
    color: rgba(20, 16, 6, 0.92);
    background: linear-gradient(180deg,
        rgba(255, 220, 120, 0.96) 0%,
        rgba(220, 180, 70, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Audience / debt-scope chip rows */
.admin-pl2 .admin-pl2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.admin-pl2 .admin-pl2-chips::-webkit-scrollbar { display: none; }
.admin-pl2 .admin-pl2-chip {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.72);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.admin-pl2 .admin-pl2-chip:active { transform: translateY(1px); }
.admin-pl2 .admin-pl2-chip:hover { background: rgba(255, 255, 255, 0.06); }
.admin-pl2 .admin-pl2-chip:disabled { opacity: 0.5; cursor: default; }
.admin-pl2 .admin-pl2-chip.is-active {
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.96);
    background: rgba(255, 255, 255, 0.07);
}
.admin-pl2 .admin-pl2-chip-count {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    line-height: 1.2;
}
.admin-pl2 .admin-pl2-chip.is-active .admin-pl2-chip-count {
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.10);
}

/* Empty / loading state */
.admin-pl2 .admin-pl2-state {
    text-align: center;
    padding: 24px 12px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
}
.admin-pl2 .admin-pl2-state--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.admin-pl2 .admin-pl2-state-icon {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.32);
    line-height: 1;
}
.admin-pl2 .admin-pl2-state-reset {
    margin-top: 4px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.28);
    background: rgba(255, 215, 0, 0.08);
    color: rgba(255, 245, 210, 0.96);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.admin-pl2 .admin-pl2-state-reset:hover { background: rgba(255, 215, 0, 0.14); }
.admin-pl2 .admin-pl2-state-reset:active { transform: translateY(1px); }

/* Player list */
.admin-pl2 .admin-pl2-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-pl2 .admin-pl2-card {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px 12px 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(220px 140px at 16% 18%, rgba(255, 255, 255, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.015) 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.admin-pl2 .admin-pl2-card:hover {
    border-color: rgba(255, 215, 0, 0.18);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36);
}
.admin-pl2 .admin-pl2-card:active { transform: translateY(1px); }
.admin-pl2 .admin-pl2-card:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.42);
    outline-offset: 2px;
}

/* Avatar */
.admin-pl2 .admin-pl2-avatar-wrap {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
}
.admin-pl2 .admin-pl2-avatar {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: rgba(24, 24, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Bounded', var(--srp-font);
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-pl2 .admin-pl2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.admin-pl2 .admin-pl2-avatar-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 2px solid #0c0c0e;
    background: rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
    pointer-events: none;
}
.admin-pl2 .admin-pl2-avatar-dot.is-on {
    background: rgba(76, 175, 80, 0.98);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.18);
}

/* Card main area */
.admin-pl2 .admin-pl2-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-pl2 .admin-pl2-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.admin-pl2 .admin-pl2-name {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.admin-pl2 .admin-pl2-tag {
    flex: 0 0 auto;
    height: 19px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
}
.admin-pl2 .admin-pl2-tag--admin {
    border-color: rgba(255, 215, 0, 0.32);
    background: rgba(255, 215, 0, 0.10);
    color: rgba(255, 232, 160, 0.98);
}
.admin-pl2 .admin-pl2-tag--pos {
    border-color: rgba(120, 200, 255, 0.28);
    background: rgba(120, 200, 255, 0.08);
    color: rgba(180, 220, 255, 0.96);
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 700;
    padding: 0 9px;
}
.admin-pl2 .admin-pl2-tag--warn {
    border-color: rgba(255, 180, 60, 0.36);
    background: rgba(255, 180, 60, 0.12);
    color: rgba(255, 220, 150, 0.98);
}

/* Meta line */
.admin-pl2 .admin-pl2-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.35;
    min-width: 0;
}
.admin-pl2 .admin-pl2-meta-id {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.62);
}
.admin-pl2 .admin-pl2-meta-dot {
    color: rgba(255, 255, 255, 0.22);
    font-weight: 700;
}
.admin-pl2 .admin-pl2-email {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.admin-pl2 .admin-pl2-email.is-ok { color: rgba(150, 220, 165, 0.78); }
.admin-pl2 .admin-pl2-email.is-pending { color: rgba(240, 205, 140, 0.82); }

/* Stat tiles inside card */
.admin-pl2 .admin-pl2-tiles {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.admin-pl2 .admin-pl2-tile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease, filter 140ms ease;
}
button.admin-pl2-tile {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    text-align: left;
    font: inherit;
}
.admin-pl2 .admin-pl2-tile:active { transform: translateY(1px); }
button.admin-pl2-tile:hover { filter: brightness(1.08); border-color: rgba(255, 255, 255, 0.14); }
button.admin-pl2-tile:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.45);
    outline-offset: 2px;
}
.admin-pl2 .admin-pl2-tile-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.78);
}
.admin-pl2 .admin-pl2-tile-icon svg { width: 100%; height: 100%; display: block; }
.admin-pl2 .admin-pl2-tile-lbl {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
}
.admin-pl2 .admin-pl2-tile-val {
    font-size: 12px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
    white-space: nowrap;
}
.admin-pl2 .admin-pl2-tile.is-zero {
    opacity: 0.7;
}
.admin-pl2 .admin-pl2-tile.is-zero .admin-pl2-tile-val { color: rgba(255, 255, 255, 0.55); }
.admin-pl2 .admin-pl2-tile--balance.is-pos {
    border-color: rgba(76, 175, 80, 0.28);
    background: rgba(76, 175, 80, 0.10);
}
.admin-pl2 .admin-pl2-tile--balance.is-pos .admin-pl2-tile-val { color: rgba(160, 230, 175, 0.98); }
.admin-pl2 .admin-pl2-tile--balance.is-pos .admin-pl2-tile-icon { color: rgba(160, 230, 175, 0.96); }
.admin-pl2 .admin-pl2-tile--balance.is-neg {
    border-color: rgba(255, 110, 110, 0.32);
    background: rgba(255, 110, 110, 0.10);
}
.admin-pl2 .admin-pl2-tile--balance.is-neg .admin-pl2-tile-val { color: rgba(255, 175, 175, 0.98); }
.admin-pl2 .admin-pl2-tile--balance.is-neg .admin-pl2-tile-icon { color: rgba(255, 175, 175, 0.96); }
.admin-pl2 .admin-pl2-tile--coins.is-pos {
    border-color: rgba(255, 214, 100, 0.30);
    background: rgba(255, 214, 100, 0.08);
}
.admin-pl2 .admin-pl2-tile--coins.is-pos .admin-pl2-tile-val { color: rgba(255, 220, 140, 0.98); }
.admin-pl2 .admin-pl2-tile--coins .admin-pl2-tile-icon { color: rgba(255, 214, 100, 0.96); }
.admin-pl2 .admin-pl2-tile--debt.is-debt {
    border-color: rgba(255, 130, 100, 0.34);
    background: rgba(255, 130, 100, 0.10);
}
.admin-pl2 .admin-pl2-tile--debt.is-debt .admin-pl2-tile-val { color: rgba(255, 185, 160, 0.98); }
.admin-pl2 .admin-pl2-tile--debt.is-debt .admin-pl2-tile-lbl { color: rgba(255, 200, 175, 0.85); }
.admin-pl2 .admin-pl2-tile--ref {
    cursor: default;
    background: rgba(255, 255, 255, 0.025);
}
.admin-pl2 .admin-pl2-tile--ref .admin-pl2-tile-val {
    color: rgba(255, 235, 200, 0.94);
}

/* Trail (chevron) */
.admin-pl2 .admin-pl2-trail {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-pl2 .admin-pl2-chevron {
    font-size: 22px;
    line-height: 1;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.32);
    user-select: none;
}
.admin-pl2 .admin-pl2-card:hover .admin-pl2-chevron { color: rgba(255, 215, 0, 0.7); }

/* Compact layout on very small screens */
@media (max-width: 380px) {
    .admin-pl2 .admin-pl2-card { gap: 10px; padding: 10px; }
    .admin-pl2 .admin-pl2-avatar-wrap { flex-basis: 40px; width: 40px; height: 40px; }
    .admin-pl2 .admin-pl2-name { font-size: 14px; }
    .admin-pl2 .admin-pl2-tile { height: 26px; padding: 0 9px; }
}

.admin-player-wallet-modal.admin-modal {
    z-index: 1200;
}
.admin-player-wallet-modal__panel {
    max-width: min(440px, 100%);
    max-height: min(80vh, 640px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.admin-player-wallet-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 4px;
}
.admin-player-wallet-plus { color: rgba(120, 220, 140, 0.98); }
.admin-player-wallet-minus { color: rgba(255, 150, 150, 0.95); }

/* «Баланс» сверху модалки «Долг по играм»: одна строка-надпись.
   Каждая сумма с компактной плюс-кнопкой «+» — открывает форму пополнения. */
.admin-player-wallet-balances {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.84);
    padding: 2px 0;
}
.admin-player-wallet-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-player-wallet-balance-amount {
    font-weight: 600;
}
.admin-player-wallet-balance-sep {
    color: rgba(255, 255, 255, 0.32);
}
.admin-player-wallet-balance-plus {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 39, 0.45);
    background: rgba(201, 162, 39, 0.10);
    color: #f1c84f;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-player-wallet-balance-plus:hover,
.admin-player-wallet-balance-plus:focus-visible {
    background: rgba(201, 162, 39, 0.20);
    border-color: rgba(201, 162, 39, 0.75);
    outline: none;
}
.admin-player-wallet-balance-plus:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Inline-форма пополнения — после клика на «+». Компактнее старого блока. */
.admin-player-wallet-form {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-player-wallet-form-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}
.admin-player-wallet-form-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-player-wallet-form-row .profile-input {
    flex: 1 1 120px;
    min-width: 0;
}
.admin-player-wallet-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Блок «Погашение долга»: лейбл + сумма, поле ввода + кнопка в одну строку,
   пара сегментированных переключателей вместо radio-списка. */
.admin-player-wallet-repay {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(232, 168, 64, 0.32);
    background: rgba(232, 168, 64, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-player-wallet-repay-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.admin-player-wallet-repay-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 213, 138, 0.75);
}
.admin-player-wallet-repay-total {
    font-size: 16px;
    font-weight: 700;
    color: #ffd58a;
}
.admin-player-wallet-repay-row {
    display: flex;
    gap: 8px;
}
.admin-player-wallet-repay-input {
    flex: 1 1 auto;
    min-width: 0;
}
.admin-player-wallet-repay-submit {
    flex: 0 0 auto;
}

/* Сегментированный переключатель: пара кнопок-пилюль, активная — золотая. */
.admin-player-wallet-segs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-player-wallet-seg {
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    padding: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.admin-player-wallet-seg button {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 10px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.admin-player-wallet-seg button.is-active {
    background: rgba(201, 162, 39, 0.18);
    color: #f1c84f;
}
.admin-player-wallet-seg button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.admin-player-wallet-debt-list,
.admin-player-wallet-tx-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}
.admin-player-wallet-debt-item,
.admin-player-wallet-tx-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.admin-player-wallet-debt-main { min-width: 0; flex: 1; }
.admin-player-wallet-debt-name { font-weight: 600; color: #fff; }
.admin-player-wallet-debt-meta,
.admin-player-wallet-debt-sub { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; }
.admin-player-wallet-debt-tail { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.admin-player-wallet-debt-sum { font-weight: 700; color: rgba(255, 175, 140, 0.96); font-size: 16px; }
.admin-player-wallet-tx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; }
.admin-player-wallet-tx-amt { font-weight: 700; font-size: 15px; }
.admin-player-wallet-tx-amt.is-in { color: rgba(120, 220, 140, 0.98); }
.admin-player-wallet-tx-amt.is-out { color: rgba(255, 150, 150, 0.95); }
.admin-player-wallet-tx-time { font-size: 12px; color: rgba(255, 255, 255, 0.38); }
.admin-player-wallet-tx-type,
.admin-player-wallet-tx-desc { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; width: 100%; }
.admin-player-wallet-tx-game {
    margin-top: 4px;
    background: none;
    border: none;
    padding: 0;
    color: rgba(100, 180, 255, 0.95);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
}
.admin-player-wallet-tx-game:hover { color: rgba(150, 210, 255, 1); }

.admin-bonuses-page .admin-list {
    gap: 10px;
}
.admin-bonuses-page .admin-bonus-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(160px 90px at 10% 0%, rgba(212, 175, 55, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(18, 18, 20, 0.98) 0%, rgba(10, 10, 12, 0.98) 100%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.admin-bonuses-page .admin-bonus-main {
    flex: 1;
    min-width: 0;
}
.admin-bonuses-page .admin-bonus-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}
.admin-bonuses-page .admin-bonus-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.98);
}
.admin-bonuses-page .admin-bonus-status {
    height: 22px;
    padding: 0 9px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.02em;
}
.admin-bonuses-page .admin-bonus-status--active {
    border-color: rgba(76, 175, 80, 0.24);
    background: rgba(76, 175, 80, 0.12);
    color: rgba(146, 239, 156, 0.96);
}
.admin-bonuses-page .admin-bonus-status--hidden {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.68);
}
.admin-bonuses-page .admin-bonus-reward,
.admin-bonuses-page .admin-bonus-desc,
.admin-bonuses-page .admin-bonus-created {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
}
.admin-bonuses-page .admin-bonus-reward {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}
.admin-bonuses-page .admin-bonus-desc {
    color: rgba(255, 255, 255, 0.72);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.admin-bonuses-page .admin-bonus-created {
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
}
.admin-bonuses-page .admin-bonus-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-bonuses-page .admin-bonus-action-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(70px 50px at 30% 20%, rgba(255, 215, 0, 0.08), transparent 70%),
        rgba(24, 24, 26, 0.92);
    color: rgba(255, 221, 133, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 120ms ease, opacity 120ms ease, border-color 160ms ease;
}
.admin-bonuses-page .admin-bonus-action-btn:active {
    opacity: 0.9;
    transform: translateY(1px);
}
.admin-bonuses-page .admin-bonus-action-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.admin-bonuses-page .admin-bonus-action-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.admin-bonuses-page .admin-bonus-action-btn--danger {
    color: rgba(255, 120, 120, 0.96);
    border-color: rgba(255, 90, 90, 0.18);
    background:
        radial-gradient(80px 60px at 30% 20%, rgba(255, 90, 90, 0.10), transparent 70%),
        rgba(24, 24, 26, 0.92);
}

/* === Bonuses redesign (v2) === */
.admin-bonuses-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 4px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(14, 14, 16, 0.6);
}
.admin-bonuses-tab {
    flex: 1 1 0;
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 120ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.admin-bonuses-tab:active {
    transform: translateY(1px);
}
.admin-bonuses-tab:disabled {
    opacity: 0.55;
    cursor: default;
}
.admin-bonuses-tab.is-active {
    background: linear-gradient(180deg, rgba(232, 197, 71, 0.2) 0%, rgba(201, 162, 39, 0.16) 100%);
    color: #f4d27b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.admin-bonuses-tab-count {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1;
}
.admin-bonuses-tab.is-active .admin-bonuses-tab-count {
    background: rgba(244, 210, 123, 0.22);
    color: #f6dfa3;
}
.admin-bonuses-refresh {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(24, 24, 26, 0.85);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.admin-bonuses-refresh:hover {
    color: rgba(244, 210, 123, 0.95);
    border-color: rgba(244, 210, 123, 0.25);
}
.admin-bonuses-refresh:active {
    transform: translateY(1px);
}
.admin-bonuses-refresh:disabled {
    opacity: 0.5;
    cursor: default;
}

.admin-bonuses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.admin-bonuses-empty {
    padding: 32px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.bonus-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background:
        radial-gradient(220px 130px at 0% 0%, var(--bonus-accent-glow, rgba(212, 175, 55, 0.06)), transparent 60%),
        linear-gradient(180deg, rgba(20, 20, 22, 0.98) 0%, rgba(12, 12, 14, 0.98) 100%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 140ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.bonus-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bonus-accent, rgba(244, 210, 123, 0.6));
    opacity: 0.85;
}
.bonus-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}
.bonus-card[data-tone="hidden"] {
    opacity: 0.62;
}
.bonus-card[data-tone="hidden"]::before {
    background: rgba(255, 255, 255, 0.18);
}
.bonus-card--winner {
    --bonus-accent: linear-gradient(180deg, #e8c547, #c9a227);
    --bonus-accent-glow: rgba(232, 197, 71, 0.12);
}
.bonus-card--first_games_free_entry,
.bonus-card--first_games_free_game {
    --bonus-accent: linear-gradient(180deg, #6cc6ff, #2c84d9);
    --bonus-accent-glow: rgba(108, 198, 255, 0.10);
}
.bonus-card--manual {
    --bonus-accent: linear-gradient(180deg, #c79bff, #8054d6);
    --bonus-accent-glow: rgba(199, 155, 255, 0.08);
}

.bonus-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.bonus-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.bonus-icon--winner {
    color: #f4d27b;
    background: linear-gradient(180deg, rgba(232, 197, 71, 0.18), rgba(201, 162, 39, 0.10));
    border-color: rgba(244, 210, 123, 0.22);
}
.bonus-icon--first_games_free_entry,
.bonus-icon--first_games_free_game {
    color: #8ed1ff;
    background: linear-gradient(180deg, rgba(108, 198, 255, 0.18), rgba(44, 132, 217, 0.10));
    border-color: rgba(108, 198, 255, 0.22);
}
.bonus-icon--manual {
    color: #d4baff;
    background: linear-gradient(180deg, rgba(199, 155, 255, 0.16), rgba(128, 84, 214, 0.08));
    border-color: rgba(199, 155, 255, 0.20);
}

.bonus-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}
.bonus-name {
    font-family: 'Bounded', var(--srp-font);
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}
.bonus-type-line {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.02em;
}

.bonus-head-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.bonus-status {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.bonus-status--active {
    color: #92ef9c;
    background: rgba(76, 175, 80, 0.14);
    border-color: rgba(76, 175, 80, 0.28);
}
.bonus-status--limited {
    color: #ffd58a;
    background: rgba(232, 168, 64, 0.14);
    border-color: rgba(232, 168, 64, 0.28);
}
.bonus-status--hidden {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}
.bonus-status--archived {
    color: rgba(255, 178, 178, 0.85);
    background: rgba(220, 60, 60, 0.10);
    border-color: rgba(220, 60, 60, 0.28);
}
.bonus-card[data-tone="archived"] {
    opacity: 0.72;
}

.bonus-actions-row {
    display: flex;
    gap: 6px;
}
.bonus-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 120ms ease;
}
.bonus-action-btn:hover {
    color: #f4d27b;
    border-color: rgba(244, 210, 123, 0.3);
    background: rgba(244, 210, 123, 0.08);
}
.bonus-action-btn:active {
    transform: translateY(1px);
}
.bonus-action-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.bonus-action-btn--danger:hover {
    color: #ff8585;
    border-color: rgba(255, 90, 90, 0.3);
    background: rgba(255, 90, 90, 0.08);
}

.bonus-metric {
    margin: 4px 0 2px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    line-height: 1.35;
}
.bonus-metric--winner {
    color: #f6dfa3;
    background: linear-gradient(180deg, rgba(232, 197, 71, 0.10), rgba(201, 162, 39, 0.05));
    border-color: rgba(244, 210, 123, 0.18);
}
.bonus-metric--first_games_free_entry,
.bonus-metric--first_games_free_game {
    color: #b0dcff;
    background: linear-gradient(180deg, rgba(108, 198, 255, 0.10), rgba(44, 132, 217, 0.05));
    border-color: rgba(108, 198, 255, 0.18);
}
.bonus-metric--manual {
    color: #e6d6ff;
    background: linear-gradient(180deg, rgba(199, 155, 255, 0.10), rgba(128, 84, 214, 0.05));
    border-color: rgba(199, 155, 255, 0.18);
}

.bonus-desc {
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.62);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bonus-card-foot {
    margin-top: 2px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.bonus-branches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.bonus-branch-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bonus-branch-pill--more {
    color: rgba(255, 255, 255, 0.52);
    border-style: dashed;
}
.bonus-branch-pill--empty {
    color: rgba(255, 200, 100, 0.78);
    background: rgba(232, 168, 64, 0.08);
    border-color: rgba(232, 168, 64, 0.22);
}
.bonus-created {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    flex: 0 0 auto;
}

.bonus-card--cta {
    appearance: none;
    cursor: pointer;
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: 144px;
    color: rgba(255, 255, 255, 0.85);
    border-style: dashed;
    border-color: rgba(244, 210, 123, 0.28);
    background:
        radial-gradient(220px 130px at 50% 0%, rgba(244, 210, 123, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(22, 22, 24, 0.92) 0%, rgba(14, 14, 16, 0.92) 100%);
    transition: transform 120ms ease, border-color 160ms ease, background 160ms ease;
}
.bonus-card--cta::before { display: none; }
.bonus-card--cta:hover {
    border-color: rgba(244, 210, 123, 0.55);
    transform: translateY(-1px);
}
.bonus-card--cta:active {
    transform: translateY(0);
}
.bonus-card--cta:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
.bonus-cta-plus {
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #f4d27b;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(244, 210, 123, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.bonus-cta-label {
    font-family: 'Bounded', var(--srp-font);
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}
.bonus-cta-hint {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.52);
}

@media (min-width: 720px) {
    .admin-bonuses-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* === Messaging (admin chats + broadcasts) === */
.admin-messaging-page {
    gap: 14px;
    display: flex;
    flex-direction: column;
}
.admin-messaging-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 6px;
}
.admin-messaging-messenger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 20, 22, 0.85);
}
.admin-messaging-messenger-icon { font-size: 14px; }
.admin-messaging-select {
    appearance: none;
    background: transparent;
    color: #fff;
    border: none;
    font: inherit;
    padding: 2px 4px;
}

.msg-chats-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 900px) {
    .msg-chats-layout {
        grid-template-columns: minmax(280px, 360px) 1fr;
    }
}
.msg-chats-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.msg-search-input {
    appearance: none;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(14, 14, 16, 0.7);
    color: #fff;
    font: inherit;
}
.msg-search-input::placeholder { color: rgba(255, 255, 255, 0.4); }

.msg-chat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 70vh;
    overflow-y: auto;
}
.msg-chat-card {
    appearance: none;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(20, 20, 22, 0.85);
    border-radius: 14px;
    padding: 10px 12px;
    color: #fff;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transition: border-color 160ms ease, background 160ms ease;
}
.msg-chat-card:hover { border-color: rgba(255, 255, 255, 0.16); }
.msg-chat-card.is-active {
    border-color: rgba(244, 210, 123, 0.45);
    background: linear-gradient(180deg, rgba(232, 197, 71, 0.10), rgba(20, 20, 22, 0.92));
}
.msg-chat-card:disabled { opacity: 0.55; cursor: default; }
.msg-chat-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.78);
}
.msg-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-chat-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msg-chat-row1 {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.msg-chat-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-chat-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    flex: 0 0 auto;
}
.msg-chat-preview {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-arrow { color: rgba(244, 210, 123, 0.7); margin-right: 2px; }

.msg-thread-pane {
    min-width: 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(14, 14, 16, 0.7);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
}
.msg-thread-empty {
    margin: auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    padding: 20px;
}
.msg-thread {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.msg-thread-head {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.msg-thread-name { font-weight: 800; }
.msg-thread-meta { font-size: 11px; color: rgba(255, 255, 255, 0.4); }
.msg-thread-body {
    flex: 1;
    padding: 14px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 70vh;
}
.msg-loading-more {
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    padding: 4px 0;
}

.msg-bubble {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.msg-bubble--in {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border-bottom-left-radius: 4px;
}
.msg-bubble--out {
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(232, 197, 71, 0.18), rgba(201, 162, 39, 0.10));
    border-bottom-right-radius: 4px;
    color: #fff;
}
.msg-bubble.is-deleted { opacity: 0.55; text-decoration: line-through; }
.msg-callback-pill {
    display: inline-block;
    align-self: flex-start;
    background: rgba(108, 198, 255, 0.18);
    color: #b0dcff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.msg-photo img {
    max-width: 240px;
    max-height: 240px;
    border-radius: 10px;
    display: block;
}
.msg-text { white-space: pre-wrap; }
.msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
}
.msg-broadcast-tag {
    background: rgba(199, 155, 255, 0.16);
    color: #d4baff;
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 700;
}
.msg-deleted-tag {
    background: rgba(255, 90, 90, 0.14);
    color: #ff8585;
    padding: 1px 6px;
    border-radius: 999px;
}
.msg-time { margin-left: auto; }

/* --- Broadcasts --- */
.msg-broadcasts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.msg-broadcasts-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.msg-broadcasts-hint {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
}
.msg-broadcasts-hint code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 6px;
    font-family: monospace;
}
.msg-broadcast-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 720px) {
    .msg-broadcast-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.msg-broadcast-card {
    appearance: none;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(20, 20, 22, 0.92);
    border-radius: 14px;
    padding: 12px 14px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.msg-broadcast-card:hover { border-color: rgba(255, 255, 255, 0.16); }
.msg-broadcast-card-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-broadcast-status {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
}
.msg-broadcast-status--sent { background: rgba(76, 175, 80, 0.16); color: #92ef9c; }
.msg-broadcast-status--partial { background: rgba(232, 168, 64, 0.16); color: #ffd58a; }
.msg-broadcast-status--sending { background: rgba(108, 198, 255, 0.16); color: #b0dcff; }
.msg-broadcast-status--canceled { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); }
.msg-broadcast-status--failed { background: rgba(255, 90, 90, 0.16); color: #ff8585; }
.msg-broadcast-status--draft,
.msg-broadcast-status--confirming { background: rgba(199, 155, 255, 0.16); color: #d4baff; }
.msg-broadcast-stats {
    margin-left: auto;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}
.msg-broadcast-card-row2 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.msg-broadcast-photo { font-size: 16px; }
.msg-broadcast-preview {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.msg-broadcast-card-row3 {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}
.msg-broadcast-card.is-deleted {
    opacity: 0.62;
    border-style: dashed;
    border-color: rgba(255, 90, 90, 0.32);
}
.msg-broadcast-card.is-deleted .msg-broadcast-preview {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.55);
}
.msg-broadcast-deleted-badge {
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 90, 90, 0.16);
    color: #ff8585;
    border: 1px solid rgba(255, 90, 90, 0.28);
}
.msg-broadcast-card-deleted-row {
    color: rgba(255, 133, 133, 0.78);
}
.msg-drawer-deleted-banner {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 90, 90, 0.10);
    border: 1px solid rgba(255, 90, 90, 0.28);
    color: #ffb0b0;
    font-size: 13px;
    line-height: 1.4;
}

/* --- Drawer --- */
.msg-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    z-index: 1000;
}
.msg-drawer {
    width: min(560px, 100%);
    background: linear-gradient(180deg, rgba(22, 22, 24, 0.98), rgba(14, 14, 16, 0.98));
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.msg-drawer-head {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}
.msg-drawer-title { font-weight: 800; font-size: 15px; }
.msg-drawer-close {
    margin-left: auto;
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    cursor: pointer;
}
.msg-drawer-body {
    padding: 14px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.msg-drawer-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.78);
}
.msg-drawer-photo img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 10px;
}
.msg-drawer-text-block {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 12px;
}
.msg-drawer-text {
    white-space: pre-wrap;
    font-size: 13.5px;
    line-height: 1.5;
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.msg-drawer-textarea {
    width: 100%;
    min-height: 120px;
    appearance: none;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    padding: 8px 10px;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}
.msg-drawer-text-hint {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
}
.msg-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.msg-drawer-toast {
    margin: 12px 16px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(76, 175, 80, 0.14);
    border: 1px solid rgba(76, 175, 80, 0.32);
    color: #b8f0c1;
    font-size: 13px;
    font-weight: 600;
}

.msg-edit-history {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.msg-edit-history-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.78);
}
.msg-edit-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.msg-edit-entry {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
}
.msg-edit-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}
.msg-edit-entry-author {
    font-weight: 700;
    color: rgba(244, 210, 123, 0.92);
}
.msg-edit-entry-time { color: rgba(255, 255, 255, 0.4); }
.msg-edit-entry-diff {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 520px) {
    .msg-edit-entry-diff {
        grid-template-columns: 1fr 1fr;
    }
}
.msg-edit-entry-side {
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.18);
    font-size: 12.5px;
    line-height: 1.4;
}
.msg-edit-entry-side--old {
    border-left: 3px solid rgba(255, 90, 90, 0.5);
}
.msg-edit-entry-side--new {
    border-left: 3px solid rgba(76, 175, 80, 0.5);
}
.msg-edit-entry-side-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    margin-bottom: 4px;
}
.msg-edit-entry-side-text {
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Admin: Branches page */
.admin-branches-page {
    gap: 14px;
}
.admin-branches-display-card {
    padding: 18px 16px;
}
.admin-branches-display-title {
    font-size: 16px;
    font-weight: 1000;
    color: rgba(255,255,255,0.98);
}
.admin-branches-display-toggle {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255,255,255,0.95);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    user-select: none;
}
.admin-branches-display-toggle input {
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
    accent-color: #d7b15a;
}
.admin-branches-display-toggle-copy {
    flex: 1;
}
.admin-branches-display-hint {
    margin-top: 10px;
    color: rgba(255,255,255,0.56);
    font-size: 13px;
    line-height: 1.5;
}
.admin-branches-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}
.admin-branches-action-btn {
    min-height: 46px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    font-size: 11px;
    letter-spacing: 0.1px;
}
.admin-branches-action-btn-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
}
.admin-branches-action-btn-icon svg {
    width: 14px;
    height: 14px;
}
.admin-branches-search {
    position: relative;
    display: block;
    margin-top: 2px;
}
.admin-branches-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.42);
    transform: translateY(-50%);
    pointer-events: none;
}
.admin-branches-search-icon svg {
    width: 16px;
    height: 16px;
}
.admin-branches-search-input.admin-input {
    height: 42px;
    padding-left: 38px;
    padding-right: 12px;
    border-radius: 14px;
    font-size: 12px;
}
.admin-branches-group {
    margin-top: 14px;
}
.admin-branches-group-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 2px 2px;
}
.admin-branches-group-city {
    font-size: 16px;
    font-weight: 1000;
    color: rgba(255,255,255,0.96);
}
.admin-branches-group-count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 215, 0, 0.12);
    background: rgba(255, 215, 0, 0.10);
    color: rgba(255, 219, 120, 0.96);
    font-size: 14px;
    font-weight: 900;
}
.admin-branches-group .admin-branches-card-shell {
    margin-top: 12px;
}
.admin-branch-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.admin-branch-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.admin-branch-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.admin-branch-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 219, 120, 0.96);
    border: 1px solid rgba(255, 215, 0, 0.16);
    background:
        radial-gradient(90px 80px at 30% 20%, rgba(255, 215, 0, 0.16), transparent 70%),
        rgba(255, 215, 0, 0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    flex: 0 0 56px;
}
.admin-branch-icon svg {
    width: 26px;
    height: 26px;
}
.admin-branch-main {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}
.admin-branch-name {
    font-size: 17px;
    font-weight: 1000;
    color: rgba(255,255,255,0.98);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.admin-branch-meta {
    margin-top: 7px;
    font-size: 13px;
    color: rgba(255,255,255,0.56);
    line-height: 1.35;
}
.admin-branch-status-btn {
    min-height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.92);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 120ms ease, transform 120ms ease, border-color 160ms ease, background 160ms ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.admin-branch-status-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.admin-branch-status-btn:active {
    opacity: 0.9;
    transform: translateY(1px);
}
.admin-branch-status-btn.is-active {
    border-color: rgba(80, 220, 120, 0.20);
    background: rgba(80, 220, 120, 0.06);
}
.admin-branch-status-btn.is-inactive {
    border-color: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.72);
}
.admin-branch-status-copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.admin-branch-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #28d14c;
    box-shadow: 0 0 0 3px rgba(40, 209, 76, 0.14);
}
.admin-branch-status-btn.is-inactive .admin-branch-status-dot {
    background: rgba(255,255,255,0.38);
    box-shadow: none;
}
.admin-branch-status-chevron {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.52);
}
.admin-branch-status-chevron svg {
    width: 14px;
    height: 14px;
}
.admin-branch-address-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255,255,255,0.70);
}
.admin-branch-address-row.is-hidden {
    color: rgba(255,255,255,0.45);
}
.admin-branch-address-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    margin-top: 1px;
}
.admin-branch-address-icon svg {
    width: 16px;
    height: 16px;
}
.admin-branch-address {
    font-size: 14px;
    line-height: 1.45;
}
.admin-branch-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
}
.admin-branch-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.admin-branch-action-btn.admin-mini-btn {
    min-height: 50px;
    height: 50px;
    border-radius: 16px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.admin-branch-action-btn--primary {
    border-color: rgba(255, 215, 0, 0.18);
    background:
        radial-gradient(120px 80px at 20% 20%, rgba(255, 215, 0, 0.12), transparent 60%),
        rgba(255, 215, 0, 0.05);
    color: rgba(255, 231, 170, 0.96);
}
.admin-branch-action-btn--danger.admin-mini-btn {
    border-color: rgba(255, 90, 90, 0.20);
    background: rgba(120, 20, 26, 0.26);
    color: rgba(255, 150, 150, 0.96);
}
.admin-branch-action-btn--full {
    grid-column: 1 / -1;
}
.admin-branch-action-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
}
.admin-branch-action-icon svg {
    width: 16px;
    height: 16px;
}
.admin-branch-edit {
    display: grid;
    gap: 12px;
}
.admin-branch-edit-fields {
    display: grid;
    gap: 10px;
}
.admin-branch-edit-input.admin-input {
    height: 48px;
    border-radius: 16px;
}
.admin-branch-edit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.admin-branch-edit-btn.admin-btn {
    width: 100%;
}
@media (max-width: 640px) {
    .admin-branches-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 420px) {
    .admin-branch-top {
        flex-direction: column;
    }
    .admin-branch-status-btn {
        width: 100%;
        justify-content: space-between;
    }
    .admin-branch-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-branch-action-btn--full {
        grid-column: 1 / -1;
    }
}

/* =========================================================================
   Admin: Branches v2 — clean, compact cards
   ========================================================================= */
.admin-br2 {
    gap: 10px;
}

/* Compact display toggle (single-line label + small hint) */
.admin-br2 .admin-br2-display {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 18, 20, 0.55);
    padding: 10px 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.admin-br2 .admin-br2-display-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.admin-br2 .admin-br2-display-toggle input {
    flex: 0 0 auto;
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
    accent-color: #d7b15a;
}
.admin-br2 .admin-br2-display-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.admin-br2 .admin-br2-display-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
}
.admin-br2 .admin-br2-display-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* Toolbar: primary "Add" + small icon refresh */
.admin-br2 .admin-br2-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-br2 .admin-br2-add-btn {
    flex: 1 1 auto;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.32);
    background:
        linear-gradient(180deg, rgba(58, 48, 18, 0.94) 0%, rgba(36, 30, 12, 0.94) 100%);
    color: rgba(255, 245, 210, 0.98);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 215, 0, 0.18);
    transition: filter 140ms ease, transform 100ms ease;
}
.admin-br2 .admin-br2-add-btn:hover { filter: brightness(1.08); }
.admin-br2 .admin-br2-add-btn:active { transform: translateY(1px); }
.admin-br2 .admin-br2-add-btn:disabled { opacity: 0.55; cursor: default; }
.admin-br2 .admin-br2-add-btn-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-br2 .admin-br2-add-btn-icon svg { width: 14px; height: 14px; }

.admin-br2 .admin-br2-icon-btn {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(18, 18, 20, 0.65);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 140ms ease, transform 100ms ease, color 140ms ease;
}
.admin-br2 .admin-br2-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.96);
}
.admin-br2 .admin-br2-icon-btn:active { transform: translateY(1px); }
.admin-br2 .admin-br2-icon-btn:disabled { opacity: 0.4; cursor: default; }
.admin-br2 .admin-br2-icon-btn svg { width: 18px; height: 18px; }

/* Search */
.admin-br2 .admin-br2-search {
    position: relative;
    display: block;
}
.admin-br2 .admin-br2-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-br2 .admin-br2-search-icon svg { width: 16px; height: 16px; }
.admin-br2 .admin-br2-search-input.admin-input {
    height: 40px;
    padding-left: 38px;
    padding-right: 14px;
    border-radius: 999px;
    font-size: 13px;
}

/* States */
.admin-br2 .admin-br2-state {
    text-align: center;
    padding: 18px 12px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
}
.admin-br2 .admin-br2-state--empty {
    color: rgba(255, 255, 255, 0.55);
}

/* Group */
.admin-br2 .admin-br2-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.admin-br2 .admin-br2-group-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}
.admin-br2 .admin-br2-group-city {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.admin-br2 .admin-br2-group-count {
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.10);
    border: 1px solid rgba(255, 215, 0, 0.18);
    color: rgba(255, 235, 175, 0.92);
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-br2 .admin-br2-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card */
.admin-br2 .admin-br2-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(220px 140px at 16% 18%, rgba(255, 255, 255, 0.05), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.012) 100%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.admin-br2 .admin-br2-card:hover {
    border-color: rgba(255, 215, 0, 0.16);
}

.admin-br2 .admin-br2-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.admin-br2 .admin-br2-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 219, 130, 0.95);
    border: 1px solid rgba(255, 215, 0, 0.18);
    background:
        radial-gradient(60px 50px at 30% 25%, rgba(255, 215, 0, 0.18), transparent 70%),
        rgba(255, 215, 0, 0.05);
}
.admin-br2 .admin-br2-icon svg { width: 18px; height: 18px; }
.admin-br2 .admin-br2-main {
    flex: 1;
    min-width: 0;
}
.admin-br2 .admin-br2-name {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.97);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-br2 .admin-br2-meta {
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}
.admin-br2 .admin-br2-meta-dot { color: rgba(255, 255, 255, 0.22); font-weight: 700; }

/* Status pill (compact) */
.admin-br2 .admin-br2-status {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}
.admin-br2 .admin-br2-status:active { transform: translateY(1px); }
.admin-br2 .admin-br2-status:disabled { opacity: 0.55; cursor: default; }
.admin-br2 .admin-br2-status.is-on {
    border-color: rgba(80, 220, 120, 0.28);
    background: rgba(80, 220, 120, 0.10);
    color: rgba(170, 240, 190, 0.96);
}
.admin-br2 .admin-br2-status.is-off {
    color: rgba(255, 255, 255, 0.62);
}
.admin-br2 .admin-br2-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
}
.admin-br2 .admin-br2-status.is-on .admin-br2-status-dot {
    background: #28d14c;
    box-shadow: 0 0 0 3px rgba(40, 209, 76, 0.18);
}

/* Address line */
.admin-br2 .admin-br2-address {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.35;
    min-width: 0;
}
.admin-br2 .admin-br2-address.is-hidden {
    color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.015);
    border-style: dashed;
}
.admin-br2 .admin-br2-address-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: rgba(255, 215, 0, 0.65);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-br2 .admin-br2-address-icon svg { width: 14px; height: 14px; }
.admin-br2 .admin-br2-address-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-br2 .admin-br2-address-tag {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}

/* Action row: 3 ghost buttons + icon-only delete */
.admin-br2 .admin-br2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.admin-br2 .admin-br2-action {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease, color 140ms ease;
}
.admin-br2 .admin-br2-action:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}
.admin-br2 .admin-br2-action:active { transform: translateY(1px); }
.admin-br2 .admin-br2-action:disabled { opacity: 0.5; cursor: default; }
.admin-br2 .admin-br2-action--primary {
    border-color: rgba(255, 215, 0, 0.28);
    background:
        linear-gradient(180deg, rgba(46, 40, 22, 0.9), rgba(28, 24, 12, 0.9));
    color: rgba(255, 235, 175, 0.96);
}
.admin-br2 .admin-br2-action--primary:hover {
    background:
        linear-gradient(180deg, rgba(56, 48, 24, 0.94), rgba(34, 28, 14, 0.94));
}
.admin-br2 .admin-br2-action--danger {
    border-color: rgba(255, 90, 90, 0.22);
    color: rgba(255, 150, 150, 0.92);
}
.admin-br2 .admin-br2-action--danger:hover {
    background: rgba(255, 90, 90, 0.10);
    border-color: rgba(255, 90, 90, 0.32);
    color: rgba(255, 175, 175, 0.98);
}
.admin-br2 .admin-br2-action--icon-only {
    flex: 0 0 34px;
    width: 34px;
    padding: 0;
}
.admin-br2 .admin-br2-action--icon-only svg { width: 16px; height: 16px; }
.admin-br2 .admin-br2-action-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
}
.admin-br2 .admin-br2-action-icon svg { width: 14px; height: 14px; }

/* Inline edit mode */
.admin-br2 .admin-br2-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-br2 .admin-br2-edit-input.admin-input {
    height: 40px;
    border-radius: 12px;
    font-size: 13px;
}
.admin-br2 .admin-br2-edit-actions {
    display: flex;
    gap: 6px;
}
.admin-br2 .admin-br2-edit-save,
.admin-br2 .admin-br2-edit-cancel {
    flex: 1;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, transform 100ms ease;
}
.admin-br2 .admin-br2-edit-save {
    border-color: rgba(255, 215, 0, 0.32);
    background:
        linear-gradient(180deg, rgba(58, 48, 18, 0.94), rgba(36, 30, 12, 0.94));
    color: rgba(255, 245, 210, 0.98);
}
.admin-br2 .admin-br2-edit-save:hover { filter: brightness(1.08); }
.admin-br2 .admin-br2-edit-cancel:hover { background: rgba(255, 255, 255, 0.06); }
.admin-br2 .admin-br2-edit-save:active,
.admin-br2 .admin-br2-edit-cancel:active { transform: translateY(1px); }
.admin-br2 .admin-br2-edit-save:disabled,
.admin-br2 .admin-br2-edit-cancel:disabled { opacity: 0.55; cursor: default; }

@media (max-width: 380px) {
    .admin-br2 .admin-br2-card { padding: 10px; gap: 8px; }
    .admin-br2 .admin-br2-icon { flex-basis: 32px; width: 32px; height: 32px; }
    .admin-br2 .admin-br2-icon svg { width: 16px; height: 16px; }
    .admin-br2 .admin-br2-name { font-size: 13px; }
    .admin-br2 .admin-br2-action { font-size: 11px; padding: 0 8px; }
}

/* Admin settings - аккуратная форма (без вылезания инпутов и с контрастом) */
.admin-settings-page {
    background: #000;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    padding-bottom: 160px; /* space for fixed save bar + bottom nav */
}

.admin-settings-page #admin-settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
}

.admin-settings-page .profile-section {
    margin-bottom: 0;
    border-radius: 21px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px;
}

.admin-settings-page .profile-section-title {
    margin-bottom: 14px;
}

.admin-settings-page .profile-item.editable {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    gap: 8px;
}

.admin-settings-page .profile-item.editable + .profile-item.editable {
    margin-top: 12px;
}

.admin-settings-page .profile-input {
    background: #0d0d0d;
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 12px 12px;
}

.admin-settings-page .admin-settings-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 10px;
    line-height: 1.4;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.admin-settings-page details.admin-settings-hint {
    padding: 0;
}

.admin-settings-page details.admin-settings-hint > summary {
    cursor: pointer;
    padding: 10px 12px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    outline: none;
    user-select: none;
}

.admin-settings-page details.admin-settings-hint > summary::-webkit-details-marker {
    display: none;
}

.admin-settings-page details.admin-settings-hint > summary::after {
    content: "▼";
    float: right;
    opacity: 0.6;
    transform: translateY(1px);
}

.admin-settings-page details.admin-settings-hint[open] > summary::after {
    content: "▲";
}

.admin-settings-page details.admin-settings-hint > div {
    padding: 0 12px 12px;
}

.admin-settings-page .profile-item-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.68);
}

.admin-settings-page .profile-section-title {
    font-family: 'Bounded', var(--srp-font);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.admin-settings-page .admin-title {
    font-family: 'Bounded', var(--srp-font);
    font-weight: 700;
}

.admin-settings-savebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)); /* above bottom nav */
    z-index: 2500;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Admin: Branches (филиалы) */
.admin-branches-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.admin-branch-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.12);
}
.admin-branch-active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.85);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
}
.admin-branch-actions {
    display: flex;
    gap: 10px;
    grid-column: 1 / -1;
    flex-wrap: wrap;
}
.admin-branch-add {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: center;
}
@media (max-width: 390px) {
    .admin-branch-add { grid-template-columns: 1fr 1fr; }
    .admin-branch-add #admin-branch-add-btn { grid-column: 1 / -1; width: 100%; }
}

.admin-settings-page .admin-settings-save-btn {
    margin: 0;
    background: #930400;
    border-radius: 18px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 0 20px;
    height: 44px;
    justify-content: center;
}

.admin-settings-page .admin-settings-save-btn:active {
    opacity: 0.85;
}

/* Admin settings v2 — карточки секций, строки как в мобильном макете */
.admin-settings-v2 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 560px;
    margin: 0 auto;
}
.admin-settings-v2-loading,
.admin-settings-v2-error {
    text-align: center;
    padding: 28px 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}
.admin-settings-v2-error {
    border-radius: 16px;
    background: rgba(245, 87, 108, 0.14);
    border: 1px solid rgba(245, 87, 108, 0.28);
    color: #ffb3bc;
}
.admin-settings-v2-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(28, 28, 30, 0.98) 0%, rgba(14, 14, 16, 0.98) 100%);
    padding: 16px 14px 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.admin-settings-v2-heading {
    margin: 0 0 12px;
    padding: 0 2px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}
.admin-settings-v2-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-settings-v2-stack .profile-edit-modal__toggle-row {
    margin-bottom: 0;
}
.admin-settings-v2-toggle-row__text {
    min-width: 0;
    flex: 1;
}
/* Кнопка-строка с переходом на отдельный экран (например, live-предпросмотр
   затемнения главной). Стилистически близко к toggle-row, но без свитча — */
/* справа стрелка-шеврон. */
.admin-settings-v2-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(212, 175, 55, 0.22);
    color: #fff;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 120ms ease, background-color 120ms ease;
    font: inherit;
}
.admin-settings-v2-action-row:hover,
.admin-settings-v2-action-row:focus-visible {
    border-color: rgba(212, 175, 55, 0.50);
    background: rgba(212, 175, 55, 0.08);
    outline: none;
}
.admin-settings-v2-action-row__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-settings-v2-action-row__title {
    font-weight: 800;
    font-size: 14px;
    color: #fff;
}
.admin-settings-v2-action-row__hint {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}
.admin-settings-v2-action-row__chevron {
    flex-shrink: 0;
    color: #d4af37;
    display: inline-flex;
}
.admin-settings-v2-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-settings-v2-select-row__text {
    flex: 1;
    min-width: 0;
}
.admin-settings-v2-select-row__title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}
.admin-settings-v2-select-row__hint {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.45);
}
.admin-settings-v2-select-row__control {
    flex-shrink: 0;
    width: auto !important;
    min-width: 88px;
    max-width: 120px !important;
    margin-left: 0 !important;
}
.admin-settings-page .admin-settings-v2-number-input {
    flex-shrink: 0;
    width: 112px;
    max-width: 132px;
    margin: 0 !important;
    padding: 10px 22px 10px 8px !important;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    accent-color: #d4af37;
}
/* Chromium / Safari: стрелки stepper — по умолчанию почти не видны на #0d0d0d */
.admin-settings-page .admin-settings-v2-number-input::-webkit-inner-spin-button,
.admin-settings-page .admin-settings-v2-number-input::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    opacity: 1;
    height: 2.25em;
    min-height: 2.25em;
    cursor: pointer;
    filter: invert(1) brightness(1.35) contrast(0.95);
}
.admin-settings-page .admin-settings-v2-number-input:hover::-webkit-inner-spin-button,
.admin-settings-page .admin-settings-v2-number-input:hover::-webkit-outer-spin-button {
    filter: invert(1) brightness(1.55) contrast(1);
}
.admin-settings-v2-info {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(197, 160, 89, 0.22);
    background: rgba(197, 160, 89, 0.06);
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}
.admin-settings-v2-info__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(197, 160, 89, 0.45);
    color: #e6c56c;
    font-size: 11px;
    font-weight: 800;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.admin-settings-v2-footnote {
    margin-top: 10px;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.48);
}
.admin-settings-v2-inset {
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-settings-v2-inset--details {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}
.admin-settings-page .admin-settings-embed-asset {
    margin-top: 0 !important;
}
.admin-settings-v2-media-stack {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-settings-v2-media-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.admin-settings-v2-media-row:last-child {
    border-bottom: none;
}
.admin-settings-v2-media-row:active {
    background: rgba(255, 255, 255, 0.04);
}
.admin-settings-v2-media-row__label {
    min-width: 0;
    flex: 1;
    color: rgba(255, 255, 255, 0.88);
}
.admin-settings-v2-media-row__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.admin-settings-v2-media-row__thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-settings-v2-media-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.admin-settings-v2-media-row__placeholder {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.28);
}
.admin-settings-v2-chevron {
    font-size: 22px;
    font-weight: 300;
    color: rgba(197, 160, 89, 0.75);
    line-height: 1;
    transform: translateY(-1px);
}
.admin-settings-v2-chevron-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: none;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.admin-settings-v2-chevron-row:active {
    background: rgba(255, 255, 255, 0.05);
}
.admin-settings-v2-chevron-row__text {
    flex: 1;
    min-width: 0;
}
.admin-settings-v2-chevron-row__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.admin-settings-v2-chevron-row__sub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}
.admin-settings-v2-chevron-row__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.admin-settings-v2-chevron-row__value {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-settings-v2-details {
    margin-top: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.admin-settings-v2-details-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    user-select: none;
}
.admin-settings-v2-details-summary::-webkit-details-marker {
    display: none;
}
.admin-settings-v2-details-summary::after {
    content: "›";
    font-size: 22px;
    font-weight: 300;
    color: rgba(197, 160, 89, 0.75);
    line-height: 1;
}
.admin-settings-v2-details[open] .admin-settings-v2-details-summary::after {
    content: "⌄";
    font-size: 16px;
    transform: translateY(-2px);
}

.admin-settings-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #ffffff;
    user-select: none;
}

.admin-settings-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.admin-settings-admins-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.admin-settings-admin-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
}

.admin-settings-admin-item:active {
    opacity: 0.85;
}

.admin-settings-admin-item.is-disabled {
    opacity: 0.55;
    cursor: default;
}

.admin-settings-admin-item input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.admin-settings-admin-meta {
    min-width: 0;
    flex: 1;
}

.admin-settings-admin-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.admin-settings-admin-sub {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.65);
    word-break: break-word;
}

.admin-settings-empty {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}

.admin-settings-page .admin-create-player-btn {
    margin-bottom: 0;
}

.admin-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
        radial-gradient(220px 140px at 20% 20%, rgba(255,255,255,0.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 12px 28px rgba(0,0,0,0.32);
    transition: transform 120ms ease, opacity 160ms ease;
}

.admin-menu-item:active {
    opacity: 0.90;
    transform: translateY(1px);
}

.admin-menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    font-size: 18px;
}

.admin-menu-content {
    flex: 1;
}

.admin-menu-title {
    font-size: 15px;
    font-weight: 900;
    color: rgba(255,255,255,0.96);
    margin-bottom: 4px;
}

.admin-menu-description {
    font-size: 12px;
    color: rgba(255,255,255,0.60);
    line-height: 1.25;
}

.admin-menu-arrow {
    color: rgba(255,255,255,0.55);
    font-size: 18px;
}

/* Вкладки разделов админ-панели (шапка) */
.admin-hub-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 0 12px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Десктоп: перетаскивание мышью по горизонтали (touch не затрагивается) */
.admin-hub-tabs.mouse-drag-scroll {
    cursor: grab;
}
.admin-hub-tabs.mouse-drag-scroll .admin-hub-tab {
    cursor: inherit;
}
.admin-hub-tabs.mouse-drag-scroll--grabbing {
    cursor: grabbing;
    user-select: none;
}
.admin-hub-tabs::-webkit-scrollbar {
    display: none;
}
.admin-hub-tab {
    flex: 0 0 auto;
    position: relative;
    padding: 10px 12px 12px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.admin-hub-tab:active {
    opacity: 0.88;
}
.admin-hub-tab--active {
    color: #e6be5c;
}
.admin-hub-tab--active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, #c9a227, #f0d78c, #c9a227);
}

.admin-players-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-player-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #1e1e1e;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.admin-player-item:active {
    background: #2a2a2a;
}

.admin-player-info {
    flex: 1;
}

.admin-player-name {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
}

.admin-player-details {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #999;
}

.admin-player-arrow {
    color: #999;
    font-size: 18px;
}

.admin-badge {
    background: #ff6b6b;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.level-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.level-badge.level-1 {
    background: #4ecdc4;
    color: #fff;
}

.level-badge.level-2 {
    background: #45b7d1;
    color: #fff;
}

.level-badge.level-3 {
    background: #f39c12;
    color: #fff;
}


.admin-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-edit-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-edit-form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

.admin-edit-form-group input[type="text"],
.admin-edit-form-group input[type="number"] {
    padding: 12px;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
}

.admin-edit-form-group input[type="checkbox"] {
    margin-right: 8px;
}

.admin-edit-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-edit-label {
    font-size: 14px;
    color: #ffffff;
}

.admin-edit-value {
    font-size: 16px;
    color: #fff;
    padding: 12px;
    background: #1e1e1e;
    border-radius: 8px;
}

.admin-edit-input, .admin-edit-select {
    padding: 12px;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
}

.admin-edit-input:focus, .admin-edit-select:focus {
    outline: none;
    border-color: #3390ec;
}

.admin-edit-select option {
    background: #1a1a1a;
    color: #ffffff;
}

.admin-search-container {
    margin-bottom: 16px;
}

.admin-balance-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.admin-ref-filters {
    margin: -6px 0 16px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.10);
}
.admin-ref-filters-title {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    margin-bottom: 10px;
}
.admin-ref-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.admin-ref-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.admin-ref-row:last-child { margin-bottom: 0; }
.admin-ref-row .admin-search-input { flex: 1; }
.admin-ref-hint {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}

.admin-filter-chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1c1c1e;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.admin-filter-chip:active {
    opacity: 0.85;
    transform: scale(0.98);
}

.admin-filter-chip--active {
    background: var(--tg-theme-button-color, #3390ec);
    color: var(--tg-theme-button-text-color, #fff);
    border-color: rgba(255, 255, 255, 0.2);
}

.admin-search-input {
    width: 100%;
    padding: 12px;
    background: var(--tg-theme-secondary-bg-color, #1e1e1e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--tg-theme-text-color, #fff);
    font-size: 16px;
}

.admin-search-input:focus {
    outline: none;
    border-color: #3390ec;
}

.admin-reset-nickname-btn {
    padding: 8px 12px;
    background: var(--tg-theme-button-color, #3390ec);
    color: var(--tg-theme-button-text-color, #fff);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: opacity 0.2s;
}

.admin-reset-nickname-btn:active {
    opacity: 0.7;
}

.admin-ban-btn {
    padding: 12px 24px;
    background: #ff6b6b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: not-allowed;
    opacity: 0.5;
}

.admin-edit-actions {
    margin-top: 24px;
}

.admin-save-btn {
    width: 100%;
    padding: 16px;
    background: #3390ec;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.admin-save-btn:active {
    opacity: 0.8;
}

.admin-create-player-btn {
    width: 100%;
    padding: 14px;
    background: #3390ec;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.admin-create-player-btn:active {
    opacity: 0.8;
}

.admin-timer-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--tg-theme-button-color, #2481cc);
    background: transparent;
    color: var(--tg-theme-button-color, #2481cc);
    font-size: 13px;
    cursor: pointer;
}
.admin-timer-btn:active {
    opacity: 0.8;
}

.admin-timer-rounds-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
}

.admin-timer-round-row {
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
    display: grid;
    grid-template-columns: 1fr 72px 72px 56px 56px auto auto;
    gap: 8px;
    align-items: end;
}

.admin-timer-round-row.is-break {
    border-color: var(--tg-theme-button-color, #2481cc);
    background: rgba(36, 129, 204, 0.1);
}

.admin-timer-round-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-timer-round-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

.admin-timer-round-row .admin-timer-round-name { width: 100%; min-width: 0; }
.admin-timer-round-row .admin-timer-round-blinds-small,
.admin-timer-round-row .admin-timer-round-blinds-big { width: 100%; min-width: 0; }
.admin-timer-round-row .admin-timer-round-ante { width: 100%; min-width: 0; }
.admin-timer-round-row .admin-timer-round-duration { width: 100%; min-width: 0; }
.admin-timer-round-row .admin-timer-round-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; align-self: end; }
.admin-timer-round-row .admin-timer-round-break-after { padding: 4px 8px; font-size: 11px; color: var(--tg-theme-link-color, #2481cc); background: none; border: none; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.admin-timer-round-row .admin-timer-round-del { padding: 6px 10px; font-size: 12px; color: #ff6b6b; background: transparent; border: 1px solid #ff6b6b; border-radius: 6px; cursor: pointer; white-space: nowrap; align-self: end; }

@media (max-width: 520px) {
    .admin-timer-round-row {
        grid-template-columns: 1fr 1fr auto;
        grid-template-rows: auto auto auto auto auto;
    }
    .admin-timer-round-row .admin-timer-round-field:nth-child(1) { grid-column: 1; grid-row: 1; }
    .admin-timer-round-row .admin-timer-round-field:nth-child(2) { grid-column: 2; grid-row: 1; }
    .admin-timer-round-row .admin-timer-round-field:nth-child(3) { grid-column: 1; grid-row: 2; }
    .admin-timer-round-row .admin-timer-round-field:nth-child(4) { grid-column: 2; grid-row: 2; }
    .admin-timer-round-row .admin-timer-round-field:nth-child(5) { grid-column: 1; grid-row: 3; }
    .admin-timer-round-row .admin-timer-round-actions { grid-column: 2; grid-row: 3; }
    .admin-timer-round-row .admin-timer-round-del { grid-column: 3; grid-row: 1 / 4; align-self: center; }
}

.admin-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.admin-modal.active {
    display: flex;
}

.admin-modal-content {
    background: #1a1a1a;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}

.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.admin-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.admin-modal-close {
    background: none;
    border: none;
    color: #999;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-modal-close:active {
    opacity: 0.7;
}

.loading, .empty-state, .error {
    text-align: center;
    padding: 32px;
    color: #999;
}

.error {
    color: #ff6b6b;
}

/* ============================================
   Profile
   ============================================ */
.profile-header {
    text-align: center;
    padding: 24px 0;
}
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #930400;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 36px;
    color: #fff;
    font-weight: 600;
}
.profile-name {
    font-family: 'Bounded', var(--srp-font);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
}
.profile-username {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.profile-section {
    background: #292929;
    border-radius: 21px;
    padding: 18px;
    margin-bottom: 12px;
}
.profile-section-title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.profile-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.profile-item:last-child { border-bottom: none; }
.profile-item.editable {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.profile-item-label {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}
.profile-item-value {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.profile-input {
    width: 100%;
    padding: 10px 12px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    background: #0d0d0d;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    max-width: 100%;
}
.profile-input:focus {
    border-color: #930400;
}

.profile-save-btn {
    width: 100%;
    margin-top: 16px;
    padding: 0 24px;
    height: 40px;
    background: #930400;
    color: #fff;
    border: none;
    border-radius: 18px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    line-height: 1;
}
.profile-save-btn:active { opacity: 0.8; }
.profile-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.profile-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.profile-avatar-btn {
    padding: 0 14px;
    height: 32px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 600;
    border-radius: 18px;
    border: 1px solid #505050;
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: opacity 0.2s;
    line-height: 1;
}
.profile-avatar-btn:hover { opacity: 0.9; }
.profile-avatar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.profile-avatar-btn--danger {
    background: rgba(147, 4, 0, 0.25);
    color: #ef5350;
    border-color: rgba(147, 4, 0, 0.5);
}
.profile-item--avatar-actions .profile-item-label { margin-bottom: 4px; }

.profile-link {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    margin-top: 8px;
    text-decoration: none;
    color: #fff;
    background: #1a1a1a;
    border-radius: 12px;
    border: none;
    transition: opacity 0.2s;
}
.profile-link:active { opacity: 0.7; }
.profile-link-icon {
    font-size: 18px;
    margin-right: 12px;
    opacity: 0.7;
}
.profile-link-text {
    flex: 1;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.profile-link-arrow {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
}

.profile-avatar-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
}
.profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* ---- Profile Header Card ---- */
.profile-header-card {
    background: #292929;
    border-radius: 21px;
    padding: 20px;
    margin-bottom: 12px;
}
.profile-header-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.profile-header-card .profile-avatar-container {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    margin: 0;
}
.profile-header-card .profile-avatar {
    width: 72px;
    height: 72px;
    font-size: 30px;
    margin: 0;
}
.profile-header-info {
    flex: 1;
    min-width: 0;
}
.profile-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.profile-name-row .profile-name {
    font-family: 'Bounded', var(--srp-font);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-admin-crown {
    display: inline-flex;
    align-items: center;
}
.profile-edit-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
}
.profile-edit-btn:hover { color: rgba(255,255,255,0.9); }
.profile-tg-id,
.profile-user-id {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}
.profile-qr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border-radius: 18px;
    border: none;
    background: #930400;
    color: #fff;
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    line-height: 1;
}
.profile-qr-btn:active { opacity: 0.85; }

/* ---- Achievements ---- */
.profile-achievements-section { padding-bottom: 10px; }
.profile-achievements-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #505050;
    background: #1a1a1a;
}
.profile-tab {
    flex: 1;
    padding: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border-radius: 18px;
}
.profile-tab.active {
    background: #930400;
    color: #fff;
}
.profile-stat-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.profile-stat-row:last-child { border-bottom: none; }
.profile-stat-icon {
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.45);
}
.profile-stat-label {
    flex: 1;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}
.profile-stat-value {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.profile-tournament-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.profile-select {
    flex: 1;
    padding: 8px 10px;
    border-radius: 12px;
    background: #0d0d0d;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    outline: none;
}

/* ---- Address block ---- */
.profile-address-section .profile-address-body { margin-top: 8px; }
.profile-address-link {
    color: #5eb3f6;
    text-decoration: none;
}
.profile-address-link:hover { text-decoration: underline; }

/* ---- QR Modal ---- */
.qr-modal-content {
    background: #292929;
    border-radius: 21px;
    padding: 24px;
    text-align: center;
    max-width: 340px;
    width: 90%;
}
.qr-modal-content .modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    cursor: pointer;
}
#qr-canvas {
    /* без border-radius: скругление режет углы QR и ломает сканирование */
    margin: 16px auto;
    display: block;
}
.qr-user-id-text {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
}

/* ---- Edit Profile Modal ---- */
.edit-profile-modal-content {
    background: #292929;
    border-radius: 21px;
    padding: 20px;
    max-width: 400px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
}
.edit-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.edit-avatar-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.07);
    border: 2px solid rgba(255,255,255,0.12);
}
.edit-avatar-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.edit-avatar-preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
}
.profile-avatar-actions--centered {
    justify-content: center;
}

/* ---- Edit Profile Modal (premium dark + gold) ---- */
.modal.profile-edit-modal {
    background: #121212;
    border-radius: 12px;
    max-width: 440px;
    border: 1px solid rgba(197, 160, 89, 0.12);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    color: #fff;
}

.profile-edit-modal .modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-edit-modal .modal-title {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.profile-edit-modal .modal-close {
    color: #c5a059;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
}

.profile-edit-modal .modal-close:hover,
.profile-edit-modal .modal-close:active {
    color: #d4b56e;
    opacity: 1;
}

.profile-edit-modal .modal-body {
    padding: 20px;
    background: #121212;
}

.profile-edit-modal .modal-footer {
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    gap: 10px;
    background: #121212;
}

.profile-edit-modal .modal-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    border-radius: 10px;
    height: 44px;
}

.profile-edit-modal .modal-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.04);
}

.profile-edit-modal .modal-btn-primary.modal-btn-primary--gold {
    border-radius: 10px;
    height: 44px;
    background: linear-gradient(180deg, #d4b56e 0%, #a8843a 55%, #8f6f2e 100%);
    color: #0d0d0d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.profile-edit-modal .modal-btn-primary.modal-btn-primary--gold:hover {
    filter: brightness(1.04);
}

.profile-edit-modal__section {
    margin-bottom: 20px;
}

.profile-edit-modal__section:last-child {
    margin-bottom: 0;
}

.profile-edit-modal__referral-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(197, 160, 89, 0.42);
    background: linear-gradient(180deg, rgba(197, 160, 89, 0.16) 0%, rgba(197, 160, 89, 0.06) 100%);
    color: #f0e2c2;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.profile-edit-modal__referral-link:hover {
    background: linear-gradient(180deg, rgba(197, 160, 89, 0.22) 0%, rgba(197, 160, 89, 0.10) 100%);
    border-color: rgba(197, 160, 89, 0.65);
}

.profile-edit-modal__referral-link:active {
    transform: scale(0.99);
}

.profile-edit-modal__referral-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(197, 160, 89, 0.18);
    color: #e8dcc4;
    flex-shrink: 0;
}

.profile-edit-modal__referral-link-label {
    flex: 1;
    min-width: 0;
}

.profile-edit-modal__referral-link-chevron {
    color: rgba(232, 220, 196, 0.55);
    flex-shrink: 0;
}

.profile-edit-modal__section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 10px 2px;
}

.profile-edit-modal__hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.profile-edit-modal__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(197, 160, 89, 0.55);
}

.profile-edit-modal__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-edit-modal__avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
}

.profile-edit-modal__hero-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 2px;
}

.profile-edit-modal__hero-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    word-break: break-word;
}

.profile-edit-modal__badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
}

.profile-edit-modal__photo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid rgba(197, 160, 89, 0.55);
    background: transparent;
    color: #e8dcc4;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}

.profile-edit-modal__photo-btn:hover:not(:disabled) {
    background: rgba(197, 160, 89, 0.1);
    border-color: rgba(197, 160, 89, 0.85);
}

.profile-edit-modal__photo-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.profile-edit-modal__photo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.profile-edit-modal__photo-ghost {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(197, 160, 89, 0.35);
    background: rgba(197, 160, 89, 0.08);
    color: #e8dcc4;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.profile-edit-modal__photo-ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-edit-modal__photo-ghost--muted {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
}

.profile-edit-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 8px;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-edit-modal__row:last-child {
    margin-bottom: 0;
}

.profile-edit-modal__row-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    max-width: 46%;
}

.profile-edit-modal__row-label--req .profile-edit-modal__req {
    color: rgba(197, 160, 89, 0.9);
}

.profile-edit-modal__row-value {
    flex: 1;
    min-width: 0;
    text-align: right;
}

.profile-edit-modal__input,
.profile-edit-modal__select {
    width: 100%;
    max-width: 220px;
    margin-left: auto;
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 14px;
    font-family: 'Satoshi', var(--srp-font);
    outline: none;
    box-sizing: border-box;
}

.profile-edit-modal__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23C5A059' stroke-width='1.5' d='M3 4.5L6 7.5l3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: rgba(0, 0, 0, 0.25);
}

.profile-edit-modal__input:focus,
.profile-edit-modal__select:focus {
    border-color: rgba(197, 160, 89, 0.45);
}

.profile-edit-modal__input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.profile-edit-modal__hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.48);
}

.profile-edit-modal__email-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.profile-edit-modal__email-head-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.profile-edit-modal__pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.profile-edit-modal__pill--ok {
    background: rgba(46, 204, 113, 0.14);
    color: #8ef0b0;
}

.profile-edit-modal__pill--warn {
    background: transparent;
    color: #e8dcc4;
    border: 1px solid rgba(197, 160, 89, 0.55);
}

.profile-edit-modal__email-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #1a1a1a;
    color: #fff;
    font-size: 14px;
    font-family: 'Satoshi', var(--srp-font);
    outline: none;
    box-sizing: border-box;
}

.profile-edit-modal__email-input:focus {
    border-color: rgba(197, 160, 89, 0.4);
}

.profile-edit-modal__email-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.profile-edit-modal__btn-gold {
    flex: 1;
    min-width: 120px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(197, 160, 89, 0.45);
    background: rgba(197, 160, 89, 0.12);
    color: #e8dcc4;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Satoshi', var(--srp-font);
}

.profile-edit-modal__btn-gold:disabled {
    opacity: 0.55;
    cursor: wait;
}

.profile-edit-modal__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    margin-bottom: 8px;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-edit-modal__toggle-text {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.profile-edit-modal__toggle-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.35;
}

.profile-edit-modal__switch {
    position: relative;
    width: 46px;
    height: 28px;
    flex-shrink: 0;
}

.profile-edit-modal__switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.profile-edit-modal__switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.2s;
    cursor: pointer;
}

.profile-edit-modal__switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s;
    pointer-events: none;
}

.profile-edit-modal__switch input:checked + .profile-edit-modal__switch-track {
    background: rgba(197, 160, 89, 0.45);
}

.profile-edit-modal__switch input:checked + .profile-edit-modal__switch-track .profile-edit-modal__switch-thumb {
    transform: translateX(18px);
}

.profile-edit-modal__switch input:disabled + .profile-edit-modal__switch-track {
    opacity: 0.45;
    cursor: default;
}

.profile-edit-modal__check-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 8px;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    user-select: none;
}

.profile-edit-modal__check-row input {
    margin-top: 3px;
    accent-color: #c5a059;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.profile-edit-modal__check-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.35;
}

.profile-edit-modal__alert {
    padding: 10px 12px;
    background: rgba(245, 87, 108, 0.12);
    border: 1px solid rgba(245, 87, 108, 0.22);
    border-radius: 8px;
    color: #ffb3bc;
    font-size: 13px;
    margin-bottom: 14px;
}

.profile-edit-modal__stack {
    margin-top: 12px;
}

@media (max-width: 420px) {
    .profile-edit-modal__row {
        flex-direction: column;
        align-items: stretch;
    }
    .profile-edit-modal__row-label {
        max-width: none;
    }
    .profile-edit-modal__row-value {
        text-align: left;
    }
    .profile-edit-modal__input,
    .profile-edit-modal__select {
        max-width: none;
        margin-left: 0;
    }
}

/* ---- Terms Screen (full-screen agreement) ---- */
.terms-screen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: #111111;
    color: #fff;
}
.terms-screen__scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.terms-screen__scroll::-webkit-scrollbar { width: 0; }
.terms-screen__content {
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 20px 32px 20px;
}
.terms-screen__title {
    margin: 0 0 22px 0;
    font-family: var(--app-font-family);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    line-height: 1.2;
}
.terms-screen__text {
    font-family: var(--app-font-family);
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255,255,255,0.78);
    white-space: normal;
}
.terms-screen__text .terms-heading {
    display: block;
    margin: 24px 0 8px 0;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    line-height: 1.3;
}
.terms-screen__text .terms-heading:first-child { margin-top: 0; }
.terms-screen__text .terms-paragraph {
    display: block;
    margin: 0 0 12px 0;
}
.terms-screen__text .terms-paragraph:last-child { margin-bottom: 0; }

.terms-screen__footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)) 20px;
    background: linear-gradient(0deg, #111111 60%, rgba(17,17,17,0));
}
.terms-screen__scroll-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.terms-screen__scroll-btn:active { opacity: 0.7; }
.terms-screen__scroll-btn.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.terms-screen__accept {
    flex: 1;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #111;
    font-family: var(--app-font-family);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}
.terms-screen__accept:active { opacity: 0.85; }
.terms-screen__accept:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ---- Floating QR button ---- */
.floating-qr-btn {
    position: fixed;
    bottom: calc(68px + env(safe-area-inset-bottom, 8px));
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #930400;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.15s;
}
.floating-qr-btn:active { transform: scale(0.92); }

/* Bottom Navigation — glass pill with warm gold active state */
.bottom-nav {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 36px);
    max-width: 400px;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 4px 5px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(18, 18, 22, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(236, 197, 107, 0.12);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 236, 190, 0.03) inset;
    overflow: hidden;
}
.nav-slider {
    position: absolute;
    top: 3px;
    left: 0;
    height: 42px;
    border-radius: 999px;
    background:
        radial-gradient(120% 85% at 50% 0%, rgba(255, 222, 140, 0.55) 0%, transparent 52%),
        linear-gradient(165deg, #d4a84a 0%, #b8892a 38%, #8a6518 100%);
    box-shadow:
        0 0 0 1px rgba(255, 245, 210, 0.22) inset,
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 8px 20px rgba(0, 0, 0, 0.32);
    transition:
        left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
    z-index: 0;
    pointer-events: none;
}
.nav-item {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    min-height: 50px;
    cursor: pointer;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.62);
    -webkit-tap-highlight-color: transparent;
    border-radius: 999px;
    user-select: none;
}
.nav-item:active { opacity: 0.88; }
.nav-item.active { color: #fff7e8; }

/* Убираем точку-индикатор над иконкой (не нужна в нашем UI) */
.nav-item::after { display: none !important; }

.nav-icon {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    transform: translateZ(0);
}
.nav-item.active .nav-icon {
    transform: translateZ(0);
}
.nav-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: none;
    overflow: visible;
}

/* Пятая вкладка (pokerTable) может появляться динамически — держим визуально ровно как остальные */
.nav-item[data-page="pokerTable"] .nav-icon svg {
    width: 22px;
    height: 22px;
}
.nav-icon svg path,
.nav-icon svg circle,
.nav-icon svg rect,
.nav-icon svg line,
.nav-icon svg polyline,
.nav-icon svg polygon {
    transition: none;
}

.nav-label {
    font-size: 10px;
    font-weight: 700;
    font-family: 'Satoshi', var(--srp-font);
    letter-spacing: 0.22px;
    opacity: 0.92;
}

/* В стиле CodePen: в нижнем таб-баре оставляем только иконки (текст доступен через aria-label) */
.bottom-nav .nav-label {
    display: none;
}

/* ——— Покер-стол (страница «Стол» в мини-апп) ——— */
.poker-table-page .poker-table-header {
    padding-bottom: 12px;
}
.poker-table-wrap {
    padding: 0 16px 24px;
    min-height: 40vh;
}
.poker-table-loading,
.poker-table-not-in-game {
    text-align: center;
    padding: 24px 16px;
    color: var(--tg-theme-hint-color);
}
.poker-table-not-in-game p {
    margin: 0;
}
.poker-table-meta {
    font-size: 13px;
    color: var(--tg-theme-hint-color);
    margin-bottom: 12px;
}
/* Круглый/овальный стол: поверхность + места по кругу */
.poker-table-surface {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 16px;
    aspect-ratio: 1.4 / 1;
    background: linear-gradient(160deg, #0d4d0d 0%, #0a350a 50%, #062006 100%);
    border-radius: 50%;
    border: 4px solid #8b6914;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4), 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: visible; /* чтобы бейджи/карты вокруг мест не обрезались */
}
.poker-table-seats {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.poker-table-seats .poker-seat {
    pointer-events: auto;
}
.poker-seat {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    overflow: visible; /* позволяем показывать подсказки/карты рядом */
    transition:
        left 180ms ease,
        top 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease,
        filter 180ms ease;
    will-change: left, top;
}
.poker-seat--me {
    border-color: var(--tg-theme-button-color, #2481cc);
    background: rgba(36, 129, 204, 0.35);
    box-shadow: 0 0 12px rgba(36, 129, 204, 0.5);
}
.poker-seat--to-act {
    border-color: #ffd93d;
    background: rgba(255, 217, 61, 0.25);
    box-shadow: 0 0 14px rgba(255, 217, 61, 0.6);
    animation: poker-seat-pulse 1.2s ease-in-out infinite;
}
@keyframes poker-seat-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 217, 61, 0.6); }
    50% { box-shadow: 0 0 20px rgba(255, 217, 61, 0.9); }
}
.poker-seat--folded {
    opacity: 0.7;
    filter: grayscale(1);
    border-color: rgba(255, 255, 255, 0.15);
}
.poker-seat:not(.poker-seat--folded) {
    border-color: rgba(255, 255, 255, 0.35);
}
.poker-seat-name {
    display: block;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.poker-seat-stack {
    display: block;
    font-size: 12px;
    color: #b8e986;
    margin-top: 2px;
}
.poker-seat-status {
    display: block;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1px;
}
.poker-seat--winner {
    border-color: #4caf50 !important;
    background: rgba(76, 175, 80, 0.22);
    box-shadow: 0 0 16px rgba(76, 175, 80, 0.65);
}
.poker-seat-cards {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 6px);
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    z-index: 5;
}
.poker-seat--lower .poker-seat-cards {
    top: auto;
    bottom: 100%;
    transform: translate(-50%, -6px);
}
.poker-seat-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    border-radius: 6px;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.poker-seat-hand {
    position: absolute;
    left: 50%;
    top: calc(100% + 22px);
    transform: translate(-50%, 6px);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 5;
}
.poker-seat--lower .poker-seat-hand {
    top: auto;
    bottom: calc(100% + 22px);
    transform: translate(-50%, -6px);
}
.poker-result-text {
    font-weight: 700;
}
.poker-your-hand {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}
.poker-table-my-hand {
    text-align: center;
    margin-top: -8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
/* Центр стола: банк + доска */
.poker-table-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    z-index: 2;
}
.poker-table-pot {
    font-size: 15px;
    font-weight: 700;
    color: #ffd93d;
    margin-bottom: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.poker-table-board {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    min-height: 32px;
    align-items: center;
}
.poker-board-empty {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}
.poker-board-card {
    display: inline-block;
    background: linear-gradient(145deg, #fff 0%, #e8e8e8 100%);
    color: #1a1a1a;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.poker-card-rank {
    display: inline;
}
.poker-card-suit {
    display: inline;
    margin-left: 1px;
}
.poker-card-suit--red {
    color: #d64545;
}
.poker-card-joker {
    color: #1a1a1a;
}
/* Таймер и инфо хода */
.poker-table-turn-info {
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
}
.poker-turn-label {
    font-weight: 600;
    color: var(--tg-theme-text-color);
}
.poker-timer {
    color: #ffd93d;
    font-weight: 600;
    margin-left: 6px;
}
.poker-table-my-cards {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
    min-height: 36px;
}
.poker-my-card {
    display: inline-block;
    background: linear-gradient(145deg, #fff 0%, #e8e8e8 100%);
    color: #1a1a1a;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.poker-my-card-placeholder {
    font-size: 14px;
    color: var(--tg-theme-hint-color);
}
.poker-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-height: 48px;
}
.poker-table-controls {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.poker-end-btn {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}
.poker-end-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}
.poker-end-btn--danger {
    background: rgba(192, 57, 43, 0.92);
    color: #fff;
}
.poker-table-actions--my-turn {
    padding: 12px 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    border: 2px solid rgba(255, 217, 61, 0.5);
    margin-top: 4px;
}
.poker-table-actions--my-turn .poker-action-btn {
    padding: 12px 16px;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.poker-action-btn {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: var(--tg-theme-secondary-bg-color);
    color: var(--tg-theme-text-color);
    -webkit-tap-highlight-color: transparent;
}
.poker-action-amt {
    font-weight: 700;
    opacity: 0.9;
    margin-left: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}
.poker-action-btn:active {
    opacity: 0.85;
}
.poker-action-btn--fold {
    background: #5a5a5a;
    color: #fff;
}
.poker-action-btn--call {
    background: var(--tg-theme-button-color);
    color: var(--tg-theme-button-text-color);
}
.poker-action-btn--allin {
    background: #c0392b;
    color: #fff;
}
.poker-wait-hint {
    text-align: center;
    color: var(--tg-theme-hint-color);
    font-size: 14px;
    margin: 0;
}

/* Нижняя навигация — дополнительные стили (только скрытие при клавиатуре) */
.bottom-nav {
    transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Скрывать нижнее меню при открытой клавиатуре (без reflow, чтобы не дёргать скролл на iOS) */
body.keyboard-open .bottom-nav {
    transform: translate(-50%, 120%);
    opacity: 0;
    pointer-events: none;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--tg-theme-hint-color);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 14px;
}

/* Game details page - modern block design */
.game-details-page {
    padding: 16px 12px 90px !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.game-details-page .srp-gd-back-row{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.game-details-page .srp-gd-back-btn{
    position: static;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.game-details-page .srp-gd-back-btn:active{
    opacity: 0.7;
}

.game-details-page .srp-gd-top-card{
    margin-bottom: 12px;
}

/* Дублирующее CTA «Записаться / Отменить бронь», закреплённое внизу карточки
   игры. Сидит над .bottom-nav (которая bottom: 10px и ~56px высотой), плавно
   затемняет контент под собой градиентом. */
.game-details-page{
    /* Чтобы последний контент не прятался под закреплённой кнопкой. */
    padding-bottom: 96px;
}
.srp-gd-sticky-cta-wrap{
    position: fixed;
    right: 14px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    width: 28%;
    min-width: 140px;
    max-width: 200px;
    z-index: 6;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
}
.srp-gd-sticky-cta{
    pointer-events: auto;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 220, 130, 0.55);
    background: linear-gradient(180deg, #d4af37 0%, #a07a1f 100%);
    color: #1a1308;
    font-family: 'Bounded', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 90ms ease, box-shadow 120ms ease, opacity 120ms ease;
    white-space: nowrap;
}
.srp-gd-sticky-cta:hover,
.srp-gd-sticky-cta:focus-visible{
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    outline: none;
}
.srp-gd-sticky-cta:active{
    transform: scale(0.99);
}
.srp-gd-sticky-cta-arrow{
    font-size: 18px;
    line-height: 0.8;
    margin-top: -1px;
    color: #1a1308;
}

/* Публичный «топ» завершённой игры — для игрока без управленческих прав. */
.game-details-page .gd-top-section{
    margin-top: 14px;
    border-radius: 22px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    background: linear-gradient(180deg, rgba(24, 21, 18, 0.92) 0%, rgba(14, 12, 10, 0.96) 100%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 14px 14px 16px;
}
.game-details-page .gd-top-section-head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.game-details-page .gd-top-section-title{
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    color: #f1d37a;
    letter-spacing: 0.02em;
}
.game-details-page .gd-top-section-count{
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
}
.game-details-page .gd-top-empty{
    padding: 18px 8px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}
.game-details-page .gd-top-list{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.game-details-page .gd-top-row{
    display: grid;
    grid-template-columns: 36px 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    color: #fff;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.game-details-page .gd-top-row:disabled{
    cursor: default;
}
.game-details-page .gd-top-row:hover:not(:disabled){
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 175, 55, 0.28);
}
.game-details-page .gd-top-row:active:not(:disabled){
    transform: scale(0.995);
}
.game-details-page .gd-top-row.is-me{
    border-color: rgba(124, 255, 149, 0.42);
    background: rgba(76, 175, 80, 0.10);
}
.game-details-page .gd-top-row.is-in-game .gd-top-place{
    color: rgba(124, 255, 149, 0.78);
    background: rgba(76, 175, 80, 0.10);
    border-color: rgba(124, 255, 149, 0.22);
}
.game-details-page .gd-top-row.is-compact{
    grid-template-columns: 38px minmax(0, 1fr);
}
.game-details-page .gd-top-place{
    width: 36px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 900;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-variant-numeric: tabular-nums;
}
.game-details-page .gd-top-place.is-gold{
    color: #1a1308;
    background: linear-gradient(180deg, #f7d977 0%, #d4af37 100%);
    border-color: rgba(255, 220, 130, 0.7);
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.35);
}
.game-details-page .gd-top-place.is-silver{
    color: #1a1a1a;
    background: linear-gradient(180deg, #e8e8e8 0%, #b9b9b9 100%);
    border-color: rgba(255, 255, 255, 0.5);
}
.game-details-page .gd-top-place.is-bronze{
    color: #1a1308;
    background: linear-gradient(180deg, #d39875 0%, #a06a3f 100%);
    border-color: rgba(220, 150, 100, 0.55);
}
.game-details-page .gd-top-avatar{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.game-details-page .gd-top-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.game-details-page .gd-top-avatar-fallback{
    font-weight: 900;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
}
.game-details-page .gd-top-nick{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}
.game-details-page .gd-top-stats{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.game-details-page .gd-top-stat{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
}
.game-details-page .gd-top-stat svg{
    color: #d4af37;
    flex-shrink: 0;
}
.game-details-page .gd-top-stat strong{
    color: #fff;
    font-weight: 900;
}
.game-details-page .gd-top-stat--points strong{
    color: #f1d37a;
    font-size: 14px;
}
.game-details-page .gd-top-stat-unit{
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    font-weight: 700;
}

.game-details-page .srp-gd-top-actions{
    margin-bottom: 14px;
}

.game-details-page .srp-gd-hero{
    position: relative;
    border-radius: 28px;
    border: 1px solid rgba(212,175,55,0.16);
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(212,175,55,0.14), rgba(212,175,55,0.00) 58%),
        linear-gradient(180deg, rgba(24,21,18,0.96) 0%, rgba(14,12,10,0.98) 100%);
    box-shadow: 0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
    padding: 22px 20px 18px;
}
.game-details-page .srp-gd-hero::before{
    content:"";
    position:absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00) 30%);
    pointer-events:none;
    opacity:1;
}
.game-details-page .srp-gd-hero-row{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.game-details-page .srp-gd-hero-left{
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.game-details-page .srp-gd-hero-actions{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 2px;
}
.game-details-page .srp-gd-hero-icon-btn{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.game-details-page .srp-gd-hero-icon-btn:hover:not(:disabled){
    background: rgba(255,255,255,0.10);
    border-color: rgba(212,175,55,0.28);
}
.game-details-page .srp-gd-hero-icon-btn:active:not(:disabled){
    transform: scale(0.96);
}
.game-details-page .srp-gd-hero-icon-btn:disabled{
    opacity: 0.45;
    cursor: not-allowed;
}
.game-details-page .srp-gd-hero-icon-btn--start{
    border-color: rgba(76,175,80,0.35);
    background: rgba(76,175,80,0.12);
    color: #7CFF95;
}
.game-details-page .srp-gd-hero-icon-btn--start:hover:not(:disabled){
    background: rgba(76,175,80,0.18);
    border-color: rgba(76,175,80,0.45);
}
.game-details-page .srp-gd-hero-topline{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.game-details-page .srp-gd-hero-eyebrow{
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(255,255,255,0.48);
}
.game-details-page .srp-gd-hero-title{
    font-weight: 900;
    font-size: clamp(26px, 7vw, 40px);
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: #ffffff;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.game-details-page .srp-gd-hero-sub{
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
    color: rgba(255,255,255,0.70);
    max-width: none;
}
.game-details-page .srp-gd-hero-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.game-details-page .srp-gd-chip{
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.90);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.game-details-page .srp-gd-chip--status{
    min-height: 36px;
    font-weight: 900;
}
@media (max-width: 560px){
    .game-details-page .srp-gd-hero{
        padding: 18px 16px 16px;
    }
    .game-details-page .srp-gd-hero-title{
        font-size: clamp(22px, 9vw, 34px);
        -webkit-line-clamp: 4;
    }
}

.game-details-page .gd-section{
    margin-top: 18px;
}
.game-details-page .gd-section-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.game-details-page .gd-section-title{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bounded', 'Satoshi', sans-serif;
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
}
.game-details-page .gd-section-title::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #c59e47;
    box-shadow: 0 0 12px rgba(197, 158, 71, 0.4);
    flex-shrink: 0;
}
.game-details-page .gd-section-box{
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.025) 100%);
    box-shadow: 0 12px 28px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
}
.game-details-page .gd-section-box--plain{
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
/* Variant 'info': мелкий серый uppercase-заголовок, белый контент,
   тонкая золотая полоска слева для маркировки. Используется для
   таба «Информация» в карточке игры. */
.game-details-page .gd-section--info{
    margin-top: 18px;
    padding-left: 14px;
    border-left: 2px solid rgba(197, 158, 71, 0.55);
}
.game-details-page .gd-section--info .gd-section-head{
    margin-bottom: 6px;
}
.game-details-page .gd-section--info .gd-section-title{
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.game-details-page .gd-section--info .gd-section-title::before{
    display: none;
}
.game-details-page .gd-section--info .gd-copy-block,
.game-details-page .gd-section--info .gd-copy-block--muted{
    color: #fff;
    font-size: 14px;
    line-height: 1.55;
}
.game-details-page .gd-seg-btn{
    flex: 1;
    padding: 11px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.70);
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
    transition: transform 120ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.game-details-page .gd-seg-btn:active{
    transform: translateY(1px);
}
.game-details-page .gd-seg-btn.is-active{
    border-color: rgba(212,175,55,0.28);
    background: linear-gradient(180deg, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0.08) 100%);
    color: #f3d66e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 18px rgba(0,0,0,0.22);
}

/* =========================================================================
   Game players panel — search + 4-tab segmented control + actions row
   ========================================================================= */
.game-details-page .gd-pl {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.game-details-page .gd-pl-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.game-details-page .gd-pl-search-row .gd-pl-search {
    flex: 1 1 auto;
    min-width: 0;
}
.game-details-page .gd-pl-add-icon-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid rgba(76, 175, 80, 0.32);
    background: rgba(76, 175, 80, 0.10);
    color: rgba(170, 240, 185, 0.98);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease, color 140ms ease;
}
.game-details-page .gd-pl-add-icon-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}
.game-details-page .gd-pl-add-icon-btn:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.18);
    border-color: rgba(76, 175, 80, 0.45);
    color: rgba(190, 255, 200, 0.98);
}
.game-details-page .gd-pl-add-icon-btn:active:not(:disabled) {
    transform: translateY(1px);
}
.game-details-page .gd-pl-add-icon-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.game-details-page .gd-pl-search {
    position: relative;
    width: 100%;
}
.game-details-page .gd-pl-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.game-details-page .gd-pl-search-icon svg { width: 16px; height: 16px; }
.game-details-page .gd-pl-search-input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 38px 0 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(18, 18, 20, 0.55);
    color: rgba(255, 255, 255, 0.96);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 600;
    outline: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.game-details-page .gd-pl-search-input::placeholder {
    color: rgba(255, 255, 255, 0.42);
    font-weight: 500;
}
.game-details-page .gd-pl-search-input:focus {
    border-color: rgba(255, 215, 0, 0.32);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.game-details-page .gd-pl-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 140ms ease, transform 100ms ease;
}
.game-details-page .gd-pl-search-clear:hover { background: rgba(255, 255, 255, 0.14); }
.game-details-page .gd-pl-search-clear:active { transform: translateY(-50%) scale(0.94); }

/* Tabs — single-row segmented control. Use flex-grow so tabs share width on
   wide screens, but rely on intrinsic content width as the minimum so labels
   never wrap. If total content exceeds container, the row scrolls horizontally. */
.game-details-page .gd-pl-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 10, 12, 0.78);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.game-details-page .gd-pl-tabs::-webkit-scrollbar { display: none; }
.game-details-page .gd-pl-tab {
    flex: 1 0 auto;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 180ms ease, color 160ms ease, box-shadow 200ms ease, transform 100ms ease;
}
.game-details-page .gd-pl-tab-label {
    white-space: nowrap;
    line-height: 1;
}
.game-details-page .gd-pl-tab:hover { color: rgba(255, 255, 255, 0.86); }
.game-details-page .gd-pl-tab:active { transform: translateY(1px); }
.game-details-page .gd-pl-tab.is-active {
    color: rgba(255, 250, 230, 0.98);
    background: linear-gradient(180deg, rgba(46, 40, 22, 0.96) 0%, rgba(28, 24, 12, 0.96) 100%);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(212, 175, 55, 0.38),
        inset 0 1px 0 rgba(255, 215, 0, 0.16);
}
.game-details-page .gd-pl-tab-label { line-height: 1; }
.game-details-page .gd-pl-tab-count {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    line-height: 1.2;
    min-width: 18px;
    text-align: center;
}
.game-details-page .gd-pl-tab-count:empty { display: none; }
.game-details-page .gd-pl-tab.is-active .gd-pl-tab-count {
    color: rgba(20, 16, 6, 0.92);
    background: linear-gradient(180deg, rgba(255, 220, 120, 0.96) 0%, rgba(220, 180, 70, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Actions row — Add + Sort */
.game-details-page .gd-pl-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.game-details-page .gd-pl-add-btn {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(76, 175, 80, 0.30);
    background: rgba(76, 175, 80, 0.10);
    color: rgba(170, 240, 185, 0.98);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.game-details-page .gd-pl-add-btn:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.16);
    border-color: rgba(76, 175, 80, 0.42);
}
.game-details-page .gd-pl-add-btn:active:not(:disabled) { transform: translateY(1px); }
.game-details-page .gd-pl-add-btn:disabled { opacity: 0.55; cursor: default; }
.game-details-page .gd-pl-add-btn-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
}
.game-details-page .gd-pl-add-btn-icon svg { width: 14px; height: 14px; }

.game-details-page .gd-pl-sort {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.game-details-page .gd-pl-sort-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.game-details-page .gd-pl-sort-select {
    height: 32px;
    border-radius: 999px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
}
.game-details-page .gd-pl-sort-select:focus {
    border-color: rgba(255, 215, 0, 0.32);
}

/* Right-column points: muted state for active players who haven't scored yet */
.game-details-page .gd-pl-row-pts {
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}
.game-details-page .gd-pl-row-pts--muted {
    opacity: 0.30;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

/* =========================================================================
   Tables panel — compact tabs + slim seat rows + inline self-seat strip
   ========================================================================= */
.game-details-page .gd-tbl {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Wrapper with edge-fade + chevron indicators when content overflows horizontally */
.game-details-page .gd-tbl-tabs-wrap {
    position: relative;
}
.game-details-page .gd-tbl-tabs-wrap::before,
.game-details-page .gd-tbl-tabs-wrap::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    color: rgba(255, 215, 0, 0.92);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    transition: opacity 200ms ease, transform 200ms ease;
}
.game-details-page .gd-tbl-tabs-wrap::before {
    content: '‹';
    left: 0;
    padding-left: 8px;
    justify-content: flex-start;
    background: linear-gradient(to left, transparent 0%, rgba(8, 8, 10, 0.88) 70%);
    transform: translateX(-6px);
}
.game-details-page .gd-tbl-tabs-wrap::after {
    content: '›';
    right: 0;
    padding-right: 8px;
    justify-content: flex-end;
    background: linear-gradient(to right, transparent 0%, rgba(8, 8, 10, 0.88) 70%);
    transform: translateX(6px);
}
.game-details-page .gd-tbl-tabs-wrap.has-fade-left::before {
    opacity: 1;
    transform: translateX(0);
}
.game-details-page .gd-tbl-tabs-wrap.has-fade-right::after {
    opacity: 1;
    transform: translateX(0);
    animation: gd-tbl-hint-pulse 1.6s ease-in-out 0.3s 2;
}
@keyframes gd-tbl-hint-pulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); color: rgba(255, 232, 160, 1); }
}

/* Tabs row — compact pills, scroll horizontally if many tables */
.game-details-page .gd-tbl-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.game-details-page .gd-tbl-tabs::-webkit-scrollbar { display: none; }
.game-details-page .gd-tbl-tab {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.game-details-page .gd-tbl-tab:hover { color: rgba(255, 255, 255, 0.96); }
.game-details-page .gd-tbl-tab:active { transform: translateY(1px); }
.game-details-page .gd-tbl-tab.is-active {
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.14);
    color: rgba(255, 232, 160, 0.98);
}
.game-details-page .gd-tbl-tab-count {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    line-height: 1.2;
    min-width: 16px;
    text-align: center;
}
.game-details-page .gd-tbl-tab.is-active .gd-tbl-tab-count {
    color: rgba(20, 16, 6, 0.92);
    background: linear-gradient(180deg, rgba(255, 220, 120, 0.96) 0%, rgba(220, 180, 70, 0.96) 100%);
}

/* "My seat" inline strip */
.game-details-page .gd-tbl-self {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(76, 175, 80, 0.20);
    background: rgba(76, 175, 80, 0.06);
}
.game-details-page .gd-tbl-self-pick {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(170, 240, 185, 0.96);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 140ms ease, transform 100ms ease;
}
.game-details-page .gd-tbl-self-pick:hover:not(:disabled) { color: rgba(190, 255, 200, 0.98); }
.game-details-page .gd-tbl-self-pick:active:not(:disabled) { transform: translateY(1px); }
.game-details-page .gd-tbl-self-pick:disabled { opacity: 0.55; cursor: default; }
.game-details-page .gd-tbl-self-leave {
    flex: 0 0 auto;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(245, 87, 108, 0.30);
    background: rgba(245, 87, 108, 0.10);
    color: rgba(255, 160, 175, 0.95);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, color 140ms ease, transform 100ms ease;
}
.game-details-page .gd-tbl-self-leave:hover:not(:disabled) {
    background: rgba(245, 87, 108, 0.16);
    color: rgba(255, 175, 190, 0.98);
}
.game-details-page .gd-tbl-self-leave:active:not(:disabled) { transform: translateY(1px); }
.game-details-page .gd-tbl-self-leave:disabled { opacity: 0.55; cursor: default; }

/* Seat grid — slim single-line rows */
.game-details-page .gd-tbl-empty {
    padding: 14px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.62);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
}
.game-details-page .gd-tbl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.game-details-page .gd-tbl-seat {
    display: grid;
    grid-template-columns: 24px 28px 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Satoshi', var(--srp-font);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.game-details-page .gd-tbl-seat:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
}
.game-details-page .gd-tbl-seat:active:not(:disabled) { transform: translateY(1px); }
.game-details-page .gd-tbl-seat:disabled { cursor: default; opacity: 0.7; }
.game-details-page .gd-tbl-seat.is-occupied {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}
.game-details-page .gd-tbl-seat.is-free {
    border-color: rgba(76, 175, 80, 0.22);
    background: rgba(76, 175, 80, 0.06);
    border-style: dashed;
}
.game-details-page .gd-tbl-seat.is-free:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.36);
}
.game-details-page .gd-tbl-seat.is-mine {
    border-color: rgba(212, 175, 55, 0.42);
    background: rgba(212, 175, 55, 0.10);
}
.game-details-page .gd-tbl-seat-num {
    width: 24px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.game-details-page .gd-tbl-seat.is-mine .gd-tbl-seat-num {
    background: rgba(212, 175, 55, 0.22);
    color: rgba(255, 232, 160, 0.98);
}
.game-details-page .gd-tbl-seat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bounded', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    flex: 0 0 auto;
}
.game-details-page .gd-tbl-seat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.game-details-page .gd-tbl-seat-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(76, 175, 80, 0.55);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.14);
    justify-self: center;
}
.game-details-page .gd-tbl-seat-name {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.game-details-page .gd-tbl-seat-name--free {
    color: rgba(170, 240, 185, 0.88);
    font-weight: 700;
}
.game-details-page .gd-tbl-seat-chevron {
    font-size: 16px;
    line-height: 1;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.32);
    user-select: none;
}
.game-details-page .gd-tbl-seat:hover:not(:disabled) .gd-tbl-seat-chevron {
    color: rgba(255, 215, 0, 0.78);
}

@media (max-width: 380px) {
    .game-details-page .gd-tbl { padding: 10px; gap: 8px; }
    .game-details-page .gd-tbl-grid { grid-template-columns: 1fr; }
    .game-details-page .gd-tbl-seat { min-height: 48px; }
    .game-details-page .gd-tbl-seat-name { font-size: 12px; }
}

/* Group separator inside «Все» tab */
.game-details-page .gd-pl-group-sep {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}
.game-details-page .gd-pl-group-sep:first-child {
    border-top: 0;
}
.game-details-page .gd-pl-group-sep-count {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 8px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}

@media (max-width: 380px) {
    .game-details-page .gd-pl { padding: 10px; gap: 8px; }
    .game-details-page .gd-pl-tab { font-size: 11px; padding: 0 6px; }
    .game-details-page .gd-pl-tab-count { font-size: 10px; padding: 1px 5px; min-width: 16px; }
    .game-details-page .gd-pl-add-btn { font-size: 11px; padding: 0 12px; }
    .game-details-page .gd-pl-group-sep { padding: 7px 10px; }
}

.game-details-page .gd-info-card{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
}
.game-details-page .gd-info-dot{
    margin-top: 9px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f4d76d 0%, #cf9d21 100%);
    box-shadow: 0 0 14px rgba(212,175,55,0.36);
    flex-shrink: 0;
}
.game-details-page .gd-info-body{
    min-width: 0;
}
.game-details-page .gd-info-name{
    font-size: clamp(18px, 4.4vw, 22px);
    line-height: 1.35;
    font-weight: 800;
    color: rgba(255,255,255,0.96);
    word-break: break-word;
}
.game-details-page .gd-info-text{
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,0.68);
    white-space: pre-wrap;
}
.game-details-page .gd-info-meta{
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255,255,255,0.54);
}
.game-details-page .gd-info-pills{
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.game-details-page .gd-info-pill{
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(212,175,55,0.20);
    background: rgba(212,175,55,0.10);
    color: #f3d66e;
    font-size: 12px;
    font-weight: 900;
}
.game-details-page .gd-info-link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: #f0cf67;
    font-weight: 800;
    text-decoration: none;
}
.game-details-page .gd-info-link:hover{
    text-decoration: underline;
}
.game-details-page .gd-copy-block{
    padding: 0;
    font-size: 15px;
    line-height: 1.58;
    color: rgba(255,255,255,0.76);
    white-space: pre-wrap;
}
.game-details-page .gd-copy-block--muted{
    color: rgba(255,255,255,0.64);
}
.game-details-page .gd-feature-list{
    margin-top: 6px;
    margin-bottom: 0;
    padding-left: 22px;
}
.game-details-page .gd-feature-item{
    margin: 3px 0;
    padding-left: 4px;
}
.game-details-page .gd-feature-item::marker{
    color: #f0cf67;
}

.game-details-page .srp-gd-tabs{
    --gd-tab-pad-x: 6px;
    --gd-tab-pad-y: 5px;
    position: relative;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    gap: 0;
    margin-top: 12px;
    padding: var(--gd-tab-pad-y) var(--gd-tab-pad-x);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #1a1a1a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
/* Золотая плашка-ползунок за вкладками */
.game-details-page .srp-gd-tabs__thumb{
    position: absolute;
    z-index: 0;
    top: var(--gd-tab-pad-y);
    bottom: var(--gd-tab-pad-y);
    left: var(--gd-tab-pad-x);
    width: calc((100% - (2 * var(--gd-tab-pad-x))) / var(--srp-gd-tab-count, 2));
    border-radius: 999px;
    background: linear-gradient(180deg, #d4b45c 0%, #c59e47 52%, #b08d3f 100%);
    border: 1px solid rgba(197, 158, 71, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
    transform: translateX(calc(var(--srp-gd-tab-index, 0) * 100%));
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .game-details-page .srp-gd-tabs__thumb{
        transition-duration: 0.01ms;
    }
}
.game-details-page .srp-gd-tab{
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 999px;
    padding: 12px 10px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 1000;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, opacity 160ms ease, color 0.28s ease;
}
.game-details-page .srp-gd-tab:active{ opacity: 0.88; transform: translateY(1px); }
.game-details-page .srp-gd-tab.is-active{
    color: #0d0d0d;
}

.game-details-page .srp-gd-cta-wrap{
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 10px 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.72) 70%, rgba(0,0,0,0.00) 100%);
}
.game-details-page .srp-gd-cta-shell{
    padding: 10px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, rgba(24,23,20,0.92) 0%, rgba(12,12,11,0.96) 100%);
    box-shadow: 0 18px 40px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.game-details-page .srp-gd-cta{
    width: 100%;
    height: 58px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 1000;
    font-size: 17px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, opacity 160ms ease, background 160ms ease, color 160ms ease;
}
.game-details-page .srp-gd-cta:active:not(:disabled){
    transform: translateY(1px);
}
.game-details-page .srp-gd-cta--reserve{
    background: linear-gradient(180deg, #fff8e7 0%, #ecd18a 100%);
    color: #15120d;
    box-shadow: 0 16px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.58);
}
.game-details-page .srp-gd-cta--cancel{
    border-color: rgba(255,255,255,0.10);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.05) 100%);
    color: rgba(255,255,255,0.96);
    box-shadow: 0 16px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
}
.game-details-page .srp-gd-cta:disabled{ opacity: 0.72; cursor: default; }

.game-details-page .srp-gd-admin-shell{
    padding: 12px;
    display: grid;
    gap: 12px;
}
.game-details-page .srp-gd-admin-group{
    display: grid;
    gap: 8px;
}
.game-details-page .srp-gd-admin-group-label{
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(255,255,255,0.42);
    padding: 0 2px;
}
.game-details-page .srp-gd-admin-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.game-details-page .srp-gd-admin-stack{
    display: grid;
    gap: 8px;
}
.game-details-page .srp-gd-admin-btn{
    min-width: 0;
    min-height: 64px;
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
    color: rgba(255,255,255,0.96);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.22);
    transition: transform 120ms ease, opacity 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 3px;
}
.game-details-page .srp-gd-admin-btn:hover:not(:disabled){
    border-color: rgba(255,255,255,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 28px rgba(0,0,0,0.26);
}
.game-details-page .srp-gd-admin-btn:active:not(:disabled){
    transform: translateY(1px);
}
.game-details-page .srp-gd-admin-btn:disabled{
    opacity: 0.68;
    cursor: default;
}
.game-details-page .srp-gd-admin-btn-title{
    display: block;
    font-weight: 950;
    font-size: 15px;
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.game-details-page .srp-gd-admin-btn-sub{
    display: block;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    color: currentColor;
    opacity: 0.62;
}
.game-details-page .srp-gd-admin-btn--green{
    border-color: rgba(76,175,80,0.26);
    background: linear-gradient(180deg, rgba(76,175,80,0.18) 0%, rgba(76,175,80,0.10) 100%);
    color: #8fff9d;
}
.game-details-page .srp-gd-admin-btn--neutral{
    border-color: rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%);
    color: rgba(255,255,255,0.96);
}
.game-details-page .srp-gd-admin-btn--red{
    border-color: rgba(245,87,108,0.28);
    background: linear-gradient(180deg, rgba(245,87,108,0.18) 0%, rgba(245,87,108,0.10) 100%);
    color: #ff91a1;
}
.game-details-page .srp-gd-admin-btn--gold{
    border-color: rgba(212,175,55,0.24);
    background: linear-gradient(180deg, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.10) 100%);
    color: #f1d37a;
}
.game-details-page .srp-gd-admin-row{
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
    color: rgba(255,255,255,0.95);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 120ms ease, opacity 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.game-details-page .srp-gd-admin-row:active:not(:disabled){
    transform: translateY(1px);
}
.game-details-page .srp-gd-admin-row:disabled{
    opacity: 0.68;
    cursor: default;
}
.game-details-page .srp-gd-admin-row-main{
    font-size: 15px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.02em;
}
.game-details-page .srp-gd-admin-row-sub{
    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;
    color: inherit;
    opacity: 0.58;
}
.game-details-page .srp-gd-admin-row--gold{
    border-color: rgba(212,175,55,0.20);
    background: linear-gradient(180deg, rgba(212,175,55,0.14) 0%, rgba(212,175,55,0.08) 100%);
    color: #f1d37a;
}
.game-details-page .srp-gd-admin-row--danger{
    border-color: rgba(245,87,108,0.22);
    background: linear-gradient(180deg, rgba(245,87,108,0.14) 0%, rgba(245,87,108,0.08) 100%);
    color: #ff98a6;
}

@media (max-width: 560px){
    .game-details-page .srp-gd-tabs{
        --gd-tab-pad-x: 5px;
        --gd-tab-pad-y: 4px;
    }
    .game-details-page .srp-gd-tab{
        padding: 11px 6px;
        font-size: 10px;
        letter-spacing: 0.05em;
    }
    .game-details-page .srp-gd-admin-btn{
        min-height: 60px;
        padding: 11px 12px;
    }
    .game-details-page .srp-gd-admin-btn-title,
    .game-details-page .srp-gd-admin-row-main{
        font-size: 14px;
    }
    .game-details-page .srp-gd-admin-btn-sub,
    .game-details-page .srp-gd-admin-row-sub{
        font-size: 10px;
    }
}

/* =========================================================================
   Game admin actions block — compact, modern v2
   ========================================================================= */
.game-details-page .gd-adm2 {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.game-details-page .gd-adm2-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.game-details-page .gd-adm2-block-label {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 0 2px;
    line-height: 1.2;
}
.game-details-page .gd-adm2-block-label--danger {
    color: rgba(255, 165, 175, 0.55);
}
.game-details-page .gd-adm2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.game-details-page .gd-adm2-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.game-details-page .gd-adm2-note {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 2px;
}
.game-details-page .gd-adm2-group--danger {
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 165, 175, 0.18);
}
.game-details-page .gd-adm2-danger-row {
    display: flex;
    justify-content: flex-start;
}

.game-details-page .gd-adm2-btn {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease, filter 140ms ease;
}
.game-details-page .gd-adm2-danger-row .gd-adm2-btn {
    width: auto;
    min-width: 160px;
}
.game-details-page .gd-adm2-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
}
.game-details-page .gd-adm2-btn:active:not(:disabled) {
    transform: translateY(1px);
}
.game-details-page .gd-adm2-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.game-details-page .gd-adm2-btn-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    opacity: 0.85;
}
.game-details-page .gd-adm2-btn-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.game-details-page .gd-adm2-btn--green {
    border-color: rgba(76, 175, 80, 0.32);
    background: rgba(76, 175, 80, 0.10);
    color: rgba(170, 240, 185, 0.98);
}
.game-details-page .gd-adm2-btn--green:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.16);
    border-color: rgba(76, 175, 80, 0.42);
}
.game-details-page .gd-adm2-btn--neutral {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.94);
}
.game-details-page .gd-adm2-btn--gold {
    border-color: rgba(212, 175, 55, 0.30);
    background: rgba(212, 175, 55, 0.08);
    color: rgba(255, 222, 140, 0.98);
}
.game-details-page .gd-adm2-btn--gold:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.42);
}
.game-details-page .gd-adm2-btn--red {
    border-color: rgba(245, 87, 108, 0.30);
    background: rgba(245, 87, 108, 0.08);
    color: rgba(255, 160, 175, 0.98);
}
.game-details-page .gd-adm2-btn--red:hover:not(:disabled) {
    background: rgba(245, 87, 108, 0.14);
    border-color: rgba(245, 87, 108, 0.42);
}
.game-details-page .gd-adm2-btn--danger {
    border-color: rgba(245, 87, 108, 0.34);
    background: rgba(245, 87, 108, 0.10);
    color: rgba(255, 165, 180, 0.98);
}
.game-details-page .gd-adm2-btn--danger:hover:not(:disabled) {
    background: rgba(245, 87, 108, 0.18);
    border-color: rgba(245, 87, 108, 0.50);
    color: rgba(255, 195, 205, 0.98);
}

@media (max-width: 380px) {
    .game-details-page .gd-adm2 { padding: 10px; gap: 10px; }
    .game-details-page .gd-adm2-btn { height: 32px; padding: 0 10px; font-size: 11px; }
}

.game-details-wrapper {
    padding: 16px;
}

/* --- Timer block inside game details (React) --- */
/* Панель подключённого таймера (три ряда, золотая рамка) */
.game-details-page .srp-timer-panel{
    border-radius: 22px;
    border: 1px solid rgba(184, 158, 91, 0.45);
    background: #10100f;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.game-details-page .srp-timer-panel__row{
    border-bottom: 1px solid rgba(184, 158, 91, 0.16);
}
.game-details-page .srp-timer-panel__row:last-child{
    border-bottom: none;
}
.game-details-page .srp-timer-panel__row--top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 12px 14px 12px 16px;
}
.game-details-page .srp-timer-panel__room-block{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.game-details-page .srp-timer-panel__room-title{
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-details-page .srp-timer-panel__room-pass{
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-details-page .srp-timer-panel__copy svg{
    width: 14px;
    height: 14px;
}
.game-details-page .srp-timer-panel__copy{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #d4b45c;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.game-details-page .srp-timer-panel__copy:disabled{
    opacity: 0.35;
    cursor: default;
}
.game-details-page .srp-timer-panel__copy:active:not(:disabled){
    transform: scale(0.96);
}
.game-details-page .srp-timer-panel__top-actions{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-shrink: 0;
}
.game-details-page .srp-timer-panel__pill{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
}
.game-details-page .srp-timer-panel__pill svg{
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.game-details-page .srp-timer-panel__pill--qr{
    border-color: rgba(76, 175, 80, 0.5);
    background: rgba(12, 32, 18, 0.35);
    color: #8ef5a8;
    cursor: pointer;
    min-width: 0;
    justify-content: center;
    padding: 0 10px 0 8px;
}
.game-details-page .srp-timer-panel__pill--qr:disabled{
    opacity: 0.5;
    cursor: default;
}
.game-details-page .srp-timer-panel__pill--off{
    border-color: rgba(245, 87, 108, 0.35);
    background: rgba(42, 14, 18, 0.9);
    color: #ff8b9c;
    cursor: pointer;
    min-width: 0;
    justify-content: center;
    padding: 0 10px 0 8px;
}
.game-details-page .srp-timer-panel__pill--off:disabled{
    opacity: 0.5;
    cursor: default;
}
.game-details-page .srp-timer-panel__row--metrics{
    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr;
    gap: 0;
    padding: 24px 16px;
    align-items: stretch;
}
.game-details-page .srp-timer-panel__metric{
    padding: 0 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.game-details-page .srp-timer-panel__metric:last-child{
    border-right: none;
}
.game-details-page .srp-timer-panel__metric--center{
    text-align: center;
    align-items: center;
}
.game-details-page .srp-timer-panel__metric--right{
    text-align: right;
    align-items: flex-end;
}
.game-details-page .srp-timer-panel__round-name{
    font-size: 17px;
    font-weight: 950;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.15;
}
.game-details-page .srp-timer-panel__round-sub{
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.game-details-page .srp-timer-panel__remain-head{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.88);
}
.game-details-page .srp-timer-panel__remain-value{
    margin-top: 8px;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    font-size: 42px;
    font-weight: 1000;
    line-height: 1;
    color: #e7c86a;
    text-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}
.game-details-page .srp-timer-panel.is-paused .srp-timer-panel__remain-value{
    color: rgba(255, 255, 255, 0.55);
}
.game-details-page .srp-timer-panel__remain-ico{
    font-size: 22px;
    opacity: 0.75;
}
.game-details-page .srp-timer-panel__break-label{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.88);
}
.game-details-page .srp-timer-panel__break-value{
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.game-details-page .srp-timer-panel__row--empty{
    padding: 20px 16px;
    text-align: center;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
}
.game-details-page .srp-timer-panel__row--controls{
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 10px 12px 12px;
}
.game-details-page .srp-timer-panel__ctrl-group{
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: stretch;
    gap: 5px;
    padding-left: 10px;
    margin-left: 2px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.game-details-page .srp-timer-panel__ctrl-group .srp-timer-panel__ctrl{
    flex: 1 1 0;
    min-width: 0;
    padding: 0 14px;
}
.game-details-page .srp-timer-panel__ctrl{
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(34, 34, 34, 0.98);
    color: rgba(255, 255, 255, 0.94);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    -webkit-tap-highlight-color: transparent;
}
.game-details-page .srp-timer-panel__ctrl:disabled{
    opacity: 0.5;
    cursor: default;
}
.game-details-page .srp-timer-panel__ctrl:active:not(:disabled){
    transform: translateY(1px);
}
.game-details-page .srp-timer-panel__ctrl--edit{
    flex: 0 0 auto;
    min-width: 0;
    justify-content: center;
    padding: 0 8px 0 9px;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(30, 30, 30, 0.98);
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
}
.game-details-page .srp-timer-panel__ctrl--nav{
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(24, 24, 24, 0.99);
    color: rgba(255, 255, 255, 0.92);
}
.game-details-page .srp-timer-panel__ctrl--play{
    border-color: rgba(197, 158, 71, 0.5);
    background: linear-gradient(180deg, #e0c56f 0%, #caa24a 48%, #b89242 100%);
    color: #101010;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.game-details-page .srp-timer-panel__ctrl--play .srp-timer-panel__ctrl-ico{
    opacity: 1;
    color: #101010;
}
.game-details-page .srp-timer-panel__ctrl--fwd{
    border: 1px solid rgba(110, 210, 130, 0.55);
    background: rgba(10, 36, 18, 0.96);
    color: #9afcb0;
    font-weight: 950;
}
.game-details-page .srp-timer-panel__ctrl--fwd .srp-timer-panel__ctrl-ico{
    color: #b4ffc6;
    opacity: 1;
}
.game-details-page .srp-timer-panel__ctrl-ico{
    display: inline-block;
    font-size: 0.95em;
    font-weight: 1000;
    line-height: 1;
    opacity: 0.88;
}
.game-details-page .srp-timer-panel__ctrl-ico--before,
.game-details-page .srp-timer-panel__ctrl-ico--after{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.12em;
    font-weight: 1000;
}
.game-details-page .srp-timer-panel__ctrl-ico--before{
    margin-right: 2px;
    margin-left: -1px;
}
.game-details-page .srp-timer-panel__ctrl-ico--after{
    margin-left: 4px;
    margin-right: -1px;
}
/* Мобильный: блок метрик остаётся в 3 колонки (как первый макет), только чуть плотнее */
@media (max-width: 640px) {
    .game-details-page .srp-timer-panel__row--metrics{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
        padding: 16px 4px;
    }
    .game-details-page .srp-timer-panel__metric{
        padding: 0 6px;
    }
    .game-details-page .srp-timer-panel__round-name{
        font-size: 14px;
    }
    .game-details-page .srp-timer-panel__round-sub{
        font-size: 12px;
        margin-top: 8px;
    }
    .game-details-page .srp-timer-panel__remain-head{
        font-size: 11px;
    }
    .game-details-page .srp-timer-panel__remain-value{
        font-size: clamp(26px, 8.5vw, 40px);
        margin-top: 6px;
    }
    .game-details-page .srp-timer-panel__remain-ico{
        font-size: clamp(14px, 3.5vw, 20px);
        opacity: 0.7;
    }
    .game-details-page .srp-timer-panel__break-label{
        font-size: 11px;
    }
    .game-details-page .srp-timer-panel__break-value{
        font-size: 14px;
        margin-top: 8px;
    }
    .game-details-page .srp-timer-panel__row--controls{
        padding: 8px 8px 10px;
    }
    .game-details-page .srp-timer-panel__ctrl-group{
        gap: 4px;
        padding-left: 8px;
    }
    .game-details-page .srp-timer-panel__ctrl-group .srp-timer-panel__ctrl{
        padding: 0 10px;
    }
    .game-details-page .srp-timer-panel__ctrl{
        min-height: 32px;
        font-size: 10px;
        font-weight: 900;
        gap: 3px;
        padding: 0 7px;
    }
    .game-details-page .srp-timer-panel__ctrl--edit{
        flex: 0 0 auto;
        padding: 0 6px 0 7px;
        font-size: 9px;
        gap: 3px;
    }
}

.game-details-page .srp-timer-btn{
    height: 44px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-weight: 1000;
    cursor: pointer;
    padding: 0 14px;
}
.game-details-page .srp-timer-btn:active{ transform: translateY(1px); opacity: 0.92; }
.game-details-page .srp-timer-btn:disabled{ opacity: 0.55; cursor: default; transform: none; }
.game-details-page .srp-timer-btn--wide{ width: 100%; }
.game-details-page .srp-timer-btn--green{
    border-color: rgba(76,175,80,0.28);
    background: rgba(76,175,80,0.16);
    color: #CFFFD9;
}
.game-details-page .srp-timer-btn--red{
    border-color: rgba(245,87,108,0.30);
    background: rgba(245,87,108,0.14);
    color: #ff7a8a;
}
.game-details-page .srp-timer-btn--gold{
    border-color: rgba(212,175,55,0.26);
    background: rgba(212,175,55,0.12);
    color: #E7C86A;
}
/* Одна кнопка «Создать» без внешней плашки секции (variant plain) */
.game-details-page .srp-timer-btn--create-only{
    margin-top: 2px;
    width: auto;
    min-width: 132px;
}
.game-details-page .srp-timer-btn--blue{
    border-color: rgba(94,179,246,0.26);
    background: rgba(94,179,246,0.10);
    color: #9ad3ff;
}
.game-details-page .srp-timer-btn--ghost{
    border-color: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.92);
}
.game-details-page .srp-timer-btn--nav{
    border-color: rgba(94,179,246,0.22);
    background: rgba(94,179,246,0.12);
    color: #9ad3ff;
}
.game-details-page .srp-timer-btn--go{
    border-color: rgba(76,175,80,0.22);
    background: rgba(76,175,80,0.12);
    color: #7CFF95;
}

.game-details-page .srp-timer-empty{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.game-details-page .srp-timer-empty-title{
    font-size: 15px;
    font-weight: 900;
    color: rgba(255,255,255,0.94);
    flex: 1 1 100%;
}
.game-details-page .srp-timer-empty-hint{
    font-size: 13px;
    color: rgba(255,255,255,0.58);
    font-weight: 700;
}

.table-details-page {
    padding: 0 !important;
}

.table-details-wrapper {
    padding: 16px;
}

.table-details-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 60;
    background: var(--tg-theme-bg-color);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    /* Stretch to edges of wrapper while staying sticky */
    margin: -16px -16px 12px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.table-details-title {
    margin: 0;
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.table-details-back,
.table-details-edit {
    background: none;
    border: none;
    color: var(--tg-theme-text-color);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 10px;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.05s ease;
}

.table-details-back {
    font-size: 20px;
}

.table-details-edit {
    font-size: 16px;
    color: var(--tg-theme-button-color);
}

.table-details-back:active,
.table-details-edit:active {
    opacity: 0.85;
    transform: scale(0.98);
}

.table-view-toggle {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + var(--table-details-header-height, 56px));
    z-index: 55;
    background: var(--tg-theme-bg-color);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin: 0 -16px 12px;
    padding: 8px 16px 10px;
}

.table-view-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.table-view-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--tg-theme-text-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}

.table-view-btn.is-active {
    background: var(--tg-theme-button-color);
    color: var(--tg-theme-button-text-color);
    box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

.table-view-btn:active {
    transform: scale(0.985);
    opacity: 0.95;
}

.table-quick-actions {
    margin: 0 -16px 12px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.table-quick-actions-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.table-quick-action-btn {
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: var(--tg-theme-text-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.table-quick-action-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
}

.table-quick-action-btn:active {
    transform: scale(0.98);
}

/* Table details content cards */
.table-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.table-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--tg-theme-text-color);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.table-chip--green {
    background: rgba(76,175,80,0.14);
    border-color: rgba(76,175,80,0.28);
}

.table-kv {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.table-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.table-kv-row:first-child {
    padding-top: 0;
    border-top: none;
}

.table-kv-label {
    font-size: 13px;
    color: var(--tg-theme-hint-color);
    font-weight: 700;
}

.table-kv-value {
    font-size: 14px;
    color: var(--tg-theme-text-color);
    font-weight: 800;
    text-align: right;
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.table-btn {
    flex: 1;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: var(--tg-theme-button-color);
    color: var(--tg-theme-button-text-color);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.05s ease;
}

.table-btn:active {
    opacity: 0.85;
    transform: scale(0.985);
}

.table-btn--ghost {
    background: rgba(255,255,255,0.06);
    color: var(--tg-theme-text-color);
}

.table-btn--danger {
    background: #ff4444;
    color: #fff;
}

.table-seats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.table-seat-card {
    position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    min-height: 148px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.table-seat-card--clickable {
    cursor: pointer;
}

.table-seat-card:active {
    transform: scale(0.99);
    opacity: 0.92;
}

.table-seat-card--my {
    background: rgba(76,175,80,0.14);
    border-color: rgba(76,175,80,0.25);
}

.table-seat-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--tg-theme-text-color);
    margin-bottom: 2px;
}

.table-seat-status {
    font-size: 12px;
    font-weight: 800;
}

.table-seat-status--free {
    color: #4caf50;
}

.table-seat-status--busy {
    color: #ffb020;
}

.table-seat-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: contain;
    object-position: center;
    background: #fff;
    border: 2px solid rgba(255,255,255,0.18);
}

.table-seat-avatar--my {
    border-color: rgba(76,175,80,0.85);
}

.table-seat-avatar-fallback {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    background: var(--tg-theme-button-color);
    border: 2px solid rgba(255,255,255,0.18);
}

.table-seat-avatar-fallback--my {
    background: rgba(76,175,80,0.85);
    border-color: rgba(76,175,80,0.85);
}

.table-seat-name {
    font-size: 13px;
    font-weight: 900;
    color: var(--tg-theme-text-color);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-seat-username {
    font-size: 11px;
    color: var(--tg-theme-hint-color);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-seat-tag {
    font-size: 11px;
    color: #ff6b6b;
    font-weight: 800;
}

.table-seat-cta {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    border: none;
    background: var(--tg-theme-button-color);
    color: var(--tg-theme-button-text-color);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

/* Game details header — тёмная шапка по макету */
.game-details-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 60;
    background: #1c1c1e;
    transition: transform 0.25s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    margin: -16px -16px 0;
    padding: 14px 16px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: none;
}

.game-details-back {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    border-radius: 12px;
}

.game-details-title-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
}

.game-details-title-line1,
.game-details-title-line2 {
    display: block;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.25;
}

.game-details-title-line1 {
    font-size: 20px;
}

.game-details-title-line2 {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.95;
}

.game-details-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.game-details-header-btn {
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.game-details-header-btn--green {
    background: #2e7d32;
    color: #fff;
}

.game-details-header-btn--orange {
    background: #e65100;
    color: #fff;
}

.game-details-header-btn--icon {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    padding: 6px 8px;
}

/* Табы навигации — активный с акцентным фоном */
.game-details-tabs {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + var(--game-details-header-height, 72px));
    z-index: 55;
    background: #1c1c1e;
    margin: 0 -16px 0;
    padding: 10px 16px 12px;
    transition: transform 0.25s ease;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: none;
}

.game-details-tabs::-webkit-scrollbar {
    display: none;
}

.game-details-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.game-details-tab:hover {
    background: rgba(255, 255, 255, 0.08);
}

.game-details-tab--active {
    background: #8b4040;
    color: #fff;
}

.game-details-tab--active:hover {
    background: #9e4a4a;
}

/* Плашка Записаться / Отменить участие под табами */
.game-cta-bar {
    margin: 0 -16px;
    padding: 12px 16px 14px;
    background: rgba(28, 28, 30, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.game-cta-bar-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 14px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.game-cta-bar-btn--reserve {
    background: linear-gradient(180deg, #b30000 0%, #6f0000 100%);
    color: #fff;
}
.game-cta-bar-btn--reserve:active {
    opacity: 0.92;
}
.game-cta-bar-btn--cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.game-cta-bar-btn--cancel:active {
    background: rgba(255, 255, 255, 0.15);
}

/* Вкладки админа в списке броней: Обычный / Без ограничений */
.reservation-admin-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.reservation-admin-tab {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: var(--tg-theme-text-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.reservation-admin-tab:hover {
    background: rgba(255, 255, 255, 0.1);
}
.reservation-admin-tab--active {
    background: rgba(255, 152, 0, 0.25);
    border-color: rgba(255, 152, 0, 0.5);
    color: #ff9800;
}
.reservation-admin-tab--active:hover {
    background: rgba(255, 152, 0, 0.35);
}

/* Отступ при скролле к секциям, чтобы не уходили под фиксированные шапку и табы */
#game-details-content .game-info-block,
#game-details-content .game-management-block {
    scroll-margin-top: calc(var(--game-details-header-height, 72px) + 52px);
}

/* При фокусе в поле ввода — прячем шапку и табы анимацией; при blur — возвращаем */
.game-details-page.keyboard-open .game-details-header {
    transform: translateY(-100%);
}
.game-details-page.keyboard-open .game-details-tabs {
    transform: translateY(-100%);
}

/* Блок управления игрой (только для админа) */
.game-management-block {
    background: rgba(28, 28, 30, 0.95);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.game-management-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.game-management-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.game-management-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.game-management-btn--green {
    background: #2e7d32;
    color: #fff;
}

.game-management-btn--orange {
    background: #e65100;
    color: #fff;
}

.game-management-btn--icon {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    padding: 10px 12px;
}

.game-management-btn--icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

.game-management-search-wrap {
    position: relative;
    margin-bottom: 12px;
}

.game-management-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 36px 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    outline: none;
}

.game-management-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.game-management-search-clear:hover {
    background: rgba(255, 255, 255, 0.35);
}

.game-management-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.game-management-search-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    background: #252528;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.game-management-search-results--open {
    display: block;
}

.game-management-search-item {
    padding: 10px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.game-management-search-item:last-child {
    border-bottom: none;
}

.game-management-search-item-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}
.game-management-search-item-badge--brohn { background: #6b2d2d; }
.game-management-search-item-badge--igra { background: #2d5c2d; }
.game-management-search-item-badge--oplachen { background: #b36200; }
.game-management-search-item-badge--aut { background: #b71c1c; }
.game-management-search-item-badge--list { background: #1565c0; }

.game-management-search-item-payment-type {
    margin-left: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
}

.game-management-search-item--clickable {
    cursor: pointer;
}
.game-management-search-item--clickable:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Список броней — аккуратная раскладка секций и карточек */
.reservations-list-block {
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.reservations-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.reservations-list-header:hover {
    background: rgba(255, 255, 255, 0.06);
}

.reservations-list-header-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.02em;
}

.reservations-list-header-toggle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s;
}

.reservations-list-body {
    padding: 12px 14px;
    padding-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.reservations-list-search-wrap {
    position: relative;
    margin-bottom: 14px;
}

.reservations-list-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 36px 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 14px;
    outline: none;
}
.reservations-list-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.reservations-list-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.reservations-list-search-wrap--has-value .reservations-list-search-clear {
    display: inline-flex;
}
.reservations-list-search-clear:hover {
    background: rgba(255, 255, 255, 0.25);
}

.reservation-expand-all-row {
    margin-bottom: 12px;
}
.reservation-expand-all-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: var(--tg-theme-secondary-bg-color);
    color: var(--tg-theme-text-color);
    cursor: pointer;
}
.reservation-expand-all-btn:hover {
    opacity: 0.9;
}

.reservation-section {
    margin-bottom: 16px;
}
.reservation-section:last-child {
    margin-bottom: 0;
}

.reservation-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 10px;
    user-select: none;
}
.reservation-section-header:hover {
    opacity: 0.9;
}
.reservation-section-title-wrap {
    flex: 1;
}
.reservation-section-toggle {
    font-size: 10px;
    color: var(--tg-theme-hint-color);
    flex-shrink: 0;
}
.reservation-section-body {
    padding-left: 2px;
}

.reservation-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0;
    display: inline;
    align-items: center;
    gap: 6px;
}
.reservation-section-title--in-game { color: #4caf50; }
.reservation-section-title--pending { color: #ffc107; }
.reservation-section-title--queue { color: #ff9800; }
.reservation-section-title--out { color: #f44336; }

.reservation-section-subtitle {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    padding-left: 2px;
}

.reservation-player-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}
.reservation-player-card:last-child {
    margin-bottom: 0;
}

.reservation-player-main {
    flex: 1;
    min-width: 0;
}

.reservation-player-name {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}

.reservation-player-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2px;
}

.reservation-player-status {
    font-size: 11px;
    font-weight: 600;
}
.reservation-player-status--in-game { color: #4caf50; }
.reservation-player-status--queue { color: #ff9800; }
.reservation-player-status--out { color: #f44336; }

.reservation-player-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.reservation-player-card--dimmed {
    opacity: 0.75;
}

.game-management-search-item--muted {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.game-management-placeholder {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.game-info-block {
    background: var(--tg-theme-secondary-bg-color);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.game-info-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--tg-theme-text-color);
}

.game-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.game-info-grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.game-info-block--info .game-info-item--card {
    background: var(--tg-theme-bg-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px;
    gap: 8px;
}

.game-info-icon {
    display: inline-flex;
    width: 18px;
    justify-content: center;
    opacity: 0.95;
}

.game-info-block--info .game-info-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.1px;
}

.game-info-label--title {
    margin-bottom: 10px;
}

.game-info-block--info .game-info-value {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.game-info-value--primary {
    font-size: 16px;
    font-weight: 900;
}

.game-info-main {
    display: block;
}

.game-info-sub {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tg-theme-hint-color);
    line-height: 1.25;
}

.game-info-description--card {
    margin-top: 14px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--tg-theme-bg-color);
}

.game-info-description-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
    color: var(--tg-theme-text-color);
    font-size: 14px;
    font-weight: 500;
}

@media (min-width: 520px) {
    .game-info-grid--cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.game-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.game-info-label {
    font-size: 12px;
    color: var(--tg-theme-hint-color);
    font-weight: 500;
}

.game-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--tg-theme-text-color);
}

.game-info-description {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.game-reservation-card {
    background: var(--tg-theme-bg-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}

.game-reservation-card--confirmed {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.2);
}

.my-reservation {
    display: block;
}

.my-reservation-head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.my-reservation-title {
    min-width: 180px;
    flex: 1;
}

.my-reservation-title-main {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.my-reservation-title-sub {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.my-reservation-cancel {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 68, 68, 0.35);
    background: rgba(255, 68, 68, 0.10);
    color: #ff6b6b;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.my-reservation-cancel:active {
    opacity: 0.85;
    transform: scale(0.99);
}

.my-reservation-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.my-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.my-chip--paid {
    background: rgba(76, 175, 80, 0.10);
    border-color: rgba(76, 175, 80, 0.25);
    color: #2e7d32;
}

.my-chip--unpaid {
    background: rgba(255, 152, 0, 0.12);
    border-color: rgba(255, 152, 0, 0.28);
    color: #ef6c00;
}

.my-chip--free {
    background: rgba(156, 39, 176, 0.12);
    border-color: rgba(156, 39, 176, 0.28);
    color: #7b1fa2;
}

.my-chip--confirmed {
    background: rgba(76, 175, 80, 0.10);
    border-color: rgba(76, 175, 80, 0.25);
}

.my-chip--reserved {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

.my-reservation-hint {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
}

.my-reservation-pay-btn {
    margin-top: 12px;
}

.my-seat-block {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.my-seat-current {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 10px;
}
.my-seat-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.my-seat-btn {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.my-seat-btn:active {
    opacity: 0.85;
    transform: scale(0.99);
}
.my-seat-btn--danger {
    border-color: rgba(255, 68, 68, 0.35);
    background: rgba(255, 68, 68, 0.10);
    color: #ff6b6b;
}

.seat-pick-modal-content {
    max-width: 360px !important;
    border-radius: 20px;
    overflow: hidden;
}
.seat-pick-choice-modal .seat-pick-choice-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px !important;
}
.seat-pick-choice-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.05s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.seat-pick-choice-btn--primary {
    background: var(--tg-theme-button-color, rgba(200, 60, 60, 0.9));
    color: var(--tg-theme-button-text-color, #fff);
}
.seat-pick-choice-btn:not(.seat-pick-choice-btn--primary) {
    background: rgba(255,255,255,0.1);
    color: var(--tg-theme-text-color, #fff);
    border: 1px solid rgba(255,255,255,0.2);
}
.seat-pick-choice-btn:hover {
    opacity: 0.95;
}
.seat-pick-choice-btn:active {
    transform: scale(0.98);
}

/* Модалка «Посадить игрока» — в стиле приложения (тёмный фон, белый текст) */
.seat-pick-player-list-modal {
    margin: 16px;
    max-width: 400px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--app-modal-bg, #292929);
    border: 1px solid var(--app-modal-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.seat-pick-player-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.seat-pick-player-list-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}
.seat-pick-player-list-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 22px;
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
    line-height: 1;
}
.seat-pick-player-list-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.seat-pick-player-list-search-wrap {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.seat-pick-player-list-search {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    color: #ffffff;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
}
.seat-pick-player-list-search::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.seat-pick-player-list-search:focus {
    border-color: var(--app-modal-accent, #930400);
}
.seat-pick-player-list-body {
    padding: 12px 20px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.seat-pick-player-list-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.seat-pick-player-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    font-size: 15px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.seat-pick-player-item-main {
    font-weight: 600;
}
.seat-pick-player-item-fio,
.seat-pick-player-item-id {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}
.seat-pick-player-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
}
.seat-pick-player-item:active {
    transform: scale(0.99);
}
.seat-pick-player-list-empty {
    margin: 0;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.seat-pick-modal-body {
    padding: 16px 20px 20px !important;
}
.seat-pick-section {
    margin-bottom: 18px;
}
.seat-pick-section:last-of-type {
    margin-bottom: 0;
}
.seat-pick-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.75);
    margin-bottom: 10px;
}
.seat-pick-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.seat-pick-chips .seat-pick-chip {
    flex-shrink: 0;
}
.seat-pick-chip {
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.seat-pick-chip:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.22);
}
.seat-pick-chip:active:not(:disabled) {
    transform: scale(0.98);
}
.seat-pick-chip--active {
    background: var(--tg-theme-button-color, rgba(200, 60, 60, 0.9));
    color: var(--tg-theme-button-text-color, #fff);
    border-color: rgba(255,255,255,0.25);
}
.seat-pick-chip--active:hover:not(:disabled) {
    opacity: 0.95;
}
.seat-pick-chip--occupied {
    background: rgba(255, 68, 68, 0.2) !important;
    border-color: rgba(255, 68, 68, 0.5) !important;
    color: rgba(255, 255, 255, 0.85);
}
.seat-pick-chip--occupied:hover:not(:disabled) {
    background: rgba(255, 68, 68, 0.35) !important;
    border-color: rgba(255, 68, 68, 0.65) !important;
}
.seat-pick-chip--disabled,
.seat-pick-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.seat-pick-chip--occupied.seat-pick-chip--disabled {
    opacity: 0.7;
}
.seat-pick-chip--with-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    cursor: default;
}
.seat-pick-chip--with-actions .seat-pick-chip-text {
    flex: 0 1 auto;
    min-width: 0;
}
.seat-pick-chip-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.seat-pick-chip-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.seat-pick-chip-icon:hover {
    background: rgba(255,255,255,0.22);
}

/* Места списком: одна строка на место, справа управление */
.seat-pick-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.seat-pick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    min-height: 44px;
}
.seat-pick-row--free {
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.seat-pick-row--free:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.22);
}
.seat-pick-row--free.seat-pick-row--active {
    background: var(--tg-theme-button-color, rgba(200, 60, 60, 0.9));
    color: var(--tg-theme-button-text-color, #fff);
    border-color: transparent;
}
.seat-pick-row-label {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
}
.seat-pick-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.seat-pick-row-select {
    font-size: 12px;
    font-weight: 600;
    color: var(--tg-theme-button-color, #c83c3c);
    opacity: 0.9;
}
.seat-pick-row--active .seat-pick-row-select {
    color: var(--tg-theme-button-text-color, #fff);
}
.seat-pick-row-stand-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    color: var(--tg-theme-text-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.seat-pick-row-stand-btn:hover {
    background: rgba(255,255,255,0.15);
}
.seat-pick-row--occupied {
    background: rgba(255, 68, 68, 0.12);
    border-color: rgba(255, 68, 68, 0.35);
}
.seat-pick-row--occupied.seat-pick-row--disabled {
    opacity: 0.7;
}
.seat-pick-row--occupied:not(.seat-pick-row--disabled) {
    cursor: default;
}
.seat-pick-row-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.seat-pick-row-icon:hover {
    background: rgba(255,255,255,0.22);
}
.seat-pick-row--current .seat-pick-row-label {
    color: rgba(255,255,255,0.6);
}
.seat-pick-row-swap-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.1);
    color: var(--tg-theme-text-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.seat-pick-row-swap-btn:hover {
    background: rgba(255,255,255,0.18);
}

.seat-pick-seats-wrap {
    margin-top: 16px;
}
.seat-pick-current {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}
.seat-pick-taken-msg {
    display: none;
    margin: 0 0 12px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #ff6b6b;
    background: rgba(255, 68, 68, 0.12);
    border-radius: 10px;
    border: 1px solid rgba(255, 68, 68, 0.25);
}
.seat-pick-actions .create-game-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.seat-pick-actions {
    display: flex;
    gap: 12px;
    margin-top: 0;
    flex-wrap: nowrap;
}
.seat-pick-actions .create-game-btn {
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
}
.seat-pick-actions .create-game-btn:hover {
    opacity: 0.95;
}
.seat-pick-actions .create-game-btn:active {
    transform: scale(0.98);
}
.seat-pick-submit-btn {
    flex: 1;
    min-width: 0;
}
.seat-pick-reset {
    flex: 0 0 auto;
    min-width: 0;
    background: rgba(255, 68, 68, 0.15) !important;
    border: 1px solid rgba(255, 68, 68, 0.35) !important;
    color: #ff6b6b !important;
    padding: 14px 16px !important;
}
.seat-pick-reset:hover {
    background: rgba(255, 68, 68, 0.25) !important;
}
@media (max-width: 340px) {
    .seat-pick-fields {
        grid-template-columns: 1fr;
    }
    .seat-pick-actions {
        flex-direction: column;
    }
}

.gd-seat-inline {
    margin: 10px 12px 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.gd-seat-inline--admin-only .gd-seat-inline-text {
    color: rgba(255,255,255,0.6);
}
.gd-seat-inline-text {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
}
.gd-seat-inline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.gd-seat-btn {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.gd-seat-btn:active {
    opacity: 0.85;
    transform: scale(0.99);
}
.gd-seat-btn--danger {
    border-color: rgba(255, 68, 68, 0.35);
    background: rgba(255, 68, 68, 0.10);
    color: #ff6b6b;
}

/* Admin: плашки столов с игроками на карточке игры */
.gd-admin-tables-chips-wrap {
    margin: 10px 12px 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.gd-admin-tables-chips-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
}
.gd-admin-tables-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gd-table-chip {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.gd-table-chip:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.22);
}
.gd-table-chip .gd-table-chip-count {
    opacity: 0.85;
    font-weight: 600;
}

/* Переключатель столов: плашки внутри вида стола */
.gd-table-switcher-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.gd-table-switcher-chip {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.gd-table-switcher-chip:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}
.gd-table-switcher-chip--active {
    background: var(--tg-theme-button-color, rgba(200, 60, 60, 0.5));
    border-color: rgba(255,255,255,0.25);
    color: var(--tg-theme-button-text-color, #fff);
}
.gd-table-switcher-chip .gd-table-chip-count {
    opacity: 0.9;
    font-size: 12px;
}

/* Eliminated players rating (modern UI) */
.elim-search-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--tg-theme-bg-color);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: var(--tg-theme-text-color);
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.elim-search-input:focus {
    outline: none;
    border-color: var(--tg-theme-button-color);
}

.elim-sort-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.elim-sort-btn {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
    background: var(--tg-theme-secondary-bg-color);
    color: var(--tg-theme-text-color);
}

.elim-sort-btn:active {
    opacity: 0.85;
    transform: scale(0.99);
}

.elim-scroll {
    max-height: 400px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.elim-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.elim-card {
    background: var(--tg-theme-bg-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.elim-card-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.elim-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.elim-place {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
    box-sizing: border-box;
}

.elim-user {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.elim-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.elim-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.elim-badge--points {
    background: rgba(33, 150, 243, 0.10);
    border-color: rgba(33, 150, 243, 0.25);
}

.elim-badge--bounty {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.28);
}

.elim-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.elim-action-btn {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.elim-action-btn:active {
    opacity: 0.85;
    transform: scale(0.99);
}

.elim-action-btn--green { background: #4caf50; }
.elim-action-btn--orange { background: #ff9800; }
.elim-action-btn--purple { background: #7b1fa2; }
.elim-action-btn--blue { background: #2196f3; }

.elim-action-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

@media (min-width: 420px) {
    .elim-actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* Compact variant (fits ~3 cards per screen on mobile) */
.elim-rating--compact .elim-search-input {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 8px;
}

.elim-rating--compact .elim-sort-row {
    gap: 8px;
    margin-bottom: 8px;
}

.elim-rating--compact .elim-sort-btn {
    padding: 7px 10px;
    font-size: 12px;
}

.elim-rating--compact .elim-scroll {
    max-height: 360px;
}

.elim-rating--compact .elim-card {
    padding: 12px;
    border-radius: 14px;
    gap: 10px;
}

.elim-rating--compact .elim-card-head {
    gap: 8px;
}

.elim-rating--compact .elim-place {
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
    padding: 0 8px;
}

.elim-rating--compact .elim-user {
    font-size: 16px;
}

.elim-rating--compact .elim-badges {
    gap: 6px;
}

.elim-rating--compact .elim-badge {
    padding: 5px 8px;
    font-size: 11px;
}

.elim-rating--compact .elim-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.elim-rating--compact .elim-action-btn {
    padding: 9px 10px;
    font-size: 12px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-reserve-btn {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: none;
    background: var(--tg-theme-button-color);
    color: var(--tg-theme-button-text-color);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.home-reserve-btn:active {
    opacity: 0.8;
}

.home-reserve-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* ======================================================
   Game Details page — Figma redesign (gd-* classes)
   ====================================================== */

/* Background for game details page */
body:has(#game-details-page.active) {
    background: linear-gradient(180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.85) 100%),
        url('/img/verticalPoker.png') center top / cover no-repeat fixed;
    background-color: #000;
}

/* Figma tabs (pill-style) */
.gd-figma-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gd-figma-tabs::-webkit-scrollbar { display: none; }

.gd-figma-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    background: #1c1c1e;
    color: rgba(255,255,255,0.5);
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.gd-figma-tab:active {
    transform: scale(0.97);
}
.gd-figma-tab.is-active {
    background: #930400;
    color: #fff;
    border-color: #930400;
}
.gd-figma-tab svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.gd-figma-tab.is-active svg {
    opacity: 1;
}
.gd-figma-tab--disabled,
.gd-figma-tab--disabled:active {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
    transform: none;
}

/* Results table (completed game) */
.gd-results-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
}
.gd-results-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #fff;
}
.gd-results-table th {
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
}
.gd-results-table td {
    padding: 7px 10px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.gd-results-row:hover td {
    background-color: rgba(255,255,255,0.06);
}
.gd-results-row--delta-plus td {
    background-image: linear-gradient(90deg, rgba(76,175,80,0.12) 0%, rgba(76,175,80,0.00) 70%);
}
.gd-results-row--delta-minus td {
    background-image: linear-gradient(90deg, rgba(244,67,54,0.12) 0%, rgba(244,67,54,0.00) 70%);
}
.gd-results-nick {
    text-align: left !important;
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gd-results-delta--plus {
    color: #4caf50;
    font-weight: 600;
}
.gd-results-delta--minus {
    color: #f44336;
    font-weight: 600;
}
/* Panels */
.gd-panel {
    padding: 16px;
}

/* Sections */
.gd-section {
    margin-bottom: 20px;
}
.gd-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.gd-section-title-row .gd-section-title {
    margin-bottom: 0;
}
.gd-section-title {
    font-family: 'Bounded', 'Satoshi', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.gd-section-text {
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
}
.gd-section-text a {
    color: #5eb3f6;
    text-decoration: underline;
}
.gd-description-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.gd-description-empty {
    color: rgba(255,255,255,0.5);
    font-style: italic;
}

/* Metro */
.gd-metro {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}
.gd-metro-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

/* List (features) */
.gd-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
}

/* Info card (Информация) */
.gd-info-card {
    background: #363636;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gd-info-card-title {
    font-family: 'Bounded', 'Satoshi', sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    margin-bottom: 4px;
}
.gd-info-row {
    padding: 12px 16px;
    border-radius: 12px;
    background: #2a2a2a;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.gd-info-row--accent {
    background: linear-gradient(180deg, #930400 0%, #7a0300 50%, #2D0100 100%);
    color: #fff;
    font-weight: 700;
}
.gd-info-card .gd-info-row:nth-child(3) {
    background: #5c5c5c;
}

/* Blind levels (collapsible) */
.gd-blinds-wrap {
    margin-bottom: 20px;
}
.gd-blinds-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(180deg, #930400 0%, #7a0300 100%);
    color: #fff;
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.gd-blinds-toggle:active {
    opacity: 0.85;
}
.gd-blinds-chevron {
    font-size: 14px;
    transition: transform 0.2s;
}
.gd-blinds-chevron.is-open {
    transform: rotate(180deg);
}
.gd-blinds-body {
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a2a;
}
.gd-blinds-level-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gd-blinds-level-row:last-child {
    border-bottom: none;
}
.gd-blinds-level-row:nth-child(odd) {
    background: #333;
}
.gd-blinds-level-row:nth-child(even) {
    background: #2a2a2a;
}
.gd-blinds-level-row--break {
    background: rgba(147,4,0,0.25) !important;
    color: rgba(255,255,255,0.7);
    font-style: italic;
}
.gd-blinds-level-name {
    flex: 1;
    font-weight: 600;
}
.gd-blinds-level-blinds {
    flex: 1;
    text-align: center;
}
.gd-blinds-level-dur {
    flex: 0 0 auto;
    text-align: right;
    min-width: 80px;
}
.gd-blinds-level-empty {
    padding: 16px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}
.gd-blinds-toggle-text {
    flex: 1;
    text-align: left;
}

/* Status card (reservation status) */
.gd-status-card {
    background: #2a2a2a;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 12px;
}
.gd-status-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.gd-status-hint {
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}

/* Cancel / Reserve button (bottom of "Об игре" panel) */
.gd-cancel-btn {
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 999px;
    border: none;
    background: #930400;
    color: #fff;
    font-family: 'Bounded', 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-bottom: 16px;
}
.gd-cancel-btn:active {
    background: #7a0300;
}

/* Admin buttons in game details */
.gd-admin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.gd-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: #2a2a2a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.gd-admin-btn:active { opacity: 0.8; }
.gd-admin-btn--green { background: #27ae60; border-color: #27ae60; }
.gd-admin-btn--orange { background: #e67e22; border-color: #e67e22; }
.gd-admin-btn--red { background: #c0392b; border-color: #c0392b; }

/* Admin search */
.gd-admin-search-wrap {
    position: relative;
    margin-bottom: 12px;
}
.gd-admin-search {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: #1c1c1e;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}
.gd-admin-search::placeholder { color: rgba(255,255,255,0.35); }
.gd-admin-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}
.gd-admin-search-results {
    margin-top: 4px;
}

/* Timer block */
.gd-timer-block {
    padding: 12px;
    border-radius: 12px;
    background: #2a2a2a;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

/* Stats block */
.gd-stats-block {
    padding: 12px;
    border-radius: 12px;
    background: #2a2a2a;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

/* Participants list */
.gd-ptable-search-wrap {
    margin-bottom: 12px;
}
.gd-ptable-search {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #1c1c1e;
    color: #fff;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.gd-ptable-search::placeholder {
    color: rgba(255,255,255,0.35);
}
.gd-ptable-search:focus {
    border-color: #930400;
}
.gd-ptable-group {
    margin-bottom: 16px;
}
.gd-ptable-group-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.gd-ptable-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #2a2a2a;
    margin-bottom: 6px;
}
.gd-ptable-row:last-child {
    margin-bottom: 0;
}
.gd-ptable-idx {
    min-width: 22px;
    text-align: center;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    font-weight: 600;
}
.gd-ptable-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.gd-ptable-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
    object-position: center;
    background: #fff;
    flex-shrink: 0;
}
.gd-ptable-avatar--placeholder {
    background: #555;
}
.gd-ptable-name-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gd-ptable-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gd-ptable-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gd-ptable-seat {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
}
.gd-ptable-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.gd-ptable-badge {
    font-size: 12px;
}
.gd-ptable-badge--status {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.gd-ptable-row--clickable {
    cursor: pointer;
}
.gd-ptable-row--clickable:hover {
    background: rgba(255,255,255,0.06);
}
.gd-ptable-action {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    padding: 4px 10px;
    font-size: 14px;
    cursor: pointer;
}
.gd-ptable-action:active {
    background: rgba(255,255,255,0.08);
}
/* Admin player modal (.apm) */
.apm { font-family: var(--srp-font); }
.apm-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    line-height: 1;
}
.apm-close:hover { color: #fff; }
.apm-btn-wrap { display: flex; flex-direction: column; gap: 10px; }
.apm-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.apm-btn:hover:not(:disabled) { opacity: 0.9; }
.apm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.apm-btn--green { background: #2e7d32; color: #fff; }
.apm-btn--danger { background: #c62828; color: #fff; }
.apm-btn--secondary { background: #546e7a; color: #fff; }

.gd-small-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
.gd-small-btn:active { opacity: 0.7; }

/* Tables in info panel */
.gd-table-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.gd-table-row:last-child { border-bottom: none; }
.gd-table-name {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}
.gd-table-seats {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

/* =========================================================
   BASELINE: flat black background across all sections
   (temporary step while we redesign screens one by one)
   ========================================================= */

html, body {
    background: #000000 !important;
    background-image: none !important;
}
body::before {
    display: none !important;
    background-image: none !important;
}
body::after {
    display: none !important;
    background-image: none !important;
}

/* Pages: no per-page backdrops.
   Главная исключена из этого списка — она использует фон покер-рума,
   правило задаётся выше (body:has(#home-page.srp-home-page.active)). */
body:has(#games-page.active),
body:has(#profile-page.active),
body:has(#player-profile-page.active),
body:has(#admin-page.active),
body:has(#poker-table-page.active) {
    background: #000000 !important;
    background-image: none !important;
}
body:has(#games-page.active)::before,
body:has(#profile-page.active)::before,
body:has(#player-profile-page.active)::before,
body:has(#admin-page.active)::before,
body:has(#poker-table-page.active)::before {
    display: none !important;
    background-image: none !important;
}

/* Also kill backgrounds applied on page containers themselves */
.page,
.home-page,
.games-page,
.profile-page,
.admin-page,
.poker-table-page,
.srp-home-page.page,
.about-page.page,
.faq-page.page,
.bonuses-page.page,
.rating-page.page {
    background: transparent !important;
    background-image: none !important;
}
#profile-page.profile-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #121111 0%, #191612 38%, #100f0d 100%) !important;
    background-image: none !important;
}
#profile-page.profile-page.profile-page--modern {
    background: url('/img/profile-poker-room-bg.png') center top / cover no-repeat !important;
    background-image: url('/img/profile-poker-room-bg.png') !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}
#player-profile-page.player-profile-page.profile-page.profile-page--modern {
    background: url('/img/profile-poker-room-bg.png') center top / cover no-repeat !important;
    background-image: url('/img/profile-poker-room-bg.png') !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}
@supports (height: 100dvh) {
    #profile-page.profile-page.profile-page--modern {
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    #player-profile-page.player-profile-page.profile-page.profile-page--modern {
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}
.home-hero {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
}

/* Kill decorative polygon backdrops */
.srp-stage-bg {
    display: none !important;
    background: none !important;
}
.games-page::before,
.games-page::after,
.games-page.active::before,
.games-page.active::after,
.page::before,
.page::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* =========================================================================
   Game admin stats — clickable cards + drill-down modal
   ========================================================================= */
.gas {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.gas-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gas-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}
.gas-section-title {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.gas-section-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.36);
    letter-spacing: 0.02em;
    text-align: right;
    line-height: 1.3;
}

/* Grid layouts */
.gas-grid {
    display: grid;
    gap: 8px;
}
.gas-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gas-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) {
    .gas-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Empty placeholder */
.gas-empty {
    padding: 16px 14px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

/* Card */
.gas-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
    font: inherit;
    min-width: 0;
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease, box-shadow 160ms ease;
}
button.gas-card,
.gas-card--clickable {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    user-select: none;
}
.gas-card--clickable:hover {
    border-color: rgba(255, 215, 0, 0.22);
    background: rgba(255, 255, 255, 0.045);
}
.gas-card--clickable:active { transform: translateY(1px); }
.gas-card--clickable:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.45);
    outline-offset: 2px;
}

.gas-card-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    padding-right: 14px;
}
.gas-card-value {
    margin-top: 2px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.98);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gas-card-meta {
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.48);
}
.gas-card-chevron {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    line-height: 1;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.28);
    transition: color 140ms ease, transform 140ms ease;
}
.gas-card--clickable:hover .gas-card-chevron {
    color: rgba(255, 215, 0, 0.78);
    transform: translateX(2px);
}

/* Tones */
.gas-card--green {
    border-color: rgba(76, 175, 80, 0.22);
    background:
        radial-gradient(160px 80px at 16% 18%, rgba(76, 175, 80, 0.12), transparent 65%),
        rgba(255, 255, 255, 0.025);
}
.gas-card--green .gas-card-value { color: rgba(170, 235, 180, 0.98); }

.gas-card--red {
    border-color: rgba(245, 87, 108, 0.22);
    background:
        radial-gradient(160px 80px at 16% 18%, rgba(245, 87, 108, 0.12), transparent 65%),
        rgba(255, 255, 255, 0.025);
}
.gas-card--red .gas-card-value { color: rgba(255, 170, 180, 0.98); }

.gas-card--gold {
    border-color: rgba(212, 175, 55, 0.26);
    background:
        radial-gradient(160px 80px at 16% 18%, rgba(212, 175, 55, 0.14), transparent 65%),
        rgba(255, 255, 255, 0.025);
}
.gas-card--gold .gas-card-value { color: rgba(255, 220, 140, 0.98); }

.gas-card--blue {
    border-color: rgba(90, 170, 255, 0.22);
    background:
        radial-gradient(160px 80px at 16% 18%, rgba(90, 170, 255, 0.12), transparent 65%),
        rgba(255, 255, 255, 0.025);
}
.gas-card--blue .gas-card-value { color: rgba(170, 215, 255, 0.98); }

/* Sizes */
.gas-card--lg {
    padding: 14px;
    min-height: 110px;
    justify-content: space-between;
}
.gas-card--lg .gas-card-value {
    margin-top: 8px;
    font-size: 22px;
}
.gas-card--lg .gas-card-meta {
    font-size: 12px;
    margin-top: 4px;
}

/* Drill-down modal */
.gas-drill-modal.admin-modal { z-index: 1300; }
.gas-drill-modal__panel {
    max-width: min(520px, 100%);
    max-height: min(82vh, 720px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gas-drill-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}
.gas-drill-summary-item {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 18, 20, 0.55);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.gas-drill-summary-num {
    font-family: 'Bounded', var(--srp-font);
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gas-drill-summary-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.gas-drill-summary-item--pos { border-color: rgba(76, 175, 80, 0.22); }
.gas-drill-summary-item--pos .gas-drill-summary-num { color: rgba(170, 235, 180, 0.98); }
.gas-drill-summary-item--neg { border-color: rgba(245, 87, 108, 0.22); }
.gas-drill-summary-item--neg .gas-drill-summary-num { color: rgba(255, 170, 180, 0.98); }
.gas-drill-summary-item--gold { border-color: rgba(212, 175, 55, 0.22); }
.gas-drill-summary-item--gold .gas-drill-summary-num { color: rgba(255, 220, 140, 0.98); }

.gas-drill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}
.gas-drill-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.gas-drill-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 215, 0, 0.18);
}
.gas-drill-row:active { transform: translateY(1px); }
.gas-drill-row:disabled { cursor: default; opacity: 0.7; }
.gas-drill-row:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.45);
    outline-offset: 2px;
}
.gas-drill-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(24, 24, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Bounded', var(--srp-font);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gas-drill-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gas-drill-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gas-drill-row-name {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.97);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gas-drill-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}
.gas-drill-row-dot { color: rgba(255, 255, 255, 0.22); font-weight: 700; }
.gas-drill-row-tail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.gas-drill-row-amount {
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    white-space: nowrap;
}
.gas-drill-row-amount--pos { color: rgba(170, 235, 180, 0.98); }
.gas-drill-row-amount--neg { color: rgba(255, 170, 180, 0.98); }
.gas-drill-row-amount--gold { color: rgba(255, 220, 140, 0.98); }
.gas-drill-row-amount--warn { color: rgba(255, 200, 130, 0.98); }
.gas-drill-row-secondary {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}
.gas-drill-row-chevron {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.32);
    transition: color 140ms ease, transform 140ms ease;
}
.gas-drill-row:hover .gas-drill-row-chevron {
    color: rgba(255, 215, 0, 0.78);
    transform: translateX(2px);
}
@media (max-width: 380px) {
    .gas-card { padding: 10px; }
    .gas-card-value { font-size: 16px; }
    .gas-card--lg .gas-card-value { font-size: 20px; }
    .gas-drill-row { padding: 9px 10px; }
}

/* =========================================================================
   Game admin stats v2 — chips for counters + statement-style rows for finance
   ========================================================================= */
.gas2 {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.gas2-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gas2-group-label {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 2px;
    line-height: 1.2;
}

/* Chips row — for player counters */
.gas2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gas2-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.92);
    user-select: none;
    transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.gas2-chip--clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.gas2-chip--clickable:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
}
.gas2-chip--clickable:active { transform: translateY(1px); }
.gas2-chip--clickable:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.45);
    outline-offset: 2px;
}
.gas2-chip-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
}
.gas2-chip-value {
    font-family: 'Bounded', var(--srp-font);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1;
}
.gas2-chip--green .gas2-chip-value { color: rgba(170, 235, 180, 0.98); }
.gas2-chip--red .gas2-chip-value { color: rgba(255, 170, 180, 0.98); }
.gas2-chip--gold .gas2-chip-value { color: rgba(255, 220, 140, 0.98); }
.gas2-chip--blue .gas2-chip-value { color: rgba(170, 215, 255, 0.98); }

/* Statement-style rows — for finance sections */
.gas2-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gas2-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: baseline;
    padding: 10px 4px;
    min-height: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 140ms ease, transform 100ms ease;
}
.gas2-row:first-child { border-top: 0; }
.gas2-row--clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.gas2-row--clickable:hover {
    background: rgba(255, 255, 255, 0.03);
}
.gas2-row--clickable:hover .gas2-row-chevron {
    color: rgba(255, 215, 0, 0.78);
    transform: translateX(2px);
}
.gas2-row--clickable:active { transform: translateY(1px); }
.gas2-row--clickable:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.45);
    outline-offset: 2px;
    border-radius: 6px;
}
.gas2-row-label-wrap {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}
.gas2-row-label {
    font-family: 'Satoshi', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.2;
}
.gas2-row-sub {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.2;
}
.gas2-row-value {
    font-family: 'Bounded', var(--srp-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
}
.gas2-row-value--default { color: rgba(255, 255, 255, 0.96); }
.gas2-row-value--green,
.gas2-row-value--pos { color: rgba(170, 235, 180, 0.98); }
.gas2-row-value--red,
.gas2-row-value--neg { color: rgba(255, 170, 180, 0.98); }
.gas2-row-value--gold { color: rgba(255, 220, 140, 0.98); }
.gas2-row-value--blue { color: rgba(170, 215, 255, 0.98); }
.gas2-row-chevron {
    width: 14px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.30);
    user-select: none;
    transition: color 140ms ease, transform 140ms ease;
}
.gas2-row-chevron-spacer {
    display: inline-block;
    width: 14px;
}

/* Empty placeholder */
.gas2-empty {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 380px) {
    .gas2 { padding: 10px; gap: 12px; }
    .gas2-row { padding: 9px 2px; min-height: 34px; }
    .gas2-row-label { font-size: 12px; }
    .gas2-row-value { font-size: 14px; }
    .gas2-chip { height: 28px; padding: 0 10px; }
}

/* =========================================================
   Друзья / Рефералка (/friends) — компактная карточка под общий тёмно-золотой стиль.
   Заменяет инлайн-стили в FriendsPage.jsx, используется в обеих вкладках.
   ========================================================= */
.friends-page {
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px 32px;
    background: #000;
    color: #fff;
}
.friends-page-shell {
    width: 100%;
    max-width: 460px;
    margin: 56px auto 0;
    padding: 22px 18px 22px;
    box-sizing: border-box;
    border-radius: 22px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    background: linear-gradient(180deg, rgba(35, 31, 28, 0.96) 0%, rgba(22, 19, 17, 0.98) 100%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.friends-page-title {
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
.friends-page-title-dash {
    flex-shrink: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #d4af37 0%, #b08c28 100%);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
.friends-page-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.friends-page-tab {
    flex: 1 1 0;
    height: 36px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-family: 'Bounded', var(--srp-font);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    appearance: none;
    -webkit-appearance: none;
}
.friends-page-tab--active {
    background: linear-gradient(180deg, rgba(60, 46, 18, 0.95) 0%, rgba(40, 30, 12, 0.98) 100%);
    color: #f1c84f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.friends-page-form-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 6px;
}
.friends-page-input-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.friends-page-input {
    flex: 1 1 160px;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 120ms ease;
}
.friends-page-input:focus {
    border-color: rgba(212, 175, 55, 0.50);
}
.friends-page-input--code {
    font-family: ui-monospace, Menlo, monospace;
    letter-spacing: 0.06em;
}
.friends-page-action-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    background: linear-gradient(180deg, rgba(60, 46, 18, 0.95) 0%, rgba(40, 30, 12, 0.98) 100%);
    color: #f1c84f;
    font-family: 'Bounded', var(--srp-font);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 120ms ease, opacity 120ms ease;
}
.friends-page-action-btn:hover:not(:disabled),
.friends-page-action-btn:focus-visible:not(:disabled) {
    border-color: rgba(212, 175, 55, 0.7);
    outline: none;
}
.friends-page-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.friends-page-msg {
    margin: 10px 0 0;
    font-size: 13px;
    color: #ffb4a8;
}
.friends-page-msg--ok {
    color: #a7e6a3;
}
.friends-page-empty {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.4;
}
.friends-page-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.friends-page-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.friends-page-list-item:last-child {
    border-bottom: none;
}
.friends-page-list-name {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    padding: 4px 0;
    margin: -4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.friends-page-list-name:active {
    opacity: 0.7;
}
.friends-page-list-remove {
    flex-shrink: 0;
    height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 180, 168, 0.28);
    background: rgba(0, 0, 0, 0.32);
    color: rgba(255, 200, 200, 0.92);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease;
}
.friends-page-list-remove:hover {
    border-color: rgba(255, 180, 168, 0.55);
}
.friends-page-list-stat {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 241, 181, 0.92);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.friends-page-section + .friends-page-section {
    margin-top: 22px;
}
.friends-page-section-title {
    margin: 0 0 10px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.78);
}
.friends-page-code-box {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: #fff1b5;
}
.friends-page-copy-btn {
    width: 100%;
    margin-top: 14px;
    height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: linear-gradient(180deg, rgba(72, 55, 21, 0.95) 0%, rgba(46, 35, 14, 0.98) 100%);
    color: #ffe9a7;
    font-family: 'Bounded', var(--srp-font);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    appearance: none;
    -webkit-appearance: none;
}
.friends-page-copy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.friends-page-copy-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: rgba(255, 241, 181, 0.78);
    text-align: center;
}
.friends-page-empty-code {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   Live-предпросмотр затемнения фона главной (?dim-preview=1).
   Показывается через кнопку «Затемнение» в /admin/settings.
   Когда body имеет класс .body--home-dim-preview:
     - .bottom-nav скрыто
     - .srp-stage блокирует клики (overlay не нужен — клики и так не идут к контенту)
     - .home-dim-preview занимает место нижнего меню и активна
   ========================================================= */
.body--home-dim-preview .bottom-nav {
    display: none !important;
}
.body--home-dim-preview .srp-stage {
    pointer-events: none;
}
.body--home-dim-preview .home-dim-preview,
.body--home-dim-preview .home-dim-preview * {
    pointer-events: auto;
}
.home-dim-preview {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(212, 175, 55, 0.40);
    border-bottom: none;
    background: linear-gradient(180deg, rgba(35, 31, 28, 0.96) 0%, rgba(22, 19, 17, 0.98) 100%);
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    box-sizing: border-box;
}
.home-dim-preview-title {
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(241, 200, 79, 0.92);
    margin: 0 0 12px;
}
.home-dim-preview-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.home-dim-preview-slider {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    accent-color: #d4af37;
    cursor: pointer;
}
.home-dim-preview-value {
    flex-shrink: 0;
    min-width: 44px;
    text-align: right;
    font-family: 'Bounded', var(--srp-font);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff1b5;
}
.home-dim-preview-actions {
    display: flex;
    gap: 8px;
}
.home-dim-preview-btn {
    flex: 1 1 0;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 120ms ease, background-color 120ms ease, opacity 120ms ease;
}
.home-dim-preview-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.home-dim-preview-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.32);
    color: rgba(255, 255, 255, 0.78);
}
.home-dim-preview-btn--ghost:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.32);
}
.home-dim-preview-btn--primary {
    border: 1px solid rgba(212, 175, 55, 0.65);
    background: linear-gradient(180deg, rgba(72, 55, 21, 0.95) 0%, rgba(46, 35, 14, 0.98) 100%);
    color: #ffe9a7;
}
.home-dim-preview-btn--primary:hover:not(:disabled) {
    border-color: rgba(212, 175, 55, 0.9);
}