/* Beat The Charts — shared base stylesheet.
   Page-specific styles stay inline in each template.
   This file handles resets, backgrounds, and MOBILE OVERRIDES. */

/* --- Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; width: 100%; }
body { font-family: 'Inter', sans-serif; background: #121212; color: #e5e5e5; }

/* --- Background layers (legacy neon — used by old templates) --- */
.neon-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,0,128,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0,200,255,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(157,0,255,0.06) 0%, transparent 50%);
}
.grid-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background-image:
        linear-gradient(rgba(255,0,128,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,0,128,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* --- Shared animations --- */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* --- Source badges (legacy) --- */
.src { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 700; display: inline-block; }
.src-kalshi { background: rgba(0,200,255,0.1); color: #00c8ff; border: 1px solid rgba(0,200,255,0.2); }
.src-poly   { background: rgba(113,88,226,0.15); color: #7158e2; border: 1px solid rgba(113,88,226,0.25); }

/* =====================================================================
   MOBILE OVERRIDES — applied globally across all templates.
   These use !important to beat inline template styles.
   ===================================================================== */

/* Kill backdrop-filter on mobile (iOS Safari scroll jank) */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .header { backdrop-filter: none; background: #0a0a0af2; }
    .neon-bg, .grid-overlay { display: none; }
}

/* --- Small screens: nav, spacing, touch targets --- */
@media (max-width: 768px) {
    /* Header: compact, wrapping */
    .header {
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
        gap: 4px 8px !important;
    }

    /* Logo: smaller */
    .logo {
        font-size: 14px !important;
        letter-spacing: 1px !important;
        padding: 10px 14px 10px 0 !important;
        margin-right: 14px !important;
    }

    /* Nav: wrap, readable, tappable */
    .nav {
        flex-wrap: wrap !important;
        gap: 2px 4px !important;
        flex: 1 0 100% !important;
        order: 3 !important;
        border-top: 1px solid rgba(58,52,44,0.5);
        padding-top: 6px !important;
    }
    .nav a {
        display: inline-block !important;
        font-size: 11px !important;
        letter-spacing: 1px !important;
        padding: 8px 10px !important;
        min-height: 36px !important;
        line-height: 20px !important;
    }

    /* Nav right (sign in / profile) */
    .nav-right {
        order: 2 !important;
        margin-left: auto !important;
    }
    .nav-right-link {
        font-size: 11px !important;
        padding: 8px 8px !important;
    }

    /* Live badge */
    .live-badge {
        font-size: 9px !important;
        padding: 4px 8px !important;
    }

    /* Page content: tighter padding */
    .page-main {
        padding: 0 14px 40px !important;
    }

    /* Hero: smaller text */
    .h1, .ipm-title {
        font-size: 24px !important;
        line-height: 1.1 !important;
    }
    .lede, .ipm-lede {
        font-size: 14px !important;
    }
    .kicker {
        font-size: 10px !important;
    }

    /* Section heads */
    .ipm-section-head h2 {
        font-size: 20px !important;
    }

    /* Stat strips: 2-col on mobile */
    .stat-strip, .stat-row, .hero-stats, .cred-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .stat-num, .cred-num, .ipm-stat-num {
        font-size: 20px !important;
    }

    /* Grids: single column on mobile */
    .card-grid, .use-grid, .tier-grid, .problem-grid, .use-cases, .pricing-row {
        grid-template-columns: 1fr !important;
    }

    /* Buttons: tappable (44px minimum) */
    button, .btn-trade, .cta-primary, .cta-secondary, .tier-cta, .nom-btn,
    .listen-btn, [type="submit"] {
        min-height: 44px !important;
        font-size: 12px !important;
    }

    /* Form inputs: comfortable touch */
    input[type="text"], input[type="email"], textarea, select {
        min-height: 44px !important;
        font-size: 16px !important; /* prevents iOS zoom */
    }

    /* Tables: scroll if needed */
    .compare-table {
        font-size: 11px !important;
    }
    .compare-table th, .compare-table td {
        padding: 6px 8px !important;
    }

    /* Filter pills */
    .source-filter, #sourceFilter, #genreFilter {
        gap: 4px !important;
    }
    .sf-pill {
        font-size: 10px !important;
        padding: 6px 10px !important;
        min-height: 32px !important;
    }

    /* Chart rows: compact */
    .chart-row {
        grid-template-columns: 40px 52px 1fr 70px !important;
        gap: 10px !important;
        padding: 12px 10px !important;
    }
    .c-rank { font-size: 28px !important; }
    .c-art { width: 52px !important; height: 52px !important; }
    .c-track { font-size: 14px !important; }
    .c-hot { display: none !important; }
    .c-listen { display: none !important; }
    .c-badges { gap: 3px !important; }
    .c-badge { font-size: 8px !important; padding: 2px 5px !important; }

    /* Score display on mobile: inline after track name */
    .c-hot-score { font-size: 18px !important; }

    /* Trajectory columns */
    .tri-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    /* Hyperlocal map */
    .map-wrap { padding: 10px !important; }
    .map-pin-label { font-size: 8px !important; letter-spacing: 1px !important; }

    /* City panels */
    .city-panel { padding: 14px 16px !important; }

    /* Leaderboard (partners) */
    .lb-row {
        grid-template-columns: 30px 1fr 50px !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
    }
    .lb-genre { display: none !important; }

    /* Movers bar */
    .movers-bar {
        grid-template-columns: 1fr !important;
    }

    /* Emerging nominations form */
    .nom-form {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .site-footer {
        font-size: 9px !important;
        padding: 24px 14px !important;
    }
}

/* --- Very small screens (iPhone SE etc) --- */
@media (max-width: 380px) {
    .h1, .ipm-title { font-size: 20px !important; }
    .nav a { font-size: 10px !important; padding: 6px 6px !important; }
    .chart-row { grid-template-columns: 30px 44px 1fr !important; }
    .c-rank { font-size: 22px !important; }
    .c-art { width: 44px !important; height: 44px !important; }
    .stat-strip, .stat-row { grid-template-columns: 1fr 1fr !important; }
}