/* Стили нижней мобильной панели навигации и шторки «Ещё» (mobile sheet).
   Вынесено из партиала в отдельный статический файл — раньше эти ~3 КБ
   вставлялись инлайном заново на каждой странице (Профиль, Лидерборд, Клубы,
   Поиск тиммейтов), теперь браузер скачивает файл один раз и берёт из кэша
   при переходах между страницами. */

.mobile-tabbar { display: none; }

@media (max-width: 768px) {
    .profile-nav-block.settings-sidebar { display: none !important; }
    body.profile-with-side-nav,
    body.has-site-mobile-tabbar { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

    .mobile-tabbar {
        display: flex;
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        width: auto;
        height: auto;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 200;
        background: var(--bg-dropdown);
        border: 1px solid var(--border-card);
        border-radius: 20px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        padding: 6px;
        gap: 2px;
    }
    .mobile-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 4px 2px 6px;
        border: none;
        background: transparent;
        border-radius: 14px;
        color: var(--text-secondary);
        font-family: 'Inter', sans-serif;
        cursor: pointer;
        /* На страницах-ссылках (лидерборд/клубы) вкладки — это <a>, и они
           подхватывали подчёркивание от общих стилей ссылок страницы. */
        text-decoration: none;
        transition: color 0.2s ease;
    }
    /* Иконка сидит в своей «плашке» (padding + border-radius на самой svg):
       у активной вкладки плашка подсвечивается, у остальных прозрачная —
       поэтому иконки не прыгают при переключении. */
    .mobile-tab svg {
        width: 22px;
        height: 22px;
        display: block;
        flex-shrink: 0;
        box-sizing: content-box;
        padding: 6px 16px;
        border-radius: 14px;
        background: transparent;
        transition: background 0.2s ease;
    }
    .mobile-tab span { font-size: 0.66rem; font-weight: 600; line-height: 1; white-space: nowrap; }
    .mobile-tab:active svg { background: var(--bg-hover); }
    .mobile-tab.active { color: var(--accent); }
    .mobile-tab.active svg { background: color-mix(in srgb, var(--accent) 18%, transparent); }
    .mobile-tab.active span { color: var(--white); font-weight: 700; }
}

.mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.22s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.mobile-sheet-backdrop[hidden] { display: none; }
.mobile-sheet-backdrop.is-open { opacity: 1; }

.mobile-sheet {
    width: 100%;
    max-width: 640px;
    background: var(--black);
    border: 1px solid var(--border-card);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
}
.mobile-sheet-backdrop.is-open .mobile-sheet.is-active { transform: translateY(0); }
.mobile-sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--border-card); margin: 4px auto 14px; }
.mobile-sheet-title { color: var(--white); font-weight: 800; font-size: 1rem; margin-bottom: 14px; }
.mobile-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mobile-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-secondary);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mobile-sheet-item svg { width: 24px; height: 24px; flex-shrink: 0; }
.mobile-sheet-item:active { background: var(--bg-hover); }
.mobile-sheet-item.active {
    color: var(--white);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

@media (min-width: 769px) {
    .mobile-sheet-backdrop { display: none !important; }
}