/* Responsive refinements shared only by the shop, leaderboard and profile. */
body[data-shell-active="vasarcsarnok"],
body[data-shell-active="toplista"],
body[data-shell-active="profil"] {
    overflow-x: clip;
}

/* Keep the main navigation usable on laptops and phones. */
@media (max-width: 1250px) {
    body[data-shell-active="vasarcsarnok"] .landing-nav > a,
    body[data-shell-active="toplista"] .landing-nav > a,
    body[data-shell-active="profil"] .landing-nav > a,
    body[data-shell-active="vasarcsarnok"] .landing-nav > .bsv2-loadout-sep,
    body[data-shell-active="toplista"] .landing-nav > .bsv2-loadout-sep,
    body[data-shell-active="profil"] .landing-nav > .bsv2-loadout-sep {
        display: none;
    }

    body[data-shell-active="vasarcsarnok"] .landing-nav-dropdown-menu,
    body[data-shell-active="toplista"] .landing-nav-dropdown-menu,
    body[data-shell-active="profil"] .landing-nav-dropdown-menu {
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (min-width: 1800px) {
    body[data-shell-active="vasarcsarnok"] .landing-nav a,
    body[data-shell-active="toplista"] .landing-nav a,
    body[data-shell-active="profil"] .landing-nav a,
    body[data-shell-active="vasarcsarnok"] .landing-nav-dropdown-toggle,
    body[data-shell-active="toplista"] .landing-nav-dropdown-toggle,
    body[data-shell-active="profil"] .landing-nav-dropdown-toggle {
        font-size: .84rem;
        padding: 12px 17px;
    }
}

/* Shop uses native responsive layout, without the wide-screen auto zoom. */
html:has(body[data-shell-active="vasarcsarnok"]),
body[data-shell-active="vasarcsarnok"],
body[data-shell-active="vasarcsarnok"] * {
    scrollbar-width: none;
}
html:has(body[data-shell-active="vasarcsarnok"])::-webkit-scrollbar,
body[data-shell-active="vasarcsarnok"]::-webkit-scrollbar,
body[data-shell-active="vasarcsarnok"] *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
body[data-shell-active="vasarcsarnok"] .legal-site-footer {
    box-sizing: border-box;
    max-width: 100%;
}
#vshop-shell {
    width: min(100%, 1760px);
    padding: clamp(12px, 1.4vw, 24px) clamp(14px, 2vw, 32px) 64px;
}
#vshop-shell .codex-browse-layout {
    grid-template-columns: clamp(220px, 18vw, 252px) minmax(0, 1fr);
    gap: clamp(16px, 1.5vw, 24px);
}
#vshop-shell #vshop-filter-sidebar {
    min-width: 0;
    gap: 14px;
    padding: 20px 16px;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
}
#vshop-shell .vshop-premium-copy h1 { font-size: clamp(2rem, 3vw, 3rem); }
#vshop-shell .vshop-catalog-heading h2 { font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
#vshop-shell .vshop-stat-row .codex-stat-num { font-size: clamp(1.5rem, 2vw, 1.9rem); }
#vshop-shell .vshop-premium-eyebrow,
#vshop-shell .vshop-premium-assurances span,
#vshop-shell .vshop-filter-section-label,
#vshop-shell .codex-filter-group label,
#vshop-shell .vshop-catalog-kicker,
#vshop-shell .vshop-live-status {
    font-size: clamp(.65rem, .68vw, .75rem);
    letter-spacing: .08em;
}
#vshop-shell .vshop-premium-copy > p,
#vshop-shell .codex-search-wrap input,
#vshop-shell #vshop-filter-sidebar .settings-select,
#vshop-shell .vshop-category-btn,
#vshop-shell .backpack-open-trigger {
    font-size: clamp(.78rem, .78vw, .88rem);
}
#vshop-shell .vshop-stat-row .codex-stat-label {
    font-size: .68rem;
}
#vshop-shell .codex-search-wrap input,
#vshop-shell #vshop-filter-sidebar .settings-select,
#vshop-shell .backpack-open-trigger {
    min-height: 44px;
}
#vshop-shell .vshop-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
    gap: clamp(12px, 1vw, 18px);
}
#vshop-shell .vshop-card-wrap { max-width: none; container-type: inline-size; }
#vshop-shell .vshop-card-info { padding: 28px 12px 12px; gap: 5px; }
#vshop-shell .vshop-card-name {
    font-size: clamp(.78rem, 5cqi, .88rem);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#vshop-shell .vshop-card-price-row { font-size: .8rem; }
#vshop-shell .vshop-card-owned-badge,
#vshop-shell .vshop-card-skin-hero {
    font-size: clamp(.65rem, 4.5cqi, .75rem);
    line-height: 1.35;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}
#vshop-shell .vshop-card-skin-theme {
    max-width: calc(100% - 88px);
    box-sizing: border-box;
    font-size: .65rem;
    line-height: 1.3;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}
#vshop-shell .vshop-card-type-badge { font-size: .65rem; max-width: calc(100% - 20px); }
#vshop-shell .vshop-card-skin-tierbadges { top: 50px; max-width: calc(100% - 24px); }
#vshop-shell .skin-tier-badge { font-size: .62rem; padding: 3px 7px; letter-spacing: .03em; }
#vshop-shell .skin-tier-badge::before { font-size: .65rem; }
#vshop-shell .vshop-skin-effect-preview {
    --vshop-skin-preview-size: clamp(44px, 23cqi, 58px);
}
#vshop-shell #vshop-category-nav { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#vshop-shell .vshop-category-btn { min-height: 48px; padding-inline: 12px; }

/* Grow the entire catalog on desktop monitors, preserving the laptop layout. */
@media (min-width: 1760px) {
    #vshop-shell {
        width: min(100%, max(1760px, 94vw));
        padding-inline: clamp(32px, 2vw, 72px);
    }
    #vshop-shell .codex-browse-layout {
        grid-template-columns: clamp(252px, 12vw, 360px) minmax(0, 1fr);
        gap: clamp(24px, 1.5vw, 40px);
    }
    #vshop-shell #vshop-filter-sidebar {
        padding: clamp(20px, 1.2vw, 32px) clamp(16px, 1vw, 28px);
        gap: clamp(14px, .9vw, 24px);
    }
    #vshop-shell .vshop-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(224px, calc(48px + 10vw), 360px)), 1fr));
        gap: clamp(18px, 1vw, 28px);
    }
    #vshop-shell .vshop-premium-copy { max-width: 1000px; }
    #vshop-shell .vshop-premium-copy h1 { font-size: clamp(3rem, 2.4vw, 4.5rem); }
    #vshop-shell .vshop-catalog-heading h2 { font-size: clamp(1.6rem, 1.25vw, 2.25rem); }
    #vshop-shell .vshop-stat-row .codex-stat-num { font-size: clamp(1.9rem, 1.5vw, 2.6rem); }
    #vshop-shell .vshop-premium-eyebrow,
    #vshop-shell .vshop-premium-assurances span,
    #vshop-shell .vshop-filter-section-label,
    #vshop-shell .codex-filter-group label,
    #vshop-shell .vshop-catalog-kicker,
    #vshop-shell .vshop-live-status,
    #vshop-shell .vshop-stat-row .codex-stat-label {
        font-size: clamp(.75rem, .55vw, 1rem);
    }
    #vshop-shell .vshop-premium-copy > p,
    #vshop-shell .codex-search-wrap input,
    #vshop-shell #vshop-filter-sidebar .settings-select,
    #vshop-shell .vshop-category-btn,
    #vshop-shell .backpack-open-trigger,
    #vshop-shell .vshop-visual-toggle {
        font-size: clamp(.88rem, .68vw, 1.2rem);
    }
    #vshop-shell .vshop-category-btn { min-height: clamp(48px, 2.6vw, 72px); }
    #vshop-shell .vshop-card-name { font-size: clamp(.88rem, 5cqi, 1.2rem); }
    #vshop-shell .vshop-card-price-row { font-size: clamp(.8rem, .65vw, 1.15rem); }
    #vshop-shell .vshop-card-owned-badge,
    #vshop-shell .vshop-card-skin-hero { font-size: clamp(.75rem, 4.5cqi, 1rem); }
    #vshop-shell .vshop-card-skin-theme,
    #vshop-shell .vshop-card-type-badge { font-size: clamp(.65rem, .5vw, .9rem); }
    #vshop-shell .skin-tier-badge { font-size: clamp(.62rem, .48vw, .85rem); }
    #vshop-shell .vshop-skin-effect-preview {
        --vshop-skin-preview-size: clamp(58px, 23cqi, 80px);
    }
}

@media (max-width: 980px) {
    #vshop-shell #vshop-filter-sidebar { max-height: none; }
    #vshop-shell .vshop-filter-section {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }
    #vshop-shell .vshop-filter-section-label { grid-column: 1 / -1; }
    #vshop-shell .codex-filter-group { min-width: 0; }
}
@media (max-width: 480px) {
    #vshop-shell .vshop-filter-section { grid-template-columns: minmax(0, 1fr); }
}

/* Profile: the header, tabs and statistics should remain legible when zoomed out. */
#profil-shell .profile-premium-eyebrow,
#profil-shell .pf-stat-label,
#profil-shell .pf-stat-sub,
#profil-shell .ph-xp-text,
#profil-shell .ph-xp-sub {
    font-size: clamp(.78rem, .8vw, 1rem);
}
#profil-shell .profile-premium-copy p,
#profil-shell .profile-tab {
    font-size: clamp(.9rem, .9vw, 1.05rem);
}
#profil-shell .profile-tab { min-height: 48px; }
#profil-shell .pf-stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); }
#profil-shell .pf-stat-card { min-width: 0; }

/* Leaderboard: use more of the available laptop/desktop width. */
#toplista-shell {
    width: min(100%, 1200px);
    max-width: none;
    box-sizing: border-box;
    padding: clamp(20px, 2.2vw, 42px) clamp(16px, 2.2vw, 40px) 72px;
}
.toplista-header h1 { font-size: clamp(2rem, 2.6vw, 3.25rem); }
.toplista-subtitle { font-size: clamp(.95rem, 1vw, 1.15rem); line-height: 1.5; }
.toplista-row { grid-template-columns: 64px minmax(0, 1fr) 120px 170px; min-height: 64px; font-size: clamp(.95rem, .95vw, 1.1rem); }
.toplista-row--head { min-height: 48px; font-size: clamp(.8rem, .8vw, .95rem); }
.toplista-avatar-wrap { width: 42px; height: 42px; }
.toplista-username { min-width: 0; }

@media (max-width: 980px) {
    #vshop-shell .codex-browse-layout { grid-template-columns: minmax(0, 1fr); }
    #vshop-shell #vshop-filter-sidebar { position: static; }
    #profil-shell .profile-header { flex-wrap: wrap; }
}

@media (max-width: 760px) {
    #vshop-shell, #profil-shell { width: 100%; padding: 12px 14px 64px; }
    #vshop-shell .vshop-premium-hero { padding: 24px 20px; }
    #vshop-shell .vshop-premium-assurances { gap: 8px 16px; }
    #vshop-shell .vshop-premium-assurances span { display: flex; }
    #vshop-shell #vshop-category-nav { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
    #vshop-shell .vshop-category-btn { flex: 0 0 auto; min-width: 110px; padding-inline: 12px; }
    #vshop-shell .vshop-catalog-heading { flex-wrap: wrap; }
    #vshop-shell .vshop-live-status { display: flex; }
    #vshop-shell .vshop-filter-section { min-width: 0; }
    #profil-shell .profile-premium-intro { padding: 22px 20px; }
    #profil-shell .profile-header { gap: 16px; }
    #profil-shell .ph-info { margin-left: 0; padding: 8px 0; width: 100%; }
    #profil-shell .ph-name { white-space: normal; overflow-wrap: anywhere; }
    #profil-shell .profile-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 0; }
    #profil-shell .profile-tab { padding: 10px 5px; letter-spacing: .04em; }
    #toplista-shell { padding: 20px 12px 64px; }
}

@media (max-width: 560px) {
    .toplista-row--head { display: none; }
    .toplista-row {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        grid-template-areas: "rank player player" "rank level points";
        column-gap: 10px;
        row-gap: 6px;
        min-height: 76px;
        padding: 12px;
    }
    .toplista-col-rank { grid-area: rank; align-self: center; }
    .toplista-col-player { grid-area: player; }
    .toplista-col-level { grid-area: level; text-align: left; color: var(--c-text-dim); font-size: .85rem; }
    .toplista-col-level::before { content: "Szint: "; }
    .toplista-col-points { grid-area: points; font-size: .85rem; white-space: nowrap; }
    .toplista-col-points::before { content: "Pont: "; color: var(--c-text-dim); font-weight: 400; }
    .toplista-avatar-wrap { width: 36px; height: 36px; }
    #profil-shell .profile-premium-copy h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
    #profil-shell .pf-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    #profil-shell .pf-stat-grid { grid-template-columns: minmax(0, 1fr); }
    #vshop-shell .vshop-card-info { padding-inline: 16px; }
    #profil-shell .ph-xp-text { flex-wrap: wrap; }
}