/* ═══════════════════════════════════════════════
   CYBERSPEED — Responsive Breakpoints
   Mobile, tablet, landscape adaptations
   ═══════════════════════════════════════════════ */

/* ── Tablet / Small Desktop ── */
@media (max-width: 1024px) {
    .info-panel {
        flex: 0 0 340px;
        width: 340px;
    }

    :root {
        --gauge-size: min(50vw, 50vh, 400px);
    }
}

/* ── Large Phones Landscape & Small Tablets ── */
@media (max-width: 768px) {
    .dashboard {
        flex-direction: column;
        overflow-y: auto;
        /* Allow the whole dashboard to scroll if needed on small mobiles */
    }

    .speedo-panel {
        flex: 0 0 auto;
        height: auto;
        min-height: 400px;
        /* Ensure gauge has space */
        padding: var(--sp-md) var(--sp-sm);
    }

    .info-panel {
        flex: 1 0 auto;
        width: 100%;
        height: auto;
        min-height: 500px;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        overflow-y: visible;
        /* Let the dashboard handle scrolling */
        padding-bottom: var(--sp-xl);
    }

    :root {
        --gauge-size: min(80vw, 360px);
    }

    .stats-panel {
        grid-template-columns: 1fr 1fr;
        /* Keep 2 cols on mobile for legibility */
    }

    .status-bar {
        gap: var(--sp-sm);
        flex-wrap: wrap;
        height: auto;
        padding: 6px var(--sp-sm);
    }

    .hud-center {
        display: none;
    }

    .map-wrapper {
        min-height: 250px;
        flex: none;
        /* Don't flex on mobile, use min-height */
        margin: var(--sp-sm) 0;
    }

    /* Adjust nav panel for mobile */
    .nav-panel {
        margin-bottom: var(--sp-sm);
    }
}

/* ── Phone Portrait ── */
@media (max-width: 480px) {
    .hud-bar {
        padding: var(--sp-xs) var(--sp-sm);
        height: 48px;
    }

    .logo-text {
        font-size: var(--fs-sm);
        letter-spacing: 1px;
    }

    .gps-status {
        padding: 2px 8px;
    }

    .hud-btn {
        padding: 4px 8px;
    }

    .dashboard {
        top: 48px;
        bottom: 40px;
        /* Space for the taller status bar */
    }

    .speedo-panel {
        min-height: 340px;
        padding-left: var(--sp-xs);
        padding-right: var(--sp-xs);
    }

    :root {
        --gauge-size: min(92vw, 300px);
        --fs-speed: 3.2rem;
        --fs-speed-decimal: 1.4rem;
    }

    .stats-panel {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat-card {
        padding: var(--sp-sm);
    }

    .stat-info .stat-label {
        font-size: 9px;
    }

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

    .compass {
        bottom: var(--sp-md);
    }

    .trip-controls {
        padding: var(--sp-sm) 0;
        flex-direction: column;
    }

    .trip-btn {
        width: 100%;
    }

    .status-bar {
        height: auto;
        min-height: 36px;
        font-size: 10px;
        padding: 4px var(--sp-sm);
    }
}

/* ── Landscape Phone ── */
@media (max-height: 500px) and (orientation: landscape) {
    .dashboard {
        flex-direction: row;
    }

    .speedo-panel {
        flex: 1;
        height: 100%;
    }

    .info-panel {
        width: 45%;
        height: 100%;
        border-top: none;
        border-left: 1px solid var(--border-subtle);
    }

    :root {
        --gauge-size: min(50vw, 80vh, 320px);
    }

    .stats-panel {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .compass {
        bottom: var(--sp-xs);
    }
}

/* ── Fullscreen adjustments ── */
body:fullscreen,
body:-webkit-full-screen {
    background: var(--bg-primary);
}

body:fullscreen .hud-bar,
body:-webkit-full-screen .hud-bar {
    background: rgba(10, 10, 26, 0.95);
}

body:fullscreen .status-bar,
body:-webkit-full-screen .status-bar {
    background: rgba(10, 10, 26, 0.95);
}