/* style_memory.css */
body {
    font-family: 'Press Start 2P', cursive, sans-serif;
    background-color: #1a1a2e; /* Blu notte scuro invece di #222 */
    color: #9f9; /* Verde leggermente più chiaro */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    background-color: #0f0f1a; /* Blu notte molto scuro per il container */
    border: 3px ridge #505070; /* Bordo più "solido" e diverso */
    padding: 25px;
    border-radius: 10px; /* Angoli più arrotondati */
    box-shadow: 0 0 20px #7070f0aa; /* Ombra tendente al viola/blu */
    width: 100%;
    max-width: 900px; /* Leggermente più largo */
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 2px dashed #505070; /* Linea tratteggiata per separare */
    padding-bottom: 15px;
    width: 100%;
}

header h1 {
    font-size: 2.2em; /* Leggermente più grande */
    margin-bottom: 15px;
    text-shadow: 3px 3px #202040; /* Ombra più scura per il testo blu */
    color: #ccf; /* Testo del titolo più chiaro, tendente al lavanda */
}

.language-selector {
    margin-top: 10px;
    font-size: 0.8em;
}

#lang-select {
    background-color: #202040; /* Sfondo più scuro per select */
    color: #9f9;
    border: 1px solid #505070;
    font-family: inherit;
    padding: 5px;
    border-radius: 3px;
}

main {
    text-align: center;
    width: 100%;
    display: flex; /* Per layout a colonne: plancia a sx, info a dx */
    flex-wrap: wrap; /* Permette alle colonne di andare a capo su schermi piccoli */
    justify-content: space-around; /* Spazio tra plancia e info */
    align-items: flex-start; /* Allinea in alto */
    gap: 20px; /* Spazio tra la plancia e le info/controlli */
}

#game-board {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 2px solid #505070; /* Bordo più spesso per la plancia */
    background-color: #181825; /* Sfondo leggermente diverso per la plancia */
    border-radius: 8px;
    /* Calcola le colonne in base al numero di coppie (es. 8 coppie = 16 carte -> 4x4) */
    /* grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); Mantenuto da prima, va bene */
    flex: 3; /* La plancia occupa più spazio */
    min-width: 320px; /* Larghezza minima per la plancia */
    max-width: 600px; /* Limita la larghezza massima della plancia per non diventare troppo larga */
    margin: 0; /* Rimuovi margin auto se flessibile */
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Aumenta la larghezza minima per cella */
}

/* Stile delle carte (invariato rispetto alle correzioni precedenti per il flip) */
/* ... .card, .card-inner, .card-face, .card-front, .card-back ... */
.card {
    width: 100%;
/*    height: 100px;*/
    aspect-ratio: 1 / 1; /* Mantiene le carte quadrate */
    min-height: 90px;  /* Altezza minima, per sicurezza se aspect-ratio non è supportato */
    perspective: 1000px;
    cursor: pointer;
    position: relative;
}
/* Assicurati che gli stili di .card-front, .card-back, .card.is-flipped siano quelli corretti dalla sezione 1 */
.card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
/*    top: 0;
    left: 0;*/
}

.card.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
/*    font-size: 1.2em;*/
    padding: 5px;
    box-sizing: border-box;
    word-break: break-word;
    text-align: center;
    overflow: hidden;
}

.card-front {
    background-color: #252535; /* Sfondo carte più scuro */
    color: #9f9;
    border: 2px solid #505070;
    transform: rotateY(180deg);
    z-index: 2; /* Il fronte ha uno z-index più alto, quindi dovrebbe essere sopra quando visibile */
    font-size: 1em; /* Riduci leggermente il font se necessario, vedi punto 2 */
    display: flex; /* Assicura che il testo sia centrato */
    align-items: center;
    justify-content: center;
    padding: 8px; /* Aumenta leggermente il padding interno se le carte sono più grandi */
}

.card-back {
    background-color: #9f9; /* Dorso verde chiaro */
    color: #1a1a2e; /* Testo scuro sul dorso */
    border: 2px solid #7a7a9a;
    font-size: 3em; /* Dimensione del '?' */
    /* transform: rotateY(0deg); Non serve */
    z-index: 1; /* Il dorso ha uno z-index più basso */
    display: flex; /* Assicura che il ? sia centrato */
    align-items: center;
    justify-content: center;
}

/* Quando la carta è girata, assicuriamoci che il front sia "sopra" */
.card.is-flipped .card-front {
    /* z-index: 2; */ /* Se necessario, per forzare il front in primo piano */
}
.card.is-flipped .card-back {
    /* z-index: 1; */ /* E il back dietro */
}

/* Stile per le carte trovate */
.card.is-matched .card-face {
    background-color: #afa; /* Verde più brillante per le carte trovate */
    color: #111;
    border-color: #5f5;
    transition: background-color 0.5s ease, border-color 0.5s ease, transform 0.3s scale(1.05);
}

.card.is-matched .card-inner {
     pointer-events: none;
}

#game-info-controls { /* Nuovo contenitore per info e bottone nuova partita */
    flex: 1; /* Occupa lo spazio rimanente */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background-color: #181825; /* Sfondo simile alla plancia */
    border-radius: 8px;
    border: 1px dashed #505070;
    min-width: 200px; /* Larghezza minima */
}
#game-info {
    margin-top: 0; /* Rimosso margine superiore dato che è in un flex container */
    margin-bottom: 20px; /* Spazio prima del bottone */
    font-size: 1em; /* Leggermente più grande */
    min-height: 30px;
    width: 100%; /* Occupa larghezza del suo container */
}

#message-area {
     min-height: 30px;
     margin-bottom: 15px; /* Spazio sotto i messaggi */
}

#game-message { /* Stili per il messaggio di gioco (colore e sfondo) */
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  width: calc(100% - 20px); /* Occupa larghezza meno padding */
  box-sizing: border-box;
}

#game-message.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#game-message.win {
    color: #111;
    background-color: #afa; /* Verde brillante per vittoria */
    box-shadow: 0 0 10px #afa;
}

#game-message.lose {
    color: #111;
    background-color: #f88; /* Rosso più chiaro per messaggi di errore */
    box-shadow: 0 0 10px #f88;
}


button#new-game-button, button#refresh-records-button {
    font-family: 'Press Start 2P', cursive;
    background-color: #9f9; /* Colore primario per i bottoni */
    color: #1a1a2e; /* Colore del testo scuro */
    border: 2px outset #7a7a9a; /* Bordo che dà effetto 3D */
    padding: 12px 25px; /* Padding maggiore */
    font-size: 1em;
    cursor: pointer;
    margin-top: 10px; /* Ridotto margine, gestito dal flex container */
    /* display: block; non più necessario con flex */
    /* margin-left: auto; */
    /* margin-right: auto; */
    transition: background-color 0.2s, box-shadow 0.2s;
}
button#new-game-button:hover, button#refresh-records-button:hover {
    background-color: #bfb; /* Verde più chiaro al hover */
    box-shadow: 0 0 10px #9f9;
}
button#new-game-button:active, button#refresh-records-button:active {
    border-style: inset; /* Effetto premuto */
}


.records-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px dashed #505070;
    width: 100%;
    max-width: 700px; /* Limita larghezza classifica */
    align-self: center; /* Centra la sezione record se il container è flex */
}

.records-section h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #ccf; /* Titolo classifica come il titolo principale */
}

#records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em; /* Leggermente più grande */
    background-color: #181825;
    border: 1px solid #505070;
}

#records-table th, #records-table td {
    border: 1px solid #505070;
    padding: 10px; /* Più padding nelle celle */
    text-align: left;
}

#records-table th {
    background-color: #202040; /* Sfondo header tabella */
    color: #ccf;
}

#records-table tbody tr:nth-child(odd) {
    background-color: #181825;
}
#records-table tbody tr:nth-child(even) {
    background-color: #0f0f1a;
}

/* Media Query per schermi più piccoli */
@media (max-width: 768px) {
    main {
        flex-direction: column; /* Impila plancia e info su schermi piccoli */
        align-items: center; /* Centra gli elementi impilati */
    }
    #game-board {
        flex: none; /* Rimuovi flex grow */
        width: 95%; /* Occupa quasi tutta la larghezza */
        max-width: 450px; /* Ma non troppo */
        margin-bottom: 20px;
    }
    #game-info-controls {
        flex: none; /* Rimuovi flex grow */
        width: 90%; /* Larghezza per info e controlli */
        max-width: 350px;
    }
    .container {
        padding: 15px;
    }
    header h1 {
        font-size: 1.8em;
    }
}

@media (max-width: 480px) {
    .card {
/*        height: 80px;  Riduci altezza carte su schermi molto piccoli */
        min-height: 70px;
    }
    #game-board {
        gap: 8px; /* Riduci gap tra le carte */
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    }
        .card-front {
        font-size: 0.9em; /* Riduci ulteriormente il font su schermi molto piccoli */
        padding: 5px;
    }
    .card-back {
        font-size: 2.5em;
    }
    header h1 {
        font-size: 1.5em;
    }
    button#new-game-button, button#refresh-records-button {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    #records-table {
        font-size: 0.75em;
    }
    #records-table th, #records-table td {
        padding: 6px;
    }
}