/* javascript/css/responsive.css */

/* ==========================================================================
   1. MOBILE PORTRAIT (Celular em pé)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* Variáveis para caber as 12 casas */
    :root {
        --fret-width: 38px;
        --fret-height: 30px;
        --note-size: 20px;
        --note-font: 0.6rem;
    }

    html, body {
        height: auto !important;
        min-height: 101vh;
        overflow-y: auto !important;
        overflow-x: hidden;
        display: block !important;
        position: static !important;
    }

    body {
        padding-top: 10px;
        padding-bottom: 120px;
    }

    .app-title { font-size: 1.4rem; letter-spacing: 0.5px; }
    .app-logo { width: 30px; height: 30px; }
    .header-container { gap: 8px; margin-bottom: 2px; }

    .progression-bar {
        max-width: 100%;
        padding: 5px 35px 5px 5px;
        gap: 5px;
        margin: 0;
        border-bottom: 1px solid #222;
    }
    .prog-chord { padding: 2px 6px; font-size: 0.8rem; min-width: 25px; border-radius: 4px; }

    /* --- BRAÇO DA GUITARRA (CORREÇÃO DE SCROLL E POSIÇÃO) --- */
    .neck-container {
        display: block !important;
        width: 100%;
        position: relative;
        padding: 10px 0;
        margin: 0;
        overflow: hidden; 
    }

    .scroll-viewport {
        display: flex !important;
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        
        /* CORREÇÃO DO PRINT 3: */
        /* Usar flex-start impede que o início do braço seja cortado no zoom in */
        justify-content: flex-start; 
        align-items: flex-start;
    }

    .fretboard {
        display: grid !important;
        grid-template-rows: repeat(6, var(--fret-height));
        
        /* VOLTE PARA 13 AQUI: */
        /* 35px (Letra da corda) + 13 casas (0 a 12) = 14 colunas */
        grid-template-columns: 35px repeat(13, var(--fret-width));
        
        flex-shrink: 0;
        margin: 0; 
    }

    .legend-wrapper {
        position: absolute;
        top: 0;
        right: 5px;
        z-index: 200;
        width: 30px; 
        height: 30px;
    }

    /* --- CONTROLES (CORREÇÃO DO PRINT 4 - DIVISÃO DE ESPAÇO) --- */
    .bottom-controls { padding-bottom: 20px; flex-shrink: 0; }

    .controls-flex {
        display: grid;
        /* AJUSTE FINO DE COLUNAS: */
        /* 3 partes | 3 partes | 1.5 partes */
        grid-template-columns: 3fr 3fr 1.5fr; 
        gap: 8px;
        padding: 5px 10px;
        align-items: end;
        padding-bottom: 20px;
    }

    /* LINHA 1: Play e Mixer */
    #btn-play { 
        grid-column: 1 / span 2; 
        grid-row: 1; 
        height: 40px; 
        margin: 0;
    }
    #btn-mixer { 
        grid-column: 3; 
        grid-row: 1; 
        width: 100%; 
        height: 40px; 
    }

    /* LINHA 2: Levada | Escala | Tom */
    .controls-flex > .c-group:nth-child(3) { /* Levada (3fr) */
        grid-column: 1; 
        grid-row: 2; 
    }
    .controls-flex > .c-group:nth-child(6) { /* Escala (3fr) */
        grid-column: 2; 
        grid-row: 2; 
    }
    .controls-flex > .c-group:nth-child(4) { /* Tom (1.5fr) */
        grid-column: 3; 
        grid-row: 2; 
    }

    /* LINHA 3: BPM e Zoom */
    .controls-flex > .c-group:nth-child(5) { /* BPM (3fr - Aprox 40%) */
        grid-column: 1; 
        grid-row: 3; 
    }
    .controls-flex > .c-group:nth-child(7) { /* Zoom (3 + 1.5 = 4.5fr - Aprox 60%) */
        grid-column: 2 / span 2; 
        grid-row: 3; 
        margin-bottom: 0; 
    }

    .c-group { flex: none !important; width: auto; min-width: 0 !important; }
    
    .c-group label { 
        font-size: 0.6rem; 
        margin-bottom: 1px; 
        display: block; 
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    select, input[type="range"] { 
        width: 100%; 
        height: 35px; 
        font-size: 0.75rem; 
        padding: 0 2px;
        margin: 0; 
    }
    
    .mixer-popup { width: 95%; left: 2.5%; bottom: 60px; transform: none; }
}

/* ==========================================================================
   2. MOBILE LANDSCAPE
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --fret-width: 50px;
        --fret-height: 28px; 
        --note-size: 20px;
    }
    html, body {
        height: auto !important;
        min-height: 101vh;
        overflow-y: auto !important;
        padding-bottom: 40px;
    }
    
    .top-bar { height: auto; padding: 5px; }
    .header-container { display: none; } /* Esconde logo */
    
    .controls-flex {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 0 15px 40px 15px;
        grid-template-columns: none !important;
    }
    
    .c-group { flex: 1; min-width: 90px; max-width: 140px; }
    #btn-play, #btn-mixer { width: auto; min-width: 60px; flex-grow: 0; height: 32px; }
    select, input[type="range"] { height: 32px; }
}