/* portal.css -- the players' pages (body.site-body, site/views.mjs): the frame -- the footer, the phone tabs (the bar
 * on top is site_head.css, shared with the admin) -- and the parts every such page shares: titles, cards, buttons, switches, chips, badges,
 * the 16:9 preview, the empty note, the pager. Over base.css; each page's own sheet comes after it. */

/* ---------------------------------------------------------------- the page */
/* the scrollbar's place is kept on every page: a short page (no scrollbar) and a page that grows after its script
   (the store's catalogue) are as wide as the rest -- the bar does not shift between pages */
html:has(> body.site-body) { scrollbar-gutter: stable; }
html:has(> body.stage-max) { scrollbar-gutter: auto; }   /* a game blown up to the screen takes the gutter too */

.site-body {
    display: block;
    background-color: var(--f-surface-1);
    font-family: var(--f-font);
    font-size: 15px;
    line-height: 1.5;
}
.site-body a:hover { opacity: 1; color: var(--f-fg); }
.site-body :focus-visible { outline: 2px solid var(--f-accent-2); outline-offset: 3px; }
.site-body button,
.site-body input,
.site-body textarea,
.site-body select { font-family: inherit; }

/* the display face: titles and the name; text stays in the text face */
.site-body h1,
.site-body h2,
.page-title,
.sec-title,
.brand-word { font-family: var(--f-font-display); }

.site-shell { display: flex; flex-direction: column; min-height: 100vh; }

.site-main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-width: 0;
}

/* the content column: the bar, the pages and the footer keep one width and one margin */
.wrap {
    width: 100%;
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 40px;
    padding-left: 40px;
}

.page { flex: 1 0 auto; padding-top: 28px; }

/* the word beside the eyes mark (the mark itself is in base.css) */
.brand-link { color: var(--f-fg); }
.brand-word { font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.brand-dot { color: var(--f-accent-2); }

/* ---------------------------------------------------------------- the footer */
.site-foot {
    margin-top: 80px;
    border-top: 1px solid var(--f-surface-3);
    background-color: var(--f-surface-0);
}

.site-foot-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 56px;
    padding-top: 44px;
    padding-bottom: 28px;
}

.site-foot-brand { flex: 2 1 280px; }

.site-foot-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 22px;
}
.site-foot-logo .brand-mark { font-size: 28px; }

.site-foot-tagline { max-width: 44ch; margin: 0; color: var(--f-fg-2); font-size: 14px; }

.site-foot-column {
    display: flex;
    flex: 1 1 150px;
    flex-direction: column;
    gap: 8px;
}
.site-foot-column a { color: var(--f-fg); }
.site-body .site-foot-column a:hover { color: var(--f-accent); }

.site-foot-title { color: var(--f-fg-2); font-size: 13px; font-weight: 800; }

.site-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 16px;
    padding-bottom: 26px;
    border-top: 1px solid var(--f-surface-3);
    color: var(--f-fg-2);
    font-size: 13px;
}
.site-foot-up { font-weight: 700; }

/* the tabs at the bottom: a phone's only (the narrow query below) */
.site-tabs { display: none; }

/* ---------------------------------------------------------------- titles, cards */
.page-title,
.sec-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.page-title { font-size: 36px; line-height: 1.15; }
.sec-title { font-size: 30px; line-height: 1.2; }

.muted { color: var(--f-fg-2); }

.card { border-radius: 12px; background-color: var(--f-surface-2); }

/* ---------------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background-color: var(--f-surface-4);
    color: var(--f-fg);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; filter: none; cursor: default; }
.btn-main { background-color: var(--f-accent-2); color: var(--f-on-accent); }
.btn-soft { background-color: var(--f-surface-2); }

/* line icons: 18px, drawn in the text's colour */
.btn svg,
.icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.btn svg.is-fill { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- switches
   One of a few: «Все игры / Избранное», the top's periods, the library's tabs. The chosen one is violet
   (aria-pressed, aria-selected or .is-active), on a plate (.seg). */
.seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background-color: var(--f-surface-2);
}

.seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--f-fg-2);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.seg-btn:hover { color: var(--f-fg); }
.seg-btn[aria-pressed="true"],
.seg-btn[aria-selected="true"],
.seg-btn.is-active { background-color: var(--f-accent-2); color: var(--f-on-accent); }

.seg-count {
    padding: 0 6px;
    border-radius: 4px;
    background-color: rgb(0 0 0 / 25%);
    font-size: 12px;
}


/* ---------------------------------------------------------------- chips and badges */
/* a chip: a category, a filter */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 16px;
    background-color: var(--f-surface-4);
    color: var(--f-fg);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
a.chip:hover { background-color: var(--f-surface-5); }
.chip-num { font-size: 12px; opacity: 0.7; }

/* a badge on a card: «Новинка», «Топ», «Для стримов» */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 4px;
    background-color: var(--f-surface-6);
    color: var(--f-fg);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
/* dark with a blue ring: it reads over a picture and over a card alike */
.badge-live {
    box-shadow: inset 0 0 0 1px var(--f-accent);
    background-color: var(--f-surface-0);
}
.badge-live svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--f-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

/* «Стрим» on a game's cover (catalogue, «Похожие», the profile's shelves): a pill with a word, bottom left -- the top
   right corner is the card's buttons (☆, ✕), and a square there read as one more of them */
.cover-stream {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background-color: rgba(15, 13, 10, 0.82);
    color: var(--f-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.cover-stream svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2.2; }

/* ---------------------------------------------------------------- the drop-down (a catalogue's sort)
   A details element: the button is its summary, the items are links (public/js/catalog.js closes and walks it). */
.drop { position: relative; }
.drop-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px 0 14px;
    border-radius: 10px;
    background-color: var(--f-surface-3);
    color: var(--f-fg);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.15s ease;
}
.drop-btn::-webkit-details-marker { display: none; }
.drop-btn:hover,
.drop[open] .drop-btn { background-color: var(--f-surface-4); }
.drop[open] .drop-btn { box-shadow: inset 0 0 0 1px var(--f-accent-2); }
.drop-arrow { width: 18px; height: 18px; fill: none; stroke: var(--f-fg-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.drop[open] .drop-arrow { transform: rotate(180deg); }

.drop-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100%;
    margin: 0;
    padding: 6px;
    border-radius: 14px;
    background-color: var(--f-surface-3);
    box-shadow: inset 0 0 0 1px var(--f-surface-5), 0 18px 40px rgb(0 0 0 / 50%);
    list-style: none;
    animation: rise-in 0.16s ease both;
}
.drop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 9px;
    color: var(--f-fg-2);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.drop-item:hover,
.drop-item:focus-visible { opacity: 1; outline: none; background-color: var(--f-surface-5); color: var(--f-fg); }
.drop-item.is-on { color: var(--f-accent); }
.drop-check { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.drop-item.is-on .drop-check { visibility: visible; }

/* ---------------------------------------------------------------- the rest */
/* a game's preview is always the whole 16:9 picture; only its frame's width changes */
.ratio-16x9 {
    display: block;
    aspect-ratio: 16 / 9;
    background-color: var(--f-surface-2);
    object-fit: cover;
}

.empty {
    margin: 0;
    padding: 44px 24px;
    border-radius: 12px;
    background-color: var(--f-surface-2);
    color: var(--f-fg-2);
    font-weight: 700;
    text-align: center;
}

.pg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 16px;
}

.pg-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background-color: var(--f-surface-2);
    color: var(--f-fg);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.pg-btn.is-active { background-color: var(--f-accent-2); color: var(--f-on-accent); }
.pg-btn:disabled { opacity: 0.4; cursor: default; }
.pg-gap { padding: 0 4px; color: var(--f-fg-2); }

/* a block rising into place (the pop-ups, the menus: their own durations, «both» or «backwards» each) */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- narrower screens
   On a phone the sections move into the tabs at the bottom (the bar itself: site_head.css), margins are 16px and
   rows of buttons scroll sideways. */
@media (max-width: 760px) {
    .wrap { padding-right: 16px; padding-left: 16px; }
    .site-main { padding-bottom: 64px; }

    .site-tabs {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        isolation: isolate;
        height: 64px;
        border-top: 1px solid var(--f-surface-3);
        background-color: var(--f-surface-0);
    }

    .site-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--f-fg-2);
        font-size: 11px;
        font-weight: 700;
    }
    .site-tab.is-active { color: var(--f-fg); }
    /* the active tab: a pill behind its icon, as the active section in the bar on top */
    .site-tab.is-active::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        z-index: -1;
        width: 56px;
        height: 30px;
        margin-left: -28px;
        border-radius: 15px;
        background-color: var(--f-surface-4);
    }
    .site-tab.is-active .site-tab-icon { color: var(--f-accent-2); }

    .site-tab-icon {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
    }

    .site-body .consent { bottom: 64px; }       /* above the tabs */

    .page-title { font-size: 28px; }
    .sec-title { font-size: 22px; }

    .row-scroll {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .row-scroll > * { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .site-body *,
    .site-body *::before,
    .site-body *::after { animation: none !important; transition: none !important; }
}