/* ═══════════════════════════════════════════════════════════════
   Leaderboard & Backtest Mobile Optimization
   Covers: /leaderboard/agents, /leaderboard/vaix, /leaderboard/markets,
           /leaderboard/bounty, /leaderboard/bugs, /leaderboard/tokenized,
           /leaderboard/traders, /backtest-leaderboard, /backtest,
           /backtest/guide, /backtest-bot/:slug, /backtest-results
   Targets: Samsung Galaxy S24/S25, Galaxy Fold/Flip, iPhone 15/16,
            Pixel 9, Android tablets, iPads, Korean market phones
   ═══════════════════════════════════════════════════════════════ */

/* ── Viewport & Safe Area Foundation ──────────────────────────── */

.container,
.bt-container,
.page-header,
.filter-section,
.stats-bar {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ── Performance: content-visibility for below-fold sections ── */

.podium,
.dex-grid-container,
.integration-section,
.bt-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* ── Small Phones (≤430px) — iPhone 15/16 Pro Max, Galaxy S24+ ─ */

@media (max-width: 430px) {
    .container,
    .bt-container {
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
    }

    /* Page headers — tighter */
    .page-header,
    .bt-page-header {
        padding: 20px 12px 16px;
    }

    .page-header h1,
    .bt-page-header h1 {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .page-header p,
    .page-title {
        font-size: 0.85rem;
    }

    .bt-page-header p {
        font-size: 13px;
    }

    /* Stats bar — compact */
    .stats-bar {
        gap: 0.5rem;
        padding: 0.75rem 0.5rem;
    }

    .stat-value {
        font-size: 1.1rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    /* Filter tabs — horizontal scroll */
    .filter-tabs,
    .bt-category-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .filter-tabs::-webkit-scrollbar,
    .bt-category-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-tab,
    .bt-category-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Podium — stack vertically on small phones */
    .podium {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Cards — tighter padding */
    .bt-card {
        padding: 14px;
    }

    .bt-card-return-value {
        font-size: 22px;
    }

    .bt-card-stats {
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
    }

    /* Leaderboard rows — tighter */
    .leaderboard-header,
    .leaderboard-row {
        padding: 0.6rem 0.75rem;
    }

    /* DEX grid — single column */
    .dex-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Modal — bottom sheet */
    .modal-content {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
    }
}

/* ── Standard Mobile (431-600px) ─────────────────────────────── */

@media (min-width: 431px) and (max-width: 600px) {
    .container,
    .bt-container {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }

    .page-header h1,
    .bt-page-header h1 {
        font-size: 1.5rem;
    }

    .dex-grid {
        grid-template-columns: 1fr;
    }

    .bt-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Tablet (601-1024px) ─────────────────────────────────────── */

@media (min-width: 601px) and (max-width: 1024px) {
    .container,
    .bt-container {
        padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
    }

    /* Two-column grids on tablet */
    .dex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bt-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Leaderboard rows — keep but with slightly less width */
    .leaderboard-header,
    .leaderboard-row {
        padding: 0.75rem 1rem;
    }

    /* Stats bar — keep row but tighter */
    .stats-bar {
        padding: 1rem 1.5rem;
    }
}

/* ── Landscape Mode ──────────────────────────────────────────── */

@media (orientation: landscape) and (max-height: 500px) {
    .page-header,
    .bt-page-header {
        padding: 12px 16px 8px;
    }

    .page-header p,
    .bt-page-header p {
        display: none;
    }

    .stats-bar {
        padding: 0.5rem 1rem;
    }

    .podium {
        flex-direction: row;
    }

    /* Two-column grid in landscape */
    .bt-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dex-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Foldable Devices (Samsung Galaxy Fold/Flip) ─────────────── */

/* Galaxy Z Fold cover screen (~374px folded) */
@media (max-width: 380px) and (min-resolution: 2.5dppx) {
    .page-header h1,
    .bt-page-header h1 {
        font-size: 1.1rem;
    }

    .filter-tab,
    .bt-category-btn {
        font-size: 12px;
        padding: 6px 10px;
    }

    .bt-card-return-value {
        font-size: 20px;
    }

    .bt-card-stat-label {
        font-size: 12px;
    }

    .bt-card-stat-value {
        font-size: 12px;
    }

    .stat-value {
        font-size: 1rem;
    }
}

/* Foldable unfolded (Fold inner display ~717px) */
@media (min-width: 700px) and (max-width: 768px) and (min-resolution: 2.5dppx) {
    .bt-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dex-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Screen-spanning (dual-screen foldables — Galaxy Fold, Surface Duo) */
@media (horizontal-viewport-segments: 2) {
    .bt-container,
    .container {
        display: grid;
        grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
        column-gap: env(viewport-segment-left 1 0, 0px);
    }

    .bt-container > *,
    .container > * {
        grid-column: 1 / -1;
    }

    /* Span grid across both screens */
    .bt-grid,
    .dex-grid {
        grid-column: 1 / -1;
    }
}

/* ── Touch Targets ───────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Filter/category buttons */
    .filter-tab,
    .bt-category-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Sort select */
    .bt-sort-select {
        min-height: 44px;
    }

    /* Period tabs */
    .period-tab,
    .tab {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Card CTAs */
    .bt-card-cta {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .bt-card-trades-link {
        min-height: 44px;
    }

    /* Load more */
    .bt-load-more-btn {
        min-height: 48px;
    }

    /* Suggest button */
    .btn-suggest {
        min-height: 44px;
    }

    /* Copy buttons */
    .copy-btn {
        min-height: 44px;
    }

    /* Back link */
    .back-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Leaderboard row — tappable */
    .leaderboard-row {
        min-height: 52px;
    }

    /* Vote button */
    .vote-btn {
        min-height: 44px;
    }

    /* Tap highlight removal */
    .bt-card,
    .leaderboard-row,
    .filter-tab,
    .bt-category-btn {
        -webkit-tap-highlight-color: transparent;
    }

    /* Modal buttons */
    .modal-btn {
        min-height: 44px;
    }

    .modal-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Samsung Internet Fixes ──────────────────────────────────── */

@supports not (backdrop-filter: blur(4px)) {
    .bt-card {
        background: rgba(17, 26, 40, 0.85);
    }

    .modal-overlay {
        background: rgba(0, 0, 0, 0.85);
    }

    .page-loading {
        background: var(--bg-primary);
    }
}

/* ── Modal — Bottom Sheet on Mobile ──────────────────────────── */

@media (max-width: 600px) {
    .modal-content {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-width: 100%;
        width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Reduce Motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .page-loading-spinner,
    .bt-loading .spinner {
        animation: none;
    }

    .bt-card:hover {
        transform: none;
    }

    .page-loading {
        transition: none;
    }

    .modal-btn:hover {
        transform: none;
    }
}

/* Font sizes for leaderboard/backtest elements are controlled by
   mobile-responsive.css and inline <style> blocks. Do NOT set font-size
   here without !important — they will be overridden. */