/* style_pong.css */
/*body {
    font-family: 'Press Start 2P', cursive;
    background-color: #000;
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;  Allinea contenuto in alto 
    min-height: 100vh;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;  Permette scroll ma disabilita double-tap-to-zoom etc. 
    touch-action: none;  Previene pan/zoom sull'intera pagina se il gioco occupa tutto 
}*/

/* style_pong.css */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Previene scrollbar quando andiamo fullscreen */
    background-color: #000; /* Sfondo nero di base */
}

body {
    font-family: 'Press Start 2P', cursive;
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; Permette al contenuto di stare in alto se non fullscreen */
    padding: 5px; /* Padding minimo */
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}


/*.container {
    background-color: #111;
    border: 2px solid #FFF;
    padding: 15px;
    border-radius: 0;  Stile retro spigoloso 
    box-shadow: 0 0 15px #FFF;
    width: 100%;
    max-width: 700px;  Pong può essere più largo di Snake 
    display: flex;
    flex-direction: column;
    align-items: center;
}*/

.container {
    background-color: #111;
    border: 2px solid #FFF;
    /* padding: 15px; Rimosso, gestito da body o elementi interni */
    border-radius: 0;
    /* box-shadow: 0 0 15px #FFF; Opzionale */
    width: 100%; /* Occupa tutta la larghezza del body */
    max-width: 700px; /* Mantiene un max per desktop */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; /* Permette al container di crescere se body è flex */
    overflow-y: auto; /* Scroll se il contenuto eccede (es. classifica) */
}

/* Nascondi header e classifica in modalità landscape su schermi piccoli per dare spazio al gioco */
@media (orientation: landscape) and (max-height: 500px) { /* Soglia di altezza per "mobile landscape" */
    .container header, .container .records-section, .container .options-bar {
        display: none !important; /* Forza la scomparsa */
    }
    .container {
        padding: 0;
        border: none;
        max-width: 100%; /* Permetti al container di riempire lo schermo */
    }
    main {
        height: 100vh; /* Occupa tutta l'altezza della viewport */
    }
}

header {
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
}

header h1 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #FFF;
}

.options-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 0.8em;
    padding: 5px;
    border-bottom: 1px dashed #555;
}

.language-selector, .game-mode-selector {
    display: flex;
    align-items: center;
    gap: 5px;
}

#lang-select, #mode-select {
    background-color: #000;
    color: #FFF;
    border: 1px solid #FFF;
    font-family: inherit;
    padding: 5px;
    font-size: 0.9em;
}

main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#score-board {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 600px; /* Larghezza del punteggio simile al canvas */
    font-size: 1.5em;
    margin-bottom: 10px;
    padding: 5px 0;
    border-bottom: 2px solid #FFF;
}
#player1-score-container, #player2-score-container {
    min-width: 120px; /* Per dare spazio all'etichetta e al punteggio */
    text-align: center;
}


/*#game-area {
    position: relative;
    width: 100%;  Occuperà la larghezza del contenitore main 
    max-width: 600px;  Larghezza massima del campo di gioco 
    height: 400px;   Altezza fissa del campo di gioco (Pong è tipicamente orizzontale) 
    border: 2px solid #FFF;  Bordo del campo di gioco 
    background-color: #000;  Campo nero 
    margin-bottom: 20px;  Spazio prima della classifica 
}*/

#game-area {
    position: relative;
    width: 95vw;  /* Inizialmente, larghezza basata sulla viewport width */
    max-width: 600px; /* Max per desktop */
    height: 400px;  /* Altezza di base per desktop o portrait */
    /* L'altezza effettiva sarà gestita da JS per mantenere l'aspect ratio o adattarsi */
    border: 2px solid #FFF;
    background-color: #000;
    margin-bottom: 20px;
    /* Rimuovi aspect-ratio qui, JS lo gestirà in modo più flessibile */
}

#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

#touch-instructions-pong { /* Se hai aggiunto l'elemento HTML */
    color: #ccc;
}

#message-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FFF;
    font-size: 1.2em;
    padding: 20px;
    box-sizing: border-box;
    z-index: 10;
    cursor: pointer; /* Indica che è cliccabile quando visibile */
}
#message-overlay.visible {
    display: flex;
}
#message-overlay p {
    margin: 0;
    padding: 15px;
    background-color: #FFF;
    color: #000;
    border-radius: 0;
}

button#refresh-records-button {
    /* Stili simili agli altri giochi, ma bianco su nero */
    background-color: #FFF;
    color: #000;
    border: 2px outset #888;
    padding: 8px 15px;
    font-size: 0.9em;
}
button#refresh-records-button:hover {
    background-color: #DDD;
}

.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 query per schermi piccoli in portrait (verticale) */
@media (max-width: 640px) and (orientation: portrait) {
    .container {
        padding: 5px 0; /* Meno padding laterale */
        border-left: none;
        border-right: none;
    }
    #game-area {
        width: 98vw; /* Quasi tutta la larghezza */
        /* L'altezza sarà calcolata da JS per mantenere un aspect ratio, es. 4:3 o 3:2 */
        /* height: auto; non funziona bene con canvas, JS deve impostarla */
        max-height: 60vh; /* Limita l'altezza in portrait per lasciare spazio a score/etc. */
    }
    /* ... (altri aggiustamenti per font, ecc.) ... */
}

/* Media query per schermi piccoli in landscape (orizzontale) */
/* Questa media query ora è più specifica per quando header/footer sono nascosti */
@media (orientation: landscape) and (max-height: 500px) {
    #game-area {
        width: 100vw;  /* Occupa tutta la larghezza disponibile */
        height: 100vh; /* Occupa tutta l'altezza disponibile */
        max-width: none; /* Rimuovi max-width */
        border: none; /* Rimuovi il bordo per un look fullscreen */
        margin-bottom: 0;
    }
    #score-board { /* Sposta lo scoreboard sopra il canvas in landscape */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 5; /* Sopra il canvas ma sotto l'overlay dei messaggi */
        background-color: rgba(0,0,0,0.5); /* Sfondo semi-trasparente */
        font-size: 1em; /* Riduci un po' il font score */
        padding: 5px 0;
        border-bottom: none; /* Rimuovi bordo se sopra il canvas */
    }
     #message-overlay { /* Assicurati che l'overlay sia ancora utilizzabile */
        font-size: 1em; /* Adatta font size messaggio */
    }
}


@media (max-width: 640px) {
    .container {
        max-width: 100%;
        padding: 10px;
    }
    #game-area {
        /* L'altezza potrebbe dover diventare dinamica o il rapporto d'aspetto gestito da JS */
        /* Per ora manteniamo altezza fissa e la larghezza si adatta */
        height: 300px; /* Riduci altezza su schermi più piccoli */
    }
    header h1 { font-size: 1.5em; }
    #score-board { font-size: 1.2em; }
    #message-overlay p { font-size: 1em; }
}