/* ============================================================================
   IL GIOCO DEI QUADRATI (Dots and Boxes) - Stili CSS
   Stesso feltro verde e stessa impaginazione 1024x750 degli altri giochi del
   sito (Campo Minato, Sudoku, Calcolo Enigmatico): colonna di sinistra per la
   griglia, colonna di destra per record e comandi.
   ============================================================================ */

/* === BASE & LAYOUT === */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1a5f2a;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* === SIDEBARS (per AdSense e layout) === */
.sidebar {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(135deg, #1a6b30 0%, #145524 50%, #0f4a1c 100%);
    overflow-y: auto;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    transition: opacity 0.3s ease;
}
#sidebar-left { left: 0; }
#sidebar-right { right: 0; }

/* === CAMPO DI GIOCO === */
#campogioco {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1024px;
    height: 750px;
    background: linear-gradient(135deg, #1a6b30 0%, #145524 50%, #0f4a1c 100%);
    background-image: url(images/scala40/tappetoverde.png);
    transform-origin: center center;
    border-radius: 10px;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* === SCHERMO OVERLAY === */
#schermo {
    position: absolute;
    top: 0;
    left: 0;
    width: 1024px;
    height: 750px;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 30000;
    display: none;
}

/* === TITOLO E BARRA SUPERIORE === */
#titolo-gioco {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffd700;
    font-size: 26px;
    font-family: 'Slackey', 'Outfit', sans-serif;
    font-weight: bold;
    z-index: 1000;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}

/* Centrato sulla colonna della griglia (asse x=340), non sul campo intero: la
   meta' destra e' occupata dal pannello dei comandi, e un messaggio centrato a
   512 finirebbe a cavallo fra le due colonne invece che sopra la cosa che
   commenta. Stesso valore del left di #area-griglia: se cambia uno, va cambiato
   anche l'altro. */
#messaggio-stato {
    position: absolute;
    top: 50px;
    left: 340px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background: rgba(0, 40, 10, 0.6);
    padding: 6px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 100;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    white-space: normal;
    max-width: 560px;
    width: max-content;
    line-height: 1.35;
    transition: background-color 0.2s, color 0.2s;
}

.lang-switch-header {
    position: absolute;
    top: 8px;
    left: 230px;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lang-switch-header a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 32px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s;
    box-sizing: border-box;
}
.lang-switch-header a.active {
    background: #ffd700;
    color: #1a1a2e;
    border-color: #b8860b;
}
.lang-switch-header a:hover:not(.active) {
    background: rgba(255, 255, 255, 0.3);
}

.btn-audio-game {
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-audio-game:hover {
    background-color: rgba(255, 255, 255, 0.25);
}
.btn-audio-game.muted {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.21.05-.42.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
}

#btn-audio {
    position: relative;
    z-index: 10001;
}

.pulsante-top {
    height: 32px;
    line-height: 32px;
    background: rgba(0,0,0,0.4);
    border: 1px solid #6b9b7a;
    color: white;
    border-radius: 4px;
    padding: 0 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s;
    box-sizing: border-box;
}
.pulsante-top:hover {
    background: rgba(0, 60, 20, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
}
a.pulsante-top {
    display: inline-block;
    text-decoration: none;
}

.link-utility-bottom {
    position: absolute;
    top: 8px;
    left: 15px;
    display: flex;
    gap: 6px;
    z-index: 10001;
}

/* === PANNELLO RECORD ===
   Qui non c'e' un tempo da battere: il tempo dipende soprattutto da quanto ci
   mette l'avversario a muovere, e giocare in fretta e' il modo migliore per
   regalare caselle. Si tiene quindi il bilancio delle partite (vinte su
   giocate) e il miglior scarto con cui si e' vinto. */
#pannello-record {
    position: absolute;
    top: 10px;
    left: 680px;
    width: 290px;
    z-index: 50;
    background: rgba(0, 40, 10, 0.55);
    border: 2px solid rgba(100, 160, 110, 0.35);
    border-radius: 10px;
    padding: 8px 14px 10px;
    box-sizing: border-box;
    color: #fff;
}
.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    color: #aed6ae;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
/* I record sono per livello di difficolta': senza dirlo, una vittoria contro il
   computer Facile accanto a una contro il Difficile sembrerebbe un confronto,
   e non lo e'. */
#record-diff {
    color: #ffd700;
}
.btn-reset-record {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ccc;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    padding: 2px 8px;
    margin-top: 3px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 32px;
}
.btn-reset-record:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
.btn-reset-record.conferma {
    background: #cc0c39;
    color: #fff;
    border-color: #990022;
    font-weight: bold;
}
.record-righe {
    display: flex;
    justify-content: space-between;
}
.record-righe .info-blocco {
    text-align: center;
    flex: 1;
}
.record-righe .info-label {
    font-size: 11px;
    color: #aed6ae;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.record-valore {
    font-size: 16px;
    font-weight: bold;
    color: #7fd4ff;
    margin-top: 2px;
}

/* === GRIGLIA DEI QUADRATI ===
   Non ha misure fisse: righe, colonne e passo cambiano col formato e li scrive
   quadrati.js. Qui si fissa solo dove sta il blocco. Il centraggio e' su
   entrambi gli assi nel rettangolo libero 0..680 x 108..688: i formati vanno da
   5x5 a 14x12, e con una posizione fissa ognuno lascerebbe il vuoto in un punto
   diverso del tavolo.
   L'asse x=340 e' lo stesso di #messaggio-stato: se cambia uno, cambiare
   anche l'altro. */
#area-griglia {
    position: absolute;
    top: 398px;
    left: 340px;
    transform: translate(-50%, -50%);
    z-index: 50;
    /* Il padding lascia respirare i puntini di bordo, che sono centrati sugli
       incroci e quindi sporgono di meta' diametro fuori dalla griglia. */
    padding: 18px;
    background: rgba(255, 250, 235, 0.94);
    border: 4px solid #14301c;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    user-select: none;
}

/* Il reticolo del foglio a quadretti. La maglia e' quella VERA della partita:
   un quadretto = una casella di gioco. La misura non puo' stare qui perche' il
   passo cambia col formato (109px sul piccolo, 49px sul grande), quindi il
   background-size lo scrive costruisciGriglia() insieme a width e height.
   Una trama piu' fitta del passo, come i 16px fissi che c'erano prima, si legge
   come una seconda griglia sovrapposta a quella dei punti: da evitare. */
#griglia-quadrati {
    position: relative;
    background-image:
        linear-gradient(to right, rgba(120, 150, 190, 0.30) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120, 150, 190, 0.30) 1px, transparent 1px);
}

/* === CASELLE ===
   Sono lo sfondo che si colora quando qualcuno chiude il quarto lato. Stanno
   sotto ai lati e ai puntini nell'ordine di inserimento, quindi non serve
   z-index: bastano le regole del flusso. */
.casella-quad {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-family: 'Slackey', 'Outfit', sans-serif;
    color: transparent;
    box-sizing: border-box;
    transition: background-color 0.25s;
    pointer-events: none;   /* i click devono arrivare ai lati, non alle caselle */
}
/* Le due iniziali dentro la casella, come sul foglio a quadretti. Non e' solo
   decorazione: distingue i due giocatori anche per chi non separa bene il blu
   dal rosso, che e' proprio la coppia di colori usata qui. */
.casella-quad.tua {
    background: rgba(41, 98, 190, 0.30);
    color: #1a4fa0;
    animation: conquista 0.35s ease;
}
.casella-quad.pc {
    background: rgba(200, 30, 55, 0.26);
    color: #a01028;
    animation: conquista 0.35s ease;
}
@keyframes conquista {
    0%   { transform: scale(0.55); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* === LATI ===
   L'area cliccabile e' piu' generosa del tratto disegnato: col formato grande
   il passo scende a 48px e un tratto da 6px sarebbe difficile da centrare col
   mouse. Il trucco e' un elemento alto/largo quanto serve per essere preso, con
   il tratto vero disegnato dallo ::after al centro. */
.lato-quad {
    position: absolute;
    cursor: pointer;
    background: transparent;
    z-index: 2;
}
.lato-quad::after {
    content: '';
    position: absolute;
    border-radius: 3px;
    background: transparent;
    transition: background-color 0.15s;
}

/* Orizzontale: l'elemento e' alto 18px e centrato sulla linea (da qui il -9px),
   il tratto e' alto 6px e centrato dentro l'elemento. */
.lato-quad.lato-h {
    height: 18px;
    margin-top: -9px;
}
.lato-quad.lato-h::after {
    left: 3px;
    right: 3px;
    top: 6px;
    height: 6px;
}

/* Verticale: stessa costruzione ruotata di 90 gradi. */
.lato-quad.lato-v {
    width: 18px;
    margin-left: -9px;
}
.lato-quad.lato-v::after {
    top: 3px;
    bottom: 3px;
    left: 6px;
    width: 6px;
}

/* Anteprima al passaggio del mouse: solo sui lati ancora liberi. Con i puntini
   fitti serve a capire QUALE lato si sta per tracciare prima di cliccare, che
   e' l'errore piu' facile da fare in questo gioco. */
.lato-quad:not(.tracciato):hover::after {
    background: rgba(120, 120, 120, 0.45);
}

.lato-quad.tracciato {
    cursor: default;
}
.lato-quad.tuo::after { background: #2962be; }
.lato-quad.pc::after  { background: #c81e37; }

/* L'ultima mossa e' evidenziata: su una griglia grande, con il computer che
   incatena piu' chiusure di fila, senza un segnale non si capisce dove sia
   intervenuto. Il bagliore sparisce alla mossa successiva.
   Tre effetti sovrapposti, perche' uno solo non bastava a farla risaltare fra
   gli altri lati dello stesso colore: il tratto si ingrossa, un bordo bianco lo
   stacca dal colore sotto, e l'alone dorato pulsa per qualche secondo. Il
   colore del giocatore resta comunque leggibile: si evidenzia il tratto, non lo
   si ricolora. */
.lato-quad.ultimo::after {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.95),
        0 0 10px 3px rgba(255, 215, 0, 1),
        0 0 20px 6px rgba(255, 190, 0, 0.65);
    border-radius: 3px;
    animation: pulsaUltimo 1.1s ease-in-out 3;
}
/* Il contenitore sale sopra i puntini (z-index 3), altrimenti l'alone dorato
   passerebbe sotto i punti d'incrocio proprio ai due estremi del tratto, che e'
   dove si guarda per capire quale lato e' stato appena tracciato. */
.lato-quad.ultimo {
    z-index: 4;
}
/* Il tratto dell'ultima mossa e' piu' spesso degli altri: 10px invece di 6,
   restando centrato sulla linea (da qui i 4px di offset invece di 6). */
.lato-quad.lato-h.ultimo::after {
    top: 4px;
    height: 10px;
}
.lato-quad.lato-v.ultimo::after {
    left: 4px;
    width: 10px;
}

@keyframes pulsaUltimo {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.95),
            0 0 10px 3px rgba(255, 215, 0, 1),
            0 0 20px 6px rgba(255, 190, 0, 0.65);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 1),
            0 0 16px 5px rgba(255, 215, 0, 1),
            0 0 30px 10px rgba(255, 190, 0, 0.9);
    }
}

/* === PUNTINI ===
   Stanno sopra a tutto e non ricevono click: sono il riferimento visivo della
   griglia, non un bersaglio. Il translate li centra sull'incrocio. */
.puntino-quad {
    position: absolute;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #2c3e50;
    pointer-events: none;
    z-index: 3;
}

/* === PANNELLO LATERALE DESTRO ===
   Larga 300 come in Campo Minato e Calcolo Enigmatico, cosi' il riquadro
   affiliati e' un 300x250 pulito. Il campo e' 1024, quindi la colonna chiude a
   975 con 49px di aria a destra. */
#pannello-controlli {
    position: absolute;
    top: 118px;
    left: 675px;
    width: 300px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#info-partita {
    background: rgba(0, 40, 10, 0.55);
    border: 2px solid rgba(100, 160, 110, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 14px;
}
#info-partita .info-blocco {
    text-align: center;
    flex: 1;
}
#info-partita .info-label {
    font-size: 11px;
    color: #aed6ae;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#info-partita .info-valore {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    margin-top: 2px;
    white-space: nowrap;
}
/* Chi e' in testa si evidenzia: su una griglia grande contare le caselle a
   occhio e' scomodo proprio quando la partita si fa tesa. */
#info-partita .info-valore.in-testa {
    color: #7dff9a;
}
/* Il turno e' l'informazione che serve piu' spesso ed e' la prima che si perde
   quando il computer incatena molte chiusure di fila. */
#info-partita .info-valore.turno-tuo { color: #7fd4ff; font-size: 15px; }
#info-partita .info-valore.turno-pc  { color: #ff9f43; font-size: 15px; }
/* Il formato puo' essere una parola ("Piccolo") o una misura ("12×14"):
   entrambe stanno nel blocco, ma la parola e' la piu' lunga delle due. */
#info-partita #info-formato { font-size: 15px; }

/* === LEGENDA ===
   Il gioco ha due sole regole, ma la seconda (chi chiude rigioca) e' quella che
   decide le partite ed e' proprio quella che chi non ci ha mai giocato non si
   aspetta. Scritta qui, evita di dover aprire le regole. */
#legenda {
    background: rgba(0, 40, 10, 0.55);
    border: 2px solid rgba(100, 160, 110, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    color: #cde8cd;
    font-size: 12px;
    line-height: 1.5;
}
#legenda b { color: #ffd700; }

#btn-nuova-partita {
    height: 56px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1a1a2e;
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
    border: 2px solid #ffd700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    font-family: 'Segoe UI', sans-serif;
}
#btn-nuova-partita:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3);
}

/* Riquadro affiliati rotante, ultimo elemento della colonna dei comandi.
   Stessa misura degli altri giochi. Il pannello e' un flex in colonna, quindi
   la posizione la decide il flusso: sta sotto NUOVA PARTITA e resta sopra la
   barra dei link. */
#banner-rotante {
    width: 300px;
    height: 250px;
    box-sizing: border-box;
    border-radius: 6px;
    overflow: hidden;
    /* Fondo scuro come gli altri pannelli: si vede nell'istante fra il
       caricamento della pagina e il primo prodotto disegnato. */
    background: rgba(0, 40, 10, 0.55);
    border: 2px solid rgba(100, 160, 110, 0.35);
}

/* === MODALI E DIALOGHI === */
.form-quadrati {
    z-index: 40000;
    position: absolute;
    width: 500px;
    height: 560px;
    left: 262px;
    top: 95px;
    background-color: #1a4224;
    background-image: url(images/scala40/tappetoverde.png);
    border: 4px solid #b8860b;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 22px 25px;
    color: white;
    overflow: hidden;
}

.form-quadrati-title {
    font-family: 'Slackey', 'Outfit', sans-serif;
    font-size: 24px;
    color: #ffd700;
    margin-bottom: 14px;
    text-shadow: 2px 2px 4px #000;
    text-align: center;
}

#modale-inizio {
    justify-content: flex-start;
}

/* Vie di fuga dalla modale d'inizio: la modale copre il campo, quindi il
   cambio lingua e i due link della fascia in basso vanno replicati qui dentro,
   altrimenti chi arriva sulla pagina non li vede finche' non inizia a giocare.
   Gli id nell'HTML sono distinti da quelli in campo: due elementi con lo
   stesso id romperebbero getElementById e la validita' del documento. */
.lang-switch-modale {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    gap: 4px;
    z-index: 1;
}
.lang-switch-modale a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    height: 24px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s;
    box-sizing: border-box;
}
.lang-switch-modale a.active {
    background: #ffd700;
    color: #1a1a2e;
    border-color: #b8860b;
}
.lang-switch-modale a:hover:not(.active) {
    background: rgba(255, 255, 255, 0.3);
}

.btn-angolo-modale {
    position: absolute;
    bottom: 10px;
    height: 24px;
    line-height: 22px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #6b9b7a;
    color: white;
    transition: all 0.2s;
}
.btn-angolo-modale:hover {
    background: rgba(0, 60, 20, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
}
.btn-angolo-modale.sinistra { left: 12px; }
.btn-angolo-modale.destra   { right: 12px; }

/* TUTTI I GIOCHI si riconosce dal colore anche qui dentro: stesso arancio
   del gemello nella fascia in fondo alla pagina (.pulsante-home-quadrati). */
.btn-angolo-modale.home {
    background: linear-gradient(135deg, #c9720f, #8a4a08);
    border-color: #ffd700;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}
.btn-angolo-modale.home:hover {
    background: linear-gradient(135deg, #e08514, #a3580a);
    border-color: #ffd700;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.65);
}

/* Intestazione di ogni gruppo di scelte nel modale di avvio */
.gruppo-label {
    font-size: 11px;
    color: #aed6ae;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 7px;
    text-align: center;
}

.btn-opzione-sel {
    background: #1f4068;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    opacity: 0.55;
    filter: blur(0.5px);
}
.btn-opzione-sel.attiva {
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
    border: 2px solid #ffd700;
    color: #1a1a2e;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    opacity: 1;
    filter: none;
}
.btn-opzione-sel:hover {
    opacity: 0.85;
    filter: none;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.btn-opzione-sel.attiva:hover {
    filter: brightness(1.1);
    opacity: 1;
}

/* I quattro formati su una riga sola: tre fissi piu' il libero. Il "libero" e'
   in fondo perche' e' l'unico che apre altri comandi sotto di se'. */
.riga-formati {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    width: 100%;
    margin-bottom: 6px;
}
.riga-formati .btn-opzione-sel {
    padding: 8px 4px;
    font-size: 12px;
}
/* Il sottotitolo dice quanti quadretti sono: si sceglie con cognizione di causa
   senza dover contare i puntini a partita gia' iniziata. */
.formato-dettaglio {
    font-size: 10px;
    display: block;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
    opacity: 0.85;
}

/* Riquadro delle dimensioni libere: compare solo scegliendo FORMATO LIBERO.
   Mostrarlo sempre farebbe credere che valga anche per i tre formati fissi. */
#opzione-libero {
    background: rgba(0, 40, 10, 0.55);
    border: 2px solid rgba(100, 160, 110, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
    display: none;
    margin-bottom: 6px;
}
.libero-riga {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #cde8cd;
    font-size: 13px;
}
.libero-riga select {
    background: #1f4068;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 6px;
    cursor: pointer;
}
.libero-nota {
    display: block;
    text-align: center;
    color: #9dbfa4;
    font-size: 11px;
    font-style: italic;
    margin-top: 6px;
}

.riga-difficolta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 6px;
}

/* I gruppi del modale sono separati da uno spazio uniforme; il blocco delle
   dimensioni libere compare e sparisce, quindi la spaziatura non puo' essere
   fissa sul contenitore ma sta su ogni gruppo. */
.gruppo-scelta {
    width: 100%;
    margin-bottom: 14px;
}

.btn-continua {
    padding: 10px 30px;
    font-size: 15px;
    font-weight: bold;
    color: #2c3e50;
    background: #ffd700;
    border: 2px solid #b8860b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn-continua:hover {
    background: #fff;
    transform: scale(1.05);
}

/* Modale conferma nuova partita: bassa e larga, con banner pubblicitario sopra */
#confermatermina.modale-conferma {
    width: 700px;
    height: 180px;
    left: 162px;
    top: 470px;
    padding: 24px 25px;
    justify-content: center;
    overflow: visible; /* il banner sporge sopra la modale */
}
.conferma-bottoni {
    display: flex;
    justify-content: center;
    gap: 24px;
}

/* Modale di fine partita: bassa e larga, con banner sopra. Non copre la griglia
   perche' la prima cosa che si guarda a fine partita e' com'e' finita la
   spartizione delle caselle. */
#modale-fine.modale-fine {
    width: 700px;
    height: 230px;
    left: 162px;
    top: 420px;
    padding: 20px 25px;
    justify-content: center;
    overflow: visible;
}
/* Il bordo dice l'esito prima ancora che si legga il testo. */
#modale-fine.esito-vittoria  { border-color: #ffd700; }
#modale-fine.esito-sconfitta { border-color: #990022; }
#modale-fine.esito-pari      { border-color: #7fd4ff; }

.confirm-message {
    font-family: 'Slackey', 'Outfit', sans-serif;
    font-size: 24px;
    color: white;
    text-align: center;
    margin-bottom: 16px;
    text-shadow: 2px 2px 4px #000;
    padding: 0 20px;
}
#fine-dettagli {
    font-size: 15px;
    color: #ffd700;
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.5;
}
/* Il conto delle caselle regalate: e' la statistica che insegna a giocare, ma e'
   un rimprovero, quindi sta in piccolo e in secondo piano rispetto al punteggio. */
.fine-nota {
    font-size: 12px;
    color: #ff9f43;
    font-style: italic;
}

/* === LINK A FONDO PAGINA === */
.legal-links-quadrati {
    position: absolute;
    bottom: 12px;
    left: 15px;
    display: flex;
    gap: 8px;
    z-index: 100;
    align-items: center;
}
.legal-links-quadrati a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 11px;
    font-family: sans-serif;
    transition: color 0.2s;
}
.legal-links-quadrati a:hover {
    color: #ffd700;
}
.legal-links-quadrati .sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
}

.link-giochi-quadrati {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 100;
}
.pulsante-link-quadrati {
    background-color: rgba(0, 40, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #ccc;
    font-size: 11px;
    padding: 4px 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.pulsante-link-quadrati:hover {
    color: #fff;
    background-color: rgba(0, 60, 20, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
}

.pulsante-home-quadrati {
    background: linear-gradient(135deg, #c9720f, #8a4a08);
    border-color: #ffd700;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}
.pulsante-home-quadrati:hover {
    color: #fff;
    background: linear-gradient(135deg, #e08514, #a3580a);
    border-color: #ffd700;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.65);
}