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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --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;
}

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

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

/* Псевдоэлемент фона: по умолчанию скрыт (чтобы при переходах не мелькал серый/паттерн) */
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;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.25s ease-out;
}
.app-preload.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.app-preload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: transparent;
}
.app-preload-img {
    display: block;
    width: 120px;
    height: 120px;
    background: var(--app-loader-image, url('/img/chip.png')) center center / contain no-repeat;
    animation: loader-pulse 1.3s ease-in-out infinite;
}
@keyframes app-preload-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.92; }
}
.app-preload-text {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.5) 35%,
        #ffffff 50%,
        rgba(255, 255, 255, 0.5) 65%,
        rgba(255, 255, 255, 0.5) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: app-preload-text-wave 1.8s ease-in-out infinite;
}
@keyframes app-preload-text-wave {
    0%, 100% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
}

.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);
}

/* Регистрация — полноэкранный стиль, единый шрифт SF Pro */
#registration-gate {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    background: #111111;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
#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 {
    width: 100%;
    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;
}
.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: 8px 12px;
    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: 14px;
    font-weight: 700;
}

.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%);
}

/* ----- Local fonts (Telegram/WebView safe) ----- */
@font-face {
    font-family: 'Bounded';
    src: url('/fonts/bounded/Bounded-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bounded';
    src: url('/fonts/bounded/Bounded-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bounded';
    src: url('/fonts/bounded/Bounded-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ----- Главная: типографика и размеры из Figma, без absolute ----- */
:root {
    --srp-font: 'Satoshi', 'Bounded', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --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;
}
.srp-stage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px 13px 90px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: #000;
    color: #fff;
    font-family: var(--srp-font);
    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;
}
.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: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    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: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    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: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    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;
}
/* 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: url("/img/pokerback.png") center center / cover no-repeat;
    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;
    min-width: 200px;
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;
    background: #5c5c5c;
    border: none;
    color: #fff;
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    gap: 6px;
    cursor: pointer;
}
.srp-show-more-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.srp-show-more-ico svg {
    width: 12px;
    height: 8px;
    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%;
}

/* address card — как в Figma: градиент, красная обводка, иконка справа в утопленном круге, метро — иконка M */
.srp-address-card {
    position: relative;
    width: 100%;
    margin-top: var(--srp-space-md);
    border-radius: 21px;
    background: linear-gradient(180deg, #6a0000 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.2),
        0 0 24px rgba(255, 0, 0, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    overflow: hidden;
}
.srp-address-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 120% at 15% 15%, rgba(255, 0, 0, 0.28) 0%, rgba(255, 0, 0, 0.10) 35%, rgba(0,0,0,0) 70%),
        radial-gradient(140% 120% at 70% 100%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.0) 60%);
    pointer-events: none;
    opacity: 0.9;
}
.srp-address-card > * {
    position: relative;
    z-index: 1;
}
.srp-address-inner {
    display: flex;
    align-items: stretch;
    gap: 16px;
    min-height: 101px;
}
.srp-address-content {
    flex: 1;
    min-width: 0;
}
.srp-address-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.srp-address-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.srp-address-chip {
    width: 68px;
    height: 68px;
    display: block;
    object-fit: contain;
    margin-top: 6px;
    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-address-title {
    font-family: 'Bounded', 'Satoshi', var(--srp-font);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
}
.srp-address-edit-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.65);
    transition: background 0.15s;
}
.srp-address-edit-btn:active { background: rgba(255,255,255,0.18); }
.srp-address-place {
    margin-top: 10px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.srp-address-route-wrap {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}
.srp-address-route {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.srp-address-route:active { opacity: 0.85; }
.srp-address-route-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
}
.srp-address-addr {
    margin-top: 4px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(255,255,255,0.9);
    max-width: 75%;
}
.srp-address-metro {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 16px;
    line-height: 1.15;
    opacity: 0.95;
    margin-top: 10px;
}
.srp-metro-ico {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.srp-metro-ico--img {
    object-fit: contain;
}
.srp-address-name-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.35);
    text-underline-offset: 2px;
}
.srp-address-note {
    margin-top: 18px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.6;
}

.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: url("/img/pokerback.png") center center / cover no-repeat;
    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: 200px;
    padding: 0;
    background: transparent;
    border: none;
}
.cc-game-card--featured.srp-featured-card::before,
.cc-game-card--featured.srp-featured-card::after {
    content: none;
}
.srp-featured-inner {
    min-height: 200px;
    border-radius: 21px;
    background: linear-gradient(180deg, rgba(41,41,41,0.70) 0%, rgba(61,61,61,0.70) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 4px rgba(0,0,0,0.25), inset 0 4px 4px rgba(0,0,0,0.25);
    display: flex;
    overflow: hidden;
}
.srp-featured-left {
    flex: 1 1 auto;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    justify-content: space-between;
}
.srp-featured-right {
    flex: 0 0 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 6px;
    background: transparent;
}
.srp-featured-chip-img {
    width: 140px;
    height: 120px;
    object-fit: contain;
    background: transparent;
}
.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(24px, 8vw, 42px);
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
    word-break: break-word;
    overflow-wrap: anywhere;
    letter-spacing: 0.2px;
}
/* Длинные названия: меньший шрифт, без ограничения строк — весь текст виден */
.srp-featured-title--long {
    font-size: clamp(17px, 5vw, 26px);
}
.srp-featured-title--longer {
    font-size: clamp(14px, 4vw, 21px);
}
.srp-featured-title--longest {
    font-size: clamp(12px, 3.5vw, 18px);
}
.srp-featured-badge .cc-badge {
    background: transparent;
    border-color: rgba(255, 167, 38, 0.65);
    color: #ffb74d;
}
.srp-featured-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.srp-featured-pills {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}
.srp-featured-pills .srp-pill {
    height: 24px;
    padding: 0 8px;
    border-radius: 17px;
    border: 1px solid rgba(80,80,80,0.9);
    background: rgba(26,26,26,0.95);
    box-shadow: 0 3px 3px rgba(0,0,0,0.25), inset 0 3px 3px rgba(0,0,0,0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 500;
    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: 248px;
    height: 36px;
    border-radius: 20px;
    border: 1px solid rgba(80,80,80,0.9);
    background: #930400;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25), inset 0 4px 4px rgba(0,0,0,0.25);
    color: #fff;
    font-family: 'Bounded', var(--srp-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    flex-shrink: 0;
}
.srp-featured-cta:active { opacity: 0.9; transform: translateY(1px); }
.srp-featured-cta--cancel {
    background: transparent;
    border-color: rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.85);
}
.srp-featured-cta--inactive {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.6);
    cursor: default;
    pointer-events: none;
}
.srp-featured-cta--results {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

/* Карточка турнира: без тяжёлой плашки, лёгкий стеклянный вид */
.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;
}
.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: 11px;
    font-weight: 600;
    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: 22px;
    border-radius: 18px;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 11px;
    font-weight: 500;
    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 top controls (filters + tabs) */
.games-top-controls {
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    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);
}

.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: space-between;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    margin-top: 0;
}
.games-tab {
    flex: 1 1 0;
    background: none;
    border: none;
    padding: 12px 0 10px;
    margin: 0;
    font-family: 'Satoshi', var(--srp-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255,255,255,0.75);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 180ms ease, border-bottom-color 180ms ease, opacity 120ms ease;
}
.games-tab:active { opacity: 0.88; }
.games-tab.is-active {
    color: #fff;
    border-bottom-color: #fff;
}

/* 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;
}

/* 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: 16px;
    font-weight: 600;
    flex: 1;
}

.tournament-status {
    font-size: 12px;
    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: 14px;
}

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

.tournament-detail-value {
    font-weight: 500;
}

.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-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-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-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-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-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-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;
}

.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;
}

/* Profile Page */
.profile-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: #0d0d0d !important;
    font-family: var(--srp-font);
}
.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;
}
.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);
}
.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: Branch row layout (mobile-friendly) */
.admin-branch-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-branch-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.admin-branch-main {
    flex: 1;
    min-width: 0;
}
.admin-branch-name {
    font-size: 14px;
    font-weight: 900;
    color: rgba(255,255,255,0.96);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.admin-branch-meta {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,0.60);
}
.admin-branch-address {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.admin-branch-address.is-hidden {
    color: rgba(255,255,255,0.45);
}
.admin-branch-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.82);
    opacity: 0.95;
    user-select: none;
    white-space: nowrap;
    margin-top: 2px;
}
.admin-branch-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-branch-actions .admin-mini-btn {
    flex: 1 1 96px;
    min-width: 96px;
    justify-content: center;
}

/* 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-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-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;
}

/* ---- 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: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    line-height: 1.2;
}
.terms-screen__text {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    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: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    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 — мягкий таб-бар (в стиле CodePen, но под наш дизайн) */
.bottom-nav {
    position: fixed;
    bottom: 6px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 8px 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    box-sizing: border-box;
    border-radius: 26px 26px 36px 36px;
    background: rgba(32,32,36,0.52);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
}
.bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
    opacity: 0.9;
}
.nav-slider {
    position: absolute;
    top: 7px;
    left: 0;
    height: 44px;
    border-radius: 23px;
    background:
        linear-gradient(180deg, rgba(147,4,0,0.98) 0%, rgba(147,4,0,0.78) 100%);
    box-shadow:
        0 10px 24px rgba(0,0,0,0.30),
        0 0 0 1px rgba(255,255,255,0.07) inset,
        0 10px 26px rgba(147,4,0,0.22);
    transition:
        left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.28s 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: 6px 4px;
    cursor: pointer;
    text-decoration: none;
    color: rgba(255,255,255,0.52);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.22s ease, transform 0.22s ease;
    border-radius: 16px;
    user-select: none;
}
.nav-item:active { opacity: 0.86; transform: scale(0.99); }
.nav-item.active { color: #ffffff; }

/* Убираем точку-индикатор над иконкой (не нужна в нашем 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;
    width: 40px;
    height: 40px;
    transform: translateZ(0);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-item.active .nav-icon {
    transform: translateY(-1px) scale(1.02);
}
.nav-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    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: stroke-dashoffset 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* CodePen-like details for specific icons */
.nav-item.home {
    --tab-bar-home-scale: .7;
    --tab-bar-home-opacity: 1;
}
.nav-item.home .nav-icon::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px currentColor;
    position: absolute;
    left: 50%;
    top: 42.5%;
    transform: translateX(-50%) scale(var(--tab-bar-home-scale)) translateZ(0);
    opacity: var(--tab-bar-home-opacity);
    pointer-events: none;
}

.nav-item.chart {
    --tab-bar-chart-1-offset: 6px;
    --tab-bar-chart-2-offset: 18px;
    --tab-bar-chart-3-offset: 10px;
    --tab-bar-chart-4-offset: 17px;
}
.nav-item.chart .nav-icon .tb-bars path:nth-child(1) { stroke-dasharray: 3px; stroke-dashoffset: var(--tab-bar-chart-1-offset); }
.nav-item.chart .nav-icon .tb-bars path:nth-child(2) { stroke-dasharray: 9px; stroke-dashoffset: var(--tab-bar-chart-2-offset); }
.nav-item.chart .nav-icon .tb-bars path:nth-child(3) { stroke-dasharray: 5px; stroke-dashoffset: var(--tab-bar-chart-3-offset); }
.nav-item.chart .nav-icon .tb-bars path:nth-child(4) { stroke-dasharray: 10px; stroke-dashoffset: var(--tab-bar-chart-4-offset); }

.nav-item.user {
    --tab-bar-user-y: 0px;
    --tab-bar-user-scale: .7;
    --tab-bar-user-opacity: 1;
}
.nav-item.user .nav-icon::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px currentColor;
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translateX(-50%) scale(var(--tab-bar-user-scale)) translateZ(0);
    opacity: var(--tab-bar-user-opacity);
    pointer-events: none;
}
.nav-item.user .nav-icon .circle {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 13px;
    left: 50%;
    border-radius: 50%;
    overflow: hidden;
    transform: translateX(-50%);
}
.nav-item.user .nav-icon .circle svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + var(--tab-bar-user-y))) translateZ(0);
}

.nav-item.trophy {
    --tab-bar-trophy-x: 0px;
    --tab-bar-trophy-scale: .75;
}
.nav-item.trophy .nav-icon::before,
.nav-item.trophy .nav-icon::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    left: 50%;
    pointer-events: none;
    opacity: 0.95;
}
.nav-item.trophy .nav-icon::before {
    width: 2px;
    transform: translateX(-50%) scaleX(0.75) translateZ(0);
    top: 23px;
    bottom: 12px;
}
.nav-item.trophy .nav-icon::after {
    height: 2px;
    width: 9px;
    border-radius: 1px;
    transform: translateX(-50%) scaleX(var(--tab-bar-trophy-scale)) scaleY(0.75) translateZ(0);
    top: 26px;
}
.nav-item.trophy .nav-icon .left,
.nav-item.trophy .nav-icon .right {
    position: absolute;
    top: 10px;
    height: 12px;
    width: 6px;
    overflow: hidden;
}
.nav-item.trophy .nav-icon .left { left: 10px; }
.nav-item.trophy .nav-icon .right { right: 10px; }
.nav-item.trophy .nav-icon .left svg,
.nav-item.trophy .nav-icon .right svg {
    position: absolute;
    top: 0;
}
.nav-item.trophy .nav-icon .left svg { left: 0; transform: translateX(var(--tab-bar-trophy-x)) translateZ(0); }
.nav-item.trophy .nav-icon .right svg { right: 0; transform: translateX(calc(var(--tab-bar-trophy-x) * -1)) translateZ(0); }
.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;
}

/* Анимация иконки при нажатии */
.nav-item.is-animating .nav-icon {
    animation: nav-icon-pop 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes nav-icon-pop {
    0% { transform: translateZ(0) scale(1); }
    35% { transform: translateZ(0) scale(1.14); }
    100% { transform: translateZ(0) scale(1); }
}

/* ——— Покер-стол (страница «Стол» в мини-апп) ——— */
.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;
    will-change: transform;
}

/* Скрывать нижнее меню при открытой клавиатуре (без reflow, чтобы не дёргать скролл на iOS) */
body.keyboard-open .bottom-nav {
    transform: translateY(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-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: 14px;
}
.game-details-page .gd-section-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.game-details-page .gd-section-title{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 950;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.96);
}
.game-details-page .gd-section-title::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f3d66e 0%, #c9971b 100%);
    box-shadow: 0 0 14px rgba(212,175,55,0.45);
}
.game-details-page .gd-section-box{
    border-radius: 22px;
    border: 1px solid rgba(212,175,55,0.14);
    background: linear-gradient(180deg, rgba(33,28,21,0.90) 0%, rgba(19,17,14,0.96) 100%);
    box-shadow: 0 14px 34px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
}
.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-details-page .gd-info-card{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
}
.game-details-page .gd-info-dot{
    margin-top: 8px;
    width: 10px;
    height: 10px;
    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: 16px;
    line-height: 1.3;
    font-weight: 900;
    color: rgba(255,255,255,0.98);
    word-break: break-word;
}
.game-details-page .gd-info-text{
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255,255,255,0.76);
    white-space: pre-wrap;
}
.game-details-page .gd-info-meta{
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255,255,255,0.58);
}
.game-details-page .gd-info-pills{
    margin-top: 10px;
    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: 12px;
    color: #f0cf67;
    font-weight: 900;
    text-decoration: none;
}
.game-details-page .gd-info-link:hover{
    text-decoration: underline;
}
.game-details-page .gd-copy-block{
    padding: 14px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255,255,255,0.84);
    white-space: pre-wrap;
}
.game-details-page .gd-copy-block--muted{
    color: rgba(255,255,255,0.74);
}
.game-details-page .gd-feature-list{
    margin-bottom: 0;
    padding-left: 20px;
}
.game-details-page .gd-feature-item{
    margin: 8px 0;
    padding-left: 2px;
}
.game-details-page .gd-feature-item::marker{
    color: #f0cf67;
}

.game-details-page .srp-gd-tabs{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    padding: 6px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.game-details-page .srp-gd-tab{
    min-width: 0;
    border-radius: 18px;
    padding: 13px 10px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.60);
    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, background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.game-details-page .srp-gd-tab:active{ opacity: 0.88; transform: translateY(1px); }
.game-details-page .srp-gd-tab.is-active{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.96);
    box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
}

.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{
        gap: 6px;
        padding: 5px;
    }
    .game-details-page .srp-gd-tab{
        padding: 12px 8px;
        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-details-wrapper {
    padding: 16px;
}

/* --- Timer block inside game details (React) --- */
.srp-timer-refresh-btn{
    font-size: 12px;
    font-weight: 900;
    background: rgba(212,175,55,0.10);
    color: #f0cf67;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
}
.srp-timer-refresh-btn:disabled{ opacity: 0.55; cursor: default; }

.game-details-page .srp-timer-hero{
    position: relative;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    background: linear-gradient(135deg, rgba(45,36,22,0.92) 0%, rgba(26,21,16,0.92) 50%, rgba(15,13,10,0.92) 100%);
    box-shadow: 0 18px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
}
.game-details-page .srp-timer-hero::before{
    content: "";
    position: absolute;
    inset: -60px -60px auto -60px;
    height: 220px;
    background: radial-gradient(closest-side at 50% 30%, rgba(212,175,55,0.18), rgba(212,175,55,0.00) 70%);
    pointer-events: none;
}
.game-details-page .srp-timer-hero.is-paused::before{
    background: radial-gradient(closest-side at 50% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 70%);
}

.game-details-page .srp-timer-hero-top{
    position: relative;
    z-index: 1;
}
.game-details-page .srp-timer-hero-room{
    text-align: center;
    font-size: 16px;
    font-weight: 1000;
    letter-spacing: 0.02em;
}
.game-details-page .srp-timer-hero-chips{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.game-details-page .srp-timer-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.26);
    color: rgba(255,255,255,0.86);
    font-size: 12px;
    font-weight: 800;
}
.game-details-page .srp-timer-chip--status{
    border-color: rgba(212,175,55,0.28);
    background: rgba(212,175,55,0.10);
    color: #E7C86A;
}
.game-details-page .srp-timer-hero.is-paused .srp-timer-chip--status{
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
}
.game-details-page .srp-timer-chip--btn{
    cursor: pointer;
}
.game-details-page .srp-timer-chip--btn:disabled{
    opacity: 0.55;
    cursor: default;
}

.game-details-page .srp-timer-hero-actions{
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.game-details-page .srp-timer-hero-center{
    position: relative;
    z-index: 1;
    margin-top: 16px;
    text-align: center;
}
.game-details-page .srp-timer-round-title{
    font-size: 22px;
    font-weight: 1000;
}
.game-details-page .srp-timer-round-subtitle{
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.78;
    font-weight: 900;
}
.game-details-page .srp-timer-remaining-label{
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 0.18em;
    opacity: 0.58;
    font-weight: 1000;
}
.game-details-page .srp-timer-remaining-value{
    margin-top: 6px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
}
.game-details-page .srp-timer-remaining-time{
    font-size: 52px;
    font-weight: 1000;
    line-height: 1;
    color: #7CFF95;
    text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.game-details-page .srp-timer-hero.is-paused .srp-timer-remaining-time{
    color: rgba(255,255,255,0.72);
}
.game-details-page .srp-timer-remaining-icon{
    font-size: 26px;
    opacity: 0.78;
}
.game-details-page .srp-timer-break-line{
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.72;
    font-weight: 800;
}
.game-details-page .srp-timer-hero-empty{
    position: relative;
    z-index: 1;
    margin-top: 16px;
    text-align: center;
    opacity: 0.65;
    font-weight: 800;
}

.game-details-page .srp-timer-hero-admin{
    position: relative;
    z-index: 1;
    margin-top: 16px;
    display: grid;
    gap: 12px;
}
.game-details-page .srp-timer-hero-admin-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.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;
}
.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(212,175,55,0.16);
    background: linear-gradient(180deg, rgba(37,31,23,0.88) 0%, rgba(19,17,14,0.94) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.game-details-page .srp-timer-empty-title{
    font-size: 13px;
    font-weight: 950;
    color: rgba(255,255,255,0.94);
    flex: 1 1 100%;
}
.game-details-page .srp-timer-empty-hint{
    font-size: 12px;
    color: rgba(255,255,255,0.62);
    font-weight: 800;
}

.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(#games-page.active),
body:has(#home-page.active),
body:has(#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(#home-page.active)::before,
body:has(#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;
}
.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;
}