/* Широкое окно (Telegram для компьютера, планшет альбомом): от 1024 px нижняя панель вкладок становится меню слева,
   шапка и содержимое стоят в одной сетке шириной до --desk-w, «Главная» раскладывается в ширину.
   Владелец 2026-10-18: «пора капитально заняться дизайном для больших экранов». Телефон этот файл не трогает.
   Подключается после shell.css. */

/* Список игр в меню и топ сезона — только на широком окне. */
.side-games, .home-side { display: none; }

/* Строка «ФОРТУНА · RND · звук · ?» — над обеими колонками экрана игры, а не первой ячейкой сетки: иначе прибор
   (кольцо, кнопки) уезжал во вторую колонку и сжимался, а участники — под него (с 760 px, layout.css). */
@media (min-width: 760px) {
    #screen-game > .game-bar { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    :root {
        --side-w: 232px;
        --desk-w: 1240px;
        /* Нижней панели нет — снизу не нужен запас под неё. */
        --tab-space: 24px;
    }

    body { padding-left: var(--side-w); }

    /* ── меню слева ───────────────────────────────────────────────────── */
    .tabbar,
    body.on-game .tabbar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: var(--side-w);
        max-width: none;
        height: auto;
        margin: 0;
        padding: 18px 12px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        border-radius: 0;
        border: 0;
        border-right: 1px solid color-mix(in srgb, var(--line-hi) 60%, transparent);
        background: linear-gradient(180deg, rgba(20, 32, 26, .96), rgba(10, 17, 13, .98));
        box-shadow: none;
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }
    .tabbar::before {
        order: -2;
        content: 'FAST BAG';
        display: block;
        padding: 6px 12px 20px;
        font-size: 18px;
        font-weight: 900;
        letter-spacing: .14em;
        color: var(--gold);
        text-shadow: 0 0 18px rgba(232, 196, 106, .35);
    }
    .tabbar .tab {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        height: 46px;
        padding: 0 12px;
        border-radius: 12px;
        color: var(--txt-2);
    }
    .tabbar .tab:hover { background: rgba(255, 255, 255, .05); color: var(--txt); }
    .tabbar .tab:active { transform: none; }
    .tabbar .tab[aria-selected="true"] { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
    .tabbar .tab:not(.tab-home)[aria-selected="true"]::before {
        top: 10px; bottom: 10px; left: 0; width: 3px; height: auto; margin: 0; border-radius: 0 3px 3px 0;
    }
    .tab-l { font-size: 15px; font-weight: 600; }
    .tabbar .tab svg { width: 22px; height: 22px; }
    .tabbar .nav-dot { top: 12px; left: 28px; }

    /* «Главная» — первым пунктом и обычной строкой, без золотого круга. */
    .tabbar .tab-home { order: -1; }
    .tab-home-c { width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; }
    .tabbar .tab-home svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; }
    .tabbar .tab-home[aria-selected="true"] .tab-home-c { box-shadow: none; }
    .tabbar .tab-home::after { content: attr(title); font-size: 15px; font-weight: 600; }
    .tabbar .tab-home[aria-selected="true"]::before {
        content: ''; position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 0 3px 3px 0;
        background: var(--gold); box-shadow: 0 0 12px rgba(232, 196, 106, .8);
    }


    /* ── список игр в меню ────────────────────────────────────────────── */
    .tabbar { overflow-y: auto; scrollbar-width: thin; }
    .tabbar > * { flex: none; }
    .hub-live { white-space: nowrap; }
    .side-games:not([hidden]) { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--line-hi) 50%, transparent); }
    .side-games-h { margin: 0 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
    .side-game {
        display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
        background: none; color: var(--txt-2); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
    .side-game:hover { background: rgba(255, 255, 255, .05); color: var(--txt); }
    .side-game:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
    .side-game-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff;
        background: color-mix(in srgb, var(--g) 80%, #000); box-shadow: 0 0 10px color-mix(in srgb, var(--g) 35%, transparent); }
    .side-game-ico svg { width: 18px; height: 18px; }
    .side-game.is-here,
    body.on-game .side-game[data-game="fastbag"] { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }

    /* ── шапка — в сетке содержимого ─────────────────────────────────── */
    html .hdr {
        width: 100%;
        max-width: calc(var(--desk-w) + 2 * var(--pad-x));
        margin-left: auto;
        margin-right: auto;
        border-bottom-color: transparent;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* ── экран Фортуны — в той же сетке, что шапка ─────────────────────── */
    #screen-game.wrap { max-width: var(--desk-w); }
    /* Лишняя высота окна уходит в строку прибора, а не делится со строкой названия: иначе между «ФОРТУНА» и
       прибором висела пустая полоса (снимок владельца). 1fr = minmax(auto, 1fr): прибор не сжимается. */
    #screen-game.wrap { grid-template-rows: auto 1fr; }

    /* ── «Главная» ───────────────────────────────────────────────────── */
    html:not(.nav-ready):not(.start-game) #screen-home,
    body.on-home #screen-home { max-width: calc(var(--desk-w) + 2 * var(--pad-x)); padding-top: 8px; }
    .home-live { margin-left: 0; margin-right: 0; padding-left: 0; }
    .hub-mains { grid-template-columns: 1fr 1fr; gap: 16px; }
    .hub-mains > .hub-key-main:only-child { grid-column: 1 / -1; }
    .hub-key-main,
    .hub-key-main[data-game="fastbag"] { min-height: 220px; padding: 24px 28px; }
    .hub-key-main .hub-scene,
    .hub-key-main[data-game="fastbag"] .hub-scene { height: 190px; width: 52%; }
    .hub-key-main .hub-name { font-size: 38px; }
    .hub-key-main .hub-sub { font-size: 15px; }
    .hub-grid { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 16px; }
    .hub-key-tile { min-height: 200px; }
    .hub-key-tile .hub-scene { height: 120px; }
    .hub-sect { margin-top: 30px; }

    /* Наведение мышью: карточка приподнимается. */
    .hub-key:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(0, 0, 0, .45), 0 0 0 1px color-mix(in srgb, var(--g) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14); }
    .hub-key:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

    /* ── топ сезона справа (от 1280 px) ────────────────────────────────── */
    .home-main { min-width: 0; }

    /* ── разделы (кошелёк, профиль, друзья, рейтинг) — шире телефонной колонки ── */
    body.on-wallet #screen-wallet,
    body.on-profile #screen-profile,
    body.on-friends #screen-friends,
    body.on-leaders #screen-leaders { max-width: 1100px; }
    body.on-friends #screen-friends,
    body.on-leaders #screen-leaders { max-width: 820px; }

    /* Кошелёк: счёт слева, подарки и кэшбэк справа. */
    body.on-wallet #cash-home.is-on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
    body.on-wallet #cash-home.is-on > .screen-cap, body.on-wallet #cash-home.is-on > #cash-live { grid-column: 1 / -1; }
    body.on-wallet #cash-home.is-on > #wal-card { grid-column: 1; }
    body.on-wallet #cash-home.is-on > #wal-tickets { grid-column: 2; grid-row: 2 / span 2; }

    /* Профиль, обзор: карточка и промокод слева, уровень и статистика справа; прочие вкладки — во всю ширину. */
    /* Ряды — по содержимому: экран сам прокручивается, и при длинной истории (сотни строк) ряды «auto»
       сжимались под его высоту — заголовок с overflow: hidden сплющивался до 6 px и уходил под вкладки. */
    body.on-profile #screen-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: max-content; gap: 0 20px; align-content: start; }
    body.on-profile #screen-profile > .screen-cap, body.on-profile #screen-profile > #prof-tabs,
    body.on-profile #screen-profile > #prof-season, body.on-profile #screen-profile > #prof-history,
    body.on-profile #screen-profile > #prof-support, body.on-profile #screen-profile > #prof-settings,
    body.on-profile #screen-profile > #prof-stats { grid-column: 1 / -1; }
    body.on-profile #screen-profile > #prof-card { grid-column: 1; }
    body.on-profile #screen-profile > #prof-promo { grid-column: 1; align-self: start; }
    body.on-profile #screen-profile > #prof-level { grid-column: 2; grid-row: 3 / span 2; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .hub-key:hover { transform: none; }
}

@media (min-width: 1280px) {
    html:not(.nav-ready):not(.start-game) #screen-home:has(> .home-side:not([hidden])),
    body.on-home #screen-home:has(> .home-side:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-content: start; }
    .home-side:not([hidden]) {
        display: block; position: sticky; top: 8px; align-self: start;
        padding: 16px; border-radius: 20px;
        background: linear-gradient(180deg, rgba(30, 46, 37, .7), rgba(14, 23, 18, .8));
        border: 1px solid color-mix(in srgb, var(--line-hi) 60%, transparent);
    }
    .side-top-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px;
        font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-2); }
    .side-top-code { color: var(--gold); letter-spacing: .06em; }
    .side-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    .side-top-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px;
        height: 40px; padding: 0 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); font-size: 14px; }
    .side-top-row:nth-child(1) .side-top-rank { color: #F2C94C; }
    .side-top-row:nth-child(2) .side-top-rank { color: #C9D3DD; }
    .side-top-row:nth-child(3) .side-top-rank { color: #D69A61; }
    .side-top-row.is-me { background: color-mix(in srgb, var(--gold) 14%, transparent); }
    .side-top-rank { font-weight: 800; color: var(--txt-3); text-align: center; }
    .side-top-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt); font-weight: 600; }
    .side-top-pts { color: var(--accent-money); font-weight: 700; }
    .side-top-me { margin: 10px 2px 0; font-size: 13px; color: var(--txt-2); }
    .side-top-all { width: 100%; margin-top: 12px; height: 40px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
        background: none; color: var(--gold); font: inherit; font-weight: 700; cursor: pointer; }
    .side-top-all:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
}