*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}

/* Eccezione: nei campi di testo la selezione serve davvero. */
input, textarea, [contenteditable]{
    -webkit-user-select:text;
    -ms-user-select:text;
    user-select:text;
    -webkit-touch-callout:default;
}

:focus:not(:focus-visible){
    outline:none;
}

:root{
    --blu:#3b6fe0;
    --blu-scuro:#2650b8;
    --blu-chiaro:#eaf0ff;
    --verde:#1ea672;
    --verde-chiaro:#e3f7ef;
    --rosso:#e0524f;
    --rosso-chiaro:#fdeceb;
    --giallo:#c98a12;
    --giallo-chiaro:#fff3de;
    --testo:#1c2b45;
    --testo-tenue:#66738c;
    --sfondo:#f2f5fb;
    --carta:#ffffff;
    --bordo:#e2e8f5;
    --ombra:0 8px 24px rgba(30,50,90,.08);

    --viola:#8b6cf0;
    --menta:#17b995;
    --ambra:#f5a623;
    --ombra-forte:0 20px 40px rgba(30,50,90,.16);

    --grad1:linear-gradient(135deg,#3b6fe0,#8b6cf0);
    --grad2:linear-gradient(135deg,#17b995,#22d3c5);
    --grad3:linear-gradient(135deg,#f5a623,#ff8a5c);
    --grad4:linear-gradient(135deg,#ec4899,#e0524f);
    --grad5:linear-gradient(135deg,#06b6d4,#3b6fe0);
    --grad6:linear-gradient(135deg,#8b6cf0,#ec4899);

    --carta-grad:linear-gradient(180deg,#ffffff,#fbfcff);
    --nav-bg:rgba(255,255,255,.86);
}

/*---------------- TEMA SCURO ---------------- */

:root[data-theme="dark"]{
    --blu:#5f8dfa;
    --blu-scuro:#bcd0ff;
    --blu-chiaro:#1a2440;
    --verde:#33d696;
    --verde-chiaro:#12271f;
    --rosso:#f2726f;
    --rosso-chiaro:#2c1a1c;
    --giallo:#e0a83a;
    --giallo-chiaro:#2e2410;
    --testo:#eaeefb;
    --testo-tenue:#93a0c2;
    --sfondo:#0b0f1c;
    --carta:#161d30;
    --bordo:#2a3350;
    --ombra:0 8px 24px rgba(0,0,0,.35);

    --viola:#a58cf7;
    --menta:#2fe0b3;
    --ambra:#ffbb52;
    --ombra-forte:0 20px 40px rgba(0,0,0,.5);

    --carta-grad:linear-gradient(180deg,#161d30,#111730);
    --nav-bg:rgba(10,14,26,.88);
}

/* html (non body) perche' auth-guard.js nasconde il body con display:none
   finche' non sa se l'utente e' loggato: senza questo, quell'attesa si
   vedrebbe come un lampo bianco invece del colore giusto (chiaro/scuro). */
html{
    background:var(--sfondo);
}

body{
    font-family:"Segoe UI",Arial,Helvetica,sans-serif;
    background:var(--sfondo);
    color:var(--testo);
    padding:22px 18px 100px;
    overflow-x:hidden;
    min-height:100vh;
    position:relative;
}

/*---------------- SFONDO DECORATIVO ---------------- */

body::before,
body::after{
    content:"";
    position:fixed;
    border-radius:50%;
    filter:blur(60px);
    z-index:-1;
    pointer-events:none;
}

body::before{
    top:-120px;
    left:-90px;
    width:280px;
    height:280px;
    background:rgba(236,72,153,.14);
    animation:vagaBlob1 25s ease-in-out infinite;
}

body::after{
    bottom:-110px;
    right:-90px;
    width:300px;
    height:300px;
    background:rgba(6,182,212,.14);
    animation:vagaBlob2 21s ease-in-out infinite;
}

@keyframes vagaBlob1{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(35px,45px) scale(1.12); }
}

@keyframes vagaBlob2{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-30px,-35px) scale(1.1); }
}

/*---------------- HEADER ----------------*/

@keyframes comparsaIntestazione{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:translateY(0); }
}

.topbar{
    text-align:center;
    margin-bottom:30px;
    animation:comparsaIntestazione .5s ease both;
}

@keyframes scorrimentoSfumaturaTitolo{
    to{ background-position:200% center; }
}

.topbar h1{
    font-size:32px;
    font-weight:800;
    margin-bottom:8px;
    display:inline-block;
    background:linear-gradient(90deg,var(--testo),var(--blu),var(--viola),var(--testo));
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:scorrimentoSfumaturaTitolo 6s linear infinite;
}

.sottotitoloPagina{
    font-size:15px;
    color:var(--testo-tenue);
}

/*---------------- SCHERMATE ----------------*/

.schermata{
    display:none;
}

.schermataAttiva{
    display:flex;
}

.hubSchermata,
.giocoSchermata,
.fineSchermata{
    flex-direction:column;
    align-items:center;
}

/*---------------- HUB ----------------*/

.intestazioneHub{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-bottom:26px;
    text-align:center;
}

.iconaCerchio{
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--grad1);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin-bottom:6px;
    box-shadow:0 10px 20px rgba(59,111,224,.32);
}

.intestazioneHub h2{
    font-size:20px;
    font-weight:800;
}

.suggerimento{
    text-align:center;
    color:var(--testo-tenue);
    font-size:14px;
}

.suggerimento b{
    color:var(--blu-scuro);
}

/*---------------- SELETTORE LIVELLO ----------------*/

.selettoreGruppi{
    width:100%;
    max-width:460px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1.5px solid var(--bordo);
    border-radius:18px;
    background:var(--carta-grad);
    padding:16px 18px;
    cursor:pointer;
    text-align:left;
    box-shadow:var(--ombra);
    margin-bottom:24px;
    transition:transform .16s, box-shadow .16s, border-color .16s;
}

.selettoreGruppi:hover{
    transform:translateY(-2px);
    box-shadow:var(--ombra-forte);
    border-color:var(--blu-chiaro);
}

.selettoreGruppi:active{
    transform:scale(.98);
}

.etichettaSelettore{
    font-size:15px;
    font-weight:600;
    color:var(--testo);
}

.valoreSelettore{
    margin-left:auto;
    font-size:15px;
    font-weight:800;
    color:#fff;
    background:linear-gradient(135deg,var(--blu),var(--viola));
    padding:5px 14px;
    border-radius:99px;
    box-shadow:0 6px 14px rgba(59,111,224,.3);
}

.frecciaSelettore{
    font-size:20px;
    color:var(--testo-tenue);
    transition:transform .16s;
}

.selettoreGruppi:hover .frecciaSelettore{
    transform:translateX(3px);
}

/*---------------- OVERLAY / POPUP LIVELLO ----------------*/

.overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:rgba(20,30,55,.45);
    backdrop-filter:blur(3px);
    z-index:999;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s;
}

.overlayVisibile{
    opacity:1;
    pointer-events:auto;
}

@keyframes scorriSuFoglio{
    from{ transform:translateY(30px); opacity:.6; }
    to{ transform:translateY(0); opacity:1; }
}

.foglio{
    width:100%;
    max-width:460px;
    max-height:85vh;
    overflow-y:auto;
    background:var(--carta);
    border-radius:28px 28px 0 0;
    padding:14px 24px 26px;
    box-shadow:0 -10px 40px rgba(30,50,90,.22);
    animation:scorriSuFoglio .3s cubic-bezier(.2,.8,.3,1);
}

.foglioSezioneTitolo{
    font-size:14px;
    font-weight:700;
    color:var(--testo-tenue);
    margin:0 0 10px;
    text-align:left;
}

.manigliaFoglio{
    width:48px;
    height:5px;
    border-radius:3px;
    background:linear-gradient(90deg,var(--blu),var(--viola));
    margin:0 auto 16px;
}

.foglio h2{
    font-size:19px;
    font-weight:800;
    margin-bottom:18px;
    color:var(--testo);
}

.grigliaLivelli{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:20px;
}

.cardLivello{
    background:var(--sfondo);
    border:2px solid transparent;
    border-radius:16px;
    padding:16px 8px;
    text-align:center;
    font-size:18px;
    font-weight:800;
    color:var(--testo);
    cursor:pointer;
    transition:transform .14s, background .14s, border-color .14s;
}

.cardLivello:hover{
    transform:translateY(-2px);
}

.cardLivello.selezionata{
    background:linear-gradient(135deg,var(--blu-chiaro),#f2edfe);
    border-color:var(--blu);
    color:var(--blu-scuro);
}

/*---------------- POPUP DURATA (Quiz / Vero o Falso) ----------------*/

.grigliaDurate{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:20px;
}

.cardDurata{
    background:var(--sfondo);
    border:2px solid transparent;
    border-radius:16px;
    padding:16px 8px;
    text-align:center;
    font-size:16px;
    font-weight:700;
    color:var(--testo);
    cursor:pointer;
    transition:transform .14s, background .14s, border-color .14s;
}

.cardDurata:hover{
    transform:translateY(-2px);
}

.cardDurata.opzioneAmpia{
    grid-column:1 / -1;
    font-size:15px;
}

.cardDurataNota{
    display:block;
    font-size:11px;
    font-weight:600;
    color:var(--testo-tenue);
    margin-top:3px;
}

.cardDurata.selezionata .cardDurataNota{
    color:var(--blu-scuro);
}

.cardDurata.selezionata{
    background:linear-gradient(135deg,var(--blu-chiaro),#f2edfe);
    border-color:var(--blu);
    color:var(--blu-scuro);
}

.azioniFoglio{
    display:flex;
    gap:12px;
}

.btnSecondario,
.btnPrimario{
    flex:1;
    height:52px;
    border:none;
    border-radius:16px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:transform .14s, box-shadow .14s, border-color .14s;
}

.btnSecondario{
    background:var(--carta);
    color:var(--testo);
    border:1.5px solid var(--bordo);
}

.btnSecondario:hover{
    border-color:var(--blu);
}

.btnPrimario{
    background:linear-gradient(135deg,var(--blu),var(--viola));
    color:#fff;
    box-shadow:0 14px 28px rgba(59,111,224,.32);
}

.btnPrimario:hover{
    box-shadow:0 16px 32px rgba(59,111,224,.4);
}

.btnSecondario:active,
.btnPrimario:active{
    transform:scale(.98);
}

/*---------------- GRIGLIA GIOCHI (HUB) ----------------*/

.grigliaGiochi{
    width:100%;
    max-width:460px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

@keyframes ingressoGioco{
    from{ opacity:0; transform:translateY(14px) scale(.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

.cardGioco{
    position:relative;
    background:var(--carta-grad);
    border-radius:24px;
    padding:22px 16px;
    box-shadow:var(--ombra);
    border:1px solid var(--bordo);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    cursor:pointer;
    gap:8px;
    overflow:hidden;
    animation:ingressoGioco .4s ease both;
    transition:transform .18s, box-shadow .18s, border-color .18s;
}

.grigliaGiochi .cardGioco:nth-child(1){ animation-delay:.02s; }
.grigliaGiochi .cardGioco:nth-child(2){ animation-delay:.06s; }
.grigliaGiochi .cardGioco:nth-child(3){ animation-delay:.1s; }
.grigliaGiochi .cardGioco:nth-child(4){ animation-delay:.14s; }
.grigliaGiochi .cardGioco:nth-child(5){ animation-delay:.18s; }
.grigliaGiochi .cardGioco:nth-child(6){ animation-delay:.22s; }
.grigliaGiochi .cardGioco:nth-child(7){ animation-delay:.26s; }
.grigliaGiochi .cardGioco:nth-child(8){ animation-delay:.30s; }

.cardGioco:hover{
    transform:translateY(-5px);
    box-shadow:var(--ombra-forte);
    border-color:var(--blu-chiaro);
}

.cardGioco:active{
    transform:scale(.97);
}

.iconaGioco{
    width:54px;
    height:54px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin-bottom:2px;
    transition:transform .18s;
}

.cardGioco:hover .iconaGioco{
    transform:scale(1.1) rotate(-6deg);
}

.grigliaGiochi .cardGioco:nth-child(6n+1) .iconaGioco{ background:var(--grad1); box-shadow:0 8px 18px rgba(59,111,224,.32); }
.grigliaGiochi .cardGioco:nth-child(6n+2) .iconaGioco{ background:var(--grad2); box-shadow:0 8px 18px rgba(23,185,149,.32); }
.grigliaGiochi .cardGioco:nth-child(6n+3) .iconaGioco{ background:var(--grad3); box-shadow:0 8px 18px rgba(245,166,35,.32); }
.grigliaGiochi .cardGioco:nth-child(6n+4) .iconaGioco{ background:var(--grad4); box-shadow:0 8px 18px rgba(236,72,153,.3); }
.grigliaGiochi .cardGioco:nth-child(6n+5) .iconaGioco{ background:var(--grad5); box-shadow:0 8px 18px rgba(6,182,212,.3); }
.grigliaGiochi .cardGioco:nth-child(6n+6) .iconaGioco{ background:var(--grad6); box-shadow:0 8px 18px rgba(139,108,240,.3); }
.grigliaGiochi #cardWordle .iconaGioco{ background:var(--grad2); box-shadow:0 8px 18px rgba(23,185,149,.32); }
.grigliaGiochi #cardCruciverba .iconaGioco{ background:var(--grad6); box-shadow:0 8px 18px rgba(139,108,240,.3); }

.cardGioco h3{
    font-size:15.5px;
    font-weight:800;
}

.cardGioco p{
    font-size:12.5px;
    color:var(--testo-tenue);
    line-height:1.4;
}

/*---------------- SCHERMATE DI GIOCO ----------------*/

.giocoSchermata{
    width:100%;
    max-width:460px;
    margin:0 auto;
}

.barraSuperiore{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    gap:10px;
}

.btnEsci{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    flex-shrink:0;
    border:1px solid var(--bordo);
    border-radius:50%;
    background:var(--carta);
    color:var(--testo);
    font-size:18px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    box-shadow:var(--ombra);
    transition:transform .14s, border-color .14s, color .14s;
}

.btnEsci:hover{
    border-color:var(--blu);
    color:var(--blu);
}

.btnEsci:active{
    transform:scale(.9);
}

.badgeInfo{
    flex:1;
    text-align:center;
    font-size:13.5px;
    font-weight:700;
    color:var(--testo-tenue);
    background:var(--carta);
    border:1px solid var(--bordo);
    padding:8px 10px;
    border-radius:12px;
}

.badgeTimer{
    font-size:15px;
    font-weight:800;
    color:var(--blu-scuro);
    background:linear-gradient(135deg,var(--blu-chiaro),#f2edfe);
    padding:8px 16px;
    border-radius:12px;
    min-width:52px;
    text-align:center;
    box-shadow:0 4px 12px rgba(59,111,224,.16);
    transition:background .25s, color .25s, box-shadow .25s;
}

.badgeTimer.giallo{
    background:linear-gradient(135deg,var(--giallo-chiaro),#ffe6b3);
    color:var(--giallo);
    box-shadow:0 4px 14px rgba(201,138,18,.25);
}

.badgeTimer.rosso{
    background:linear-gradient(135deg,var(--rosso-chiaro),#ffd7d5);
    color:var(--rosso);
    box-shadow:0 4px 16px rgba(224,82,79,.3);
}

.badgeTimer.lampeggia{
    animation:lampeggio 1s infinite;
}

@keyframes lampeggio{
    0%,100%{ opacity:1; }
    50%{ opacity:.4; }
}

.cartaGioco{
    position:relative;
    width:100%;
    background:var(--carta-grad);
    border-radius:28px;
    padding:30px 24px;
    box-shadow:var(--ombra-forte);
    border:1px solid var(--bordo);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    overflow:hidden;
}

.cartaGioco::before{
    content:"";
    position:absolute;
    top:-70px;
    right:-70px;
    width:170px;
    height:170px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(59,111,224,.07),transparent 70%);
    pointer-events:none;
}

.immagineParola{
    width:100px;
    height:100px;
    border-radius:20px;
    background:var(--sfondo);
    object-fit:contain;
    margin-bottom:18px;
    position:relative;
    box-shadow:0 8px 18px rgba(30,50,90,.08);
}

.paroleItaliano{
    font-size:24px;
    font-weight:800;
    margin-bottom:6px;
    position:relative;
}

.paroleInglese{
    font-size:16px;
    font-weight:600;
    color:var(--testo-tenue);
    margin-bottom:22px;
    position:relative;
}

/*---------------- OPZIONI (QUIZ / FRASE) ----------------*/

.opzioniGioco{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:24px;
    position:relative;
}

.optGioco{
    padding:16px 10px;
    background:var(--carta);
    border:2px solid var(--bordo);
    border-radius:16px;
    font-size:15px;
    font-weight:700;
    color:var(--testo);
    cursor:pointer;
    box-shadow:0 4px 0 var(--bordo);
    transition:transform .1s, box-shadow .1s, background .15s, border-color .15s, color .15s;
}

.optGioco:hover{
    border-color:var(--blu-chiaro);
}

.optGioco:active{
    transform:translateY(3px);
    box-shadow:0 1px 0 var(--bordo);
}

.optGioco.optCorretta{
    background:var(--verde-chiaro);
    border-color:var(--verde);
    color:var(--verde);
    box-shadow:0 4px 0 var(--verde);
}

.optGioco.optSbagliata{
    background:var(--rosso-chiaro);
    border-color:var(--rosso);
    color:var(--rosso);
    box-shadow:0 4px 0 var(--rosso);
    animation:scuotiOpzione .35s;
}

@keyframes scuotiOpzione{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-5px); }
    75%{ transform:translateX(5px); }
}

/*---------------- IL MILIONARIO ----------------*/

:root{
    --oro:#e0a52c;
    --oro-scuro:#8a5c00;
    --oro-chiaro:#fff6de;
}

.titoloMilionario{
    display:flex;
    justify-content:center;
    margin-bottom:16px;
}

.titoloMilionarioTesto{
    position:relative;
    display:inline-block;
    padding:6px 22px;
    font-size:27px;
    font-weight:900;
    letter-spacing:.01em;
    color:var(--oro-scuro);
    background:linear-gradient(120deg,var(--oro-scuro) 0%,var(--oro) 45%,var(--oro-scuro) 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 2px 14px rgba(138,92,0,.22);
    animation:brillaTitoloMil 3.5s linear infinite;
}

.titoloMilionarioTesto::after{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    bottom:-1px;
    height:3px;
    border-radius:3px;
    background:linear-gradient(90deg,transparent,var(--oro-scuro),transparent);
    opacity:.6;
}

@keyframes brillaTitoloMil{
    0%{ background-position:0% 50%; }
    100%{ background-position:220% 50%; }
}

.valoreVincitaMil{
    background:linear-gradient(135deg,var(--oro-scuro),var(--oro)) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
}

.badgePremioMil{
    background:linear-gradient(135deg,var(--oro-chiaro),#ffe9ad);
    color:var(--oro-scuro);
    box-shadow:0 4px 12px rgba(138,92,0,.22);
}

/*---- Scala a premi ----*/

.scalaPremi{
    width:100%;
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:10px;
    margin-bottom:16px;
    background:var(--carta-grad);
    border:1px solid var(--bordo);
    border-radius:16px;
    box-shadow:var(--ombra);
}

.tappaScala{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 12px;
    border-radius:99px;
    background:var(--sfondo);
    border:1.5px solid var(--bordo);
    font-size:11.5px;
    font-weight:700;
    color:var(--testo-tenue);
    white-space:nowrap;
    transition:transform .15s, background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.tappaScala .tappaNumero{
    width:18px;
    height:18px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--carta);
    border:1px solid var(--bordo);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9.5px;
    font-weight:800;
    color:var(--testo-tenue);
}

.tappaScala.tappaCheckpoint{
    border-style:dashed;
    border-color:var(--oro-scuro);
}

.tappaScala.tappaCheckpoint::before{
    content:"★";
    font-size:9px;
    color:var(--oro-scuro);
    margin-right:-2px;
}

.tappaScala.superata{
    background:var(--verde-chiaro);
    border-color:var(--verde);
    color:var(--verde);
}

.tappaScala.superata .tappaNumero{
    background:var(--verde);
    border-color:var(--verde);
    color:#fff;
}

.tappaScala.attuale{
    background:linear-gradient(135deg,var(--oro),var(--oro-scuro));
    border-color:var(--oro-scuro);
    color:#fff;
    box-shadow:0 6px 16px rgba(138,92,0,.35);
    transform:scale(1.1);
}

.tappaScala.attuale .tappaNumero{
    background:rgba(255,255,255,.3);
    border-color:transparent;
    color:#fff;
}

.cartaGiocoMilionario{
    align-items:stretch;
    text-align:left;
}

.milionarioDomanda{
    font-size:18px;
    font-weight:800;
    line-height:1.4;
    color:var(--testo);
    margin-bottom:20px;
    position:relative;
}

.opzioniMilionario{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
    position:relative;
}

.optMilionario{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:var(--carta);
    border:2px solid var(--bordo);
    border-radius:14px;
    font-size:14.5px;
    font-weight:700;
    color:var(--testo);
    text-align:left;
    cursor:pointer;
    box-shadow:0 4px 0 var(--bordo);
    transition:transform .1s, box-shadow .1s, background .15s, border-color .15s, color .15s;
}

.optMilionario:hover{
    border-color:var(--blu-chiaro);
}

.optMilionario:active{
    transform:translateY(3px);
    box-shadow:0 1px 0 var(--bordo);
}

.letteraOpzione{
    flex-shrink:0;
    width:26px;
    height:26px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--blu),var(--viola));
    color:#fff;
    font-size:12.5px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}

.testoOpzione{
    flex:1;
}

.optMilionario.optCorretta{
    background:var(--verde-chiaro);
    border-color:var(--verde);
    color:var(--verde);
    box-shadow:0 4px 0 var(--verde);
}

.optMilionario.optCorretta .letteraOpzione{
    background:var(--verde);
}

.optMilionario.optSbagliata{
    background:var(--rosso-chiaro);
    border-color:var(--rosso);
    color:var(--rosso);
    box-shadow:0 4px 0 var(--rosso);
    animation:scuotiOpzione .35s;
}

.optMilionario.optSbagliata .letteraOpzione{
    background:var(--rosso);
}

.optMilionario.optNascosta{
    display:none;
}

.barraAiutiMilionario{
    width:100%;
    display:flex;
    gap:10px;
    margin-top:18px;
}

.btnAiutoMil{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:14px 6px 12px;
    border:none;
    border-radius:18px;
    background:var(--carta-grad);
    box-shadow:var(--ombra), inset 0 0 0 1.5px var(--bordo);
    cursor:pointer;
    transition:transform .14s, box-shadow .14s;
}

.btnAiutoMil:hover{
    transform:translateY(-2px);
}

.btnAiutoMil:active{
    transform:translateY(1px) scale(.97);
}

.btnAiutoMil .iconaAiuto{
    width:40px;
    height:40px;
    flex-shrink:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    color:#fff;
    transition:background .18s, filter .2s;
}

.btnAiutoMil .labelAiuto{
    font-size:11px;
    font-weight:800;
    color:var(--testo);
    line-height:1.2;
    text-align:center;
}

.aiuto5050 .iconaAiuto{
    background:linear-gradient(135deg,var(--blu),var(--viola));
    font-size:10.5px;
    letter-spacing:-.02em;
    box-shadow:0 6px 14px rgba(59,111,224,.32);
}

.aiutoSalta .iconaAiuto{
    background:linear-gradient(135deg,var(--ambra),#ff8a5c);
    box-shadow:0 6px 14px rgba(245,166,35,.32);
}

.btnRitiratiMil .iconaAiuto{
    background:linear-gradient(135deg,var(--rosso),#c9302c);
    box-shadow:0 6px 14px rgba(224,82,79,.32);
}

.btnAiutoMil:disabled{
    cursor:default;
    transform:none;
    box-shadow:var(--ombra), inset 0 0 0 1.5px var(--bordo);
}

.btnAiutoMil:disabled .iconaAiuto{
    background:var(--bordo) !important;
    box-shadow:none !important;
    filter:grayscale(1);
}

.btnAiutoMil:disabled .labelAiuto{
    color:var(--testo-tenue);
}

/*---------------- VERO / FALSO ----------------*/

.rigaVeroFalso{
    width:100%;
    display:flex;
    gap:14px;
    margin-top:10px;
}

.optVeroFalso{
    flex:1;
    height:64px;
    border:2px solid var(--bordo);
    border-radius:18px;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    background:var(--carta);
    color:var(--testo);
    box-shadow:0 4px 0 var(--bordo);
    transition:transform .1s, box-shadow .1s, background .15s, border-color .15s, color .15s;
}

.optVeroFalso:active{
    transform:translateY(3px);
    box-shadow:0 1px 0 var(--bordo);
}

.optVeroFalso:disabled{
    cursor:default;
}

.optVeroFalso.optCorretta{
    background:var(--verde-chiaro);
    border-color:var(--verde);
    color:var(--verde);
    box-shadow:0 4px 0 var(--verde);
}

.optVeroFalso.optSbagliata{
    background:var(--rosso-chiaro);
    border-color:var(--rosso);
    color:var(--rosso);
    box-shadow:0 4px 0 var(--rosso);
    animation:scuotiOpzione .35s;
}

/*---------------- NOMI, COSE, CITTÀ ----------------*/

/* Sottotitolo di riga usato dal contatore "Parola X di Y" del round. */
.fraseSottotitolo{
    font-size:12.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--testo-tenue);
    margin-bottom:14px;
    text-align:center;
}

/* Cerchio con la lettera del round. */
.nccLetteraGrande{
    width:84px;
    height:84px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--blu),var(--viola));
    color:#fff;
    font-size:40px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 14px;
    box-shadow:0 10px 24px rgba(59,111,224,.3);
}

/* Elenco dei campi da scrivere (Animali, Cose, Sport...). */
.nccCampiLista{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:18px 0 20px;
}

.nccCampoRiga{
    text-align:left;
}

.nccCampoLabel{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--testo-tenue);
    margin-bottom:6px;
}

.nccCampoInput{
    width:100%;
    height:50px;
    padding:0 16px;
    background:var(--sfondo);
    border:2px solid var(--bordo);
    border-radius:14px;
    font-size:16px;
    font-weight:600;
    color:var(--testo);
    box-sizing:border-box;
    transition:border-color .15s, background .15s;
}

.nccCampoInput:focus{
    outline:none;
    border-color:var(--blu);
    background:var(--carta);
}

.nccCampoInput:disabled{
    color:var(--testo);
    opacity:1;
}

.nccCampoFeedback{
    min-height:16px;
    margin:6px 0 0;
    font-size:12.5px;
    font-weight:600;
    color:var(--testo-tenue);
}

.nccCampoRiga.nccCorretto .nccCampoInput{
    border-color:var(--verde);
    background:var(--verde-chiaro);
}

.nccCampoRiga.nccCorretto .nccCampoFeedback{
    color:var(--verde);
}

.nccCampoRiga.nccSbagliato .nccCampoInput{
    border-color:var(--rosso);
    background:var(--rosso-chiaro);
}

.nccCampoRiga.nccSbagliato .nccCampoFeedback{
    color:var(--rosso);
}

.nccCampoRiga.nccNonVerificabile .nccCampoInput{
    border-color:var(--bordo);
    background:var(--sfondo);
    opacity:.7;
}

.nccBtnAzione{
    width:100%;
}

/*---------------- ANAGRAMMA ----------------*/

.caselleAnagramma{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    gap:8px;
    margin:22px 0 26px;
    transition:transform .05s;
}

.casellaLettera{
    width:34px;
    height:42px;
    flex-shrink:0;
    border:2px solid var(--bordo);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    font-weight:800;
    color:var(--testo);
    background:var(--sfondo);
    transition:background .15s, border-color .15s, color .15s, transform .15s;
}

.casellaLettera.piena{
    background:linear-gradient(135deg,var(--blu-chiaro),#f2edfe);
    border-color:var(--blu);
    color:var(--blu-scuro);
    cursor:pointer;
    animation:letteraPop .16s ease-out;
}

@keyframes letteraPop{
    0%{ transform:scale(.8); }
    100%{ transform:scale(1); }
}

.casellaLettera.piena:active{
    transform:scale(.92);
}

.caselleAnagramma.erroreAnagramma .casellaLettera{
    background:var(--rosso-chiaro);
    border-color:var(--rosso);
    color:var(--rosso);
}

.caselleAnagramma.erroreAnagramma{
    animation:scuotiParola .5s;
}

@keyframes scuotiParola{
    0%,100%{ transform:translateX(0); }
    15%{ transform:translateX(-6px); }
    30%{ transform:translateX(6px); }
    45%{ transform:translateX(-5px); }
    60%{ transform:translateX(5px); }
    75%{ transform:translateX(-3px); }
    90%{ transform:translateX(3px); }
}

.poolLettere{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.tastoLettera{
    width:44px;
    height:44px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,var(--blu),var(--blu-scuro));
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 0 var(--blu-scuro);
    transition:transform .1s, box-shadow .1s;
}

.tastoLettera:active{
    transform:translateY(3px);
    box-shadow:0 1px 0 var(--blu-scuro);
}

.tastoLettera.usata{
    opacity:.25;
    pointer-events:none;
    background:var(--bordo);
    color:var(--testo-tenue);
    box-shadow:none;
}

.tastoLettera.errata{
    animation:scuoti .35s;
    background:var(--rosso);
}

@keyframes scuoti{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-5px); }
    75%{ transform:translateX(5px); }
}

.btnPassaAnagramma{
    margin:18px 0 4px;
    padding:10px 20px;
    border:1.5px solid var(--bordo);
    border-radius:999px;
    background:var(--carta);
    color:var(--testo-tenue);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:var(--ombra);
    transition:transform .12s, border-color .14s, color .14s, background .14s;
}

.btnPassaAnagramma:hover{
    border-color:var(--rosso);
    color:var(--rosso);
}

.btnPassaAnagramma:active{
    transform:scale(.97);
}

.btnPassaAnagramma:disabled{
    opacity:.5;
    border-color:var(--bordo);
    color:var(--testo-tenue);
    cursor:default;
    transform:none;
}

/*---------------- IMPICCATO ----------------*/

.disegnoImpiccato{
    width:150px;
    height:170px;
    margin:0 auto 6px;
    position:relative;
}

.svgImpiccato{
    width:100%;
    height:100%;
}

.parolaMascherata{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    gap:7px;
    margin:20px 0 24px;
}

.letteraMascherata{
    width:30px;
    height:38px;
    flex-shrink:0;
    border-bottom:3px solid var(--bordo);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    font-weight:800;
    color:var(--testo);
    transition:border-color .15s, color .15s;
}

.letteraMascherata.rivelata{
    border-color:var(--blu);
    color:var(--blu-scuro);
    animation:letteraPop .16s ease-out;
}

.btnAiutoImpiccato{
    margin:18px 0 4px;
    padding:10px 20px;
    border:1.5px solid var(--bordo);
    border-radius:999px;
    background:var(--carta);
    color:var(--testo-tenue);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:var(--ombra);
    transition:transform .12s, border-color .14s, color .14s, background .14s;
}

.btnAiutoImpiccato:hover{
    border-color:var(--blu);
    color:var(--blu);
}

.btnAiutoImpiccato:active{
    transform:scale(.97);
}

.btnAiutoImpiccato:disabled{
    opacity:.5;
    border-color:var(--bordo);
    color:var(--testo-tenue);
    cursor:default;
    transform:none;
}

.traduzioneAiuto{
    display:none;
    font-size:16px;
    font-weight:700;
    color:var(--blu-scuro);
    margin:2px 0 16px;
}

.traduzioneAiuto.visibile{
    display:block;
    animation:comparsaIntestazione .25s ease both;
}

/* L'Impiccato usa la stessa tastiera del Wordle (.tastieraWordle /
   .rigaTastieraWordle / .tastoWordle), vedi più sotto. */

/*---------------- RICOSTRUISCI LA FRASE ----------------*/
/* Tema chiaro (coerente col resto del sito). Struttura invariata rispetto
   alla versione scura provata prima: card della frase da tradurre,
   vassoio di risposta distinto dal pool, riscontro verde/rosso per
   successo/errore — solo i colori sono tornati chiari e piatti. */

.ricoPromptCard{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    background:linear-gradient(135deg,var(--blu-chiaro),#f2edfe);
    border:1px solid var(--bordo);
    border-radius:18px;
    padding:16px 18px;
    margin-bottom:20px;
}

.ricoPromptEtichetta{
    font-size:11.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--blu);
}

.ricoPromptTesto{
    font-size:19px;
    font-weight:800;
    line-height:1.35;
    color:var(--blu-scuro);
}

.rigaRicostruisci{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-content:flex-start;
    align-items:center;
    gap:9px;
    min-height:78px;
    background:var(--sfondo);
    border:2px dashed var(--bordo);
    border-radius:16px;
    padding:14px;
    margin:0 0 22px;
    transition:background .2s, border-color .2s;
}

.chipRicostruisci{
    min-width:38px;
    min-height:42px;
    padding:9px 13px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:700;
    text-align:center;
    transition:background .15s, border-color .15s, color .15s, transform .15s;
}

.chipVuota{
    border:2px dashed var(--bordo);
    background:var(--carta);
    min-width:30px;
}

.chipPiena{
    border:2px solid var(--blu);
    background:var(--blu-chiaro);
    color:var(--blu-scuro);
    cursor:pointer;
    animation:chipPop .18s ease-out;
}

.chipPiena:active{
    transform:scale(.95);
}

@keyframes chipPop{
    0%{ transform:scale(.85); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
}

.rigaRicostruisci.correttaRicostruisci{
    background:var(--verde-chiaro);
    border-color:var(--verde);
    border-style:solid;
    animation:pulsaSuccesso .4s ease-out;
}

.rigaRicostruisci.correttaRicostruisci .chipPiena{
    background:var(--verde-chiaro);
    border-color:var(--verde);
    color:var(--verde);
}

@keyframes pulsaSuccesso{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.02); }
    100%{ transform:scale(1); }
}

.rigaRicostruisci.erroreRicostruisci{
    background:var(--rosso-chiaro);
    border-color:var(--rosso);
    border-style:solid;
    animation:scuotiFrase .5s;
}

.rigaRicostruisci.erroreRicostruisci .chipPiena{
    background:var(--rosso-chiaro);
    border-color:var(--rosso);
    color:var(--rosso);
}

@keyframes scuotiFrase{
    0%,100%{ transform:translateX(0); }
    15%{ transform:translateX(-6px); }
    30%{ transform:translateX(6px); }
    45%{ transform:translateX(-5px); }
    60%{ transform:translateX(5px); }
    75%{ transform:translateX(-3px); }
    90%{ transform:translateX(3px); }
}

.poolRicostruisci{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.chipPool{
    border:none;
    border-radius:12px;
    padding:10px 16px;
    background:linear-gradient(135deg,var(--blu),var(--blu-scuro));
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 3px 0 var(--blu-scuro);
    transition:transform .1s, opacity .15s, box-shadow .1s;
    animation:pezzoEntra .2s ease-out;
}

@keyframes pezzoEntra{
    0%{ transform:translateY(6px); opacity:0; }
    100%{ transform:translateY(0); opacity:1; }
}

.chipPool:active{
    transform:translateY(2px);
    box-shadow:0 1px 0 var(--blu-scuro);
}

.chipPool.usata{
    opacity:.25;
    pointer-events:none;
    background:var(--bordo);
    color:var(--testo-tenue);
    box-shadow:none;
    animation:none;
}

/*---------------- RICOSTRUISCI LA FRASE — TEMA SCURO (IDEA PER IL FUTURO) ----------------*/
/* Mauro ha apprezzato l'idea di un tema scuro dedicato per questo gioco
   (sfondo pagina scuro, accenti viola/ciano al neon), ma per ora si
   resta sul tema chiaro coerente col resto del sito. Questo blocco resta
   qui pronto ma inerte: si attiva SOLO se qualcosa aggiunge la classe
   "temaScuroRico" al <body> (in questo momento nessun punto del codice
   lo fa più — vedi il commento in mostraSchermata(), Giochi.html). Per
   riattivarlo in futuro basta rimettere lì il toggle della classe (ed
   eventualmente il cambio del meta theme-color). */

body.temaScuroRico{
    --ricoSfondo:#12172b;
    --ricoCarta:#1b2140;
    --ricoCarta2:#212952;
    --ricoBordo:rgba(255,255,255,.09);
    --ricoTesto:#f1f3fc;
    --ricoTestoTenue:#96a0c6;
    --ricoViola:#8b6bff;
    --ricoViola-scuro:#5b3df0;
    --ricoCiano:#2fd9e0;
    --ricoVerde:#33e8a6;
    --ricoRosso:#ff5f7e;
    background:var(--ricoSfondo);
}

body.temaScuroRico .topbar h1{ color:var(--ricoTesto); }
body.temaScuroRico .sottotitoloPagina{ color:var(--ricoTestoTenue); }

body.temaScuroRico #schermataRicostruisci .btnEsci{
    background:rgba(255,95,126,.14);
    border:1px solid rgba(255,95,126,.3);
    color:var(--ricoRosso);
}

body.temaScuroRico #schermataRicostruisci .badgeInfo{
    background:rgba(255,255,255,.05);
    border:1px solid var(--ricoBordo);
    color:var(--ricoTestoTenue);
}

body.temaScuroRico #schermataRicostruisci .cartaGioco{
    background:var(--ricoCarta);
    border:1px solid var(--ricoBordo);
    box-shadow:0 20px 44px rgba(0,0,0,.4);
}

body.temaScuroRico #schermataRicostruisci .btnPassaAnagramma{
    border:1.5px solid var(--ricoBordo);
    background:var(--ricoCarta2);
    color:var(--ricoTestoTenue);
}

body.temaScuroRico #schermataRicostruisci .btnPassaAnagramma:hover{
    border-color:var(--ricoRosso);
    color:var(--ricoRosso);
}

body.temaScuroRico .ricoPromptCard{
    background:
        radial-gradient(120% 140% at 50% -10%, rgba(139,107,255,.28), transparent 65%),
        var(--ricoCarta2);
    border-color:var(--ricoBordo);
}

body.temaScuroRico .ricoPromptEtichetta{ color:var(--ricoCiano); }
body.temaScuroRico .ricoPromptTesto{ color:var(--ricoTesto); }

body.temaScuroRico .rigaRicostruisci{
    background:rgba(0,0,0,.18);
    border-color:var(--ricoBordo);
    box-shadow:inset 0 2px 8px rgba(0,0,0,.25);
}

body.temaScuroRico .chipVuota{
    border-color:rgba(255,255,255,.16);
    background:transparent;
}

body.temaScuroRico .chipPiena{
    border:none;
    background:linear-gradient(150deg, var(--ricoViola), var(--ricoViola-scuro));
    color:#fff;
    box-shadow:0 0 0 1px rgba(139,107,255,.35), 0 0 18px rgba(139,107,255,.4);
}

body.temaScuroRico .rigaRicostruisci.correttaRicostruisci{
    background:rgba(51,232,166,.09);
    border-color:var(--ricoVerde);
}

body.temaScuroRico .rigaRicostruisci.correttaRicostruisci .chipPiena{
    background:linear-gradient(150deg, #1a7f8c, #0e5860);
    color:#e8fbff;
    box-shadow:0 0 0 1px rgba(47,217,224,.5), 0 0 22px rgba(47,217,224,.4);
}

body.temaScuroRico .rigaRicostruisci.erroreRicostruisci{
    background:rgba(255,95,126,.09);
    border-color:var(--ricoRosso);
}

body.temaScuroRico .rigaRicostruisci.erroreRicostruisci .chipPiena{
    background:linear-gradient(150deg, #8f2740, #5c1729);
    color:#ffe4ea;
    box-shadow:0 0 0 1px rgba(255,95,126,.5), 0 0 22px rgba(255,95,126,.4);
}

body.temaScuroRico .chipPool{
    background:rgba(255,255,255,.04);
    border:1.5px solid rgba(139,107,255,.55);
    color:var(--ricoCiano);
    box-shadow:0 0 0 1px rgba(139,107,255,.12);
}

body.temaScuroRico .chipPool:active{
    background:rgba(139,107,255,.18);
}

@media (hover:hover){
    body.temaScuroRico .chipPool:hover{
        border-color:var(--ricoCiano);
        box-shadow:0 0 16px rgba(47,217,224,.35);
    }
}

body.temaScuroRico .chipPool.usata{
    background:transparent;
    border-color:rgba(255,255,255,.1);
    color:var(--ricoTestoTenue);
    box-shadow:none;
}

/*---------------- WORDLE ----------------*/

.cartaGiocoWordle{
    align-items:center;
    gap:4px;
}

.grigliaWordle{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
    width:100%;
}

.rigaWordle{
    display:flex;
    justify-content:center;
    width:100%;
}

/* flex (invece di larghezze in px calcolate a mano): le caselle crescono
   fino a max-width, così le parole corte restano ben leggibili e centrate,
   mentre le parole lunghe (7-11 lettere) si restringono automaticamente
   quel poco che serve per entrare tutte sulla riga senza mai sembrare
   minuscole né uscire dal bordo. aspect-ratio le mantiene quadrate senza
   bisogno di calcolare anche l'altezza. */
.casellaWordle{
    flex:1 1 0;
    min-width:0;
    max-width:52px;
    aspect-ratio:1 / 1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--bordo);
    border-radius:8px;
    font-size:var(--wordleCellFont, 20px);
    font-weight:800;
    color:var(--testo);
    background:var(--sfondo);
    text-transform:uppercase;
    transition:background .15s, border-color .15s, color .15s, transform .12s;
}

.casellaWordle.piena{
    border-color:var(--testo-tenue);
    background:var(--carta);
    cursor:pointer;
    animation:letteraPop .12s ease-out;
}

.casellaWordle.corretta{
    background:var(--verde);
    border-color:var(--verde);
    color:#fff;
}

.casellaWordle.presente{
    background:var(--giallo);
    border-color:var(--giallo);
    color:#fff;
}

.casellaWordle.assente{
    background:var(--testo-tenue);
    border-color:var(--testo-tenue);
    color:#fff;
}

.rigaWordle.scuotiRigaWordle{
    animation:scuotiParola .5s;
}

.messaggioWordle{
    min-height:18px;
    font-size:13.5px;
    font-weight:700;
    color:var(--testo-tenue);
    margin-bottom:12px;
    opacity:0;
    transition:opacity .2s;
}

.messaggioWordle.visibile{
    opacity:1;
}

.messaggioWordle.errore{
    color:var(--rosso);
}

.messaggioWordle.successo{
    color:var(--verde);
}

.tastieraWordle{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.rigaTastieraWordle{
    display:flex;
    justify-content:center;
    gap:5px;
}

/* Ogni tasto ha la STESSA larghezza in tutte e tre le file: quella della
   fila più affollata (10 tasti + 9 gap da 5px). Così i tasti della fila
   centrale, di quella in alto e di quella in basso sono identici, e le
   file con meno tasti restano semplicemente centrate. */
.tastoWordle{
    flex:0 0 auto;
    width:calc((100% - 45px) / 10);
    min-width:24px;
    max-width:34px;
    height:44px;
    border:none;
    border-radius:8px;
    background:var(--bordo);
    color:var(--testo);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:transform .1s, background .15s, color .15s;
}

.tastoWordle:active{
    transform:scale(.92);
}

/* Tasti già provati (usati dall'Impiccato): niente cursore a mano, ma i
   colori di stato (verde/grigio) restano pieni, non sbiaditi dal browser. */
.tastoWordle:disabled{
    cursor:default;
    opacity:1;
}

.tastoWordle.assente:disabled{
    opacity:.6;
}

.tastoWordle.corretta{
    background:var(--verde);
    color:#fff;
}

.tastoWordle.presente{
    background:var(--giallo);
    color:#fff;
}

.tastoWordle.assente{
    background:var(--testo-tenue);
    color:#fff;
    opacity:.6;
}

.tastoWordleLargo{
    flex:1.6;
    max-width:56px;
    font-size:10.5px;
}

/*---------------- PAROLE CROCIATE ----------------*/

/* Niente più "cartaGioco" bianca qui: tolti sfondo/bordo/ombra/padding
   laterale per lasciare più larghezza possibile allo schema, che su
   griglie larghe ne ha bisogno per stare nello schermo senza rimpicciolire
   troppo le caselle. */
.cartaGiocoCruciverba{
    align-items:center;
    gap:6px;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:6px 0 20px;
}

.cartaGiocoCruciverba::before{
    display:none;
}

.cruGrigliaScroll{
    width:100%;
    overflow-x:auto;
    display:flex;
    justify-content:center;
    margin-bottom:18px;
}

.cruGriglia{
    display:grid;
    gap:2px;
    padding:6px;
    /* Più scuro/saturo di var(--blu-chiaro) apposta: quel colore è già
       usato da .cellaEvidenziata (riga/colonna selezionata) qui sotto, e
       uno sfondo troppo simile la faceva confondere con lo sfondo stesso. */
    background:linear-gradient(160deg, #d3ddf2, #b9c8ea);
    border:2px solid #a9bce3;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(59,111,224,.12);
    flex-shrink:0;
}

[data-theme="dark"] .cruGriglia{
    background:linear-gradient(160deg, #1c2440, #141a30);
    border-color:#3a4a80;
    box-shadow:0 8px 20px rgba(0,0,0,.4);
}

/* Cella non toccata da nessuna parola: niente casella nera (schema
   "parole crociate"), resta trasparente e mostra solo il reticolo sottile
   dato dal background di .cruGriglia sotto al gap di 2px. */
.cellaCruciVuota{
    background:transparent;
    pointer-events:none;
}

.cellaCruci{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--carta);
    border-radius:4px;
    /* "Bordo" simulato con box-shadow (inset) invece di un border vero:
       niente da aggiungere ai calcoli di larghezza in renderGrigliaCruciverba
       (un border reale, anche con box-sizing:border-box, è più delicato da
       tenere sincronizzato con quei calcoli). Aggiunge anche una lieve ombra
       per un minimo di profondità, senza esagerare. */
    box-shadow:inset 0 0 0 1px var(--bordo), 0 1px 1px rgba(30,50,90,.05);
    font-weight:800;
    color:var(--testo);
    text-transform:uppercase;
    cursor:pointer;
    transition:background .15s, color .15s, box-shadow .15s;
}

.numeroCella{
    position:absolute;
    top:1px;
    left:2px;
    font-size:8px;
    font-weight:700;
    color:var(--testo-tenue);
}

.cellaCruci.cellaEvidenziata{
    background:#c3d4fb;
}

[data-theme="dark"] .cellaCruci.cellaEvidenziata{
    background:#33437a;
}

.cellaCruci.cellaAttiva{
    background:var(--blu);
    color:#fff;
    box-shadow:inset 0 0 0 1px var(--blu-scuro), 0 2px 4px rgba(59,111,224,.35);
}

.cellaCruci.cellaAttiva .numeroCella{
    color:rgba(255,255,255,.8);
}

.cellaCruci.cellaCorretta{
    background:var(--verde-chiaro);
    color:var(--verde);
    box-shadow:inset 0 0 0 1px var(--verde);
}

.cellaCruci.cellaErrata{
    background:var(--rosso-chiaro);
    color:var(--rosso);
    box-shadow:inset 0 0 0 1px var(--rosso);
}

.cruIndiziContenitore{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:16px;
}

.cruColonnaIndizi h4{
    font-size:12px;
    font-weight:800;
    color:var(--testo-tenue);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.cruListaIndizi{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:160px;
    overflow-y:auto;
}

.vociIndizio{
    font-size:12.5px;
    line-height:1.35;
    color:var(--testo);
    padding:6px 8px;
    border-radius:10px;
    cursor:pointer;
    transition:background .15s, color .15s;
}

.vociIndizio:hover{
    background:var(--sfondo);
}

.vociIndizio.vociIndizioAttiva{
    background:var(--blu-chiaro);
    color:var(--blu-scuro);
    font-weight:700;
}

.vociIndizio.vociIndizioCompletata{
    color:var(--testo-tenue);
    text-decoration:line-through;
}

.tastieraCruci{
    margin-bottom:16px;
}

.btnVerificaCruci{
    width:100%;
    padding:15px 18px;
    border:none;
    border-radius:16px;
    background:linear-gradient(135deg,var(--blu),var(--viola));
    color:#fff;
    font-size:15px;
    font-weight:800;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(59,111,224,.18);
    transition:transform .12s, box-shadow .12s, filter .12s;
}

.btnVerificaCruci:hover{
    filter:brightness(1.04);
    box-shadow:0 3px 9px rgba(59,111,224,.24);
}

.btnVerificaCruci:active{
    transform:scale(.97);
}

.btnVerificaCruci:disabled{
    opacity:.6;
    cursor:default;
    transform:none;
    box-shadow:none;
}

/* Compare dopo il "Verifica": è l'utente a decidere quando andare avanti,
   così ha tutto il tempo di guardare le celle giuste (verde) e sbagliate
   (rosso). Stile "calmo" (contorno, non pieno) per non competere con la
   griglia colorata e per distinguerlo dal "Verifica" pieno blu→viola. */
.btnContinuaCruci{
    width:100%;
    padding:15px 18px;
    border:1.5px solid var(--bordo);
    border-radius:16px;
    background:var(--carta);
    color:var(--testo);
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    box-shadow:var(--ombra);
    transition:transform .12s, box-shadow .12s, border-color .14s, color .14s;
}

.btnContinuaCruci:hover{
    border-color:var(--blu);
    color:var(--blu);
}

.btnContinuaCruci:active{
    transform:scale(.97);
}

/*---------------- FINE / RISULTATO ----------------*/

.fineSchermata{
    width:100%;
    max-width:460px;
    margin:0 auto;
    text-align:center;
}

.trofeo{
    position:relative;
    font-size:50px;
    margin-bottom:6px;
    display:inline-block;
    animation:rimbalzoTrofeo .7s cubic-bezier(.3,1.8,.4,1) both;
}

@keyframes rimbalzoTrofeo{
    0%{ transform:scale(.3) rotate(-15deg); opacity:0; }
    70%{ transform:scale(1.15) rotate(6deg); opacity:1; }
    100%{ transform:scale(1) rotate(0); }
}

.trofeo::before,
.trofeo::after{
    position:absolute;
    font-size:22px;
    opacity:.9;
}

.trofeo::before{
    content:"🎉";
    left:-36px;
    top:-4px;
    animation:fluttuaConfetti 2s ease-in-out infinite;
}

.trofeo::after{
    content:"✨";
    right:-32px;
    top:2px;
    animation:fluttuaConfetti 2.4s ease-in-out infinite reverse;
}

@keyframes fluttuaConfetti{
    0%,100%{ transform:translateY(0) rotate(0); }
    50%{ transform:translateY(-8px) rotate(12deg); }
}

.fineSchermata h2{
    font-size:22px;
    font-weight:800;
    margin-bottom:20px;
    background:linear-gradient(135deg,var(--testo) 25%,var(--blu),var(--viola));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    display:inline-block;
}

.grigliaStatistiche{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    gap:10px;
    margin-bottom:26px;
}

.grigliaStatistiche p{
    background:var(--carta-grad);
    border-radius:18px;
    padding:14px 8px;
    box-shadow:var(--ombra);
    border:1px solid var(--bordo);
    font-size:12px;
    color:var(--testo-tenue);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    transition:transform .16s, box-shadow .16s;
}

.grigliaStatistiche p:hover{
    transform:translateY(-3px);
    box-shadow:var(--ombra-forte);
}

.grigliaStatistiche p b{
    font-size:22px;
    font-weight:800;
    background:linear-gradient(135deg,var(--blu),var(--viola));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.statoRisultato{
    opacity:0;
    animation:spuntaStato .4s ease-out forwards;
}

.statoRisultato:nth-child(1){ animation-delay:.05s; }
.statoRisultato:nth-child(2){ animation-delay:.3s; }
.statoRisultato:nth-child(3){ animation-delay:.55s; }
.statoRisultato:nth-child(4){ animation-delay:.8s; }
.statoRisultato:nth-child(5){ animation-delay:1.05s; }
.statoRisultato:nth-child(6){ animation-delay:1.3s; }

@keyframes spuntaStato{
    0%{ transform:scale(.7) translateY(6px); opacity:0; }
    70%{ transform:scale(1.05) translateY(0); opacity:1; }
    100%{ transform:scale(1) translateY(0); opacity:1; }
}

.azioniFinali{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.btnSecondarioGrande{
    width:100%;
    height:56px;
    border:1.5px solid var(--bordo);
    border-radius:18px;
    background:var(--carta);
    color:var(--testo);
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:transform .14s, border-color .14s;
}

.btnSecondarioGrande:hover{
    border-color:var(--blu);
}

.btnSecondarioGrande:active{
    transform:scale(.98);
}

.btnHome{
    width:100%;
    height:56px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,var(--blu),var(--viola));
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 14px 28px rgba(59,111,224,.32);
    transition:transform .14s, box-shadow .14s;
}

.btnHome:hover{
    box-shadow:0 16px 32px rgba(59,111,224,.4);
}

.btnHome:active{
    transform:scale(.98);
}

/*---------------- NAV INFERIORE ----------------*/

.barraInferiore{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:74px;
    background:var(--nav-bg);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    display:flex;
    justify-content:space-around;
    align-items:center;
    box-shadow:0 -10px 30px rgba(30,50,90,.10);
    border-top:1px solid var(--bordo);
    view-transition-name:barra-inferiore;
}

.barraInferiore a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    text-decoration:none;
    color:var(--testo-tenue);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.iconaNav{
    width:34px;
    height:34px;
    border-radius:50%;
    font-size:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .18s, transform .18s;
}

.barraInferiore a.attiva{
    color:var(--blu);
}

.barraInferiore a.attiva .iconaNav{
    background:linear-gradient(135deg,var(--blu-chiaro),#f2edfe);
    box-shadow:0 4px 10px rgba(59,111,224,.22);
    transform:translateY(-2px);
}

[data-theme="dark"] .barraInferiore a.attiva .iconaNav,
[data-theme="dark"] .cardLivello.selezionata,
[data-theme="dark"] .cardDurata.selezionata,
[data-theme="dark"] .badgeTimer,
[data-theme="dark"] .casellaLettera.piena{
    background:linear-gradient(135deg,var(--blu-chiaro),#241b3d);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#6f97f0,#4a6fd6);
}

/* La barra ha senso solo nella schermata hub (selezione del gioco):
   durante il gioco vero e proprio la nascondiamo per non distrarre e
   per sfruttare tutto lo schermo. */
.barraInferiore.navNascosta{
    display:none;
}

body.schermataImmersiva{
    padding-bottom:22px;
}

/* Dentro un minigioco (o nel riepilogo finale) la bandiera UK e il
   pallino profilo in alto sono solo distrazione e possono sovrapporsi
   alla barra del gioco: li nascondiamo, restano visibili solo nell'hub
   di scelta del gioco. Ogni schermata di gioco ha già la sua freccia
   "indietro" (.btnEsci) in alto a sinistra per uscire. */
body.schermataImmersiva #barraTopPrincipale,
body.schermataImmersiva #bandieraUKContenitore,
body.schermataImmersiva #avatarProfiloContenitore,
body.schermataImmersiva #badgeStreakProfilo{
    display:none;
}

/* Stesso ragionamento per l'intestazione della pagina ("Giochi" +
   sottotitolo): dentro un minigioco non serve più, prende il posto il
   titolo del gioco specifico (.titoloGiocoSchermata, dentro ogni
   schermata di gioco). Torna visibile solo nell'hub. */
body.schermataImmersiva .topbar{
    display:none;
}

.titoloGiocoSchermata{
    width:100%;
    text-align:center;
    font-size:21px;
    font-weight:800;
    color:var(--testo);
    margin-bottom:16px;
}

/*---------------- SCROLLBAR ----------------*/

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:var(--sfondo);
    border-radius:20px;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#9fbdf7,#6f97f0);
    border-radius:20px;
}