/* =============================================
   DESIGN SYSTEM — TOGYZ PRO 2025
   ============================================= */
:root {
    --gold:          #E6B325;
    --gold-bright:   #FFD166;
    --gold-dim:      #C2951B;
    --gold-glow:     rgba(230,179,37,0.25);
    --bg-deep:       #0A0A10;
    --bg-app:        #111118;
    --bg-card:       #18181F;
    --bg-card-hover: #20202A;
    --bg-input:      rgba(255,255,255,0.06);
    --border:        rgba(255,255,255,0.07);
    --border-gold:   rgba(230,179,37,0.25);
    --text-primary:  #F5F0E8;
    --text-secondary:#9B97A8;
    --green:         #3FC97A;
    --red:           #FF5C5C;
    --blue:          #5B9EFF;
    --font-display:  'Unbounded', sans-serif;
    --font-body:     'DM Sans', sans-serif;
    --radius-sm:     10px;
    --radius-md:     16px;
    --radius-lg:     22px;
    --radius-xl:     28px;
    --shadow-gold:   0 8px 32px rgba(230,179,37,0.2);
    --shadow-card:   0 4px 24px rgba(0,0,0,0.4);
}
/* =============================================
   СИСТЕМА ТЕМ (THEMES)
   ============================================= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    font-family: var(--font-body);
    background: var(--bg-deep);
    color: var(--text-primary);
    margin: 0; padding: 0;
    overscroll-behavior: none;
    height: 100dvh;
    min-height: 100dvh;
}

/* Desktop layout rules are at the BOTTOM of this style block — after PLAYOK overrides */

/* AUTH SCREEN */
#web-auth-screen { background: var(--bg-deep); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
#web-auth-screen::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(230,179,37,0.12) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 80% 100%, rgba(63,201,122,0.06) 0%, transparent 50%); pointer-events: none; }
.auth-logo-wrap { text-align: center; margin-bottom: 36px; position: relative; z-index: 1; animation: authFadeDown 0.6s ease both; }
.auth-logo-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--gold), var(--gold-dim)); border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #1a100a; margin: 0 auto 16px; box-shadow: 0 12px 40px rgba(230,179,37,0.4), 0 0 0 1px rgba(230,179,37,0.2); }
.auth-logo-title { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.5px; }
.auth-logo-sub { color: var(--text-secondary); font-size: 14px; margin-top: 6px; }
.auth-card { width: 100%; max-width: 360px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px 24px; position: relative; z-index: 1; box-shadow: var(--shadow-card); animation: authFadeUp 0.5s ease both; }
.auth-input { width: 100%; padding: 14px 16px; margin-bottom: 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: 15px; font-family: var(--font-body); transition: border-color 0.2s, box-shadow 0.2s; outline: none; }
.auth-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.auth-input::placeholder { color: var(--text-secondary); }
.auth-btn { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #1a100a; font-weight: 900; font-size: 15px; font-family: var(--font-display); letter-spacing: 0.5px; border-radius: var(--radius-md); border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(230,179,37,0.35); transition: transform 0.15s, box-shadow 0.15s; }
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(230,179,37,0.45); }
.auth-btn:active { transform: translateY(1px); }
.auth-switch { text-align: center; margin-top: 18px; color: var(--gold); cursor: pointer; font-size: 14px; font-weight: 700; transition: opacity 0.2s; }
.auth-switch:hover { opacity: 0.8; }
@keyframes authFadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes authFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* RATING TOAST */
.rating-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-120px); background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: var(--radius-lg); padding: 14px 20px; display: flex; align-items: center; gap: 14px; z-index: 99998; min-width: 240px; box-shadow: var(--shadow-gold), var(--shadow-card); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.rating-toast.show { transform: translateX(-50%) translateY(0); }
.rating-toast-icon { font-size: 24px; }
.rating-toast-label { font-size: 11px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.rating-toast-value { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--green); }
.rating-toast-current { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
/* Знак дельты читается цветом, а не только символом. */
.rating-toast-value.positive { color: var(--green, #4caf50); }
.rating-toast-value.negative { color: var(--red, #d15b5b); }

/* Рейтинг в шапке досчитывается до нового значения; вспышка отмечает направление. */
#user-rating-display, #home-elo-mirror { font-variant-numeric: tabular-nums; transition: color .25s ease; }
#user-rating-display.is-rating-up, #home-elo-mirror.is-rating-up { color: var(--green, #4caf50); animation: tp-rating-pop .6s ease; }
#user-rating-display.is-rating-down, #home-elo-mirror.is-rating-down { color: var(--red, #d15b5b); animation: tp-rating-pop .6s ease; }
@keyframes tp-rating-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    /* Цвет остаётся как обратная связь, движение убирается. */
    #user-rating-display.is-rating-up, #home-elo-mirror.is-rating-up,
    #user-rating-display.is-rating-down, #home-elo-mirror.is-rating-down { animation: none; }
    .rating-toast { transition: none; }
}

/* HOME HEADER — see below in home-grid section */
.logo-text { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--gold); letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; }
.kumalak-icon { color: var(--gold); font-size: 14px; }

/* MAIN MENU BUTTONS */
.main-menu-content { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.big-btn { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s; text-align: left; width: 100%; position: relative; overflow: hidden; }
.big-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%); pointer-events: none; }
.big-btn:first-child { background: linear-gradient(135deg, rgba(184,134,11,0.18), rgba(139,101,8,0.1)); border-color: rgba(230,179,37,0.2); }
.big-btn:first-child:hover { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-glow), var(--shadow-gold); transform: translateY(-1px); }
.big-btn:not(:first-child):hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 4px 20px rgba(0,0,0,0.3); transform: translateY(-1px); }
.big-btn:active { transform: scale(0.98) translateY(0); }
.big-btn > i { font-size: 26px; width: 32px; text-align: center; flex-shrink: 0; }
.big-btn:first-child > i { color: var(--gold); }
.big-btn:not(:first-child) > i { color: var(--text-secondary); }
.big-btn-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; }
.big-btn-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; font-weight: 500; }

/* LOBBY SECTION */
.lobby-section { margin: 14px 16px 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.lobby-section-title { padding: 12px 16px; font-size: 11px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.lobby-online-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.lobby-empty { padding: 24px; text-align: center; color: var(--text-secondary); font-size: 13px; }

/* =============================================
   BOTTOM NAV — DESKTOP VERSION (Как было)
   Применяется только на экранах шире 767px
   ============================================= */
/* =============================================
   BOTTOM NAV — MOBILE (Классик + Liquid Glass)
   max-width: 767px
   Ключевой принцип: все 5 элементов используют
   одну высоту 58px, иконка+текст центрированы,
   золотой круг — position:absolute, не ломает поток.
   ============================================= */
@media (max-width: 767px) {

    .bottom-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        /* Контентная зона 58px + safe-area (для iPhone home-bar) */
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(11, 11, 18, 0.97);
        border-top: 1px solid rgba(255,255,255,0.07);
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        z-index: 1000;
        overflow: visible;   /* круг может выступать вверх */
        box-shadow: 0 -2px 16px rgba(0,0,0,0.4);
        transition: border-radius 0.3s, bottom 0.3s, left 0.3s, right 0.3s, background 0.3s;
    }

    /* ─── Обычная кнопка ─── */
    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        position: relative;
        transition: color 0.2s;
        /* Контентная зона без safe-area */
        padding-bottom: 0;
        height: 58px;
    }

    .nav-item i {
        font-size: 20px; line-height: 1;
        transition: color 0.2s, transform 0.2s;
    }
    .nav-item span { line-height: 1; }

    .nav-item.active { color: var(--text-primary); }
    .nav-item.active i {
        color: var(--gold);
        transform: translateY(-2px);
        text-shadow: 0 3px 10px rgba(230,179,37,0.4);
    }
    .nav-item.active::after { display: none !important; }

    .nav-badge {
        position: absolute; top: 6px; right: calc(50% - 18px);
        background: var(--red); color: #fff;
        font-size: 9px; font-weight: 900;
        padding: 2px 5px; border-radius: 10px;
        min-width: 16px; text-align: center;
        box-shadow: 0 2px 6px rgba(255,92,92,0.5);
    }

    /* ─── Центральная кнопка ───
       Лейбл сидит там же где у остальных (justify-content: center),
       но сам круг вынесен абсолютно и не сдвигает лейбл.       */
    .nav-item-center {
        flex: 1;
        height: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        position: relative;
    }

    /* Лейбл "ИГРАТЬ" — на той же вертикальной позиции что тексты соседей,
       достигается через margin-top, равный (radius круга) + gap */
    .nav-center-label {
        font-size: 10px; font-weight: 800;
        color: var(--text-secondary);
        text-transform: uppercase; letter-spacing: 0.4px;
        line-height: 1;
        /* Сдвигаем вниз ровно настолько, чтобы совпасть с текстами соседей:
           соседи: иконка 20px + gap 5px + текст 12px = центр текста на ~47px от верха 58px-строки
           здесь мы хотим текст в той же позиции → margin-top подбираем */
        margin-top: 28px;
    }

    /* Золотой круг — абсолютно по центру x, поднят над меню */
    .nav-center-circle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /* bottom считается от низа .nav-item-center (58px высота, без safe-area) */
        bottom: 30px;
        width: 46px; height: 46px;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--gold-bright), var(--gold-dim));
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 5px 18px rgba(230,179,37,0.45), inset 0 2px 4px rgba(255,255,255,0.3);
        border: 1.5px solid rgba(255,255,255,0.2);
        z-index: 3;
        transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
    }
    .nav-center-circle i { font-size: 18px; color: #1a100a; line-height: 1; }

    .nav-item-center.active .nav-center-label { color: var(--gold); }
    .nav-item-center.active .nav-center-circle {
        box-shadow: 0 0 26px rgba(230,179,37,0.65), inset 0 2px 4px rgba(255,255,255,0.5);
    }
    .nav-item-center:active .nav-center-circle {
        transform: translateX(-50%) scale(0.91);
        box-shadow: 0 3px 10px rgba(230,179,37,0.3);
    }

    /* ═══════════════════════
       LIQUID GLASS MODE
       ═══════════════════════ */
    body.use-liquid-nav .bottom-nav {
        bottom: max(10px, env(safe-area-inset-bottom, 10px));
        left: 12px; right: 12px;
        height: 62px;
        padding-bottom: 0;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.07);
        border-top: 1px solid rgba(255,255,255,0.15);
        background: rgba(14,14,24,0.4) !important;
        backdrop-filter: blur(32px) saturate(200%);
        -webkit-backdrop-filter: blur(32px) saturate(200%);
        box-shadow: 0 16px 40px rgba(0,0,0,0.45),
                    inset 0 1px 0 rgba(255,255,255,0.06);
    }

    body.use-liquid-nav .nav-item,
    body.use-liquid-nav .nav-item-center { height: 62px; }

    body.use-liquid-nav .nav-center-circle { bottom: 33px; width: 48px; height: 48px; }
    body.use-liquid-nav .nav-center-circle i { font-size: 20px; }
    body.use-liquid-nav .nav-center-label  { margin-top: 30px; }
}
/* TIME SELECT SCREEN */
.time-select-screen { padding: 16px; overflow-y: auto; padding-bottom: 100px; }
.time-select-scroll { display: flex; flex-direction: column; gap: 6px; }
.time-category-label { font-size: 11px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; padding: 12px 4px 6px; display: flex; align-items: center; gap: 8px; }
.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.time-option { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 10px; text-align: center; cursor: pointer; transition: all 0.2s; }
.time-option:hover, .time-option.selected { border-color: var(--gold); background: rgba(230,179,37,0.08); box-shadow: 0 0 0 1px var(--gold-glow); }
.time-option-main { font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--text-primary); }
.time-option-inc { font-size: 11px; color: var(--green); margin: 3px 0; font-weight: 700; }
.time-option-type { font-size: 10px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; }
.no-inc { color: var(--text-secondary) !important; }
.search-with-time-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #1a100a; font-family: var(--font-display); font-size: 14px; font-weight: 900; border-radius: var(--radius-md); border: none; cursor: pointer; box-shadow: var(--shadow-gold); margin-top: 16px; transition: transform 0.15s, box-shadow 0.15s; }
.search-with-time-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(230,179,37,0.45); }
.back-btn-top { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; color: var(--text-secondary); font-size: 14px; font-weight: 700; transition: color 0.2s; }
.back-btn-top:hover { color: var(--text-primary); }

/* SEARCHING SCREEN */
.searching-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 16px; min-height: 60vh; }
.searching-spinner { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--gold); animation: spin 0.8s linear infinite; box-shadow: 0 0 24px var(--gold-glow); }
.searching-title { font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--text-primary); }
.searching-subtitle { font-size: 13px; color: var(--text-secondary); }
.cancel-search-btn { padding: 14px 28px; background: transparent; border: 1px solid rgba(255,92,92,0.3); color: var(--red); border-radius: var(--radius-md); font-size: 14px; font-weight: 800; cursor: pointer; transition: all 0.2s; }
.cancel-search-btn:hover { background: rgba(255,92,92,0.08); }

/* BOT SETUP */
.setup-container { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.menu-label { font-size: 11px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 0; }
.side-picker { display: flex; gap: 10px; }
.side-card { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 10px; text-align: center; cursor: pointer; transition: all 0.2s; }
.side-card.selected { border-color: var(--gold); background: rgba(230,179,37,0.08); box-shadow: 0 0 0 1px var(--gold-glow); }
.side-card-title { font-size: 13px; font-weight: 800; color: var(--text-primary); margin-top: 8px; }
.menu-select { width: 100%; padding: 13px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-weight: 700; font-family: var(--font-body); appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"%3E%3Cpath d="M1 1l5 5 5-5" stroke="%23E6B325" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; cursor: pointer; outline: none; transition: border-color 0.2s; }
.menu-select:focus { border-color: var(--gold); }
.start-game-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #1a100a; font-family: var(--font-display); font-size: 14px; font-weight: 900; letter-spacing: 0.5px; border-radius: var(--radius-md); border: none; cursor: pointer; box-shadow: var(--shadow-gold); transition: transform 0.15s, box-shadow 0.15s; }
.start-game-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(230,179,37,0.45); }

/* TOURNAMENTS */
.tournaments-content { padding: 16px; overflow-y: auto; padding-bottom: 100px; display: flex; flex-direction: column; gap: 10px; }
.premium-input { width: 100%; padding: 12px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; font-family: var(--font-body); outline: none; transition: border-color 0.2s; }
.premium-input:focus { border-color: var(--gold); }
.premium-input-group label { display: block; font-size: 10px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.btn-launch-tourn { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #1a100a; font-family: var(--font-display); font-size: 14px; font-weight: 900; border-radius: var(--radius-md); border: none; cursor: pointer; box-shadow: var(--shadow-gold); transition: transform 0.15s; }
.btn-launch-tourn:hover { transform: translateY(-1px); }
.create-tourn-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.create-tourn-header h3 { margin: 0; font-size: 16px; color: var(--text-primary); font-family: var(--font-display); }
#btn-show-create-tourn { background: linear-gradient(135deg, rgba(230,179,37,0.12), rgba(194,149,27,0.06)); border: 1px solid var(--border-gold); border-radius: var(--radius-lg); padding: 20px 18px; cursor: pointer; width: 100%; color: var(--text-primary); text-align: left; transition: all 0.2s; }
#btn-show-create-tourn:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.btn-tourn-title { font-family: var(--font-display); font-size: 14px; font-weight: 900; color: var(--gold); margin: 10px 0 4px; }
.btn-tourn-sub { font-size: 12px; color: var(--text-secondary); }

/* SUB SCREEN HEADER */
.sub-screen-header { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg-app); }
.sub-screen-back { width: 38px; height: 38px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); flex-shrink: 0; transition: all 0.2s; }
.sub-screen-back:hover { border-color: var(--gold); color: var(--gold); }
.sub-screen-title { font-family: var(--font-display); font-size: 16px; font-weight: 900; color: var(--text-primary); }

/* SCREENS */
.screen { display: none; width: 100%; height: 100dvh; max-height: 100dvh; flex-direction: column; overflow-y: auto; }
.screen.active { display: flex; }

/* ИСПРАВЛЕНИЕ ЭКРАНА НАСТРОЕК */
.settings-content { flex: 1 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 20px 16px 120px 16px !important; }
.settings-card { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; background: var(--bg-card) !important; border-radius: var(--radius-lg) !important; border: 1px solid var(--border) !important; overflow: hidden !important; }
.settings-row { flex-shrink: 0 !important; min-height: 64px !important; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; gap: 12px; border-bottom: 1px solid var(--border); }
.settings-row:last-child { border-bottom: none; }
.settings-section-label { flex-shrink: 0 !important; margin-bottom: -8px !important; font-size: 11px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 4px; }
.settings-row-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.settings-row-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: rgba(255,255,255,0.05); color: var(--text-secondary); }
.settings-row-icon.gold { background: rgba(230,179,37,0.12); color: var(--gold); }
.settings-row-icon.blue { background: rgba(91,158,255,0.12); color: var(--blue); }
.settings-row-icon.green { background: rgba(63,201,122,0.12); color: var(--green); }
.settings-row-title { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-row-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Toggle */
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 26px; cursor: pointer; transition: background 0.25s; }
.toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: transform 0.25s; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
input:checked + .toggle-slider { background: var(--gold); }
input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Lang picker */
.lang-picker { display: flex; gap: 6px; }
.lang-btn { padding: 7px 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); font-size: 11px; font-weight: 800; cursor: pointer; transition: all 0.2s; }
.lang-btn.active, .lang-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(230,179,37,0.08); }

/* Theme swatches */
.theme-picker-grid { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.theme-swatch-item { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.theme-swatch-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; transition: all 0.2s; }
.theme-swatch-circle.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-glow); }
.theme-swatch-label { font-size: 9px; color: var(--text-secondary); font-weight: 700; }
.ts-dark { background: #18181F; }
.ts-green { background: linear-gradient(135deg, #1a3020, #2d4a35); }
.ts-blue { background: linear-gradient(135deg, #0d1f3c, #1a3050); }
.ts-wood { background: linear-gradient(135deg, #3a2010, #5a3a20); }

/* LEAGUE / LEADERBOARD */
.league-screen-inner { padding: 16px; overflow-y: auto; padding-bottom: 100px; display: flex; flex-direction: column; gap: 12px; }
.league-season-banner { background: linear-gradient(135deg, rgba(230,179,37,0.1), rgba(194,149,27,0.05)); border: 1px solid var(--border-gold); border-radius: var(--radius-lg); padding: 18px; display: flex; align-items: center; gap: 14px; }
.league-season-icon { font-size: 36px; }
.league-season-title { font-family: var(--font-display); font-size: 16px; font-weight: 900; color: var(--text-primary); }
.league-season-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.league-loading { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 40px; color: var(--text-secondary); font-size: 14px; }
.league-loading-spinner { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--gold); animation: spin 0.8s linear infinite; }

/* MORE SCREEN */
.more-list { padding: 16px; overflow-y: auto; padding-bottom: 100px; display: flex; flex-direction: column; gap: 2px; }
.list-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: all 0.2s; margin-bottom: 4px; }
.list-item:hover { border-color: rgba(255,255,255,0.12); background: var(--bg-card-hover); }
.list-item-left { display: flex; align-items: center; gap: 12px; color: var(--text-primary); font-size: 14px; font-weight: 700; }
.list-item-left i { width: 20px; text-align: center; color: var(--text-secondary); }
.list-item > .fa-chevron-right { color: var(--text-secondary); font-size: 12px; }

/* FRIENDS / MESSAGES */
.friend-screen-body { padding: 16px; overflow-y: auto; padding-bottom: 100px; display: flex; flex-direction: column; gap: 12px; }
.search-bar-wrap { margin-bottom: 4px; }
.search-input { width: 100%; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-family: var(--font-body); outline: none; transition: border-color 0.2s; }
.search-input:focus { border-color: var(--gold); }
.friends-tabs { display: flex; gap: 6px; }
.friends-tab { flex: 1; padding: 10px 8px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-size: 12px; font-weight: 800; color: var(--text-secondary); transition: all 0.2s; }
.friends-tab.active { border-color: var(--gold); color: var(--gold); background: rgba(230,179,37,0.08); }
.friends-list { padding: 16px; overflow-y: auto; padding-bottom: 100px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40vh; gap: 12px; color: var(--text-secondary); text-align: center; }
.empty-state i { font-size: 48px; opacity: 0.3; }
.empty-state p { font-size: 14px; line-height: 1.6; margin: 0; }

/* CHAT */
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-input-area { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-end; background: var(--bg-app); }
.chat-input { flex: 1; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-family: var(--font-body); resize: none; outline: none; max-height: 120px; transition: border-color 0.2s; }
.chat-input:focus { border-color: var(--gold); }
.chat-send-btn { width: 44px; height: 44px; background: linear-gradient(135deg, var(--gold), var(--gold-dim)); border: none; border-radius: 12px; cursor: pointer; color: #1a100a; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s; }
.chat-send-btn:hover { transform: scale(1.05); }
.chat-header-name { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.chat-header-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* GAME SCREEN BASE */
.top-nav { display: flex; background: var(--bg-app); border-bottom: 1px solid var(--border); }
.nav-tab { flex: 1; padding: 14px 8px; text-align: center; font-size: 12px; font-weight: 800; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; border-bottom: 2px solid transparent; }
.active-tab { color: var(--gold); border-bottom-color: var(--gold); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.clock-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.clock-bar-player { font-size: 12px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.clock-time { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--text-primary); }
.row { display: flex; }
.numbers-row { display: flex; }
.score-box { text-align: center; }
.score-title { font-size: 10px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.score-value { font-family: var(--font-display); font-size: 28px; font-weight: 900; }
.score-value.ai { color: var(--text-primary); }
.score-value.you { color: var(--gold); }
.score-divider { font-size: 20px; color: var(--border); font-weight: 900; }
.history-box { padding: 16px; overflow-y: auto; }
.eval-box { padding: 24px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.eval-title { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--text-primary); }
.eval-score { font-size: 14px; color: var(--text-secondary); }

/* OVERLAYS & MODALS */
/* modal-overlay is the class used by #game-menu-overlay and #tournament-result-overlay */
.modal-overlay { display: none; }
.modal-overlay.open { display: flex; }
/* Explicit default-hidden for tournament result */
#tournament-result-overlay { display: none !important; }
#tournament-result-overlay.open { display: flex !important; }

.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 9990; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 12px; }
.overlay.active { display: flex; }
.overlay h1 { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: var(--text-primary); margin: 0; }
.end-subtitle { color: var(--text-secondary); font-size: 15px; text-align: center; }
.support-modal-overlay, .avatar-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 99990; display: none; align-items: flex-end; justify-content: center; }
.support-modal-overlay.open, .avatar-modal-overlay.open { display: flex; }
.support-modal, .avatar-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 20px 24px 36px; width: 100%; max-width: 420px; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.support-modal-handle, .avatar-modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 16px; }
.support-modal-title, .avatar-modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--text-primary); text-align: center; margin-bottom: 6px; }
.support-modal-sub { font-size: 13px; color: var(--text-secondary); text-align: center; margin-bottom: 20px; }
.support-contact-list { display: flex; flex-direction: column; gap: 10px; }
.support-contact-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; }
.support-contact-item:hover { border-color: #29b6f6; }
.support-contact-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.support-contact-icon.tg { background: rgba(41,182,246,0.15); color: #29b6f6; }
.support-contact-label { font-size: 11px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.support-contact-value { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-top: 2px; }
.avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 16px 0; }
.avatar-close-btn { width: 100%; padding: 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-weight: 800; cursor: pointer; }

/* Tutorial overlay */
.tutorial-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 99980; display: none; align-items: flex-end; justify-content: center; padding: 20px; }
.tutorial-bubble { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: var(--radius-xl); padding: 24px; width: 100%; max-width: 400px; animation: slideUp 0.3s ease; }
.tutorial-step-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.tutorial-icon { font-size: 32px; text-align: center; margin-bottom: 10px; }
.tutorial-title { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--text-primary); text-align: center; margin-bottom: 8px; }
.tutorial-text { font-size: 14px; color: var(--text-secondary); text-align: center; line-height: 1.6; margin-bottom: 18px; }
.tutorial-btns { display: flex; gap: 10px; }
.tutorial-skip-btn { flex: 1; padding: 13px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 14px; font-weight: 700; cursor: pointer; }
.tutorial-next-btn { flex: 2; padding: 13px; background: linear-gradient(135deg, var(--gold), var(--gold-dim)); border: none; border-radius: var(--radius-md); color: #1a100a; font-size: 14px; font-weight: 900; font-family: var(--font-display); cursor: pointer; }

/* Analysis screen */
.analysis-screen-wrap { padding: 16px; overflow-y: auto; padding-bottom: 100px; display: flex; flex-direction: column; gap: 12px; }
.analysis-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.analysis-card-title { font-size: 12px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.analysis-textarea { width: 100%; padding: 12px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-family: var(--font-body); resize: vertical; outline: none; transition: border-color 0.2s; }
.analysis-textarea:focus { border-color: var(--gold); }
.depth-row-new { display: flex; gap: 8px; }
.depth-btn-new { flex: 1; padding: 10px 6px; text-align: center; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: 800; color: var(--text-secondary); transition: all 0.2s; }
.depth-btn-new.selected { border-color: var(--gold); color: var(--gold); background: rgba(230,179,37,0.08); }
.analyze-btn-new { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--gold), var(--gold-dim)); border: none; border-radius: var(--radius-md); color: #1a100a; font-family: var(--font-display); font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-gold); }
.analysis-spinner-wrap { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 24px; color: var(--text-secondary); font-size: 14px; }
.analysis-result-card { display: none; background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: var(--radius-lg); padding: 20px; }
.result-best-label { font-size: 11px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.result-best-pit { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: var(--gold); }
.result-score-chip { display: inline-block; background: rgba(63,201,122,0.12); color: var(--green); padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 800; margin: 8px 0; }
.result-detail-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-top: 8px; }

/* DB screen */
.db-screen-inner { padding: 16px; overflow-y: auto; padding-bottom: 100px; display: flex; flex-direction: column; gap: 12px; }
.db-search-bar { position: relative; }
.db-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
.db-search-input { width: 100%; padding: 12px 14px 12px 40px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-family: var(--font-body); outline: none; transition: border-color 0.2s; }
.db-search-input:focus { border-color: var(--gold); }
.db-list-wrap { display: flex; flex-direction: column; gap: 8px; }

/* Rewards */
.rewards-screen-body { padding: 16px; overflow-y: auto; padding-bottom: 100px; display: flex; flex-direction: column; gap: 12px; }
.rewards-streak-banner { background: linear-gradient(135deg, rgba(255,87,34,0.12), rgba(255,152,0,0.06)); border: 1px solid rgba(255,87,34,0.2); border-radius: var(--radius-lg); padding: 20px; display: flex; align-items: center; gap: 16px; }
.rsb-left, .rsb-right { display: flex; align-items: center; gap: 10px; flex: 1; }
.rsb-fire, .rsb-bolt { font-size: 28px; }
.rsb-val { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--text-primary); }
.rsb-label { font-size: 11px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; }
.rsb-divider { width: 1px; height: 48px; background: var(--border); }
.rewards-list { display: flex; flex-direction: column; gap: 10px; }

/* Header streak badge */
#header-streak-badge { display: none; }

/* Puzzles */
.puzzles-content { overflow-y: auto; }
.puzzle-card-hero { transition: transform 0.15s; }
.puzzle-card-hero:hover { transform: scale(0.99); }

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.screen.active { display: flex; flex-direction: column; }
.app-container { width: 100%; height: 100dvh; min-height: 100dvh; background: var(--bg-app); position: relative; overflow: hidden; }

/* =============================================
   HOME GRID — PREMIUM DESIGN
   ============================================= */
/* MEGA CARD — Play Online */
/* TWIN CARDS */
/* PERF CARD */
/* HOME HEADER — safe area for notch/Dynamic Island */
.home-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: max(16px, env(safe-area-inset-top, 16px)) 18px 12px;
    border-bottom: 1px solid var(--border); background: var(--bg-app);
    flex-shrink: 0;
}





/* Game presentation is owned by styles/milestone.css (Material Board Game). */

/* =============================================
   ФИКС ПЕРЕКРЫТИЯ КНОПОК ТЕЛЕГРАМА (ШАПКИ)
   ============================================= */
.home-header, .sub-screen-header, .lobby-header {
    padding-top: max(85px, calc(env(safe-area-inset-top) + 45px)) !important;
}
@media screen and (orientation: landscape) and (max-height: 500px) {
    .home-header, .sub-screen-header, .lobby-header {
        padding-top: 12px !important;
    }
}

/* =============================================
   ФИКС ИГРОВОГО МЕНЮ (ВЫТАСКИВАЕМ НА ПЕРЕДНИЙ ПЛАН)
   ============================================= */
        /* Маленькие экраны — Samsung Galaxy S, старые iPhone SE */
        @media (max-width: 375px) {
            .mega-title { font-size: 18px !important; }
            .twin-card { padding: 12px 10px; }
            .twin-icon-wrap { width: 34px; height: 34px; }
            .twin-icon-wrap i { font-size: 15px; }
            .mega-icon-wrap { width: 50px; height: 50px; }
            .mega-icon-wrap i { font-size: 20px; }
            .nav-center-circle { width: 48px; height: 48px; }
            .nav-center-circle i { font-size: 17px; }
        }

        /* =============================================
           ФИКС ИГРОВОГО МЕНЮ (ВЫТАСКИВАЕМ НА ПЕРЕДНИЙ ПЛАН)
           ============================================= */
        #game-menu-overlay {
            position: fixed !important;
            top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
            background: rgba(0,0,0,0.7) !important;
            backdrop-filter: blur(5px) !important;
            -webkit-backdrop-filter: blur(5px) !important;
            z-index: 999999 !important; /* 999999 гарантрует, что оно будет ПОВЕРХ игры */
            display: none !important; /* Скрыто по умолчанию */
            align-items: flex-end !important;
            justify-content: center !important;
        }
        
        /* Класс .open показывает меню */
        #game-menu-overlay.open {
            display: flex !important;
        }

        /* Сама белая/темная карточка меню, которая выезжает снизу */
        #game-menu-overlay .modal-sheet {
            background: var(--bg-card) !important;
            width: 100% !important;
            max-width: 420px !important;
            border-radius: 28px 28px 0 0 !important;
            padding: 24px 24px 50px !important;
            box-sizing: border-box !important;
            animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
            border-top: 1px solid rgba(255,255,255,0.1) !important;
        }

        #game-menu-overlay .modal-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
        }

        #game-menu-overlay .modal-title {
            font-family: var(--font-display) !important;
            font-size: 18px !important;
            font-weight: 900 !important;
            color: var(--text-primary) !important;
        }

        #game-menu-overlay .modal-close-btn {
            background: transparent !important;
            border: none !important;
            font-size: 24px !important;
            color: var(--text-secondary) !important;
            cursor: pointer !important;
        }

/* =============================================
   KEYFRAMES — Анимации для десктопа
   ============================================= */
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes megaBreath {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes radarPing {
    0%   { box-shadow: 0 0 0 0 rgba(63,201,122,0.7), 0 0 8px var(--green); }
    70%  { box-shadow: 0 0 0 10px rgba(63,201,122,0), 0 0 8px var(--green); }
    100% { box-shadow: 0 0 0 0 rgba(63,201,122,0), 0 0 8px var(--green); }
}

/* =============================================
   ДЕСКТОП — PREMIUM DASHBOARD (768px+)
   Legacy desktop dashboard components (navigation is owned by home-redesign/play-platform)
   ============================================= */

/* КРАСИВЫЙ БАННЕР ПРИГЛАШЕНИЯ ДЛЯ ТЕЛЕФОНОВ */
.premium-invite-banner {
    background: linear-gradient(135deg, rgba(91,158,255,0.12), rgba(58,125,224,0.04));
    border: 1px solid rgba(91,158,255,0.25);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.premium-invite-banner:active { transform: scale(0.97); }
.premium-invite-banner:hover { border-color: var(--blue); box-shadow: 0 8px 24px rgba(91,158,255,0.2); }
.pib-left { display: flex; align-items: center; gap: 14px; }
.pib-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), #3a7de0); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    box-shadow: 0 4px 12px rgba(91,158,255,0.4); flex-shrink: 0;
}
.pib-title { font-family: var(--font-display); font-size: 14px; font-weight: 900; color: var(--text-primary); line-height: 1.2; }
.pib-sub { font-size: 11px; color: var(--blue); font-weight: 700; margin-top: 3px; }
.pib-right {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(91,158,255,0.15); color: var(--blue);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* =============================================
   ЖЕЛЕЗОБЕТОННАЯ БЛОКИРОВКА ЭКРАНА В МЕНЮ (ТОЛЬКО ТЕЛЕФОНЫ)
   ============================================= */
#portrait-lock-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100dvh;
    background: var(--bg-app);
    z-index: 9999999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}
#portrait-lock-overlay i {
    font-size: 64px;
    color: var(--gold);
    margin-bottom: 20px;
    animation: rotatePhone 2s infinite ease-in-out;
}
@keyframes rotatePhone {
    0% { transform: rotate(-90deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(-90deg); }
}
#portrait-lock-overlay h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 10px 0;
}
#portrait-lock-overlay p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* МАГИЯ ЗДЕСЬ: Строго для телефонов! (ширина меньше 950px, высота меньше 450px) */
@media screen and (max-width: 950px) and (max-height: 450px) and (orientation: landscape) {
    body:not(.game-active) #portrait-lock-overlay {
        display: flex !important;
    }
    body:not(.game-active) > .app-container, 
    body:not(.game-active) > .bottom-nav {
        display: none !important;
    }
}
@media (min-width: 768px) {

    /* ── 1. HTML / BODY ── */
    html {
        display: block !important;
        background: var(--bg-deep) !important;
        min-height: 100dvh !important;
    }
    body {
        display: block !important;
        max-width: none !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        position: relative !important;
        background: var(--bg-app) !important;
    }

    /* ── 2. SIDEBAR ── */
    /* Логотип в сайдбаре */
    /* Nav-items: иконка слева, текст справа, Chess.com стиль */
    /* Центральная кнопка «Играть» в сайдбаре */
    /* ── 3. ОСНОВНОЙ КОНТЕНТ ── */
    /* ── 4. ШАПКА HOME — убираем Telegram-отступ и дублирующий логотип ── */
    .home-header, .sub-screen-header {
        padding-top: 20px !important;
        padding-bottom: 16px !important;
    }
    .home-header .logo-text { display: none !important; }
    .home-header {
        justify-content: flex-end !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
        border-bottom: 1px solid var(--border) !important;
    }
    /* User pill — стильная таблетка */
    .home-header > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 50px !important;
        padding: 6px 14px 6px 8px !important;
        cursor: pointer !important;
        transition: border-color 0.2s, box-shadow 0.2s !important;
    }
    .home-header > div:last-child:hover {
        border-color: var(--border-gold) !important;
        box-shadow: 0 0 0 1px var(--gold-glow) !important;
    }

    /* ── 5. HOME GRID — двухколоночный дашборд ── */
    #screen-home { overflow-y: auto !important; }

    .home-grid {
        display: grid !important;
        grid-template-columns: 1.8fr 1fr !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        gap: 24px !important;
        padding: 28px 32px 48px !important;
        max-width: 1100px !important;
        margin: 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-y: visible !important;
        flex: none !important;
    }

    /* Левая колонка: mega-card + twin-row в стек */
    .home-grid > .mega-card {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .home-grid > .twin-cards-row {
        grid-column: 1 !important;
        grid-row: 2 !important;
        gap: 16px !important;
    }
    /* Правая колонка: perf-card + invite-card */
    .home-grid > .perf-card {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    .home-grid > .dt-invite-card,
    .home-grid > .premium-invite-banner {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    /* Mega-card: анимированный градиент + radar dot */
    .mega-card {
        border-radius: 16px !important;
        min-height: 160px !important;
        background: linear-gradient(270deg,
            #1C1408, #2A1D08, #33240A, #1C1408) !important;
        background-size: 400% 400% !important;
        animation: megaBreath 10s ease infinite !important;
    }
    .mega-live-dot {
        animation: radarPing 1.8s ease-out infinite !important;
    }
    .mega-title { font-size: 26px !important; }
    .mega-sub   { font-size: 14px !important; }
    .mega-icon-wrap { width: 68px !important; height: 68px !important; }
    .mega-icon-wrap i { font-size: 28px !important; }

    /* Twin cards: горизонтально, 3D hover */
    .twin-card {
        border-radius: 16px !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 20px 22px !important;
        transition: transform 0.22s cubic-bezier(.34,1.56,.64,1),
                    box-shadow 0.22s ease,
                    border-color 0.22s ease !important;
    }
    .twin-card.twin-card--ai:hover {
        transform: translateY(-4px) !important;
        border-color: var(--blue) !important;
        box-shadow: 0 8px 32px rgba(91,158,255,0.25), 0 2px 8px rgba(0,0,0,0.4) !important;
    }
    .twin-card.twin-card--tourn:hover {
        transform: translateY(-4px) !important;
        border-color: var(--gold) !important;
        box-shadow: 0 8px 32px rgba(230,179,37,0.22), 0 2px 8px rgba(0,0,0,0.4) !important;
    }
    .twin-icon-wrap { width: 48px !important; height: 48px !important; flex-shrink: 0 !important; }
    .twin-icon-wrap i { font-size: 20px !important; }
    .twin-title {
        font-size: 15px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: manual !important;
    }
    .twin-sub   { font-size: 12px !important; }

    /* Perf card */
    .perf-card {
        border-radius: 16px !important;
        padding: 22px !important;
    }

    /* Invite-card (десктоп-only виджет) */
    .dt-invite-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease, border-color 0.22s !important;
    }
    .dt-invite-card:hover {
        transform: translateY(-4px) !important;
        border-color: rgba(91,158,255,0.35) !important;
        box-shadow: 0 8px 28px rgba(91,158,255,0.15), 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    .dt-invite-title {
        font-family: var(--font-display);
        font-size: 14px; font-weight: 900;
        color: var(--text-primary);
    }
    .dt-invite-sub {
        font-size: 12px; color: var(--text-secondary);
        line-height: 1.5;
    }
    .dt-invite-btn {
        width: 100%; padding: 13px;
        background: linear-gradient(135deg, var(--blue), #3a7de0);
        color: #fff;
        font-family: var(--font-display);
        font-size: 12px; font-weight: 900;
        border: none; border-radius: 12px;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(91,158,255,0.3);
        transition: transform 0.15s, box-shadow 0.15s;
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .dt-invite-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(91,158,255,0.45);
    }

    /* Каскадное появление карточек */
    .home-grid > * { animation: cardReveal 0.55s cubic-bezier(.22,1,.36,1) both; }
    .home-grid > *:nth-child(1) { animation-delay: 0.05s; }
    .home-grid > *:nth-child(2) { animation-delay: 0.15s; }
    .home-grid > *:nth-child(3) { animation-delay: 0.25s; }
    .home-grid > *:nth-child(4) { animation-delay: 0.35s; }

    /* ── 6. ПРОЧИЕ ЭКРАНЫ — центрирование ── */
    .time-select-screen,
    .tournaments-content,
    .league-screen-inner,
    .more-list,
    .friend-screen-body,
    .rewards-screen-body,
    .analysis-screen-wrap,
    .db-screen-inner,
    .setup-container,
    .searching-screen {
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        padding-bottom: 48px !important;
        box-sizing: border-box !important;
    }
    .settings-content {
        max-width: 720px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* ── 7. ИГРОВОЙ ЭКРАН ── */
    #screen-game.active {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100vw !important; height: 100dvh !important;
        max-width: none !important;
        z-index: 9999 !important;
    }

    /* ── 8. ОВЕРЛЕИ ── */
    .overlay,
    .modal-overlay,
    .support-modal-overlay,
    .avatar-modal-overlay,
    .tutorial-overlay,
    #web-auth-screen,
    #screen-ai-coach {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
    .overlay             { z-index: 99990 !important; }
    .modal-overlay       { z-index: 999999 !important; }
    .support-modal-overlay,
    .avatar-modal-overlay { z-index: 99990 !important; }
    .tutorial-overlay    { z-index: 99980 !important; }
    #web-auth-screen     { z-index: 99999 !important; }
    #screen-ai-coach     { z-index: 9998  !important; }

    /* Rating toast */
    .rating-toast {
        position: fixed !important;
        top: 24px !important;
        left: calc(260px + (100vw - 260px) / 2) !important;
        transform: translateX(-50%) translateY(-120px) !important;
        right: auto !important;
        width: auto !important;
        max-width: 380px !important;
    }
    .rating-toast.show {
        transform: translateX(-50%) translateY(0) !important;
    }

    /* Tournament overlay */
    #tournament-result-overlay { display: none !important; }
    #tournament-result-overlay.open {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        z-index: 99995 !important;
    }
}

@media (max-width: 767px) {
    .dt-invite-card { 
        display: none !important; 
    }
}

/* =============================================================
   Digital Steppe Arena redesign
   ============================================================= */
:root {
    --arena-bg: #090A0D;
    --arena-panel: #15161C;
    --arena-panel-2: #1C1A19;
    --arena-line: rgba(255, 255, 255, 0.085);
    --arena-line-strong: rgba(230, 179, 37, 0.34);
    --arena-gold: #E8B62E;
    --arena-gold-2: #F7CF64;
    --arena-cyan: #38B6B0;
    --arena-red: #9E2F27;
    --arena-muted: #8D8996;
}

html,
body:not(.game-active) {
    background:
        radial-gradient(circle at 74% -10%, rgba(232,182,46,0.18), transparent 30%),
        radial-gradient(circle at 95% 34%, rgba(56,182,176,0.10), transparent 28%),
        linear-gradient(135deg, #090A0D 0%, #101118 52%, #15100B 100%) !important;
}

body:not(.game-active)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .42;
    background:
        linear-gradient(90deg, rgba(232,182,46,.055) 1px, transparent 1px) 0 0 / 88px 88px,
        linear-gradient(0deg, rgba(232,182,46,.042) 1px, transparent 1px) 0 0 / 88px 88px,
        linear-gradient(135deg, transparent 0 46%, rgba(158,47,39,.28) 46% 49%, transparent 49% 100%) right 10% top 0 / 118px 118px,
        linear-gradient(45deg, transparent 0 46%, rgba(56,182,176,.22) 46% 49%, transparent 49% 100%) right 10% top 59px / 118px 118px;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 22%, rgba(0,0,0,.2) 68%, rgba(0,0,0,.92) 100%);
}

body:not(.game-active)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 18%),
        radial-gradient(ellipse at 50% 115%, rgba(232,182,46,.10), transparent 48%);
}

body:not(.game-active) .app-container,
body:not(.game-active) .screen,
body:not(.game-active) .bottom-nav,
body:not(.game-active) .modal-overlay,
body:not(.game-active) .support-modal-overlay {
    position: relative;
    z-index: 1;
}

body:not(.game-active) .screen,
body:not(.game-active) .app-container {
    background: transparent !important;
}

body:not(.game-active) .home-header,
body:not(.game-active) .sub-screen-header,
body:not(.game-active) .lobby-header {
    background: rgba(9,10,13,.86) !important;
    border-bottom: 1px solid var(--arena-line) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body:not(.game-active) .logo-text,
body:not(.game-active) .sub-screen-title {
    color: #FFF4D5 !important;
    text-shadow: none !important;
}

body:not(.game-active) .logo-text::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--arena-gold);
    box-shadow: 0 0 16px rgba(232,182,46,.65);
}

body:not(.game-active) .logo-text::after,
body:not(.game-active) .sub-screen-title::after {
    content: "";
    width: 44px;
    height: 9px;
    margin-left: 12px;
    display: inline-block;
    background:
        linear-gradient(135deg, transparent 0 35%, var(--arena-gold) 35% 48%, transparent 48% 100%),
        linear-gradient(45deg, transparent 0 35%, rgba(56,182,176,.8) 35% 48%, transparent 48% 100%);
    opacity: .78;
}

body:not(.game-active) .home-grid,
body:not(.game-active) .time-select-screen,
body:not(.game-active) .tournaments-content,
body:not(.game-active) .league-screen-inner,
body:not(.game-active) .more-list,
body:not(.game-active) .friend-screen-body,
body:not(.game-active) .rewards-screen-body,
body:not(.game-active) .analysis-screen-wrap,
body:not(.game-active) .db-screen-inner,
body:not(.game-active) .setup-container,
body:not(.game-active) .searching-screen,
body:not(.game-active) .settings-content,
body:not(.game-active) .stats-content,
body:not(.game-active) .ai-chat-body {
    background: transparent !important;
}

body:not(.game-active) .home-grid {
    gap: 20px !important;
    padding-top: clamp(18px, 3.4vw, 36px) !important;
}

body:not(.game-active) .mega-card,
body:not(.game-active) .twin-card,
body:not(.game-active) .perf-card,
body:not(.game-active) .premium-invite-banner,
body:not(.game-active) .dt-invite-card,
body:not(.game-active) .time-option,
body:not(.game-active) .side-card,
body:not(.game-active) .settings-card,
body:not(.game-active) .list-item,
body:not(.game-active) .analysis-card,
body:not(.game-active) .analysis-result-card,
body:not(.game-active) .db-game-card,
body:not(.game-active) .reward-duo-card,
body:not(.game-active) .streak-card,
body:not(.game-active) .lobby-section,
body:not(.game-active) .lobby-item,
body:not(.game-active) .tournament-card,
body:not(.game-active) #btn-show-create-tourn,
body:not(.game-active) #btn-show-join-code,
body:not(.game-active) #join-code-wrap,
body:not(.game-active) #create-tournament-wrap,
body:not(.game-active) .friends-tab,
body:not(.game-active) .friend-card,
body:not(.game-active) .dialog-card,
body:not(.game-active) .auth-card,
body:not(.game-active) .modal-sheet,
body:not(.game-active) .support-modal,
body:not(.game-active) .tutorial-bubble,
body:not(.game-active) .ai-bubble {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
        var(--arena-panel) !important;
    border: 1px solid var(--arena-line) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:not(.game-active) .mega-card {
    min-height: 190px !important;
    background:
        linear-gradient(112deg, transparent 0 20%, rgba(247,207,100,.045) 38%, rgba(255,244,213,.14) 50%, rgba(56,182,176,.05) 62%, transparent 80%),
        radial-gradient(circle at 85% 22%, rgba(247,207,100,.36), transparent 20%),
        linear-gradient(135deg, rgba(232,182,46,.24), rgba(17,18,24,.92) 46%, rgba(56,182,176,.16)),
        #15130E !important;
    background-size: 220% 100%, auto, auto, auto !important;
    background-position: -85% 0, 0 0, 0 0, 0 0 !important;
    border-color: var(--arena-line-strong) !important;
    box-shadow: 0 26px 64px rgba(0,0,0,.34), 0 0 0 1px rgba(232,182,46,.07) !important;
    animation: arenaSolarSweep 24s ease-in-out infinite !important;
}

body:not(.game-active) .mega-card::before {
    content: "BATYR ARENA";
    position: absolute;
    right: 24px;
    bottom: 18px;
    color: rgba(255,244,213,.10);
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: 0;
    pointer-events: none;
}

body:not(.game-active) .mega-icon-wrap::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid rgba(247,207,100,.20);
    animation: arenaPulse 2.8s ease-in-out infinite;
}

body:not(.game-active) .mega-card::after,
body:not(.game-active) .twin-card::after,
body:not(.game-active) .perf-card::after,
body:not(.game-active) .premium-invite-banner::after,
body:not(.game-active) .tournament-card::after,
body:not(.game-active) .reward-duo-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--arena-gold), var(--arena-cyan), transparent);
    opacity: .78;
    pointer-events: none;
}

body:not(.game-active) .mega-card,
body:not(.game-active) .twin-card,
body:not(.game-active) .perf-card,
body:not(.game-active) .premium-invite-banner,
body:not(.game-active) .tournament-card,
body:not(.game-active) .reward-duo-card {
    position: relative;
    overflow: hidden;
}

body:not(.game-active) .mega-title {
    font-size: clamp(30px, 4vw, 44px) !important;
    color: #FFF1C5 !important;
    letter-spacing: 0 !important;
}

body:not(.game-active) .mega-sub {
    color: rgba(255,244,213,.76) !important;
    max-width: 280px;
}

body:not(.game-active) .mega-live-badge {
    background: rgba(56,182,176,.18) !important;
    border: 1px solid rgba(56,182,176,.35) !important;
    color: #7AF0E6 !important;
}

body:not(.game-active) .mega-icon-wrap {
    background:
        radial-gradient(circle at 35% 25%, #fff1b4, transparent 32%),
        linear-gradient(135deg, var(--arena-gold-2), var(--arena-gold)) !important;
    color: #1B1203 !important;
    position: relative;
}

body:not(.game-active) .mega-card:hover,
body:not(.game-active) .twin-card:hover,
body:not(.game-active) .growth-pill:hover,
body:not(.game-active) .featured-event:hover,
body:not(.game-active) .season-goal:hover,
body:not(.game-active) .list-item:hover {
    transform: translateY(-2px) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body:not(.game-active) .twin-card:active,
body:not(.game-active) .growth-pill:active,
body:not(.game-active) .featured-event:active,
body:not(.game-active) .season-goal:active,
body:not(.game-active) .list-item:active {
    transform: translateY(0) scale(.99) !important;
}

body:not(.game-active) .twin-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 15px !important;
    row-gap: 3px !important;
    min-height: 96px !important;
}

body:not(.game-active) .twin-icon-wrap {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}

body:not(.game-active) .twin-title,
body:not(.game-active) .twin-sub {
    grid-column: 2 !important;
    min-width: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body:not(.game-active) .twin-title {
    grid-row: 1 !important;
    color: #FFF4D5 !important;
}

body:not(.game-active) .twin-sub {
    grid-row: 2 !important;
    color: var(--arena-muted) !important;
}

body:not(.game-active) .perf-card {
    background:
        linear-gradient(180deg, rgba(56,182,176,.08), rgba(255,255,255,.015)),
        var(--arena-panel) !important;
}

body:not(.game-active) .premium-invite-banner {
    background:
        linear-gradient(135deg, rgba(56,182,176,.22), rgba(232,182,46,.13)),
        var(--arena-panel-2) !important;
    border-color: rgba(56,182,176,.28) !important;
}

body:not(.game-active) .time-option:hover,
body:not(.game-active) .time-option.selected,
body:not(.game-active) .side-card.selected,
body:not(.game-active) .list-item:hover,
body:not(.game-active) .friends-tab.active {
    background:
        linear-gradient(180deg, rgba(232,182,46,.13), rgba(255,255,255,.018)),
        #191811 !important;
    border-color: var(--arena-line-strong) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.28), 0 0 0 1px rgba(232,182,46,.08) !important;
}

body:not(.game-active) .big-btn,
body:not(.game-active) .start-game-btn,
body:not(.game-active) .search-with-time-btn,
body:not(.game-active) .analyze-btn-new,
body:not(.game-active) .btn-launch-tourn,
body:not(.game-active) .avatar-close-btn,
body:not(.game-active) .tutorial-next-btn,
body:not(.game-active) .chat-send-btn,
body:not(.game-active) .ai-chat-send {
    background: linear-gradient(135deg, var(--arena-gold-2), var(--arena-gold)) !important;
    color: #160F04 !important;
    box-shadow: 0 16px 36px rgba(232,182,46,.24) !important;
}

body:not(.game-active) .auth-input,
body:not(.game-active) .premium-input,
body:not(.game-active) .menu-select,
body:not(.game-active) .search-input,
body:not(.game-active) .chat-input,
body:not(.game-active) #ai-chat-input,
body:not(.game-active) textarea {
    background: rgba(5,6,10,.72) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: var(--text-primary) !important;
}

body:not(.game-active) .nav-center-circle {
    background:
        radial-gradient(circle at 35% 25%, #fff1b4, transparent 30%),
        linear-gradient(135deg, var(--arena-gold-2), var(--arena-gold)) !important;
    box-shadow: 0 16px 34px rgba(232,182,46,.36) !important;
}

body:not(.game-active) .nav-item.active,
body:not(.game-active) .nav-item-center.active,
body:not(.game-active) .nav-center-label {
    color: var(--arena-gold) !important;
}

.growth-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    grid-column: 1 / -1;
}

.growth-pill {
    background: rgba(21,22,28,.92);
    border: 1px solid var(--arena-line);
    border-radius: 14px;
    padding: 14px 16px;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.20);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.growth-pill i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232,182,46,.12);
    color: var(--arena-gold);
    flex-shrink: 0;
}

.growth-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 900;
    color: #FFF4D5;
    margin-bottom: 4px;
}

.growth-sub {
    font-size: 11px;
    line-height: 1.35;
    color: var(--arena-muted);
    font-weight: 700;
}

body:not(.game-active) .puzzles-content,
body:not(.game-active) .learn-content,
body:not(.game-active) .league-screen-inner,
body:not(.game-active) .tournaments-content,
body:not(.game-active) .rewards-screen-body,
body:not(.game-active) .db-screen-inner,
body:not(.game-active) #screen-profile > div[style*="padding:20px"],
body:not(.game-active) #screen-stats > div[style*="padding:20px"] {
    width: min(100%, 860px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:not(.game-active) .puzzle-card-hero,
body:not(.game-active) .learn-content > div[style*="linear-gradient"],
body:not(.game-active) .league-season-banner,
body:not(.game-active) .rewards-streak-banner {
    background:
        radial-gradient(circle at 88% 12%, rgba(247,207,100,.30), transparent 22%),
        linear-gradient(135deg, rgba(232,182,46,.23), rgba(21,22,28,.96) 45%, rgba(56,182,176,.15)),
        #16171E !important;
    color: #FFF4D5 !important;
    border: 1px solid var(--arena-line-strong) !important;
    box-shadow: 0 22px 52px rgba(0,0,0,.30), 0 0 0 1px rgba(232,182,46,.08) !important;
}

body:not(.game-active) .puzzle-card-hero::after,
body:not(.game-active) .learn-content > div[style*="linear-gradient"]::after,
body:not(.game-active) .league-season-banner::after,
body:not(.game-active) .rewards-streak-banner::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--arena-gold), var(--arena-cyan), transparent);
    pointer-events: none;
}

body:not(.game-active) .puzzle-card-hero,
body:not(.game-active) .learn-content > div[style*="linear-gradient"],
body:not(.game-active) .league-season-banner,
body:not(.game-active) .rewards-streak-banner {
    position: relative !important;
    overflow: hidden !important;
}

body:not(.game-active) .puzzle-card-hero > div,
body:not(.game-active) .puzzle-card-hero button,
body:not(.game-active) .learn-content > div[style*="linear-gradient"] > div,
body:not(.game-active) .learn-content > div[style*="linear-gradient"] i,
body:not(.game-active) .league-season-banner > *,
body:not(.game-active) .rewards-streak-banner > * {
    position: relative;
    z-index: 1;
}

body:not(.game-active) .learn-content > div[style*="linear-gradient"] [style*="color:#1a100a"],
body:not(.game-active) .learn-content > div[style*="linear-gradient"] [style*="color:rgba(26,16,10,0.8)"] {
    color: #FFF4D5 !important;
}

body:not(.game-active) #screen-learn > .big-btn {
    width: min(100% - 32px, 860px) !important;
    margin: 16px auto 0 !important;
}

body:not(.game-active) .puzzle-card-hero button,
body:not(.game-active) .learn-content button,
body:not(.game-active) #screen-learn > .big-btn,
body:not(.game-active) #screen-stats button {
    background: rgba(232,182,46,.14) !important;
    color: var(--arena-gold-2) !important;
    border: 1px solid rgba(232,182,46,.30) !important;
    box-shadow: none !important;
}

body:not(.game-active) #puzzles-grid > *,
body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"],
body:not(.game-active) #screen-stats div[style*="background:var(--bg-card)"],
body:not(.game-active) .db-search-bar,
body:not(.game-active) .league-loading,
body:not(.game-active) .lobby-loading-overlay,
body:not(.game-active) .lobby-tabs,
body:not(.game-active) .lobby-tab-content,
body:not(.game-active) .tournament-result-sheet {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        #15161C !important;
    border: 1px solid var(--arena-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.24) !important;
}

body:not(.game-active) .empty-state,
body:not(.game-active) #tournaments-list:empty::before,
body:not(.game-active) #games-db-list:empty::before,
body:not(.game-active) #leaderboard-container:empty::before {
    background:
        radial-gradient(circle at 50% 0%, rgba(232,182,46,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        #15161C !important;
    border: 1px solid var(--arena-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.22) !important;
}

body:not(.game-active) .empty-state {
    min-height: 240px !important;
    padding: 28px !important;
}

body:not(.game-active) .empty-state i {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232,182,46,.10);
    color: var(--arena-gold);
    opacity: 1 !important;
    font-size: 28px !important;
}

body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"] {
    padding: 18px !important;
}

body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"] strong,
body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"] em,
body:not(.game-active) .league-season-title,
body:not(.game-active) .rsb-val,
body:not(.game-active) .result-best-pit,
body:not(.game-active) .time-option.selected .time-option-main {
    color: var(--arena-gold-2) !important;
}

body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"] div[style*="font-size:13px"],
body:not(.game-active) .league-season-sub,
body:not(.game-active) .rsb-label,
body:not(.game-active) .result-detail-text {
    color: #AAA5B3 !important;
    opacity: 1 !important;
}

body:not(.game-active) .settings-section-label {
    color: var(--arena-gold) !important;
}

body:not(.game-active) .db-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

body:not(.game-active) .db-search-input {
    flex: 1;
    min-width: 0;
}

body:not(.game-active) .lobby-tabs {
    margin: 14px 16px 0;
    padding: 6px;
}

body:not(.game-active) .lobby-tab {
    background: transparent !important;
    color: var(--arena-muted) !important;
}

body:not(.game-active) .lobby-tab.active {
    background: rgba(232,182,46,.12) !important;
    color: var(--arena-gold-2) !important;
}

.season-goals,
.featured-events {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.season-goal,
.featured-event {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        #15161C;
    border: 1px solid var(--arena-line);
    border-radius: 16px;
    padding: 16px;
    min-height: 112px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(0,0,0,.22);
}

.season-goal::after,
.featured-event::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--arena-gold), var(--arena-cyan), transparent);
}

.season-goal-icon,
.featured-event-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232,182,46,.12);
    color: var(--arena-gold);
    margin-bottom: 12px;
}

.season-goal-title,
.featured-event-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 900;
    color: #FFF4D5;
    margin-bottom: 6px;
}

.season-goal-sub,
.featured-event-sub {
    font-size: 11px;
    line-height: 1.4;
    color: #AAA5B3;
    font-weight: 700;
}

.featured-event-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--arena-cyan);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.steppe-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--arena-cyan);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.steppe-mark::before,
.steppe-mark::after {
    content: "";
    width: 9px;
    height: 9px;
    background:
        linear-gradient(135deg, transparent 0 35%, currentColor 35% 55%, transparent 55% 100%);
}

body:not(.game-active) #screen-profile > div[style*="padding:20px"] > div:first-child {
    background:
        radial-gradient(circle at 50% 0%, rgba(232,182,46,.18), transparent 34%),
        #15161C !important;
    border: 1px solid var(--arena-line) !important;
    border-radius: 22px !important;
    padding: 24px !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.26) !important;
}

body:not(.game-active) #screen-profile button[onclick*="reload"] {
    background: rgba(255,92,92,.08) !important;
    border-color: rgba(255,92,92,.26) !important;
}

#end-screen {
    background:
        radial-gradient(circle at 50% 0%, rgba(232,182,46,.22), transparent 34%),
        rgba(0,0,0,.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#end-screen::before {
    content: "TOGYZ PRO";
    color: rgba(255,244,213,.08);
    font-family: var(--font-display);
    font-size: clamp(42px, 10vw, 116px);
    font-weight: 900;
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

#end-screen > * {
    position: relative;
    z-index: 1;
}

#end-screen h1 {
    font-family: var(--font-display) !important;
    color: #FFF4D5 !important;
    font-size: clamp(34px, 6vw, 70px) !important;
    text-align: center;
}

.post-game-growth {
    width: min(100%, 560px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.post-game-action {
    border: 1px solid var(--arena-line);
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
        #15161C;
    color: #FFF4D5;
    border-radius: 16px;
    padding: 14px 10px;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 900;
}

.post-game-action i {
    color: var(--arena-gold);
    font-size: 20px;
}

@media (max-width: 767px) {
    .post-game-growth {
        grid-template-columns: 1fr;
    }

    .post-game-action {
        min-height: 58px;
        flex-direction: row;
    }
}

body:not(.game-active) .home-grid > * {
    animation-name: arenaReveal !important;
    animation-duration: .32s !important;
}

@keyframes arenaReveal {
    from { transform: translateY(14px); }
    to { transform: translateY(0); }
}

@keyframes arenaSolarSweep {
    0% { background-position: -85% 0, 0 0, 0 0, 0 0; }
    50% { background-position: 85% 0, 0 0, 0 0, 0 0; }
    100% { background-position: -85% 0, 0 0, 0 0, 0 0; }
}

@keyframes arenaPulse {
    0%, 100% { opacity: .25; transform: scale(.92); }
    50% { opacity: .62; transform: scale(1.08); }
}

@media (min-width: 768px) {
    body:not(.game-active) .app-container {
        background: transparent !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.game-active) .mega-card,
    body:not(.game-active) .mega-icon-wrap::after,
    body:not(.game-active) .home-grid > * {
        animation: none !important;
    }
}

@media (max-width: 767px) {
    body:not(.game-active)::before {
        opacity: .18;
        background-size: 70px 70px, 70px 70px, 96px 96px, 96px 96px;
    }

    body:not(.game-active) .home-header,
    body:not(.game-active) .sub-screen-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body:not(.game-active) .home-grid,
    body:not(.game-active) .time-select-screen,
    body:not(.game-active) .tournaments-content,
    body:not(.game-active) .league-screen-inner,
    body:not(.game-active) .more-list,
    body:not(.game-active) .friend-screen-body,
    body:not(.game-active) .rewards-screen-body,
    body:not(.game-active) .analysis-screen-wrap,
    body:not(.game-active) .db-screen-inner,
    body:not(.game-active) .setup-container,
    body:not(.game-active) .settings-content,
    body:not(.game-active) .stats-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .growth-strip {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body:not(.game-active) .home-grid {
        gap: 14px !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:not(.game-active) .mega-card,
    body:not(.game-active) .twin-card,
    body:not(.game-active) .perf-card,
    body:not(.game-active) .premium-invite-banner,
    body:not(.game-active) .growth-pill {
        background: #171820 !important;
        border-color: rgba(255,255,255,.10) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
    }

    body:not(.game-active) .mega-card {
        background:
            radial-gradient(circle at 82% 28%, rgba(232,182,46,.24), transparent 24%),
            linear-gradient(135deg, rgba(232,182,46,.17), #171820 46%, rgba(56,182,176,.11)),
            #171820 !important;
        border-color: rgba(232,182,46,.28) !important;
    }

    body:not(.game-active) .mega-title,
    body:not(.game-active) .twin-title,
    body:not(.game-active) .pib-title,
    body:not(.game-active) .growth-title {
        color: #FFF5D8 !important;
    }

    body:not(.game-active) .mega-sub,
    body:not(.game-active) .twin-sub,
    body:not(.game-active) .pib-sub,
    body:not(.game-active) .growth-sub {
        color: #AAA5B3 !important;
    }

    body:not(.game-active) .twin-cards-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    body:not(.game-active) .twin-card {
        width: 100% !important;
        min-height: 82px !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        padding: 15px !important;
    }

    body:not(.game-active) .twin-title {
        font-size: 15px !important;
        white-space: normal !important;
    }

    body:not(.game-active) .twin-sub {
        font-size: 12px !important;
    }

    body:not(.game-active) .premium-invite-banner {
        min-height: 76px !important;
        padding: 14px !important;
    }

    .season-goals,
    .featured-events {
        grid-template-columns: 1fr;
    }

    body:not(.game-active) .pib-title {
        font-size: 14px !important;
    }

    body:not(.game-active) .pib-sub {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .growth-pill {
        min-height: 62px;
        padding: 12px;
    }
}

/* =============================================================
   Liquid Glass Minimal Mode
   ============================================================= */
:root {
    --liquid-bg-0: #07080B;
    --liquid-bg-1: #0D1016;
    --liquid-glass: rgba(255, 255, 255, 0.070);
    --liquid-glass-strong: rgba(255, 255, 255, 0.105);
    --liquid-line: rgba(255, 255, 255, 0.135);
    --liquid-line-soft: rgba(255, 255, 255, 0.075);
    --liquid-text: #F7F3EA;
    --liquid-muted: rgba(247, 243, 234, 0.58);
    --liquid-gold: #F0C85A;
    --liquid-cyan: #72E4DD;
    --liquid-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
}

html,
body:not(.game-active) {
    background:
        radial-gradient(circle at 50% -18%, rgba(240,200,90,.18), transparent 34%),
        radial-gradient(circle at 105% 18%, rgba(114,228,221,.10), transparent 26%),
        linear-gradient(140deg, var(--liquid-bg-0), var(--liquid-bg-1) 58%, #090806) !important;
}

body:not(.game-active)::before {
    opacity: .18 !important;
    background:
        linear-gradient(135deg, transparent 0 47%, rgba(240,200,90,.22) 47% 49%, transparent 49% 100%) right 8% top 0 / 132px 132px,
        linear-gradient(45deg, transparent 0 47%, rgba(114,228,221,.18) 47% 49%, transparent 49% 100%) right 8% top 66px / 132px 132px !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.74) 100%) !important;
}

body:not(.game-active)::after {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(240,200,90,.08), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 22%) !important;
}

body:not(.game-active) .home-header,
body:not(.game-active) .sub-screen-header,
body:not(.game-active) .lobby-header {
    background: rgba(9, 11, 15, .48) !important;
    border-bottom: 1px solid var(--liquid-line-soft) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:not(.game-active) .logo-text,
body:not(.game-active) .sub-screen-title,
body:not(.game-active) .mega-title,
body:not(.game-active) .twin-title,
body:not(.game-active) .growth-title,
body:not(.game-active) .featured-event-title,
body:not(.game-active) .season-goal-title {
    color: var(--liquid-text) !important;
}

body:not(.game-active) .logo-text::after,
body:not(.game-active) .sub-screen-title::after,
.steppe-mark::before,
.steppe-mark::after {
    opacity: .55 !important;
}

body:not(.game-active) .home-grid {
    gap: 16px !important;
}

body:not(.game-active) .mega-card,
body:not(.game-active) .twin-card,
body:not(.game-active) .perf-card,
body:not(.game-active) .premium-invite-banner,
body:not(.game-active) .growth-pill,
body:not(.game-active) .dt-invite-card,
body:not(.game-active) .time-option,
body:not(.game-active) .side-card,
body:not(.game-active) .settings-card,
body:not(.game-active) .list-item,
body:not(.game-active) .analysis-card,
body:not(.game-active) .analysis-result-card,
body:not(.game-active) .db-game-card,
body:not(.game-active) .reward-duo-card,
body:not(.game-active) .streak-card,
body:not(.game-active) .lobby-section,
body:not(.game-active) .lobby-item,
body:not(.game-active) .tournament-card,
body:not(.game-active) #btn-show-create-tourn,
body:not(.game-active) #btn-show-join-code,
body:not(.game-active) #join-code-wrap,
body:not(.game-active) #create-tournament-wrap,
body:not(.game-active) .friends-tab,
body:not(.game-active) .friend-card,
body:not(.game-active) .dialog-card,
body:not(.game-active) .auth-card,
body:not(.game-active) .modal-sheet,
body:not(.game-active) .support-modal,
body:not(.game-active) .tutorial-bubble,
body:not(.game-active) .ai-bubble,
body:not(.game-active) .puzzle-card-hero,
body:not(.game-active) .learn-content > div[style*="linear-gradient"],
body:not(.game-active) .league-season-banner,
body:not(.game-active) .rewards-streak-banner,
body:not(.game-active) #puzzles-grid > *,
body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"],
body:not(.game-active) #screen-stats div[style*="background:var(--bg-card)"],
body:not(.game-active) .db-search-bar,
body:not(.game-active) .league-loading,
body:not(.game-active) .lobby-loading-overlay,
body:not(.game-active) .lobby-tabs,
body:not(.game-active) .lobby-tab-content,
body:not(.game-active) .tournament-result-sheet,
.season-goal,
.featured-event,
.post-game-action {
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
        var(--liquid-glass) !important;
    border: 1px solid var(--liquid-line) !important;
    box-shadow: var(--liquid-shadow), inset 0 1px 0 rgba(255,255,255,.16) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:not(.game-active) .mega-card,
body:not(.game-active) .perf-card,
body:not(.game-active) .premium-invite-banner,
body:not(.game-active) .modal-sheet,
body:not(.game-active) .support-modal,
body:not(.game-active) .tutorial-bubble {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:not(.game-active) .mega-card {
    min-height: 176px !important;
    background:
        radial-gradient(circle at 86% 28%, rgba(240,200,90,.30), transparent 18%),
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
        rgba(255,255,255,.07) !important;
    background-size: auto, auto, auto !important;
    background-position: 0 0, 0 0, 0 0 !important;
    animation: none !important;
}

body:not(.game-active) .mega-card::before {
    color: rgba(255,255,255,.055) !important;
}

body:not(.game-active) .mega-card::after,
body:not(.game-active) .twin-card::after,
body:not(.game-active) .perf-card::after,
body:not(.game-active) .premium-invite-banner::after,
body:not(.game-active) .tournament-card::after,
body:not(.game-active) .reward-duo-card::after,
.season-goal::after,
.featured-event::after {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(240,200,90,.72), rgba(114,228,221,.58), transparent) !important;
}

body:not(.game-active) .mega-live-badge,
body:not(.game-active) .featured-event-badge,
.steppe-mark {
    color: var(--liquid-cyan) !important;
}

body:not(.game-active) .mega-sub,
body:not(.game-active) .twin-sub,
body:not(.game-active) .growth-sub,
body:not(.game-active) .featured-event-sub,
body:not(.game-active) .season-goal-sub,
body:not(.game-active) .pib-sub,
body:not(.game-active) .league-season-sub,
body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"] div[style*="font-size:13px"] {
    color: var(--liquid-muted) !important;
}

body:not(.game-active) .big-btn,
body:not(.game-active) .start-game-btn,
body:not(.game-active) .search-with-time-btn,
body:not(.game-active) .analyze-btn-new,
body:not(.game-active) .btn-launch-tourn,
body:not(.game-active) .avatar-close-btn,
body:not(.game-active) .tutorial-next-btn,
body:not(.game-active) .chat-send-btn,
body:not(.game-active) .ai-chat-send {
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(240,200,90,.88)) !important;
    color: #14100A !important;
    box-shadow: 0 16px 42px rgba(240,200,90,.18), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

body:not(.game-active) .nav-center-circle,
body:not(.game-active) .mega-icon-wrap {
    background:
        radial-gradient(circle at 34% 24%, #fff8d8, transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(240,200,90,.95)) !important;
}

body:not(.game-active) .time-option:hover,
body:not(.game-active) .time-option.selected,
body:not(.game-active) .side-card.selected,
body:not(.game-active) .list-item:hover,
body:not(.game-active) .friends-tab.active {
    background:
        linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.055)),
        var(--liquid-glass-strong) !important;
    border-color: rgba(240,200,90,.34) !important;
}

body:not(.game-active) .mega-card > div:first-child {
    position: relative;
    z-index: 1;
}

body:not(.game-active) .mega-card > div:first-child::after {
    content: "";
    position: absolute;
    inset: -42% -18% auto 54%;
    height: 170%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.16), rgba(240,200,90,.08) 28%, rgba(114,228,221,.055) 46%, transparent 68%);
    filter: blur(2px);
    opacity: .58;
    pointer-events: none;
    animation: none;
}

@keyframes liquidGlowDrift {
    0%, 100% { transform: translate3d(-8px, -4px, 0) scale(.98); opacity: .46; }
    50% { transform: translate3d(18px, 8px, 0) scale(1.04); opacity: .68; }
}

@media (max-width: 767px) {
    body:not(.game-active)::before {
        opacity: .11 !important;
    }

    body:not(.game-active) .mega-card,
    body:not(.game-active) .twin-card,
    body:not(.game-active) .perf-card,
    body:not(.game-active) .premium-invite-banner,
    body:not(.game-active) .growth-pill {
        background:
            linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
            rgba(18, 20, 27, .62) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body:not(.game-active) .mega-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body:not(.game-active) .mega-card {
        min-height: 188px !important;
    }
}

/* =============================================================
   Liquid glass buttons + readable learning/AI screens
   ============================================================= */
body:not(.game-active) .big-btn,
body:not(.game-active) .start-game-btn,
body:not(.game-active) .search-with-time-btn,
body:not(.game-active) .analyze-btn-new,
body:not(.game-active) .btn-launch-tourn,
body:not(.game-active) .avatar-close-btn,
body:not(.game-active) .tutorial-next-btn,
body:not(.game-active) .chat-send-btn,
body:not(.game-active) .ai-chat-send,
body:not(.game-active) .post-game-action,
body:not(.game-active) .puzzle-card-hero button,
body:not(.game-active) .learn-content button,
body:not(.game-active) #screen-learn > .big-btn {
    position: relative !important;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.075)),
        rgba(255,255,255,.075) !important;
    color: #FFF8E7 !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    box-shadow:
        0 14px 36px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 0 -1px 0 rgba(255,255,255,.075) !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.30) !important;
}

body:not(.game-active) .big-btn::before,
body:not(.game-active) .start-game-btn::before,
body:not(.game-active) .search-with-time-btn::before,
body:not(.game-active) .analyze-btn-new::before,
body:not(.game-active) .btn-launch-tourn::before,
body:not(.game-active) .post-game-action::before,
body:not(.game-active) .puzzle-card-hero button::before,
body:not(.game-active) .learn-content button::before,
body:not(.game-active) #screen-learn > .big-btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.38), transparent 26%),
        linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.16) 50%, transparent 62%);
    opacity: .72;
    pointer-events: none;
}

body:not(.game-active) .big-btn:hover,
body:not(.game-active) .start-game-btn:hover,
body:not(.game-active) .search-with-time-btn:hover,
body:not(.game-active) .analyze-btn-new:hover,
body:not(.game-active) .btn-launch-tourn:hover,
body:not(.game-active) .post-game-action:hover,
body:not(.game-active) .puzzle-card-hero button:hover,
body:not(.game-active) .learn-content button:hover {
    border-color: rgba(240,200,90,.42) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.10)),
        rgba(240,200,90,.10) !important;
    transform: translateY(-1px) !important;
}

body:not(.game-active) .big-btn i,
body:not(.game-active) .start-game-btn i,
body:not(.game-active) .search-with-time-btn i,
body:not(.game-active) .analyze-btn-new i,
body:not(.game-active) .btn-launch-tourn i,
body:not(.game-active) .post-game-action i,
body:not(.game-active) .ai-chat-send i {
    color: var(--liquid-gold) !important;
    position: relative;
    z-index: 1;
}

body:not(.game-active) .big-btn-title,
body:not(.game-active) .big-btn-desc,
body:not(.game-active) .big-btn span,
body:not(.game-active) .start-game-btn,
body:not(.game-active) .search-with-time-btn,
body:not(.game-active) .analyze-btn-new,
body:not(.game-active) .btn-launch-tourn,
body:not(.game-active) .post-game-action span {
    position: relative;
    z-index: 1;
}

body:not(.game-active) #screen-learn,
body:not(.game-active) #screen-ai-coach {
    background:
        radial-gradient(circle at 52% -14%, rgba(240,200,90,.20), transparent 32%),
        radial-gradient(circle at 100% 25%, rgba(114,228,221,.10), transparent 28%),
        linear-gradient(145deg, #07080B 0%, #10131A 56%, #090806 100%) !important;
}

body:not(.game-active) #screen-learn .home-header,
body:not(.game-active) #screen-ai-coach .sub-screen-header {
    background: rgba(7,8,11,.86) !important;
}

body:not(.game-active) #screen-learn > .big-btn {
    margin-top: 18px !important;
    min-height: 76px !important;
    border-color: rgba(240,200,90,.34) !important;
}

body:not(.game-active) #screen-learn > .big-btn .big-btn-title {
    font-size: 16px !important;
    color: #FFF8E7 !important;
}

body:not(.game-active) .learn-content {
    width: min(100%, 980px) !important;
    padding: 20px 24px 120px !important;
}

body:not(.game-active) .learn-content > div[style*="linear-gradient"] {
    min-height: 190px !important;
    background:
        radial-gradient(circle at 80% 18%, rgba(240,200,90,.30), transparent 25%),
        linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.045)),
        rgba(255,255,255,.07) !important;
}

body:not(.game-active) .learn-content > div[style*="linear-gradient"] [style*="font-size:20px"] {
    font-size: 26px !important;
    line-height: 1.15 !important;
}

body:not(.game-active) .learn-content > div[style*="linear-gradient"] [style*="font-size:13px"] {
    max-width: 620px !important;
    color: rgba(255,248,231,.76) !important;
}

body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"] {
    background:
        linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.04)),
        rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.14) !important;
}

body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"] > div:first-child > div:last-child {
    color: #FFF8E7 !important;
    font-size: 16px !important;
}

body:not(.game-active) .learn-content > div[style*="background:var(--bg-card)"] div[style*="font-size:13px"] {
    color: rgba(255,248,231,.70) !important;
    line-height: 1.7 !important;
}

#screen-ai-coach {
    color: #FFF8E7 !important;
}

#screen-ai-coach.active {
    display: flex !important;
    flex-direction: column !important;
    background:
        radial-gradient(circle at 52% -14%, rgba(240,200,90,.20), transparent 32%),
        radial-gradient(circle at 100% 25%, rgba(114,228,221,.10), transparent 28%),
        linear-gradient(145deg, #07080B 0%, #10131A 56%, #090806 100%) !important;
}

#screen-ai-coach .ai-chat-body {
    width: min(100%, 920px) !important;
    margin: 0 auto !important;
    padding: 24px 24px 120px !important;
    background: transparent !important;
}

#screen-ai-coach .ai-msg {
    max-width: 780px !important;
}

#screen-ai-coach .ai-bubble {
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.055)),
        rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,248,231,.86) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.24) !important;
}

#screen-ai-coach .ai-msg.user .ai-bubble {
    background:
        linear-gradient(180deg, rgba(240,200,90,.22), rgba(255,255,255,.07)),
        rgba(240,200,90,.11) !important;
    color: #FFF8E7 !important;
    border-color: rgba(240,200,90,.30) !important;
}

#screen-ai-coach .ai-chat-input-wrap {
    width: min(100%, 920px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    bottom: 18px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)),
        rgba(8,10,14,.86) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

#screen-ai-coach #ai-chat-input {
    background: transparent !important;
    border: none !important;
    color: #FFF8E7 !important;
}

#screen-ai-coach #ai-chat-input::placeholder {
    color: rgba(255,248,231,.42) !important;
}

@media (min-width: 768px) {
    body:not(.game-active) #screen-learn .learn-content {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
    }

    body:not(.game-active) #screen-learn .learn-content > div:first-child,
    body:not(.game-active) #screen-learn .learn-content > div:nth-child(2) {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 767px) {
    body:not(.game-active) .learn-content {
        padding: 16px 16px 120px !important;
    }

    #screen-ai-coach .ai-chat-body {
        padding: 18px 14px 112px !important;
    }

    #screen-ai-coach .ai-chat-input-wrap {
        width: calc(100% - 24px) !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (min-width: 768px) {
    #screen-ai-coach.active {
        position: fixed !important;
        top: 0 !important;
        left: 260px !important;
        right: 0 !important;
        bottom: 0 !important;
        width: calc(100vw - 260px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 1200 !important;
        padding-bottom: 0 !important;
    }

    #screen-ai-coach .sub-screen-header {
        height: 74px !important;
        min-height: 74px !important;
        padding: 18px 24px !important;
        justify-content: space-between !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
            rgba(8,10,14,.88) !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
    }

    #screen-ai-coach .sub-screen-header .logo-text {
        display: flex !important;
        font-size: 18px !important;
    }

    #screen-ai-coach .sub-screen-back {
        background:
            linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
            rgba(255,255,255,.07) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        color: #FFF8E7 !important;
    }

    #screen-ai-coach .ai-chat-body {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        width: min(100%, 960px) !important;
        padding: 28px 28px 128px !important;
    }

    #screen-ai-coach .ai-msg {
        max-width: 760px !important;
        margin-bottom: 14px !important;
    }

    #screen-ai-coach .ai-bubble {
        border-radius: 18px !important;
        padding: 16px 18px !important;
        line-height: 1.55 !important;
    }

    #screen-ai-coach .ai-chat-input-wrap {
        position: fixed !important;
        left: calc(260px + (100vw - 260px) / 2) !important;
        right: auto !important;
        bottom: 24px !important;
        transform: translateX(-50%) !important;
        width: min(920px, calc(100vw - 320px)) !important;
        padding: 10px 10px 10px 18px !important;
    }
}

/* AI coach compact liquid-glass workspace */
body:not(.game-active) #screen-ai-coach.active {
    overflow: hidden !important;
}

body:not(.game-active) #screen-ai-coach .sub-screen-header {
    position: relative !important;
    z-index: 2 !important;
}

body:not(.game-active) #screen-ai-coach .sub-screen-header::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -1px !important;
    width: min(520px, 58vw) !important;
    height: 1px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(90deg, transparent, rgba(240,200,90,.55), transparent) !important;
}

body:not(.game-active) #screen-ai-coach .ai-chat-body {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: min(820px, calc(100% - 48px)) !important;
    height: calc(100dvh - 260px) !important;
    min-height: 330px !important;
    margin: 24px auto 10px !important;
    padding: 22px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(240,200,90,.16), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        rgba(8,10,14,.62) !important;
    box-shadow:
        0 30px 80px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body:not(.game-active) #screen-ai-coach .ai-chat-body::before {
    content: "AI Coach" !important;
    align-self: center !important;
    margin-bottom: 4px !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(240,200,90,.18) !important;
    border-radius: 999px !important;
    background: rgba(240,200,90,.08) !important;
    color: rgba(255,248,231,.62) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

body:not(.game-active) #screen-ai-coach .ai-msg {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body:not(.game-active) #screen-ai-coach .ai-msg.user {
    justify-content: flex-end !important;
}

body:not(.game-active) #screen-ai-coach .ai-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)),
        rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #FFF1B8 !important;
}

body:not(.game-active) #screen-ai-coach .ai-bubble {
    width: auto !important;
    max-width: min(620px, calc(100% - 48px)) !important;
    padding: 16px 18px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: rgba(255,248,231,.88) !important;
}

body:not(.game-active) #screen-ai-coach .ai-quick-prompts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: min(620px, calc(100% - 44px)) !important;
    margin: 4px 0 0 44px !important;
}

body:not(.game-active) #screen-ai-coach .ai-quick-prompts button {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
        rgba(255,255,255,.045) !important;
    color: rgba(255,248,231,.78) !important;
    font: 800 13px/1.25 var(--font-body) !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
    transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease !important;
}

body:not(.game-active) #screen-ai-coach .ai-quick-prompts button:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(240,200,90,.34) !important;
    color: #FFF8E7 !important;
    background:
        linear-gradient(180deg, rgba(240,200,90,.18), rgba(255,255,255,.055)),
        rgba(255,255,255,.06) !important;
}

body:not(.game-active) #screen-ai-coach .ai-typing {
    position: static !important;
    display: none;
    width: min(820px, calc(100% - 48px)) !important;
    min-height: 20px !important;
    margin: 0 auto 10px !important;
    padding: 0 8px !important;
    color: rgba(255,248,231,.66) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

body:not(.game-active) #screen-ai-coach .ai-chat-input-wrap {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: min(820px, calc(100% - 48px)) !important;
    margin: 0 auto 22px !important;
    transform: none !important;
    padding: 9px 9px 9px 18px !important;
    border-radius: 24px !important;
}

/* Removed: the legacy `#ai-chat-input` sizing override belonged to the old
   `.ai-chat-input-wrap` composer. Its `height: 46px !important` outranked both
   ai-coach-workspace.css and the controller's inline autosize height, so the
   floating composer could not reach its own size. The trainer's scoped owner
   now sets it. */

body:not(.game-active) #screen-ai-coach .ai-chat-send {
    width: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
}

@media (min-width: 768px) {
    body:not(.game-active) #screen-ai-coach .ai-chat-body {
        height: calc(100dvh - 260px) !important;
        margin-top: 22px !important;
    }

    body:not(.game-active) #screen-ai-coach .ai-chat-input-wrap {
        width: min(820px, calc(100vw - 340px)) !important;
    }
}

@media (max-width: 767px) {
    body:not(.game-active) #screen-ai-coach .ai-chat-body {
        width: calc(100% - 24px) !important;
        height: calc(100dvh - 198px) !important;
        min-height: 300px !important;
        margin-top: 12px !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }

    body:not(.game-active) #screen-ai-coach .ai-typing,
    body:not(.game-active) #screen-ai-coach .ai-chat-input-wrap {
        width: calc(100% - 24px) !important;
    }

    body:not(.game-active) #screen-ai-coach .ai-bubble {
        max-width: calc(100% - 44px) !important;
        font-size: 14px !important;
    }

    body:not(.game-active) #screen-ai-coach .ai-quick-prompts {
        grid-template-columns: 1fr !important;
        width: calc(100% - 44px) !important;
        margin-left: 44px !important;
    }
}

/* The active Game surface continues in styles/milestone.css. */