/* style_tetris.css */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Cruciale per evitare scroll e resize da barre UI del browser */
    position: fixed; /* Impedisce lo scroll del body stesso */
}

body {
    font-family: 'Press Start 2P', cursive;
    background-color: #1a1a1a;
    color: #e0e0e0;
    display: flex;
    flex-direction: column; /* Struttura verticale principale */
    align-items: center;
    /* justify-content: space-between; /* Spinge header in alto, controlli in basso, main in mezzo */
    height: 100%; /* Occupa tutta l'altezza del viewport (dato che html,body sono 100%) */
    padding: 5px 0; /* Padding solo sopra/sotto */
    box-sizing: border-box;
}

.container {
    background-color: #2c2c2c;
    border: 2px solid #555;
    /* padding: 10px; Rimosso, gestito internamente o da body */
    border-radius: 5px;
    width: 100%; /* Occupa la larghezza disponibile */
    max-width: 800px; /* Limite desktop */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; /* Permette al container di espandersi verticalmente */
    overflow-y: auto; /* Scroll solo se il contenuto eccede (es. classifica lunga) */
    padding: 0 5px; /* Padding laterale per il contenuto del container */
}

header {
    text-align: center;
    margin-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}
header h1 { font-size: 1.8em; color: #fff; }
.language-selector, .game-mode-selector {
    display: flex;
    align-items: center;
    gap: 5px;
}
#lang-select { background-color: #111; color: #eee; border: 1px solid #555; }

main#tetris-main {
    display: flex;
    /* flex-wrap: wrap; Lo gestiamo con media query */
    justify-content: center;
    align-items: flex-start;
    gap: 10px; /* Ridotto gap per mobile */
    width: 100%;
    margin-top: 5px;
    flex-grow: 1;
    overflow: hidden;
}

#game-board-container {
    position: relative;
    border: 2px outset #444; /* Bordo più sottile per mobile */
    background-color: #000;
    /* JS imposta width/height */
    /* align-self: center; (se main è flex column) */
    /* margin: auto; (se main non è flex o per centrare orizzontalmente) */
}

#gameCanvas {
    display: block; /* Cruciale */
    /* Rimuovi width: 100%; height: 100%; per ora.
       JS imposterà canvas.width e canvas.height in pixel.
       Il CSS non dovrebbe scalarlo. */
    /* width: 100%; */
    /* height: 100%; */
    image-rendering: pixelated;
    background-color: lime !important; /* Sfondo verde per il canvas */
    border: 1px solid blue !important; /* Bordo blu per il canvas */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* position: absolute; top: 0; left: 0;  Se #game-board-container deve essere il reference */
}

#message-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; color: #FFF; font-size: 1.1em; padding: 10px; box-sizing: border-box; z-index: 10;
}
#message-overlay.visible { display: flex; }
#message-overlay p { margin: 0; padding: 10px; background-color: #e74c3c; color: #fff; border-radius: 3px; }
#message-overlay p.start-message { background-color: #2ecc71; }
#message-overlay p.paused-message { background-color: #f39c12; }


#game-info-panel {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Meno spazio */
    width: 130px; /* Più stretto per desktop, JS potrebbe cambiarlo per mobile */
    min-width: 120px;
    color: #ccc;
}
.info-box {
    background-color: #1e1e1e; /* Sfondo leggermente diverso */
    border: 1px solid #444;
    padding: 8px;
    text-align: center;
    border-radius: 3px;
}
.info-box h2 {
    font-size: 0.7em;
    margin: 0 0 5px 0;
    color: #888;
    text-transform: uppercase;
}
.info-box p {
    font-size: 1em;
    margin: 0;
    color: #fff;
}
.next-piece-box canvas#nextPieceCanvas {
    display: block;
    margin: 5px auto 0;
    background-color: #0d0d0d; /* Sfondo più scuro per next piece */
    /* Border e dimensioni da JS */
}
#instructions {
    font-size: 0.55em; /* Testo istruzioni più piccolo */
    line-height: 1.3;
    text-align: left;
    background-color: transparent; /* Istruzioni senza sfondo box */
    border: none;
    padding: 5px 0;
}
#instructions p {
    font-size: 1em; /* Relativo al parent #instructions */
    color: #999;
}

#mobile-controls {
    display: none;
    grid-template-columns: repeat(3, 1fr); /* Layout base 3 colonne */
    grid-template-areas: /* Per posizionare i bottoni in modo più flessibile */
        "rotate  up     drop"  /* 'up' potrebbe essere rimosso per Tetris, 'rotate' è più importante */
        "left    down   right";
    gap: 8px;
    width: calc(100% - 20px); /* Quasi tutta la larghezza */
    max-width: 280px;
    margin: 8px auto 5px auto; /* Centra e dà spazio */
    padding: 8px;
    background-color: rgba(40, 40, 40, 0.8); /* Sfondo per distinguerlo */
    border-radius: 8px;
    box-sizing: border-box;
}

#mobile-controls.visible { display: grid; }

#mobile-controls button {
    font-family: 'Press Start 2P', cursive;
    background-color: #555; color: #fff; border: 1px solid #888;
    padding: 10px 0; /* Padding verticale, orizzontale gestito da grid */
    font-size: 1em; /* Ridotto per bottoni più piccoli */
    border-radius: 5px;
    touch-action: manipulation;
    user-select: none; /* Evita selezione testo */
    -webkit-user-select: none;
}

#mobile-controls button:active { background-color: #777; }

/* Assegnazione aree grid per i bottoni (esempio) */
#btn-rotate { grid-area: rotate; }
/* #btn-up (se lo avessimo per "muovi su", non tipico di tetris) { grid-area: up; } */
#btn-drop { grid-area: drop; } /* Questo è l'hard drop */
#btn-left { grid-area: left; }
#btn-down { grid-area: down; } /* Questo è il soft drop */
#btn-right { grid-area: right; }
/* Se vuoi un layout diverso per i bottoni, ad esempio tutti in fila o il drop più grande: */
/*
#mobile-controls.layout-linear {
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "left rotate down right drop";
}
#btn-drop { grid-area: drop; } // Già così se non specificato grid-column span
*/


.records-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #555;
    width: 100%;
}
.records-section h2 { text-align: center; margin-bottom: 10px; }
#records-table { width: 100%; border-collapse: collapse; font-size: 0.75em; }
#records-table th, #records-table td { border: 1px solid #555; padding: 6px; text-align: left; }
#records-table th { background-color: #222; }



/* Responsive */
@media (max-width: 600px) and (orientation: portrait) {
     body { padding: 2px 0; } /* Riduci padding body */
    .container {
        padding: 0; /* Togli padding laterale al container principale su mobile */
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    header { margin-bottom: 5px; padding-bottom: 5px; }
    header h1 { font-size: 1.5em; }
    
    main#tetris-main {
        flex-direction: column; /* Board sopra, poi info, poi controlli */
        align-items: center;
        justify-content: flex-start; /* Allinea tutto in alto */
        gap: 5px; /* Meno spazio tra board, info, controlli */
        /* height: auto;  Rimosso, JS gestirà altezza gameboard */
        /* flex-grow: 0; Rimosso */
    }
    
    #game-board-container {
        /* JS imposterà la dimensione, il CSS qui può dare una max-width/height
           per evitare che JS lo faccia troppo grande se il calcolo fallisce.
           Ma JS dovrebbe essere il driver principale. */
        margin-bottom: 5px; /* Spazio prima del pannello info */
    }
    
    #game-info-panel {
        order: 2; /* Info panel dopo il game board */
        width: 95vw; max-width: 280px; /* Larghezza info panel */
        margin-top: 5px;
        flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 5px;
    }
    
    .info-box { flex-basis: 80px; flex-grow: 1; padding: 4px; } /* Info box più piccole */
    .info-box h2 { font-size: 0.6em; } .info-box p { font-size: 0.9em; }
    .next-piece-box { flex-basis: 100%; order: -1; /* Next piece in cima al pannello info */ }
    #instructions { display: none; /* Nascondi istruzioni testuali, usa icone o tutorial se serve */ }

    #mobile-controls.visible {
        order: 3; /* Controlli sotto l'info panel */
        max-width: 95vw; /* Occupa più larghezza se necessario */
        padding: 5px;
        gap: 5px;
    }
    #mobile-controls button { font-size: 0.9em; padding: 8px 0; }
/*    .info-box {
        flex-basis: 120px;  Larghezza base per info box 
        flex-grow: 1;
    }
    .next-piece-box {
        flex-basis: 100%;  Il box "next" prende tutta la larghezza disponibile nel flex container 
        margin-top: 5px;
    }
    #instructions {
        flex-basis: 100%;
        text-align: center;
    }*/
}


/* MOBILE LANDSCAPE (Schermo largo e basso - "Fullscreen" per il gioco) */
@media (max-height: 550px) and (orientation: landscape) {
    body { padding: 0; }
    .container header, .container .records-section, .container .options-bar, #instructions {
        display: none !important;
    }
    .container { max-width: 100%; height: 100vh; padding: 0; border: none; }

    main#tetris-main {
        flex-direction: row;
        align-items: center;
        justify-content: center; /* Centra board e info se c'è spazio */
        height: 100%; width: 100%;
        gap: 5px; padding: 0; margin: 0;
    }

    #game-board-container { /* JS imposterà dimensioni per riempire al meglio */
        border-width: 1px; box-shadow: none; margin:0;
        /* JS potrebbe anche voler impostare margin per centrare verticalmente/orizzontalmente
           se il canvas non riempie perfettamente game-area e game-area riempie lo schermo */
    }

    #game-info-panel {
        width: 90px; max-width: 90px; /* Molto stretto */
        height: calc(100vh - 10px); /* Occupa quasi tutta l'altezza */
        margin-top: 0; justify-content: flex-start; gap: 3px; padding: 2px;
        /* Potrebbe essere a destra o sinistra a seconda delle preferenze */
        order: 1; /* Info panel dopo il game board (o -1 per prima) */
    }
    .info-box { padding: 3px; font-size: 0.8em;}
    .info-box h2 { font-size: 0.55em; } .info-box p { font-size: 0.75em; }
    .next-piece-box canvas#nextPieceCanvas { /* JS imposta dimensioni */ }

    #mobile-controls.visible {
        position: fixed; /* O absolute se il parent è relativo e copre lo schermo */
        /* Scegli una posizione per i controlli che non intralci troppo */
        right: 5px; bottom: 50%; transform: translateY(50%); /* Verticalmente a destra */
        /* Oppure: bottom: 5px; left: 50%; transform: translateX(-50%); /* Orizzontalmente in basso */
        flex-direction: column; grid-template-columns: 1fr;
        width: auto; max-width: 60px; /* Bottoni più piccoli */
        gap: 3px; background-color: rgba(0,0,0,0.4); padding: 3px; border-radius: 5px;
    }
    #mobile-controls button { padding: 6px 3px; font-size: 0.8em; }
    #btn-drop { grid-column: auto; }
}