/* =========================================================
   MOBILE / TABLET ONLY — desktop styles are NOT modified.
   All rules are inside max-width media queries.
   Breakpoints: 1200 (tablet landscape), 992 (tablet), 768 (phone), 480 (small)
   ========================================================= */

/* ---------- TABLET LANDSCAPE / SMALL LAPTOP ---------- */
@media (max-width: 1200px) {
    .nav-wrapper-main {
        padding: 0 20px !important;
    }

    .nav-group-left {
        gap: 18px !important;
    }

    .sg-nav-link {
        font-size: 0.72rem !important;
        padding: 7px 9px !important;
        gap: 6px !important;
    }

    .sg-nav-link span {
        /* keep labels on large tablets */
    }

    .container,
    .arsenal-v2,
    .acc-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ---------- TABLET + PHONE: hamburger nav ---------- */
@media (max-width: 992px) {
    /* Hide desktop nav chrome; show hamburger */
    .sg-nav-links,
    .sg-user-chip,
    .sg-steam-btn,
    .nav-links,
    .user-nav-profile:not(.keep-mobile),
    .steam-btn:not(.keep-mobile) {
        display: none !important;
    }

    /* Exception: steam/user stay hidden; hamburger shows */
    .mobile-menu-toggle,
    .menu-toggle {
        display: inline-flex !important;
    }

    .nav-wrapper-main {
        display: flex !important;
        grid-template-columns: none !important;
        justify-content: space-between !important;
        padding: 0 14px !important;
        height: 60px;
    }

    .sg-navbar {
        height: 60px !important;
        padding: 0 !important;
    }

    body.has-sg-navbar,
    body:has(#sgPublicNavbar) {
        padding-top: 60px !important;
    }

    .sg-navbar .brand b,
    .sg-navbar .brand span,
    .sg-brand b,
    .sg-brand span {
        font-size: 1.15rem !important;
    }

    .nav-group-left {
        gap: 12px !important;
        width: 100%;
        justify-content: space-between;
    }

    /* General layout */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    img, video, canvas, iframe, svg {
        max-width: 100% !important;
        height: auto;
    }

    table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hero h1,
    .lb-title,
    .tech-header h1,
    h1[style*="font-size"] {
        font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
        line-height: 1.15 !important;
        word-break: break-word;
    }

    .hero {
        padding: 28px 0 20px !important;
    }

    .hero-stats-row,
    .stats-boxes-full,
    .weapon-grid {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
        gap: 10px !important;
    }

    .main-grid,
    .acc-grid,
    .sc-details-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .podium-container,
    .podium-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .podium-card {
        width: 100% !important;
        max-width: none !important;
        order: unset !important;
        transform: none !important;
    }

    /* Store modules */
    .module-slot {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 20px !important;
        gap: 16px !important;
    }

    .m-price-box {
        text-align: left !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .m-action,
    .m-btn {
        width: 100% !important;
    }

    /* Skins page */
    .skins-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .skins-arsenal-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .skins-sidebar {
        width: 100% !important;
        max-width: none !important;
        position: static !important;
        overflow-x: auto !important;
    }

    .weapon-category-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .skins-grid-responsive,
    #weaponsGridHost,
    #skinsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .custom-modal,
    .modal-dialog,
    .skin-settings-modal,
    #skinSettingsModal .custom-modal-content {
        width: min(100vw - 16px, 560px) !important;
        max-width: 100% !important;
        margin: 8px auto !important;
    }

    /* Forms / buttons */
    button,
    .btn,
    .m-btn,
    .steam-btn,
    input,
    select,
    textarea {
        font-size: 16px !important; /* prevents iOS zoom */
    }

    .btn,
    .m-btn,
    .steam-btn {
        min-height: 44px;
    }

    /* Footer */
    .footer-section {
        padding: 40px 0 28px !important;
    }

    .footer-col {
        text-align: left !important;
    }
}

/* ---------- PHONE ---------- */
@media (max-width: 768px) {
    .nav-wrapper-main {
        padding: 0 12px !important;
    }

    .sg-navbar .brand b,
    .sg-navbar .brand span,
    .sg-brand b,
    .sg-brand span {
        font-size: 1.05rem !important;
    }

    .hero-stats-row .stat-card,
    .stat-card {
        min-width: 0 !important;
        padding: 12px !important;
    }

    .stat-number,
    .stat-card-box b {
        font-size: 1.25rem !important;
    }

    .tt-promo-section,
    .tt-info,
    .tt-videos {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .tt-videos {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .tt-actions {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .tt-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .server-card,
    .sc-brutal-container,
    .clan-banner,
    .news-card,
    .table-box {
        border-radius: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sc-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .skins-grid-responsive,
    #weaponsGridHost,
    #skinsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .skin-card-name,
    .skin-card-hint {
        font-size: 0.75rem !important;
    }

    .skins-stage-title {
        font-size: 1.35rem !important;
    }

    /* Leaderboard table: hide less critical cols if present */
    .custom-table th:nth-child(n+5),
    .custom-table td:nth-child(n+5) {
        display: none;
    }

    .lb-header {
        padding: 90px 12px 28px !important;
    }

    .acc-container {
        margin-top: 90px !important;
        padding: 0 12px !important;
    }

    .profile-side-card,
    .stats-main-wrap {
        padding: 22px 16px !important;
        border-radius: 20px !important;
    }

    .avatar-main {
        width: 110px !important;
        height: 110px !important;
        border-radius: 28px !important;
    }

    .profile-name {
        font-size: 1.45rem !important;
        flex-wrap: wrap !important;
    }

    .stats-boxes-full {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Modals full-bleed-ish */
    .custom-modal-content,
    .modal-content {
        border-radius: 16px 16px 0 0 !important;
    }
}

/* ---------- SMALL PHONE ---------- */
@media (max-width: 480px) {
    .skins-grid-responsive,
    #weaponsGridHost,
    #skinsGrid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .hero-stats-row,
    .stats-boxes-full {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .sg-mobile-panel {
        width: 100vw !important;
        border-left-width: 2px !important;
    }

    .pag-row {
        gap: 6px !important;
    }

    .p-btn {
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 10px !important;
        font-size: 0.85rem !important;
    }
}

/* Safe area for notched phones */
@media (max-width: 992px) {
    .sg-navbar {
        padding-top: env(safe-area-inset-top, 0px) !important;
        height: calc(60px + env(safe-area-inset-top, 0px)) !important;
    }

    body.has-sg-navbar,
    body:has(#sgPublicNavbar) {
        padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    }

    .sg-mobile-panel {
        padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    }
}