/* Оболочка Fast Bag v2 (редизайн 2026-10-18 по образцу Squidly, палитра наша): верхняя полоса «аватар · баланс»,
   нижняя панель вкладок с «Главной» по центру, постоянная «Главная», плавные переходы.
   Подключается последней — перекрывает старую шапку (layout.css, components.css, games-menu.css), не правя их.
   Страница другой игры (быстрые, дурак) получает ту же полосу, подключив этот файл и js/ui/topbar.js. */

:root {
    --tab-h: 64px;
    --tab-gap: 10px;
    --tab-space: calc(var(--tab-h) + var(--tab-gap) + var(--safe-bottom) + 14px);
    --top-h: 60px;
    /* Скругление всего прибора: было 3 px («больше трёх не скругляется ничего»), в новой оболочке — мягкие углы,
       как у образца. Панели, клавиши, поля — все берут --radius. */
    --radius: 14px;
}

/* Переход между страницами — экраном загрузки (js/splash.js), а не снимком страницы: снимок держал отрисовку
   новой страницы, пока та не соберётся, и на телефоне переход дёргался. */

/* ── верхняя полоса ─────────────────────────────────────────────────── */
.hdr {
    height: calc(var(--top-h) + var(--safe-top));
    gap: 10px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    background-image: none;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid color-mix(in srgb, var(--line-hi) 55%, transparent);
    box-shadow: none;
}
.hdr::before, .hdr::after { display: none !important; }
.hdr .hdr-title, .hdr .games-switch, .hdr .hdr-brand, .hdr .hdr-rnd, .hdr .hdr-tools, .hdr .hdr-nav { display: none !important; }

.hdr-me {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 0 1 auto;
}
.me-ava {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 18px;
    color: #0B1310;
    background: linear-gradient(140deg, var(--me-hi) 0%, var(--accent-self) 45%, #7ECFC0 130%);
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px color-mix(in srgb, var(--accent-self) 70%, transparent), 0 0 18px rgba(217, 180, 74, .25);
    overflow: hidden;
}
.me-ava img { width: 100%; height: 100%; object-fit: cover; }
.me-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.me-name { font-weight: 700; font-size: 15px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.me-sub { font-size: 12.5px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }

/* Точка связи — на краю аватара. */
.hdr .conn {
    position: absolute;
    left: calc(var(--pad-x) + 30px);
    top: calc(var(--safe-top) + 40px);
    z-index: 2;
    width: 11px;
    height: 11px;
    margin: 0;
    border: 2px solid var(--bg);
}

/* Баланс — плашка с монетой и золотым «+» (пополнение) */
.hdr .hdr-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 4px 0 10px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--accent-money) 55%, transparent);
    background: linear-gradient(180deg, rgba(126, 207, 192, .08), rgba(126, 207, 192, .02));
    box-shadow: 0 0 18px rgba(126, 207, 192, .14), inset 0 1px 0 rgba(255, 255, 255, .05);
    color: var(--txt);
    cursor: pointer;
    margin-left: auto;
    flex: 0 0 auto;
    transition: transform .15s ease, box-shadow .2s ease;
}
.hdr .hdr-balance.is-empty #hdr-balance { color: var(--txt); }
.hdr .hdr-gap { display: none; }
.hdr .hdr-balance:active { transform: scale(.97); }
.hdr .hdr-balance::before {
    content: '';
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 45%),
        linear-gradient(160deg, #8FE0D1, #2E9A80);
    box-shadow: inset 0 0 0 1.5px rgba(11, 19, 16, .25);
}
.hdr .hdr-balance .num, .hdr #hdr-balance { font-size: 17px; font-weight: 800; letter-spacing: 0; color: var(--txt); }
html .hdr .hdr-balance .hdr-cur { display: inline; font-size: 12px; font-weight: 600; color: var(--txt-3); letter-spacing: .02em; }
/* Рублёвая плашка (страница быстрой игры в рублях): золотая монета и знак ₽ — иначе число читалось бы как USDT. */
.hdr .hdr-balance[data-cur="rub"]::before {
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 45%),
        linear-gradient(160deg, var(--me-hi), #B08F32);
}
.hdr .hdr-balance[data-cur="rub"] .hdr-cur { font-size: 16px; font-weight: 800; color: var(--txt); letter-spacing: 0; }
.hdr .hdr-plus,
.hdr .hdr-balance.is-empty .hdr-plus {
    display: grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: 4px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #0B1310;
    opacity: 1;
    overflow: visible;
    background: linear-gradient(180deg, var(--me-grad-1), var(--me-grad-2) 55%, var(--me-grad-3));
    box-shadow: 0 0 14px rgba(217, 180, 74, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
    animation: none;
}
.hdr .hdr-balance.is-empty { border-color: color-mix(in srgb, var(--accent-self) 70%, transparent); box-shadow: 0 0 20px rgba(217, 180, 74, .22); }
.hdr .hdr-balance.is-empty .hdr-plus { animation: plus-beat 1.8s ease-in-out infinite; }
@keyframes plus-beat { 50% { transform: scale(1.1); box-shadow: 0 0 22px rgba(217, 180, 74, .7); } }
@media (max-width: 359.98px) { html .hdr .hdr-balance:not([data-cur="rub"]) .hdr-cur { display: none; } .me-sub { display: none; } }

/* ── нижняя панель вкладок ───────────────────────────────────────────── */
.tabbar {
    position: fixed;
    z-index: 40;
    left: calc(var(--safe-left) + 12px);
    right: calc(var(--safe-right) + 12px);
    bottom: calc(var(--safe-bottom) + var(--tab-gap));
    max-width: 520px;
    margin: 0 auto;
    height: var(--tab-h);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    padding: 0 6px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(30, 46, 37, .9), rgba(14, 23, 18, .94));
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--line-hi) 80%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .34s cubic-bezier(.3, .7, .2, 1), opacity .25s ease;
}
.tabbar .tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--txt-3);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, transform .15s ease;
}
.tabbar .tab:active { transform: scale(.92); }
.tabbar .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-l { font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.tabbar .tab[aria-selected="true"] { color: var(--gold); }
.tabbar .tab:not(.tab-home)[aria-selected="true"]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 30px;
    height: 3px;
    margin-left: -15px;
    border-radius: 0 0 3px 3px;
    background: var(--gold);
    box-shadow: 0 0 12px rgba(232, 196, 106, .8);
}
.tab-home { overflow: visible; }
.tab-home-c {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-top: -22px;
    border-radius: 50%;
    color: #0B1310;
    background: radial-gradient(circle at 50% 30%, var(--me-grad-1), var(--me-grad-2) 55%, var(--me-grad-3));
    box-shadow: 0 0 0 5px var(--bg), 0 8px 22px rgba(0, 0, 0, .5), 0 0 26px rgba(217, 180, 74, .35);
    transition: box-shadow .25s ease, transform .2s ease;
}
.tabbar .tab-home svg { width: 28px; height: 28px; stroke: #0B1310; stroke-width: 2.1; fill: rgba(11, 19, 16, .12); }
.tabbar .tab-home[aria-selected="true"] .tab-home-c { box-shadow: 0 0 0 5px var(--bg), 0 8px 22px rgba(0, 0, 0, .5), 0 0 36px rgba(232, 196, 106, .7); }
.tabbar .nav-dot { position: absolute; top: 10px; left: calc(50% + 8px); }
.tabbar .hidden { display: none !important; }

/* На экране игры панели нет — она уезжает вниз; «Назад» Telegram ведёт на главную. */
body.on-game .tabbar { transform: translateY(calc(100% + var(--tab-gap) + var(--safe-bottom) + 30px)); opacity: 0; pointer-events: none; }

/* ── экраны ──────────────────────────────────────────────────────────── */
/* До решения nav.js: «Главная», если ссылка не вела в игру (start-game ставит инлайн-скрипт). */
html:not(.nav-ready):not(.start-game) #screen-game { display: none; }
html:not(.nav-ready):not(.start-game) #screen-home,
body.on-home #screen-home {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 12px var(--pad-x) var(--tab-space);
}
body.on-home #screen-home { animation: shell-in .32s cubic-bezier(0, 0, .2, 1); }
body.on-home #screen-game { display: none; }
body.on-game #screen-game { animation: shell-game-in .36s cubic-bezier(0, 0, .2, 1); }

body.on-wallet #screen-wallet,
body.on-profile #screen-profile,
body.on-friends #screen-friends,
body.on-leaders #screen-leaders {
    padding-bottom: var(--tab-space);
    animation: shell-in .3s cubic-bezier(0, 0, .2, 1);
}
@keyframes shell-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes shell-game-in { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) {
    body.on-home #screen-home, body.on-game #screen-game,
    body.on-wallet #screen-wallet, body.on-profile #screen-profile, body.on-friends #screen-friends, body.on-leaders #screen-leaders { animation: none; }
    .tabbar { transition: none; }
}

/* Уход на страницу другой игры: карточки слегка гаснут, пока грузится новая страница. */
html.leaving .games-hub { opacity: .6; transition: opacity .2s ease; }

/* ── полоса экрана игры (Фортуна) ────────────────────────────────────── */
.game-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 2px 0 0;
}
.game-bar-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--txt);
}
.game-bar .hdr-rnd { display: inline !important; font-size: 11px; color: var(--txt-3); letter-spacing: .08em; }
.game-bar .hdr-tools { display: flex; align-items: center; gap: 6px; }
.game-bar .hdr-nav { display: none; }

/* ── экран профиля: кнопка промокода ─────────────────────────────────── */
.prof-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1.5px solid color-mix(in srgb, var(--accent-self) 55%, transparent);
    background: linear-gradient(120deg, rgba(217, 180, 74, .14), rgba(217, 180, 74, .03));
    color: var(--txt);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 0 22px rgba(217, 180, 74, .12);
    transition: transform .15s ease;
}
.prof-promo:active { transform: scale(.98); }
.prof-promo-i { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(217, 180, 74, .18); color: var(--gold); }
.prof-promo-i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prof-promo-t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.prof-promo-t b { font-size: 16px; font-weight: 700; }
.prof-promo-t span { font-size: 12.5px; color: var(--txt-3); }
.prof-promo-go { flex: none; color: var(--gold); font-size: 22px; }

/* Полный экран Telegram: его кнопки («Закрыть»/«Назад» и «⋯») — отдельной полосой НАД шапкой
   (--tg-top включает её высоту, js/tg.js), поэтому прежние ужимки шапки под кнопки справа
   (components.css, ig.css: отступ 92 px, зазоры 2–4 px) здесь не нужны — шапка как в окне. */
html.tg-fullscreen .hdr,
html.tg-fullscreen .ig-hdr {
    padding-left: calc(var(--safe-left) + var(--pad-x));
    padding-right: calc(var(--safe-right) + var(--pad-x));
    gap: 10px;
}

/* Фортуна идёт и под «Главной» с разделами, но её краски — только на её экране: красный фон своего вылета,
   виньетка финала, подсветка фаз и «ВЫБЫЛ» (владелец: «краснеет экран», когда игра даже не открыта).
   Вибрацию и звук вне экрана глушит js/fortuna-focus.js. */
body[class*="on-"]:not(.on-game) .bg-fx,
body[class*="on-"]:not(.on-game) .out-stamp { display: none; }
body.final-heat[class*="on-"]:not(.on-game)::after { display: none; }