@media (max-width: 768px) {
   
    body {
        flex-direction: column;
        height: 100vh;
        overflow: hidden; 
    }

   
    .app-header {
        flex: 0 0 54px; 
        padding: 0 15px;
    }
    
   
    .nav-links {
        position: absolute;
        top: 54px; left: 0; width: 100%;
        background: rgba(15, 23, 42, 0.98);
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
        display: none; 
    }
    
    .nav-links.show { display: flex; }
    
    .nav-links a {
        padding: 15px;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        border-radius: 0;
    }
    .mobile-menu-btn { display: block; }

    .main-container { flex-direction: column; }

   
    .panel-area {
        order: 1; 
        width: 100%;
        height: 40vh; 
        max-height: none;
        padding: 15px;
        border-left: none;
        border-bottom: 1px solid var(--border-color);
        box-sizing: border-box;
        gap: 12px;
    }

    
    .matrix-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 3px;
        margin-bottom: 20px; 
    }
    .octave-title { grid-column: span 6; }

    
    .btn-play { min-width: 80px; }

    
    .stage-area {
        order: 2; 
        flex: 1;  
        min-height: 0; 
        padding: 10px;
        background-position: center;
    }

   
    .drum-rim {
        width: 80vmin; 
        height: 80vmin;
        max-width: 360px; 
        max-height: 360px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }

    .i-note { width: 14%; height: 14%; font-size: 12px; }
    .i-note.center-note { width: 22%; height: 22%; font-size: 16px; }
}