/* -------------------------------------------------------------------------- */
/*  HUNT: SHOWDOWN - RESPONSIVE DESIGN SYSTEM                                 */
/* -------------------------------------------------------------------------- */

/* TMP */


/* --- 1. Large Desktops (under 1680px) --- */
@media (max-width: 1680px) {
    .nav-btn-hunt {
        padding: 0 1rem;
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    .nav-tabs {
        gap: 5px;
    }

    .app-layout-single .ad-section {
        display: none !important;
    }

    .app-layout-single {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }

    html body .app-layout.app-generator {
        grid-template-columns: 1fr 1fr;
    }

    html body .app-layout.app-generator .generator-view-stats {
        display: none !important;
    }

}

@media (max-width: 1410px) {
    .toolbar-actions {
        display: none !important;
    }
}

/* --- 2. Medium Desktops & Tablet Landscape (under 1350px) --- */
@media (max-width: 1350px) {

    .portal-hero-img {
        display: none !important;
    }

    /* Header & Navigation */
    .app-header {
        height: auto;
        min-height: 80px;
        flex-direction: column;
        padding: 1.5rem 1rem !important;
        gap: 1.5rem;
    }

    .nav-left,
    .nav-right {
        width: 100%;
        justify-content: center;
    }

    .nav-right {
        padding-bottom: 0.5rem;
        gap: 20px !important;
    }

    .nav-tabs {
        width: calc(100% + 2rem);
        margin: 0 -1rem;
        gap: 0.5rem;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0.8rem 1rem;
        justify-content: center;
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        background: rgba(0, 0, 0, 0.2);
        -webkit-overflow-scrolling: touch;
    }

    .nav-btn-hunt {
        flex-shrink: 0;
        height: 40px;
    }

    .brand-text {
        font-size: 1.1rem;
    }

    .lang-current {
        height: 40px !important;
    }

    /* Page Layouts */
    .app-layout.music-page {
        grid-template-columns: 1fr;
        padding: 1rem !important;
    }

    .music-hero {
        display: none;
    }

    html body .app-layout.app-creator {
        grid-template-columns: 1fr 1fr !important;
    }

    html body .app-layout.app-creator .stats-column {
        display: none !important;
    }
}

@media (max-width: 1229px) {
    .explorer-wrapper.page-kda {
        grid-template-columns: 1fr !important;
        margin-bottom: 0;
    }
}

/* --- 3. Small Desktops (under 1230px) --- */
@media (max-width: 1230px) {
    .ad-section {
        display: none !important;
    }

    html body .app-layout.page-arsenal {
        grid-template-columns: 450px 1fr;
    }
}

/* --- 4. Tablets & Small Laptops (under 1200px) --- */
@media (max-width: 1200px) {
    .app-layout:not(.page-arsenal) {
        grid-template-columns: 1fr;
    }

    .app-layout {
        overflow-y: auto;
        padding: 1rem;
        gap: 2rem;
    }

    .stats-sidebar {
        border-bottom: 2px solid var(--color-border);
        padding-bottom: 2rem;
    }

    body {
        overflow-y: auto;
    }

    .portal-hero-title {
        font-size: 3rem;
    }

    .portal-hero-content {
        padding: 2.5rem;
    }
}

@media (max-width: 1075px) {
    html body .app-layout.page-arsenal {
        padding: 0.5rem;
    }

    html body .app-layout.app-generator {
        grid-template-columns: 1fr !important;
        padding: 1rem 0;
    }

    section.equipment-preview-v2 {
        padding: 0 2em;
    }
}

/* --- 5. Small Tablets & Phones (under 900px) --- */
@media (max-width: 900px) {
    .lobby-header-layout {
        flex-direction: column;
    }

    .track-visualizer {
        display: none;
    }

    .player-count-box {
        width: 100%;
        justify-content: space-between;
    }

    .portal-hero {
        flex-direction: column;
        height: auto;
    }

    .portal-hero-img {
        height: 300px;
    }

    .portal-hero-content {
        padding: 2rem;
    }
}

@media (max-width: 880px) {
    html body .app-layout.page-arsenal {
        grid-template-columns: none !important;
    }

    .weapon-grid {
        grid-template-columns: none !important;
    }
}

/* --- 6. Mobile Essentials (under 768px) --- */
@media (max-width: 768px) {

    #slot-primary {
        aspect-ratio: 26.8 / 10;
        text-align: center;
        width: 100%;
    }

    /* Fonts & Typography */
    .sidebar-header h2 {
        font-size: 1.8rem;
    }

    .description {
        margin-top: 20px;
        font-size: 1rem;
        color: #999;
        line-height: 1.6;
        margin-bottom: 2em;
    }

    /* Stats & Grids */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .weapon-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .portal-grid {
        padding: 1rem;
    }

    /* Navigation & Toolbars */
    .toolbar,
    .toolbar-actions {
        flex-direction: column;
        width: 100%;
    }

    .toolbar-actions {
        margin-left: 0;
        align-items: stretch;
    }

    .search-box {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--color-border);
        padding-top: 1rem;
        width: 100%;
    }

    .sort-select {
        width: 100%;
    }

    /* Footer */
    .app-footer {
        flex-direction: column;
        height: auto;
        padding: 1.5rem 1rem;
        gap: 1.5rem;
    }

    .footer-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* Hero Sections */
    .portal-hero {
        padding: 0 1.5rem;
        height: auto;
        min-height: 200px;
    }
}

/* --- 7. System Components --- */

/* Mobile Blocker (Prevents access on too small screens if enabled) */
.mobile-blocker {
    display: none;
    position: fixed;
    inset: 0;
    background: #0a0a0a;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--gold-dark);
    font-family: var(--font-header);
    letter-spacing: 2px;
    line-height: 1.6;
}

.mobile-blocker-content {
    max-width: 400px;
}