/* ============================================================================
   BATTAGLIA NAVALE (solitario logico) - Stili CSS
   Stile feltro verde Burraco/Scopa con layout 1024x750px, come Calcolo
   Enigmatico e Campo Minato.
   ============================================================================ */

/* === 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: 4px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffd700;
    /* 21 e non 24: "Battaglia Navale Solitario" su una riga sola arrivava a
       sfiorare il pannello dei record, che comincia a x=702. */
    font-size: 21px;
    font-family: 'Slackey', 'Outfit', sans-serif;
    font-weight: bold;
    z-index: 1000;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 1.12;
}

/* Fascia dei messaggi: subito sotto il titolo e larga quanto la colonna di
   gioco. Stava di fianco alla griglia, dentro la legenda, ma li' rubava
   larghezza al mare e finiva per coprirlo. */
#messaggio-stato {
    position: absolute;
    top: 56px;
    left: 35px;
    width: 640px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    background: rgba(0, 40, 10, 0.6);
    padding: 6px 10px;
    border-radius: 10px;
    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;
    box-sizing: border-box;
    line-height: 1.3;
    transition: background-color 0.2s, color 0.2s;
}
#messaggio-stato.msg-giallo {
    background: #ffd700;
    color: #1a1a2e;
    border-color: #b8860b;
    text-shadow: none;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}
#messaggio-stato.msg-rosso {
    background: #cc0c39;
    color: #fff;
    border-color: #990022;
    text-shadow: none;
    box-shadow: 0 0 15px rgba(204, 12, 57, 0.5);
}

/* Attesa dentro la modale di avvio: la generazione con verifica di unicita'
   puo' durare qualche secondo, e #messaggio-stato sta nel campo di gioco, che
   in quel momento e' coperto dalla modale.
   Sulla griglia grande l'attesa puo' arrivare a qualche secondo con la pagina
   che non risponde: senza un avviso ben visibile sembra un blocco del gioco,
   quindi qui si esagera apposta con corpo grande e riquadro acceso. Il
   sottotitolo "attendere" e' la parte che rassicura davvero, perche' dice che
   l'attesa e' prevista. */
#msg-generazione {
    font-size: 22px;
    font-weight: bold;
    color: #ffd700;
    text-align: center;
    margin: 0 auto 15px auto;
    padding: 14px 18px;
    max-width: 300px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.25;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid #ffd700;
    border-radius: 10px;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.45);
    text-shadow: 1px 1px 3px #000;
    animation: msgGenPulsa 1.1s ease-in-out infinite;
}
/* Il pulsare e' la prova continua che il gioco e' vivo: un avviso fermo, con la
   pagina che non risponde, si confonde con una schermata piantata. */
@keyframes msgGenPulsa {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
#msg-generazione .msg-gen-attendere {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    letter-spacing: 2px;
    color: #fff;
}
/* L'errore e' un messaggio fermo, non un'attesa: niente pulsare. */
#msg-generazione.msg-errore {
    color: #ff7b72;
    border-color: #ff7b72;
    box-shadow: 0 0 14px rgba(255, 123, 114, 0.45);
    animation: none;
}

.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 === */
/* Geometria identica al Calcolo: la colonna destra sta a left 702 ed e' larga
   300, cioe' esattamente il formato pubblicitario che le va sotto. */
#pannello-record {
    position: absolute;
    top: 10px;
    left: 702px;
    width: 300px;
    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;
}
.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 DEL MARE ===
   Il contenitore e' centrato su una fascia fissa: il lato della griglia cambia
   con la difficolta' (6, 8 o 10 caselle) e le misure delle celle sono decise
   dal JS, quindi qui si fissa solo la scatola in cui la griglia si centra. Cosi'
   una partita piccola non lascia il mare appiccicato in alto a sinistra. */
#zona-griglia {
    position: absolute;
    top: 92px;
    left: 35px;
    width: 640px;
    height: 500px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
#griglia-navale {
    display: grid;
    gap: 2px;
    /* Cornice del mare: stacca la griglia dal feltro e regge i numeri di bordo,
       che senza uno sfondo proprio si perderebbero sul verde. */
    background: rgba(0, 30, 55, 0.55);
    border: 3px solid #b8860b;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.35);
}

.nav-angolo {
    /* incrocio fra le due intestazioni: resta vuoto */
}

/* Numeri di bordo: quante caselle di nave ci sono in quella riga o colonna.
   Sono l'enunciato del problema, non una cornice: senza un fondo proprio si
   leggevano come decorazione (stesso oro del titolo e dei record) e si faceva
   fatica a capire che erano l'indizio principale. Il fondo scuro li lega al
   mare e li stacca dal feltro, ma resta piu' spento delle caselle su cui si
   clicca, che hanno un bordo e un gradiente piu' vivo. */
.nav-conto {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: bold;
    color: #ffd700;
    background: rgba(0, 20, 40, 0.5);
    border-radius: 4px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
    transition: color 0.2s, opacity 0.2s;
}
/* Conto soddisfatto: il numero si spegne. Non e' una conferma che la riga sia
   giusta (le caselle potrebbero essere quelle sbagliate), e' solo aritmetica:
   serve a non ricontare ogni volta le righe gia' a posto. */
.nav-conto.conto-fatto {
    color: #7ee787;
    opacity: 0.55;
}
/* Il conto non torna piu': troppe navi, o troppo poche caselle libere per
   arrivarci. E' una spia che non guarda la soluzione, quindi resta accesa anche
   con la segnalazione errori spenta. */
.nav-conto.conto-sforato {
    color: #ff7b72;
    text-shadow: 0 0 10px rgba(255, 123, 114, 0.8);
}

/* === CASELLA DEL MARE === */
.nav-cella {
    box-sizing: border-box;
    position: relative;
    padding: 0;
    background: linear-gradient(160deg, #17456e 0%, #0e2f4e 100%);
    border: 1px solid rgba(140, 190, 225, 0.28);
    border-radius: 3px;
    cursor: pointer;
    color: rgba(190, 225, 250, 0.75);
    line-height: 1;
    font-weight: bold;
    transition: background-color 0.12s, border-color 0.12s, transform 0.1s;
}
.nav-cella:hover {
    background: linear-gradient(160deg, #1e5688 0%, #143d63 100%);
    border-color: #ffd700;
    transform: translateY(-1px);
}

/* Acqua: la casella e' decisa, e il puntino dice "qui ho gia' guardato".
   Senza un segno visibile non si distinguerebbe da una casella ancora da
   decidere, che e' proprio la distinzione su cui si ragiona. */
.nav-cella.acqua {
    background: rgba(10, 32, 52, 0.85);
    border-color: rgba(140, 190, 225, 0.15);
    color: rgba(150, 195, 225, 0.5);
    cursor: pointer;
}
.nav-cella.acqua:hover {
    background: rgba(16, 44, 70, 0.9);
    transform: none;
}

/* Nave: grigio acciaio pieno. La forma (tondo, estremita', corpo) arriva dalle
   classi forma-* qui sotto e dipende dai vicini, come negli schemi stampati:
   un mare di quadrati tutti uguali sarebbe molto piu' faticoso da leggere. */
.nav-cella.nave {
    background: linear-gradient(160deg, #cdd6de 0%, #8d9aa6 100%);
    border-color: #3d4a56;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 2px 5px rgba(0,0,0,0.45);
}
.nav-cella.nave:hover {
    background: linear-gradient(160deg, #dfe7ee 0%, #9dabb8 100%);
    border-color: #ffd700;
}
.nav-cella.nave.forma-sub  { border-radius: 50%; }
.nav-cella.nave.forma-sx   { border-radius: 50% 3px 3px 50%; }
.nav-cella.nave.forma-dx   { border-radius: 3px 50% 50% 3px; }
.nav-cella.nave.forma-top  { border-radius: 50% 50% 3px 3px; }
.nav-cella.nave.forma-bot  { border-radius: 3px 3px 50% 50%; }
.nav-cella.nave.forma-oriz { border-radius: 2px; }
.nav-cella.nave.forma-vert { border-radius: 2px; }

/* Nave chiusa: il giocatore ha segnato l'acqua ai due capi (o la nave tocca il
   bordo), quindi non puo' piu' allungarsi. Arancione pieno invece del grigio:
   il verde di prima era troppo timido e su una griglia scura si notava poco,
   mentre l'arancione salta all'occhio ed e' quello che serve, perche' questa
   colorazione e' la ricompensa visiva di una nave completata.
   Non si confonde con gli altri due segnali colorati: il rosso dell'errore e'
   cremisi (tinta diversa e molto piu' cupa) e l'oro delle rivelate e' solo una
   cornice, non un riempimento.
   Sta prima di .errata apposta: quella vince con !important, e una nave chiusa
   ma sbagliata deve restare rossa. */
.nav-cella.nave-finita {
    background: linear-gradient(160deg, #ffb057 0%, #e07a10 100%);
    border-color: #a8530a;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), 0 2px 6px rgba(0,0,0,0.45);
}
.nav-cella.nave-finita:hover {
    background: linear-gradient(160deg, #ffc47e 0%, #f28c1c 100%);
    border-color: #ffd700;
}

/* Casella data in partenza: fa parte dell'enunciato e non si puo' cambiare.
   La cornice dorata lo dice, e il cursore di default toglie l'invito a
   cliccare che avrebbero le altre. */
.nav-cella.rivelata {
    border: 2px solid #ffd700;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 0 8px rgba(255, 215, 0, 0.5);
    cursor: default;
}
.nav-cella.rivelata:hover {
    transform: none;
}

/* Segno che contraddice la soluzione (solo con la segnalazione errori accesa) */
.nav-cella.errata {
    background: linear-gradient(160deg, #cc0c39 0%, #990022 100%) !important;
    border-color: #ff7b72 !important;
    color: #ffd9dc;
    box-shadow: 0 0 10px rgba(204, 12, 57, 0.6);
}

/* Casella indicata dal suggerimento */
.nav-cella.suggerita {
    animation: pulseSugg 0.9s ease infinite alternate;
    z-index: 2;
}
.nav-cella.suggerita-errore {
    animation: pulseSuggErr 0.9s ease infinite alternate;
    z-index: 2;
}
@keyframes pulseSugg {
    from { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.95); }
    to   { box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.35); }
}
@keyframes pulseSuggErr {
    from { box-shadow: 0 0 0 3px rgba(204, 12, 57, 0.95); }
    to   { box-shadow: 0 0 0 5px rgba(204, 12, 57, 0.35); }
}

/* === FASCIA SOTTO LA GRIGLIA ===
   Flotta e comandi rapidi. Prima era una colonna di fianco al mare, ma su una
   griglia 10x10 non ci stava piu' e finiva per coprirlo: in orizzontale sotto
   la griglia occupa poca altezza e lascia al mare tutta la larghezza. */
.legenda-lato {
    position: absolute;
    top: 600px;
    left: 35px;
    width: 640px;
    box-sizing: border-box;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.legenda-titolo {
    font-size: 11px;
    font-weight: bold;
    color: #aed6ae;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.legenda-nota {
    font-size: 10px;
    color: #cde8cd;
    font-style: italic;
    line-height: 1.35;
}

/* Elenco della flotta: sagome delle navi con quante ne restano da trovare.
   E' l'altra meta' dell'enunciato (i numeri dicono quante caselle, questo dice
   come sono raggruppate) e va tenuto sotto gli occhi. */
#pannello-flotta {
    background: rgba(0, 40, 10, 0.55);
    border: 2px solid rgba(100, 160, 110, 0.35);
    border-radius: 10px;
    padding: 8px 10px;
    box-sizing: border-box;
    color: #fff;
}
/* Titolo della flotta e Annulla sulla stessa riga: il bottone e' piccolo e
   sopra l'elenco non ruba altezza a nessuno. */
.flotta-intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.flotta-intestazione .btn-azione {
    height: 26px;
    font-size: 11px;
    padding: 0 14px;
    flex: 0 0 auto;
}
.flotta-intestazione .btn-icona {
    margin-right: 5px;
}

/* Ogni nave e' disegnata singolarmente invece di scrivere "2/4" accanto a una
   sagoma: si vede a colpo d'occhio quante e quali navi restano, senza dover
   leggere un numero e ricostruirsi la flotta a mente. Le navi si affiancano in
   orizzontale e vanno a capo da sole. */
#lista-flotta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
}
/* Le navi della stessa lunghezza restano vicine e un po' staccate dal gruppo
   successivo: senza lo stacco una fila di sagome uguali si legge male. */
.flotta-gruppo {
    display: flex;
    align-items: center;
    gap: 7px;
}
.flotta-sagoma {
    display: flex;
    gap: 2px;
    transition: opacity 0.2s;
}
/* Nave trovata: si spegne e si tinge di verde, cosi' restano in evidenza solo
   quelle ancora da cercare. */
.flotta-sagoma.trovata {
    opacity: 0.4;
}
.flotta-q {
    width: 15px;
    height: 15px;
    background: linear-gradient(160deg, #cdd6de 0%, #8d9aa6 100%);
    border: 1px solid #3d4a56;
    border-radius: 2px;
    box-sizing: border-box;
    transition: background 0.2s;
}
.flotta-sagoma.trovata .flotta-q {
    background: linear-gradient(160deg, #9ae6a4 0%, #4f9a5e 100%);
    border-color: #2f6b3c;
}
.flotta-q.q-sub { border-radius: 50%; }
.flotta-q.q-sx  { border-radius: 50% 2px 2px 50%; }
.flotta-q.q-dx  { border-radius: 2px 50% 50% 2px; }

/* === PANNELLO LATERALE DESTRO === */
#pannello-controlli {
    position: absolute;
    top: 118px;
    left: 702px;
    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;
}

.btn-azione {
    height: 44px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    background: rgba(0, 40, 10, 0.6);
    border: 2px solid #6b9b7a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
}
.btn-azione:hover {
    background: rgba(0, 60, 20, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Pannello del suggerimento: copre la colonna dei tasti quando e' aperto e
   cresce quanto serve, perche' il testo cambia (indicazione, poi spiegazione). */
#pannello-hint {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    z-index: 60;
    background: #10331c;
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 18px 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}
#pannello-hint.aperto { display: flex; }
#pannello-hint .hint-titolo {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#hint-testo {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    padding: 0 4px;
}
#hint-testo b { color: #ffd700; }
#hint-penalita {
    color: #ff9f43;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    padding: 0 4px;
    font-style: italic;
}
#hint-penalita b { color: #ff6b6b; font-style: normal; }
#hint-bottoni {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
}
#hint-bottoni button {
    width: 230px;
    height: 46px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background: rgba(0, 40, 10, 0.6);
    border: 2px solid #6b9b7a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
}
#hint-bottoni button:hover {
    background: rgba(0, 60, 20, 0.8);
    border-color: rgba(255, 255, 255, 0.6);
}
#hint-bottoni button:disabled {
    opacity: 0.45;
    cursor: default;
}
#btn-hint-applica {
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%) !important;
    color: #1a1a2e !important;
    border-color: #ffd700 !important;
}
#btn-hint-applica:hover { filter: brightness(1.1); }
#btn-hint-chiudi {
    border-color: #990022 !important;
}

#opzioni-errori {
    background: rgba(0, 40, 10, 0.55);
    border: 2px solid rgba(100, 160, 110, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#opzioni-errori label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #cde8cd;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}
#opzioni-errori input[type="checkbox"] {
    accent-color: #ffd700;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
}

#btn-nuova-partita {
    height: 52px;
    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);
}

/* === MODALI E DIALOGHI === */
.form-calcolo {
    z-index: 40000;
    position: absolute;
    width: 500px;
    height: 520px;
    left: 262px;
    top: 115px;
    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: 25px;
    color: white;
    overflow: hidden;
}

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

#modale-inizio {
    justify-content: center;
}
/* La riga sotto ogni difficolta' dice il lato della griglia e la flotta: e' la
   sola differenza fra i tre livelli, e nasconderla costringerebbe a provarli
   per capire cosa cambia. */
.diff-dettaglio {
    font-size: 11px;
    color: #cde8cd;
    text-align: center;
    margin: -6px 0 10px 0;
    font-style: italic;
}

.btn-opzione-sel {
    background: #1f4068;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 200px;
    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;
}

.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 vittoria: bassa e larga, con banner pubblicitario sopra */
#haivinto.modale-vittoria {
    width: 700px;
    height: 210px;
    left: 162px;
    top: 430px;
    padding: 20px 25px;
    justify-content: center;
    overflow: visible; /* il banner sporge sopra la modale */
}

.confirm-message {
    font-family: 'Slackey', 'Outfit', sans-serif;
    font-size: 24px;
    color: white;
    text-align: center;
    margin-bottom: 40px;
    text-shadow: 2px 2px 4px #000;
    padding: 0 20px;
}

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

.link-giochi-calcolo {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 100;
}
.pulsante-link-calcolo {
    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-calcolo:hover {
    color: #fff;
    background-color: rgba(0, 60, 20, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
}

.pulsante-home-calcolo {
    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-calcolo:hover {
    color: #fff;
    background: linear-gradient(135deg, #e08514, #a3580a);
    border-color: #ffd700;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.65);
}

/* Pannellino che resta in basso dopo "Vedi lo schema" */
#navale-minimal-win-panel {
    position: absolute;
    bottom: 42px;
    left: 35px;
    z-index: 10000;
    display: flex;
    gap: 15px;
}
#navale-minimal-win-panel button {
    width: 180px;
    height: 38px;
    font-size: 13px;
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: filter 0.15s, transform 0.1s;
}
#navale-minimal-win-panel button:hover { filter: brightness(1.12); }
#navale-minimal-win-panel button:active { transform: scale(0.96); }
#navale-minimal-win-panel .btn-min-1 {
    background: #ffd700;
    color: #1a1a2e;
    border: 2px solid #cca300;
}
#navale-minimal-win-panel .btn-min-2 {
    background: #f0f0f0;
    color: #333;
    border: 2px solid #bbb;
}

/* === SPRITE PENALITÀ "+Ns" (stile arcade: sale e sfuma) === */
.penalita-volante {
    position: fixed;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
    font-family: 'Slackey', 'Outfit', sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #ff3b30;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 2px 2px 0 #7a0000;
    animation: penalita-sali 2.6s ease-out forwards;
}
@keyframes penalita-sali {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    8%   { opacity: 1; transform: translate(-50%, -70%) scale(1.15); }
    16%  { transform: translate(-50%, -90%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -390%) scale(1); }
}

/* ================= RIQUADRO AFFILIATI ROTANTE =================
   Sotto NUOVA PARTITA, in fondo alla colonna dei comandi: 300x250 esatti, cioe'
   la larghezza della colonna. Altezza fissa, altrimenti la colonna ballerebbe
   a ogni cambio di prodotto. */
#banner-rotante {
    width: 300px;
    height: 250px;
    box-sizing: border-box;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 40, 10, 0.55);
    border: 2px solid rgba(100, 160, 110, 0.35);
}