/* ============================================================
   MOBILE.CSS — Responsive overrides for audio_player_ver2
   Target: screens <= 768px
   ============================================================ */

@media (max-width: 768px) {

    body {
        padding: var(--spacing-md);
    }

    h1 {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .player-panel {
        padding: var(--spacing-md);
    }

    .album-art {
        max-width: 200px;
    }

    /* ---- Nav collapses behind hamburger ---- */
    .hamburger-menu {
        display: flex;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card-bg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-sm);
        margin-top: var(--spacing-sm);
        z-index: 10;
    }

    .nav-menu.active {
        display: flex;
    }

    /* ---- Track rows stack ---- */
    .tracks li {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .track-actions {
        align-self: flex-start;
    }

    .track-main-info {
        font-size: 0.85rem;
    }

    .track-meta-info {
        font-size: 0.7rem;
    }

    /* ---- Controls ---- */
    .control-buttons {
        gap: var(--spacing-sm);
    }

    .control-buttons button {
        width: 36px;
        height: 36px;
    }

    .control-buttons .play-btn {
        width: 46px;
        height: 46px;
    }

    .time-controls {
        gap: var(--spacing-sm);
    }

    .time-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.72rem;
    }

    .speed-select {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.8rem;
    }

    /* ---- Volume row stacks ---- */
    .volume-download-container {
        flex-wrap: wrap;
    }

    .volume-control {
        width: 100%;
        order: 1;
    }

    #volume {
        max-width: none;
    }

    .download-btn,
    .social-icon-pastel {
        order: 2;
    }

    /* ---- Help overlay ---- */
    .help-content {
        padding: var(--spacing-lg);
    }
}