/* Struttura di tutte le pagine: i colori arrivano da temi.css. Pensata prima per il telefono. */

*, *::before, *::after { box-sizing: border-box; }
/* "hidden" deve nascondere sempre, anche gli elementi a cui il CSS dà un display (pulsanti, gettoni...). */
[hidden] { display: none !important; }
/* Solo per i lettori di schermo (VoiceOver, TalkBack): c'è nell'albero di accessibilità, non si vede. */
.solo-lettori { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

html, body { margin: 0; }
body {
    background: var(--sfondo-img), var(--sfondo);
    background-attachment: fixed;
    color: var(--testo);
    font-family: var(--font);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
a { color: inherit; }

/* ---------- pulsanti ---------- */

.principale, .secondario, .testuale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--accento);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform .1s, filter .15s;
}
.principale { background: var(--accento); color: var(--accento-testo); }
.secondario { background: transparent; color: var(--testo); border-color: var(--foglio-bordo); }
.testuale { background: none; border-color: transparent; color: var(--testo-tenue); text-decoration: underline; padding-inline: 6px; }
.principale:hover, .secondario:hover { filter: brightness(1.06); }
.principale:active, .secondario:active { transform: scale(.97); }

/* ---------- testata: il logo è fatto di tessere ---------- */

.testata {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}
.testata .icona {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    text-decoration: none;
    color: var(--testo);
}
.testata a.icona:hover { background: var(--foglio); }
.testata a.icona.pannello { width: auto; padding: 0 12px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.testata a.icona.pannello .p-corto { display: none; }
.testata-destra { justify-self: end; display: flex; align-items: center; gap: 2px; }
.cronometro { font-variant-numeric: tabular-nums; color: var(--testo-tenue); font-size: 15px; margin-right: 6px; }

.logo { display: flex; gap: 3px; text-decoration: none; }
.logo span {
    --l: 26px;
    width: var(--l);
    height: var(--l);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-tessere);
    font-weight: 700;
    font-size: calc(var(--l) * .58);
    background: var(--tessera-sfondo);
    color: var(--tessera-testo);
    border: 1.5px solid var(--tessera-bordo);
    border-radius: var(--tessera-raggio);
    box-shadow: var(--tessera-ombra);
}
/* Tessere a zig-zag: una striscia che si srotola. */
.logo span:nth-child(odd) { transform: translateY(-2px); }

/* ---------- pagina iniziale ---------- */

.home {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 4px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.slogan { text-align: center; color: var(--testo-tenue); margin: 0 0 4px; }
.slogan em { font-family: var(--font-titoli); font-size: 1.15em; color: var(--testo); font-style: italic; }

.scheda-modo {
    background: var(--foglio);
    border: 1px solid var(--foglio-bordo);
    border-radius: 16px;
    box-shadow: var(--ombra);
    padding: 18px;
}
.scheda-modo.spenta { opacity: .55; box-shadow: none; }
.scheda-testa { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.scheda-modo.spenta .scheda-testa { margin-bottom: 0; }
.scheda-icona {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--accento);
    color: var(--accento-testo);
}
.scheda-testa h2 { margin: 0; font-family: var(--font-titoli); font-size: 22px; line-height: 1.2; }
.scheda-testa p { margin: 2px 0 0; color: var(--testo-tenue); font-size: 14px; }
.numero { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--testo-tenue); }
.presto { font-family: var(--font); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--foglio-bordo); vertical-align: middle; }

/* L'invito a giocare: scheda centrata, cinque tessere "?" che ondeggiano, un pulsante grande.
   Toccandolo il pulsante sparisce e i livelli si srotolano sotto (#invito.aperto). Senza JS (niente .js su <html>)
   i livelli sono già aperti. .subito = aperti al caricamento per chi oggi ha già giocato: niente animazione.
   Qui la versione di base (tema B); A e C hanno le loro varianti più sotto, nella sezione "invito per tema". */
.invito { text-align: center; padding: 22px 18px 20px; }
.invito-numero { margin: 0; font: 600 13px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--testo-tenue); }
.invito h2 { margin: 4px 0 6px; font-family: var(--font-titoli); font-size: 26px; line-height: 1.15; }
.invito-sotto { margin: 0 0 16px; color: var(--testo-tenue); font-size: 14px; }
.parola-vuota { display: flex; gap: 6px; justify-content: center; margin: 4px 0 18px; }
.parola-vuota span {
    width: 44px; height: 48px; display: grid; place-items: center;
    background: var(--tessera-sfondo); border: 1.5px solid var(--tessera-bordo); border-radius: var(--tessera-raggio); box-shadow: var(--tessera-ombra);
    font: 700 24px var(--font-tessere); color: var(--testo-tenue);
    animation: invito-ondeggia 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .18s);
}
@keyframes invito-ondeggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.gioca-grande { font-size: 18px; padding: 15px 30px; box-shadow: 0 4px 0 color-mix(in srgb, var(--accento) 60%, #000); }
.gioca-grande:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accento) 60%, #000); }
.gioca-grande .freccia-g { display: inline-block; animation: invito-spinge 1.4s ease-in-out infinite; }
@keyframes invito-spinge { 50% { transform: translateX(4px); } }
.prima-volta { margin: 12px 0 0; font-size: 13.5px; color: var(--testo-tenue); }
.prima-volta a { color: var(--testo); font-weight: 600; }

.scelta-livelli { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed var(--foglio-bordo); }
.scelta-livelli h3 { margin: 0 0 12px; font-family: var(--font-titoli); font-size: 20px; }
.js .invito:not(.aperto) .scelta-livelli { display: none; }
.js .invito.aperto .gioca-grande { display: none; }
.js .invito:not(.aperto) .indietro, html:not(.js) .indietro { display: none; }
.invito.aperto:not(.subito) .scelta-livelli { animation: invito-srotola .6s cubic-bezier(.3, 1.3, .5, 1) both; }
.invito.aperto:not(.subito) .livello-giorno { animation: invito-entra .45s both; animation-delay: calc(.25s + var(--i) * .12s); }
@keyframes invito-srotola { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes invito-entra { from { opacity: 0; transform: translateY(-14px) rotateX(60deg); } to { opacity: 1; transform: none; } }

.livello-giorno {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin-bottom: 10px; text-align: left;
    background: var(--tessera-sfondo); border: 1.5px solid var(--tessera-bordo); border-radius: 12px;
    text-decoration: none; color: var(--testo); transition: border-color .15s, transform .1s;
}
.livello-giorno:hover { border-color: var(--accento); }
.livello-giorno:active { transform: scale(.98); }
.livello-giorno .tacche { display: flex; gap: 3px; flex: none; }
.livello-giorno .tacche i { width: 7px; height: 22px; border-radius: 2px; background: var(--tessera-bordo); }
.livello-giorno .tacche i.on { background: var(--accento); }
.testo-livello { flex: 1; min-width: 0; }
.livello-giorno strong { display: block; font-family: var(--font-titoli); font-size: 18px; }
.livello-giorno small { display: block; color: var(--testo-tenue); font-size: 13px; line-height: 1.3; }
.livello-giorno .vai { font-size: 20px; color: var(--accento); }
/* Lo stato di oggi (Decifrato, Sigillato, In corso) sta sul bordo in alto, come il nastro: così la descrizione resta larga.
   Compare solo a chi ha già giocato, e allora il nastro non c'è più. */
.livello-giorno .stato { position: absolute; top: -10px; right: 14px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--accento); color: var(--accento-testo); }
.livello-giorno:has(.stato:not([hidden])) { margin-top: 16px; }
.livello-giorno.vinta .stato { background: var(--verde); color: var(--contatore-testo); }
.livello-giorno.persa .stato { background: var(--rosso); color: var(--contatore-testo); }
.livello-giorno.in-corso .stato { background: var(--giallo); color: var(--giallo-testo); }
.livello-giorno.consigliato { border: 2px solid var(--accento); background: var(--foglio); padding: 16px 14px; box-shadow: var(--ombra); }
.livello-giorno.consigliato strong { font-size: 21px; }
.nastro {
    position: absolute; top: -11px; right: 14px; padding: 3px 10px; border-radius: 999px;
    background: var(--accento); color: var(--accento-testo); font: 700 11.5px var(--font); letter-spacing: .04em;
    animation: invito-pulsa 1.8s ease-in-out infinite;
}
@keyframes invito-pulsa { 50% { transform: scale(1.07); } }
.indietro { display: block; margin: 4px auto 0; background: none; border: 0; color: var(--testo-tenue); text-decoration: underline; font-size: 14px; }
/* Chi non vuole animazioni: tessere, freccia e nastro fermi, i livelli compaiono senza srotolarsi (vale anche per le varianti dei temi). */
@media (prefers-reduced-motion: reduce) {
    .invito *, .invito *::before, .invito *::after { animation: none !important; transition: none !important; }
}

.libera fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.libera legend { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-tenue); margin-bottom: 8px; }
.gettoni { display: flex; flex-wrap: wrap; gap: 8px; }
.gettoni label { cursor: pointer; }
.gettoni input { position: absolute; opacity: 0; pointer-events: none; }
.gettoni span {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1.5px solid var(--tessera-bordo);
    background: var(--tessera-sfondo);
    color: var(--tessera-testo);
    font-family: var(--font-tessere);
    font-weight: 700;
    font-size: 18px;
    transition: transform .1s;
}
.gettoni.larghi span { font-family: var(--font); font-size: 15px; font-weight: 600; padding: 0 16px; }
.gettoni input:checked + span { background: var(--accento); border-color: var(--accento); color: var(--accento-testo); transform: translateY(-1px); }
.gettoni input:disabled + span { opacity: .35; cursor: not-allowed; }
.libera legend .nota { text-transform: none; letter-spacing: 0; font-weight: 500; }
.gettoni input:focus-visible + span { outline: 2px solid var(--accento); outline-offset: 2px; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.azioni [hidden] { display: none; }

@media (max-width: 480px) {
    .logo span { --l: 22px; }
}

/* ---------- schermata di gioco ---------- */

.gioco {
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.foglio {
    background: var(--foglio);
    border: 1px solid var(--foglio-bordo);
    border-radius: 16px;
    box-shadow: var(--ombra);
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.meta {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--testo-tenue);
}

/* --n = lettere, --m = righe. La tessera si restringe per stare in larghezza (10 lettere in 360 px)
   e nello spazio verticale libero (--alto, misurato da gioco.js). I contatori sono larghi 0,8 tessere. */
.griglia {
    --spazio: 5px;
    --t-max: 52px;
    --largo: min(100vw - 50px, 510px);
    /* Una sola formula: una variabile che usa se stessa è un ciclo e il browser la scarta.
       In altezza mai sotto 26 px (con 13 righe la griglia scorre); in larghezza si scende fino a 20 px
       pur di non sforare (10 lettere su un telefono da 360 px). */
    --t: clamp(
        20px,
        min(
            calc((var(--largo) - (var(--n) + 3) * var(--spazio) - 10px) / (var(--n) + 2.4)),
            max(26px, calc(var(--alto, 100dvh - 470px) / var(--m) - var(--spazio)))
        ),
        var(--t-max)
    );
    display: flex;
    flex-direction: column;
    gap: var(--spazio);
    max-height: var(--alto, none);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.riga { display: flex; gap: var(--spazio); align-items: center; }
.tessera {
    width: var(--t);
    height: var(--t);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-tessere);
    font-weight: 700;
    font-size: calc(var(--t) * .52);
    background: var(--tessera-sfondo);
    color: var(--tessera-testo);
    border: 1.5px solid var(--tessera-bordo);
    border-radius: var(--tessera-raggio);
    box-shadow: var(--tessera-ombra);
    user-select: none;
    transition: background .15s;
}
.tessera[data-l] { cursor: pointer; }
.riga.attiva .tessera { border-color: var(--tessera-bordo-attiva); border-width: 2px; }
.tessera.salta::after { content: "_"; opacity: .6; }
.riga.invalida .tessera[data-l] { text-decoration: line-through; color: var(--rosso); }
.riga.da-aiuto .tessera { border-style: dashed; }

.contatori {
    display: flex;
    gap: var(--spazio);
    margin-left: 6px;
    /* Larga uguale anche vuota, così la griglia non si sposta quando arrivano i numeri. */
    width: calc(var(--t) * 2.4 + var(--spazio) * 2);
}
.c {
    width: calc(var(--t) * .8);
    height: calc(var(--t) * .8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-weight: 800;
    font-size: calc(var(--t) * .4);
    border-radius: var(--contatore-raggio);
    color: var(--contatore-testo);
}
.c.verde { background: var(--verde); }
.c.giallo { background: var(--giallo); color: var(--giallo-testo); }
.c.rosso { background: var(--rosso); }

/* Marcature a mano: si vedono uguali su griglia e tastiera. */
.m-r { background: var(--marca-r) !important; color: var(--tasto-testo); }
.m-y { background: var(--marca-y) !important; }
.m-g { background: var(--marca-g) !important; }

@keyframes scossa {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.riga.scossa { animation: scossa .35s; }

/* Il messaggio galleggia sopra la griglia: non ruba altezza alle tessere. */
/* "Rivedi il risultato": sotto il foglio, a partita finita e riquadro chiuso. */
.rivedi { align-self: center; margin: 2px auto 0; }
.messaggio {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--testo);
    color: var(--sfondo);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--ombra);
    pointer-events: none;
}
/* Dopo 2,5 s il messaggio sparisce alla vista, ma il testo resta per i lettori di schermo finché non si preme un tasto. */
.messaggio:empty, .messaggio.sbiadito { opacity: 0; }
.messaggio { transition: opacity .3s; }
.messaggio:empty { display: none; }

/* ---------- tastiera ---------- */

.tastiera { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.fila { display: flex; gap: 5px; justify-content: center; }
.tasto {
    flex: 1 1 0;
    max-width: 44px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: var(--tasto-raggio);
    background: var(--tasto-sfondo);
    color: var(--tasto-testo);
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.tasto:active { transform: translateY(1px); box-shadow: none; }
.tasto.larga { flex-grow: 1.6; max-width: 76px; font-size: 12px; }
.tasto.larghissima { flex-grow: 2.2; max-width: 120px; font-size: 12px; }
.fila.extra { margin-top: 2px; }
.fila.extra .tasto { height: 38px; max-width: 132px; font-size: 13px; }

/* Telefono: la tastiera scende in fondo, come in un'app. */
@media (max-width: 600px) {
    .tastiera { margin-top: auto; }
}

/* ---------- partita guidata: il fumetto ----------
   Sta sotto il tabellone e subito sopra la tastiera (sul telefono si vede sempre); il tasto da premere lampeggia.
   Un solo markup, tre versioni: B (predefinito) il biglietto del Cifratore che si srotola con la piuma che scrive,
   A una scheda da terminale col testo che si scrive da solo, C la mascotte-rotolino che parla in una nuvoletta.
   Animazioni tutte con prefisso guida- per non toccare quelle del riquadro di fine. */
.guida { position: relative; display: flex; align-items: flex-end; gap: 6px; }
.guida-nuvola { position: relative; flex: 1; min-width: 0; padding: 10px 14px 10px 50px; font: 15px/1.38 var(--font-titoli); color: #3b2a1e;
    background: radial-gradient(ellipse at 50% 40%, #fffaf0, #f3e6c8 80%); border: 1px solid #cdb99a;
    box-shadow: inset 0 0 16px rgba(139, 111, 78, .3), 0 4px 10px rgba(59, 42, 30, .15); transform-origin: 50% 0; }
.guida.entra .guida-nuvola { animation: guida-srotola .6s cubic-bezier(.3, .8, .3, 1) both; }
.guida-nuvola::before { content: "✒"; content: "✒" / ""; position: absolute; left: 12px; top: 10px; font-size: 26px; line-height: 1; color: #7a3018;
    animation: guida-piuma 1.6s ease-in-out infinite; }
.guida-passo { display: block; margin-bottom: 2px; font-size: 13px; font-style: italic; color: #7a3018; }
.guida-testo, .guida-scritto { margin: 0; overflow-wrap: anywhere; }
.guida-testo strong, .guida-scritto strong { color: #7a3018; letter-spacing: 1px; white-space: nowrap; }
/* Mentre si scrive (tema A) si vede la copia che si scrive; il testo intero resta per lo screen reader. */
.guida-scritto:not([hidden]) + .guida-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.guida-firma { display: block; margin-top: 2px; text-align: right; font-size: 13px; font-style: italic; color: #5e4631; }
.guida-avanti { display: block; margin: 6px 0 0 auto; padding: 6px 14px; border: 0; border-radius: 0; background: #b5532f; color: #fff;
    font: 600 13px var(--font); box-shadow: 0 3px 0 #7a3018; cursor: pointer; }
.guida-avanti[hidden] { display: none; }
.guida-mascotte { display: none; }
#tastiera .tasto.guida-evid { outline: 3px solid #b5532f; outline-offset: 1px; animation: guida-lampeggia 1s ease-in-out infinite; }
.guida-avanti:not([hidden]) { animation: guida-lampeggia-tasto 1.4s ease-in-out infinite; }

/* A · terminale: scheda scura con la barra verde, il testo che si scrive col cursore, le parole in un tassello */
:root[data-tema="a"] .guida-nuvola { padding: 10px 14px; font: 14px/1.4 var(--font); color: #f2f2f2; background: #1e1e20;
    border: 1px solid #3a3a3c; border-left: 4px solid #538d4e; border-radius: 4px; box-shadow: none; }
:root[data-tema="a"] .guida.entra .guida-nuvola { animation: guida-sale .35s ease-out both; }
:root[data-tema="a"] .guida-nuvola::before { content: ""; left: 40px; top: -8px; width: 14px; height: 14px; background: #1e1e20;
    border-left: 1px solid #3a3a3c; border-top: 1px solid #3a3a3c; transform: rotate(45deg); animation: none; }
:root[data-tema="a"] .guida-passo { font: 800 11px var(--font); letter-spacing: 2px; text-transform: uppercase; color: #6cbf65; }
:root[data-tema="a"] .guida-testo strong, :root[data-tema="a"] .guida-scritto strong { color: #fff; background: #2a2a2d; padding: 0 5px; border-radius: 3px; }
/* Il cursore apre la parte non ancora scritta, che è già al suo posto ma invisibile: il fumetto non cresce mentre si scrive. */
.guida-resto { visibility: hidden; }
.guida-resto::before { content: "▍"; visibility: visible; color: #6cbf65; animation: guida-lampeggia-tasto .8s steps(1) infinite; }
:root[data-tema="a"] .guida-firma { display: none; }
:root[data-tema="a"] .guida-avanti { background: #3f7a3a; border-radius: 4px; box-shadow: none; }
:root[data-tema="a"] #tastiera .tasto.guida-evid { outline-color: #6cbf65; }

/* C · la mascotte: un rotolino bianco con le aste gialle salta fuori, dondola, sbatte gli occhi e parla in una nuvoletta */
:root[data-tema="c"] .guida-mascotte { display: block; flex: none; width: 50px; height: 60px; margin-bottom: 8px; position: relative; transform-origin: 50% 100%;
    animation: guida-dondola 2.4s 1s ease-in-out infinite; }
:root[data-tema="c"] .guida.entra .guida-mascotte { animation: guida-salta .7s cubic-bezier(.34, 1.8, .64, 1) both, guida-dondola 2.4s 1s ease-in-out infinite; }
.guida-corpo { position: absolute; inset: 8px 4px 0; background: #fff; border-radius: 14px; box-shadow: 0 4px 0 rgba(40, 10, 120, .3); }
.guida-asta { position: absolute; left: 0; right: 0; height: 12px; background: #facc15; border-radius: 6px; box-shadow: 0 3px 0 #c99a00; }
.guida-asta.su { top: 2px; }
.guida-asta.giu { bottom: -4px; }
.guida-occhi { position: absolute; top: 24px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
.guida-occhi i { width: 6px; height: 9px; background: #2b1a6b; border-radius: 3px; animation: guida-sbatte 3s infinite; }
.guida-bocca { position: absolute; top: 38px; left: 50%; width: 12px; height: 6px; margin-left: -6px; border: 2px solid #2b1a6b; border-top: 0; border-radius: 0 0 8px 8px; }
:root[data-tema="c"] .guida-nuvola { margin-bottom: 6px; padding: 10px 14px; font: 500 15px/1.38 var(--font); color: #2b1a6b; background: #fff; border: 0;
    border-radius: 20px; box-shadow: 0 5px 0 rgba(40, 10, 120, .3); }
:root[data-tema="c"] .guida.entra .guida-nuvola { animation: guida-pop .5s .15s cubic-bezier(.34, 1.56, .64, 1) both; }
:root[data-tema="c"] .guida-nuvola::before { content: ""; left: -10px; top: auto; bottom: 14px; border: 10px solid transparent; border-right-color: #fff; border-left: 0;
    width: 0; height: 0; animation: none; }
:root[data-tema="c"] .guida-passo { font: 700 13px var(--font); color: #5b3df5; }
:root[data-tema="c"] .guida-testo strong, :root[data-tema="c"] .guida-scritto strong { color: #2b1a6b; background: #facc15; border-radius: 8px; padding: 0 6px; }
:root[data-tema="c"] .guida-firma { display: none; }
:root[data-tema="c"] .guida-avanti { background: #5b3df5; border-radius: 999px; font: 700 13px var(--font); box-shadow: 0 3px 0 #3d1fb8; }
:root[data-tema="c"] #tastiera .tasto.guida-evid { outline-color: #facc15; }

@keyframes guida-srotola { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes guida-piuma { 0%, 100% { transform: rotate(0) translate(0, 0); } 25% { transform: rotate(-12deg) translate(2px, 1px); }
    50% { transform: rotate(4deg) translate(4px, 0); } 75% { transform: rotate(-8deg) translate(1px, 2px); } }
@keyframes guida-sale { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes guida-salta { from { transform: translateY(70px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes guida-dondola { 50% { transform: rotate(-6deg); } }
@keyframes guida-sbatte { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes guida-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes guida-lampeggia { 50% { outline-color: transparent; } }
@keyframes guida-lampeggia-tasto { 50% { opacity: .35; } }
/* Telefono: fumetto e tastiera scendono in fondo insieme. */
@media (max-width: 600px) {
    .guida { margin-top: auto; }
    .guida ~ .tastiera { margin-top: 0; }
}

/* PC: tutto un po' più arioso, e la griglia centrata (i contatori le stanno a destra). */
@media (min-width: 900px) {
    .gioco { max-width: 600px; }
    .foglio { padding: 14px 20px 18px; }
    .griglia { --largo: 540px; padding-left: calc(var(--t) * 2.4 + var(--spazio) * 2 + 6px); }
    .tasto { max-width: 50px; height: 50px; font-size: 17px; }
    .tasto.larga { max-width: 84px; font-size: 13px; }
    .logo span { --l: 30px; }
}

/* ---------- finestre ---------- */

.finestra {
    border: 1px solid var(--foglio-bordo);
    border-radius: 18px;
    background: var(--pannello);
    color: var(--pannello-testo);
    max-width: min(420px, calc(100vw - 32px));
    padding: 22px;
    box-shadow: var(--ombra);
}
.finestra::backdrop { background: rgba(20, 12, 6, .5); backdrop-filter: blur(2px); }
.finestra h2 { margin: 0 0 8px; font-family: var(--font-titoli); outline: none; }
/* Il riquadro di fine è un rotolo, diverso per tema (A ardesia con tessere, B pergamena con sigillo, C pop con
   coriandoli): la pergamena si srotola dall'alto. Non supera lo schermo: con la definizione può allungarsi, e
   allora scorre in verticale. I colori e gli interruttori per tema stanno in temi.css (--rotolo-…). */
#dlg-fine { max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto; text-align: center;
    background: var(--rotolo-riquadro-sfondo); color: var(--rotolo-riquadro-testo); }
/* Fuori dalla pergamena i pulsanti e i link prendono il colore del riquadro (nel tema C è viola, come il resto del sito). */
#dlg-fine .secondario, #dlg-fine .testuale, #dlg-fine .fine-caffe, #dlg-fine .fine-caffe a { color: var(--rotolo-riquadro-testo); }
.finestra.rotolo { padding-top: 0; max-width: min(420px, calc(100vw - 16px)); }
.rotolo-asta { height: 16px; margin: 0 -16px; background: linear-gradient(var(--rotolo-asta-alto), var(--rotolo-asta-basso));
    border-radius: 8px; position: relative; z-index: 2; box-shadow: var(--rotolo-asta-ombra); }
.rotolo-asta:first-child { border-radius: 0 0 8px 8px; }
.rotolo-asta-fondo { display: var(--rotolo-asta-fondo); margin-top: -6px; }
/* I pomoli alle estremità delle aste: solo dove --rotolo-pomolo-larg non è 0 (tema B). */
.rotolo-asta::before, .rotolo-asta::after { content: ""; position: absolute; top: 0; width: var(--rotolo-pomolo-larg); height: 22px;
    border-radius: 6px; background: linear-gradient(var(--rotolo-pomolo), var(--rotolo-coda)); }
.rotolo-asta::before { left: -6px; }
.rotolo-asta::after { right: -6px; }
.rotolo-carta { margin: 0 -4px; padding: 18px 16px var(--rotolo-carta-fondo); overflow: hidden; position: relative; transform-origin: top; color: var(--rotolo-testo);
    background: var(--rotolo-carta-sfondo); border: 1px solid var(--rotolo-contorno); border-top: 0; border-radius: var(--rotolo-raggio);
    box-shadow: var(--rotolo-ombra); }
#dlg-fine[open] .rotolo-carta { animation: var(--rotolo-apertura); }
@keyframes srotola { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rimbalza { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gira { from { transform: rotateX(90deg); } to { transform: none; } }
@keyframes salta { 0% { transform: translateY(-14px) scale(.6); opacity: 0; } 70% { transform: translateY(3px); opacity: 1; } 100% { transform: none; } }
@keyframes timbro { from { transform: scale(2) rotate(-30deg); opacity: 0; } to { transform: rotate(-12deg); opacity: 1; } }
@keyframes cade { from { top: -14px; } to { top: 100%; opacity: .3; transform: rotate(540deg); } }
.rotolo-carta h2 { margin: 0; color: var(--rotolo-testo); font: var(--rotolo-titolo-peso) var(--rotolo-titolo-dim)/1.25 var(--font-titoli);
    letter-spacing: var(--rotolo-titolo-spazio); text-transform: var(--rotolo-titolo-maiusc); }
/* Il nastro: --n è la lunghezza della parola; fino a 10 lettere sta anche a 320 px. Le lettere sono un
   <span> ciascuna (--i è il loro posto): in A sono tessere che si girano, in C saltano, in B stanno ferme. */
.fine-parola { position: relative; margin: var(--rotolo-nastro-margine); padding: 10px 0; background: var(--rotolo-nastro); color: var(--rotolo-nastro-testo);
    font: 900 min(30px, calc((100vw - 80px) / (var(--n, 5) * 1.25))) var(--font-titoli);
    letter-spacing: .3em; text-indent: .3em; transform: rotate(var(--rotolo-nastro-rotazione)); box-shadow: var(--rotolo-nastro-ombra);
    overflow-wrap: anywhere; }
/* Le code di rondine del nastro (tema B): due tacche ai lati, larghe 0 negli altri temi. */
.fine-parola::before, .fine-parola::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--rotolo-coda-larg); background: var(--rotolo-coda); }
.fine-parola::before { left: -10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%); }
.fine-parola::after { right: -10px; clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%); }
:root[data-tema="a"] .fine-parola { --t: min(40px, calc((min(100vw - 16px, 420px) - 54px - (var(--n, 5) - 1) * 4px) / var(--n, 5)));
    display: flex; justify-content: center; gap: 4px; letter-spacing: 0; text-indent: 0; font-weight: 800; border-block: 1px solid var(--rotolo-contorno-nastro); }
:root[data-tema="a"] #dlg-fine.persa .fine-parola span { background: var(--rotolo-tessera-persa); }
:root[data-tema="a"] .fine-parola span { width: var(--t); height: calc(var(--t) * 1.1); display: grid; place-items: center; font-size: calc(var(--t) * .58);
    border-radius: 4px; background: var(--rotolo-tessera); color: var(--rotolo-tessera-testo);
    animation: gira .4s ease-out calc(1s + var(--i) * .15s) both; }
:root[data-tema="c"] .fine-parola { font-weight: 700; border-radius: 6px; }
:root[data-tema="c"] .fine-parola span { display: inline-block; animation: salta .5s ease-out calc(.7s + var(--i) * .09s) both; }
.fine-sigillo { display: var(--rotolo-sigillo); position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%;
    place-items: center; font: 900 18px var(--font-titoli); font-style: normal; color: #fff; background: radial-gradient(circle at 35% 30%, var(--rotolo-pomolo), var(--rotolo-coda) 80%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35); transform: rotate(-12deg); animation: timbro .4s cubic-bezier(.2, 1.6, .4, 1) 1.4s both; }
.fine-coriandoli { display: var(--rotolo-coriandoli); position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fine-coriandoli i { position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px; animation: cade 2.4s linear both; }
.fine-coriandoli i:nth-child(5n+1) { background: var(--rotolo-coriandolo-1); }
.fine-coriandoli i:nth-child(5n+2) { background: var(--rotolo-coriandolo-2); }
.fine-coriandoli i:nth-child(5n+3) { background: var(--rotolo-coriandolo-3); }
.fine-coriandoli i:nth-child(5n+4) { background: var(--rotolo-coriandolo-4); }
.fine-coriandoli i:nth-child(5n) { background: var(--rotolo-coriandolo-5); }
/* Chi non vuole animazioni vede tutto già aperto, fermo e senza coriandoli. */
@media (prefers-reduced-motion: reduce) {
    #dlg-fine[open] .rotolo-carta, #dlg-fine .fine-parola span, #dlg-fine .fine-sigillo { animation: none; }
    .fine-coriandoli { display: none; }
    /* Il fumetto della guida fermo e intero; il tasto da premere resta segnato, senza lampeggiare. */
    .guida *, .guida *::before, .guida *::after, .guida.entra .guida-nuvola, .guida.entra .guida-mascotte, #tastiera .tasto.guida-evid { animation: none !important; }
}
.fine-riga { margin: 0 0 10px; font-size: 13px; color: var(--rotolo-tenue); }
.fine-riga span { display: block; }   /* ipotesi e tempo su una riga, la classifica sotto */
.fine-riga a { color: var(--rotolo-testo); }
.fine-definizione { margin: 0; padding: var(--rotolo-def-imbotto); border-radius: 14px; background: var(--rotolo-def-sfondo); color: var(--rotolo-testo);
    font: var(--rotolo-def-stile) 15px/1.45 var(--font-titoli); overflow-wrap: anywhere; }
.fine-definizione[hidden] { display: none; }
.fine-definizione p { margin: 0 0 4px; }
.fine-definizione .def-significato::before { content: "«"; }
.fine-definizione .def-significato::after { content: "»"; }
.fine-definizione .def-rimando, .fine-definizione .def-esempio { color: var(--rotolo-tenue); }
.fine-definizione .def-fonte { font: 12px Inter, sans-serif; color: var(--rotolo-tenue); }
.fine-definizione .def-fonte a { color: var(--rotolo-tenue); }
.fine-pagina { margin: 8px 0 0; font: 600 13px Inter, sans-serif; text-align: center; }
.fine-pagina[hidden] { display: none; }
#dlg-fine .fine-pagina a { color: var(--rotolo-testo); text-decoration: underline; text-underline-offset: 3px; }
.pulsanti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#dlg-fine .pulsanti { justify-content: center; }
.finestra .secondario, .finestra .testuale { color: var(--pannello-testo); }   /* il tenue del tema C è lavanda: sul pannello bianco non si legge */
.finestra.larga { max-width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }

/* Il benvenuto della prima visita: corto, sta in uno schermo di telefono senza scorrere (anche a 320 px).
   La riga #demo si gioca da sola (benvenuto.js mette .anima); senza lo script o con il movimento ridotto si vedono due righe ferme.
   Qui la versione di base (tema B); A e C hanno le loro varianti nella sezione "invito per tema". */
.finestra.benvenuto { position: relative; max-width: min(380px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); overflow-y: auto; padding: 20px 18px 14px; text-align: center; }
.benvenuto .x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 24px; line-height: 1; color: var(--pannello-testo); opacity: .7; }
.benvenuto .x:hover { opacity: 1; background: var(--foglio); }
.benvenuto h2 { font-size: 24px; margin: 0 28px 6px; }
.benv-intro { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.benvenuto .griglia.esempio { --t: 36px; align-items: center; margin: 6px 0 2px; }
.benvenuto .demo { min-height: 36px; }
.benv-frase { margin: 4px 0 8px; min-height: 1.4em; font-size: 13.5px; font-weight: 600; }
/* Di base le due righe ferme; la riga che si gioca da sola solo quando benvenuto.js parte davvero (.anima). */
.benvenuto .demo, .benvenuto #demo-frase { display: none; }
.benvenuto.anima .demo { display: flex; }
.benvenuto.anima #demo-frase { display: block; }
.benvenuto.anima .demo-ferma { display: none; }
.benvenuto .demo-ferma .benv-frase { font-weight: 400; margin: 0; }
.chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--foglio); border: 1px solid var(--foglio-bordo); font-size: 12.5px; }
.chip .c { --t: 26px; font-size: 9px; }
.benv-pulsanti { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.benv-pulsanti .principale { font-size: 16px; padding: 12px 18px; }
.benvenuto .tutte { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--pannello-testo); opacity: .75; }
.demo .tessera.entra { animation: benv-entra .25s both; }
.demo .c.pop { animation: benv-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.demo .tessera.verde-ok { background: var(--verde); border-color: var(--verde); color: var(--contatore-testo); transition: background .3s, color .3s, border-color .3s; }
@keyframes benv-entra { from { transform: translateY(-10px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes benv-pop { from { transform: scale(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .benvenuto *, .benvenuto *::before, .benvenuto *::after { animation: none !important; transition: none !important; }
}

/* ---------- invito per tema: una versione delle animazioni nuove di Home e benvenuto per ogni tema ----------
   Scelte con Jack il 5/11/2026 sulle bozze. Il movimento ridotto le spegne tutte (blocchi reduced-motion di .invito e .benvenuto, con !important). */

/* ---------------- B · Carta italiana: tessere appese a un filo, pergamena con l'asta, sigillo di ceralacca, timbri ---------------- */
:root[data-tema="b"] .parola-vuota { position: relative; padding-top: 14px; }
:root[data-tema="b"] .parola-vuota::before { content: ""; position: absolute; left: 6%; right: 6%; top: 2px; height: 10px;
    border-top: 1.5px solid #b89b74; border-radius: 50%; }
:root[data-tema="b"] .parola-vuota span { transform-origin: 50% -12px; animation: b-dondola 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s);
    font-style: italic; color: #b5532f; position: relative; }
:root[data-tema="b"] .parola-vuota span::before { content: ""; position: absolute; top: -12px; left: 50%; width: 1.5px; height: 12px; background: #b89b74; }
@keyframes b-dondola { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* la pergamena: si apre dall'alto e un'asta di legno scende fino in fondo */
:root[data-tema="b"] .scelta-livelli { position: relative; border-top: 0; padding-top: 22px; }
:root[data-tema="b"] .scelta-livelli::before, :root[data-tema="b"] .scelta-livelli::after { content: ""; position: absolute; left: -6px; right: -6px; height: 10px;
    border-radius: 6px; background: linear-gradient(#a87a4f, #6b4628); box-shadow: 0 2px 3px rgba(59, 42, 30, .3); }
:root[data-tema="b"] .scelta-livelli::before { top: 4px; }
:root[data-tema="b"] .scelta-livelli::after { bottom: -6px; }
:root[data-tema="b"] .invito.aperto:not(.subito) .scelta-livelli { animation: b-srotola .9s cubic-bezier(.25, .9, .3, 1) both; }
:root[data-tema="b"] .invito.aperto:not(.subito) .scelta-livelli::after { animation: b-asta .9s cubic-bezier(.25, .9, .3, 1) both; }
:root[data-tema="b"] .invito.aperto:not(.subito) .livello-giorno { animation: b-inchiostro .5s both; animation-delay: calc(.35s + var(--i) * .15s); }
@keyframes b-srotola { from { clip-path: inset(0 -10px 100% -10px); } to { clip-path: inset(0 -10px -10px -10px); } }
@keyframes b-asta { from { transform: translateY(-260px); } to { transform: none; } }
@keyframes b-inchiostro { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
:root[data-tema="b"] .scelta-livelli { padding-bottom: 14px; }

/* il nastro diventa un sigillo di ceralacca con la coda di rondine, che oscilla appena */
:root[data-tema="b"] .nastro { top: -14px; right: 10px; padding: 4px 12px 4px 30px; border-radius: 3px; background: #a8472a; color: #fff6e6;
    font: italic 700 12px var(--font-titoli); letter-spacing: .02em; animation: b-sigillo 2.6s ease-in-out infinite; transform-origin: 85% 0; }
:root[data-tema="b"] .nastro::before { content: "C"; position: absolute; left: -6px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #c9573a, #8c2f1b); color: #ffd9c2; font: 700 15px/30px var(--font-titoli); text-align: center;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3), inset 0 0 0 3px rgba(255, 255, 255, .12); }
:root[data-tema="b"] .nastro::after { content: ""; position: absolute; right: -9px; top: 0; border: 12px solid #a8472a; border-right-color: transparent; border-left-width: 0; height: 0; }
@keyframes b-sigillo { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* mini partita: le lettere sono timbrate, i contatori cadono come ceralacca, PIANO si colora come inchiostro */
:root[data-tema="b"] #demo .tessera.entra { animation: b-timbro .28s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes b-timbro { from { transform: scale(1.8) rotate(-8deg); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } to { transform: none; } }
:root[data-tema="b"] #demo .c.pop { animation: b-goccia .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes b-goccia { from { transform: translateY(-16px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
:root[data-tema="b"] #demo .tessera.verde-ok { transition: background .5s, color .5s, border-color .5s; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
:root[data-tema="b"] #demo.decifrata .riga { animation: b-firma .6s .45s both; }
@keyframes b-firma { 50% { transform: rotate(-1.5deg) scale(1.03); } }

/* ---------------- A · Scuro: essenziale, luce che scorre, tessere che si girano, cursore ---------------- */
:root[data-tema="a"] .parola-vuota span { animation: a-scansione 3s linear infinite; animation-delay: calc(var(--i) * .22s); border-width: 2px; }
@keyframes a-scansione { 0%, 70%, 100% { border-color: var(--tessera-bordo); color: #565658; } 8% { border-color: #6cbf65; color: #f2f2f2; box-shadow: 0 0 10px rgba(108, 191, 101, .35); } 25% { border-color: #3a3a3c; color: #a1a1a6; box-shadow: none; } }
:root[data-tema="a"] .gioca-grande { border-radius: 6px; box-shadow: none; }
:root[data-tema="a"] .gioca-grande:active { box-shadow: none; transform: scale(.97); }

/* la scelta si apre a scatti: ogni livello si gira come una tessera (come le righe in gioco) */
:root[data-tema="a"] .scelta-livelli { border-top: 1px solid #2c2c2e; perspective: 700px; }
:root[data-tema="a"] .invito.aperto:not(.subito) .scelta-livelli { animation: a-apri .25s ease-out both; }
:root[data-tema="a"] .invito.aperto:not(.subito) .livello-giorno { animation: a-gira .45s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(.1s + var(--i) * .14s); transform-origin: 50% 0; }
@keyframes a-apri { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-gira { from { transform: rotateX(-90deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
:root[data-tema="a"] .livello-giorno { border-radius: 6px; }
:root[data-tema="a"] .livello-giorno .tacche i { width: 6px; height: 18px; border-radius: 1px; }

/* il nastro è un'etichetta piatta su cui passa un riflesso */
:root[data-tema="a"] .nastro { border-radius: 3px; background: #3f7a3a; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px;
    overflow: hidden; animation: none; }
:root[data-tema="a"] .nastro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    transform: translateX(-120%); animation: a-riflesso 2.8s ease-in-out infinite; }
@keyframes a-riflesso { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* mini partita: si scrive come a una tastiera (bordo che si accende), i numeri si girano, PIANO si gira in verde una tessera alla volta */
:root[data-tema="a"] #demo .tessera { border-width: 2px; }
:root[data-tema="a"] #demo .tessera.entra { animation: a-batti .12s ease-out both; border-color: #6b6b6e; }
@keyframes a-batti { from { transform: scale(1.12); } to { transform: none; } }
:root[data-tema="a"] #demo .c.pop { animation: a-giraC .35s ease-out both; }
@keyframes a-giraC { from { transform: rotateX(90deg); } to { transform: none; } }
:root[data-tema="a"] #demo .tessera.verde-ok { animation: a-giraT .5s ease-in-out both; transition: none; }
@keyframes a-giraT { 0% { transform: rotateX(0); background: transparent; border-color: #6b6b6e; color: #f2f2f2; } 49% { transform: rotateX(90deg); background: transparent; }
    50% { transform: rotateX(90deg); background: var(--verde); border-color: var(--verde); } 100% { transform: none; background: var(--verde); border-color: var(--verde); color: #fff; } }

/* ---------------- C · Viola pop: salti di gelatina, molle, adesivo stellato, coriandoli ---------------- */
:root[data-tema="c"] .parola-vuota span { color: #8a3ffc; background: #fff; border: 0; animation: c-salta 1.8s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes c-salta { 0%, 55%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(-12px) scale(.94, 1.08); } 35% { transform: translateY(0) scale(1.1, .9); } 45% { transform: translateY(-3px); } }
:root[data-tema="c"] .gioca-grande { box-shadow: 0 5px 0 #c99a00; }

/* la scelta esce a molla: la scheda si allunga e i livelli saltano su uno dopo l'altro */
:root[data-tema="c"] .scelta-livelli { border-top: 2px dashed rgba(255, 255, 255, .35); }
:root[data-tema="c"] .invito.aperto:not(.subito) .scelta-livelli { animation: c-molla .7s cubic-bezier(.3, 1.6, .5, 1) both; transform-origin: top; }
:root[data-tema="c"] .invito.aperto:not(.subito) .livello-giorno { animation: c-su .55s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(.2s + var(--i) * .11s); }
@keyframes c-molla { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes c-su { from { transform: translateY(30px) scale(.7) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
:root[data-tema="c"] .livello-giorno { background: #fff; color: #2b1a6b; border: 0; border-radius: 16px; box-shadow: 0 4px 0 rgba(43, 26, 107, .25); }
:root[data-tema="c"] .livello-giorno small { color: #6b5aa8; }
:root[data-tema="c"] .livello-giorno .tacche i { background: #e3dbff; border-radius: 4px; }
:root[data-tema="c"] .livello-giorno .tacche i.on { background: #8a3ffc; }
:root[data-tema="c"] .livello-giorno .vai { color: #8a3ffc; }
:root[data-tema="c"] .livello-giorno.consigliato { background: #fff; border: 3px solid #facc15; }

/* il nastro è un adesivo a stella giallo, storto, che fa l'occhiolino */
:root[data-tema="c"] .nastro { top: -18px; right: 4px; padding: 7px 12px; border-radius: 999px; background: #facc15; color: #2b1a6b; font: 700 12.5px var(--font);
    box-shadow: 0 3px 0 #c99a00; transform: rotate(8deg); animation: c-adesivo 2s ease-in-out infinite; }
:root[data-tema="c"] .nastro::before { content: "★"; margin-right: 4px; display: inline-block; animation: c-stella 2s linear infinite; }
@keyframes c-adesivo { 0%, 100% { transform: rotate(8deg) scale(1); } 15% { transform: rotate(-4deg) scale(1.12); } 30% { transform: rotate(8deg) scale(1); } }
@keyframes c-stella { to { transform: rotate(360deg); } }

/* mini partita: lettere che cadono e rimbalzano, contatori che scoppiano, PIANO fa la ola e spara coriandoli */
:root[data-tema="c"] #demo .tessera { border: 0; background: #f3efff; }
:root[data-tema="c"] #demo .tessera.entra { animation: c-cade .45s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes c-cade { from { transform: translateY(-26px) scale(.6, 1.3); opacity: 0; } 60% { transform: translateY(2px) scale(1.15, .85); opacity: 1; } to { transform: none; } }
:root[data-tema="c"] #demo .c.pop { animation: c-scoppia .5s cubic-bezier(.3, 2, .5, 1) both; }
@keyframes c-scoppia { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
:root[data-tema="c"] #demo .tessera.verde-ok { animation: c-ola .5s cubic-bezier(.3, 1.8, .5, 1) both; transition: background .2s, color .2s; background: var(--verde); color: #fff; }
@keyframes c-ola { 40% { transform: translateY(-12px) rotate(-6deg); } to { transform: none; } }
:root[data-tema="c"] #demo { position: relative; }
:root[data-tema="c"] #demo.decifrata::after { content: "🎉"; position: absolute; right: -4px; top: -18px; font-size: 26px; animation: c-festa .8s .4s cubic-bezier(.3, 2, .5, 1) both; }
@keyframes c-festa { from { transform: scale(0) rotate(-40deg); } to { transform: rotate(10deg); } }

.piede { text-align: center; font-size: 12px; color: var(--testo-tenue); padding: 8px 16px 14px; }
.pagina-gioco .piede { display: none; }

/* ---------- pagine di testo (Come si gioca, Impostazioni) ---------- */

.pagina { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 16px 16px; line-height: 1.55; }
.pagina h1 { font-family: var(--font-titoli); margin: 8px 0 12px; }
.pagina h2 { font-family: var(--font-titoli); font-size: 20px; margin: 28px 0 10px; }
.pagina a.principale { margin-top: 16px; }
.pagina .azioni { margin-top: 16px; }
.pagina .azioni a.principale { margin-top: 0; }
.regole h2 { font-family: var(--font-titoli); font-size: 18px; margin: 22px 0 8px; }
.regole ul, .regole ol { padding-left: 20px; }
.regole li { margin: 6px 0; }
.legenda { list-style: none; padding: 0 !important; }
.legenda li { display: flex; align-items: center; gap: 10px; }
.legenda .c { --t: 34px; flex: none; }
.griglia.esempio { --t: 38px; max-height: none; overflow: visible; margin: 8px 0; padding-left: 0; }

/* Scelta del tema: ogni scheda si disegna nel proprio tema */
.temi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tema-scelta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 12px;
    border: 2px solid var(--bordo);
    background: var(--sfondo-img), var(--sfondo);
    color: var(--testo);
    font-family: var(--font);
    cursor: pointer;
}
.tema-scelta:has(input:checked) { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento); }
.tema-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.tema-scelta small { color: var(--testo-tenue); }
.anteprima { display: flex; gap: 4px; align-items: center; --t: 34px; }
.anteprima .tessera { width: 34px; height: 34px; font-size: 17px; }
.anteprima .c { width: 26px; height: 26px; font-size: 13px; }
.interruttore { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; cursor: pointer; }
.interruttore input { width: 20px; height: 20px; }
.interruttore small { grid-column: 2; color: var(--testo-tenue); }

/* ---------- account, statistiche, classifiche, sigilli (piano 2) ---------- */

.testata .iniziale {
    background: var(--accento);
    color: var(--accento-testo);
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 18px;
}
.testata a.iniziale:hover { background: var(--accento); filter: brightness(1.08); }

.pagina.stretta { max-width: 440px; }
.intro, .nota { color: var(--testo-tenue); }
.nota { font-size: 14px; }
.avviso {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--foglio);
    border: 1px solid var(--foglio-bordo);
}
.avviso.errore { border-color: var(--rosso); color: var(--rosso); font-weight: 600; }
.vuoto { text-align: center; color: var(--testo-tenue); padding: 24px 0; }

.modulo { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.modulo label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.modulo label small { font-weight: 400; color: var(--testo-tenue); }
.modulo input {
    font: inherit;
    font-weight: 400;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--tessera-bordo);
    background: var(--tessera-sfondo);
    color: var(--tessera-testo);
}
.modulo input:focus { outline: 2px solid var(--accento); outline-offset: 1px; }
.modulo button { align-self: flex-start; }
.in-linea { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.etichetta { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--verde); color: var(--contatore-testo); }
.etichetta.da-fare { background: var(--giallo); color: var(--giallo-testo); }

.schede-pagina { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.schede-pagina a {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--foglio-bordo);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}
.schede-pagina a[aria-current="page"] { background: var(--accento); border-color: var(--accento); color: var(--accento-testo); }
.schede-pagina.piccole a { padding: 5px 12px; font-size: 13px; }

.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.numeri div {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 12px;
    background: var(--foglio);
    border: 1px solid var(--foglio-bordo);
}
.numeri strong { font-family: var(--font-titoli); font-size: 28px; line-height: 1.1; }
.numeri span { font-size: 13px; color: var(--testo-tenue); }

.distribuzione { display: flex; flex-direction: column; gap: 5px; }
.barra-riga { display: flex; align-items: center; gap: 8px; }
.barra-n { width: 18px; text-align: right; font-weight: 600; color: var(--testo-tenue); }
.barra {
    width: max(28px, var(--q));
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--verde);
    color: var(--contatore-testo);
    text-align: right;
    font-size: 13px;
}

.classifica { width: 100%; border-collapse: collapse; margin: 8px 0; }
.classifica th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); padding: 6px 8px; }
.classifica td { padding: 10px 8px; border-top: 1px solid var(--foglio-bordo); }
.classifica td:first-child { width: 40px; font-weight: 700; }
.classifica tr.io td { background: var(--foglio); font-weight: 700; }
.classifica tr.io td:first-child { box-shadow: inset 3px 0 0 var(--accento); }

.sigilli { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 12px; }
.sigillo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sigillo figcaption { display: flex; flex-direction: column; gap: 2px; }
.sigillo small { color: var(--testo-tenue); font-size: 12.5px; }
.sigillo .data { color: var(--testo); font-weight: 600; }
.sigillo.bloccato img { filter: grayscale(1) opacity(.4); }

/* La scelta del tema in Home: tre pulsanti, ognuno disegnato nel suo tema (data-tema sul pulsante, vedi temi.css). */
.scegli-tema { text-align: center; }
.scegli-tema h2 { margin: 0; font-family: var(--font-titoli); font-size: 22px; }
.scegli-tema > p { margin: 4px 0 14px; color: var(--testo-tenue); font-size: 14px; }
.temi-rapidi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.tema-rapido {
    display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; min-width: 0;
    background: var(--sfondo-img, none), var(--sfondo); color: var(--testo); font-family: var(--font);
    border: 2px solid var(--foglio-bordo); border-radius: 14px; transition: transform .15s;
}
.tema-rapido strong { font-family: var(--font-titoli); font-size: 13px; line-height: 1.2; }
.tema-rapido[aria-pressed="true"] { outline: 3px solid var(--accento); outline-offset: 2px; }
.tema-rapido:hover .mini-logo span { transform: translateY(-3px); }
.tema-rapido:active { transform: scale(.96); }
.mini-logo { display: flex; gap: 2px; }
.mini-logo span {
    width: 20px; height: 20px; display: grid; place-items: center; font: 700 11px var(--font-tessere);
    background: var(--tessera-sfondo); color: var(--tessera-testo); border: 1.5px solid var(--tessera-bordo);
    border-radius: var(--tessera-raggio); box-shadow: var(--tessera-ombra); transition: transform .2s; transition-delay: calc(var(--i, 0) * 40ms);
}
.mini-logo span:nth-child(2) { --i: 1; }
.mini-logo span:nth-child(3) { --i: 2; }
.mini-conti { display: flex; gap: 3px; }
.mini-conti .c { width: 12px; height: 12px; }
/* Mentre il tema cambia, colori e sfondi sfumano invece di scattare. */
.cambio-tema body, .cambio-tema body * { transition: background-color .45s, color .45s, border-color .45s !important; }
@media (prefers-reduced-motion: reduce) { .cambio-tema body, .cambio-tema body * { transition: none !important; } .mini-logo span { transition: none; } }

/* La fascia compatta in Home: Sfida, Archivio, Statistiche, Classifiche, Sigilli in una riga. */
.fascia { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fascia a {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; min-width: 0;
    background: var(--foglio); border: 1px solid var(--foglio-bordo); border-radius: 12px;
    text-decoration: none; font-size: 12px; font-weight: 600; color: var(--testo); transition: border-color .15s;
}
.fascia a span { font-size: 20px; }
.fascia a:hover { border-color: var(--accento); }
@media (max-width: 359px) { .fascia a { font-size: 10.5px; padding: 9px 0; } }

.fine-extra:empty { display: none; }
/* «Torna domani» nel riquadro di fine (tappa 3): conto alla rovescia, giorni di fila, invito al promemoria. Base = tema B. */
.torna-domani { text-align: center; padding: 10px 12px; border-radius: 12px; background: var(--foglio); border: 1px dashed var(--foglio-bordo); color: var(--pannello-testo); }
.torna-domani p { margin: 2px 0; font-size: 14px; }
.td-conto { font-weight: 600; }
.td-cifre { font-variant-numeric: tabular-nums; font-family: var(--font-titoli); font-size: 18px; margin-left: 4px; }
.td-serie strong { font-size: 15px; }
.td-fiamma { display: inline-block; animation: td-fiamma 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes td-fiamma { 50% { transform: scale(1.15) rotate(-6deg); } }
.td-promemoria { font-size: 13px; opacity: .85; }
/* Le parti di un solo tema: di base nascoste, ogni tema accende le sue. */
.td-clessidra, .td-sigilli, .td-barre { display: none; }
.td-cifre span { display: inline-block; }

/* B · Carta italiana: clessidra che si capovolge, cifre in corsivo, giorni di fila come sigilli di ceralacca */
:root[data-tema="b"] .torna-domani { background: #fbf3e2; border: 1px solid #d9c2a0; color: #3b2a1e; box-shadow: inset 0 0 18px rgba(122, 80, 40, .12); }
:root[data-tema="b"] .td-conto { display: flex; align-items: center; justify-content: center; gap: 10px; font: italic 700 16px var(--font-titoli); }
:root[data-tema="b"] .td-clessidra { display: block; position: relative; width: 22px; height: 34px; flex: none; animation: b-clessidra 6s ease-in-out infinite; }
:root[data-tema="b"] .td-clessidra::before, :root[data-tema="b"] .td-clessidra::after { content: ""; position: absolute; left: 0; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; }
:root[data-tema="b"] .td-clessidra::before { top: 0; border-top: 16px solid #c9a98a; }
:root[data-tema="b"] .td-clessidra::after { bottom: 0; border-bottom: 16px solid #b5532f; }
:root[data-tema="b"] .td-clessidra i { position: absolute; left: 10px; top: 14px; width: 2px; height: 8px; background: #b5532f; animation: b-sabbia .6s linear infinite; }
@keyframes b-clessidra { 0%, 85% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes b-sabbia { 50% { opacity: .3; } }
:root[data-tema="b"] .td-cifre { font: italic 700 24px var(--font-titoli); color: #a8472a; margin: 0; }
:root[data-tema="b"] .td-serie { font-family: var(--font-titoli); font-style: italic; }
:root[data-tema="b"] .td-sigilli { display: inline-flex; gap: 3px; vertical-align: -3px; }
:root[data-tema="b"] .td-sigilli i { display: block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9573a, #8c2f1b);
    animation: b-sigillo .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * .15s); }
@keyframes b-sigillo { from { transform: scale(2) rotate(-30deg); opacity: 0; } }
:root[data-tema="b"] .td-serie .td-fiamma { display: none; }
:root[data-tema="b"] .td-promemoria a { color: #a8472a; }

/* A · Scuro: tabellone digitale, ogni cifra nella sua tessera che si gira; giorni di fila come tacche verdi */
:root[data-tema="a"] .torna-domani { background: #121213; border: 1px solid #2c2c2e; color: #f2f2f2; }
:root[data-tema="a"] .td-scritta { display: block; font: 800 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #a1a1a6; }
:root[data-tema="a"] .td-cifre { display: flex; justify-content: center; gap: 4px; margin: 6px 0 2px; }
:root[data-tema="a"] .td-cifre span { width: 26px; height: 36px; display: grid; place-items: center; background: #1e1e20; border: 1px solid #3a3a3c; border-radius: 4px;
    font: 800 22px var(--font); color: #f2f2f2; position: relative; overflow: hidden; }
:root[data-tema="a"] .td-cifre span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #121213; }
:root[data-tema="a"] .td-cifre span.sep { width: 8px; background: none; border: 0; color: #6cbf65; }
:root[data-tema="a"] .td-cifre span.sep::after { display: none; }
:root[data-tema="a"] .td-cifre span.cambia { animation: a-cifra .35s ease-out; }
@keyframes a-cifra { from { transform: rotateX(90deg); } }
:root[data-tema="a"] .td-barre { display: inline-block; }
:root[data-tema="a"] .td-barre i { display: inline-block; width: 6px; height: 14px; margin: 0 1px; border-radius: 1px; background: #538d4e; vertical-align: -2px; }
:root[data-tema="a"] .td-serie .td-fiamma { display: none; }
:root[data-tema="a"] .td-serie strong, :root[data-tema="a"] .td-promemoria a { color: #6cbf65; }

/* C · Viola: orologio pop giallo che fa tic, fiammella che balla, testo bianco sul viola */
:root[data-tema="c"] .torna-domani { background: rgba(255, 255, 255, .14); border: 2px dashed rgba(255, 255, 255, .4); color: #fff; }
:root[data-tema="c"] .td-conto { font: 700 15px var(--font); }
:root[data-tema="c"] .td-cifre { display: inline-block; margin-left: 6px; padding: 4px 12px; border-radius: 999px; background: #facc15; color: #2b1a6b;
    font: 700 20px var(--font); box-shadow: 0 3px 0 #c99a00; animation: c-tic 1s steps(1) infinite; }
@keyframes c-tic { 50% { transform: rotate(-3deg) scale(1.04); } }
:root[data-tema="c"] .td-serie { font: 700 15px var(--font); }
:root[data-tema="c"] .td-fiamma { font-size: 22px; animation: c-fiamma .8s cubic-bezier(.3, 1.6, .5, 1) infinite alternate; }
@keyframes c-fiamma { from { transform: scale(.9) rotate(-8deg); } to { transform: scale(1.2) rotate(8deg); } }
:root[data-tema="c"] .td-promemoria a { color: #facc15; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .td-fiamma, .torna-domani *, .torna-domani *::before, .torna-domani *::after { animation: none !important; } }
.fine-extra { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.nuovo-sigillo { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px 10px; border-radius: 12px; background: var(--foglio); }
.barra.vuota { background: var(--foglio-bordo); color: var(--testo-tenue); }

/* Il link al pannello diventa un'icona: con "Pannello" scritto la testata non sta sotto i 560 px. */
@media (max-width: 560px) {
    .testata a.icona.pannello { width: 32px; padding: 0; border-radius: 50%; }
    .testata a.icona.pannello .p-esteso { display: none; }
    .testata a.icona.pannello .p-corto { display: inline; }
}

/* Telefono: la testata deve stare in 360 px anche con cronometro e icona dell'account.
   Fino a 560 px, come l'icona del pannello: tra 481 e 560 la testata completa usciva dalla pagina. */
@media (max-width: 560px) {
    .testata { gap: 4px; padding: 8px; grid-template-columns: auto 1fr auto; }
    .testata .logo { justify-self: center; gap: 2px; }
    .logo span { --l: 18px; }
    .testata .icona { width: 32px; height: 32px; font-size: 17px; }
    .testata .iniziale { font-size: 15px; }
    .cronometro { font-size: 13px; margin-right: 2px; }
    /* In gioco il "?" resta (chi si blocca rilegge le regole); per lo spazio si toglie il caffè, che c'è nel riquadro di fine. */
    .pagina-gioco .testata .caffe { display: none; }
}

/* Schermi molto stretti (320 px): tessere e icone più piccole, la testata resta nella larghezza. */
@media (max-width: 359px) {
    .testata { gap: 2px; padding: 8px 4px; }
    .logo span { --l: 14px; }
    .logo { gap: 1px; }
    .testata .icona, .testata a.icona.pannello { width: 28px; height: 28px; font-size: 15px; }
    .testata .iniziale { font-size: 14px; }
    .cronometro { font-size: 12px; margin-right: 0; }
}

/* ---------- archivio (piano 3) ---------- */

a.scheda-modo.cliccabile { display: block; text-decoration: none; color: var(--testo); transition: border-color .15s; }
a.scheda-modo.cliccabile:hover { border-color: var(--accento); }
.scheda-modo.cliccabile .scheda-testa { margin-bottom: 0; }
.scheda-testa .freccia { margin-left: auto; font-size: 22px; color: var(--testo-tenue); }

.archivio { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.archivio li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--foglio);
    border: 1px solid var(--foglio-bordo);
}
.archivio-data { font-size: 15px; }
.archivio-data b { font-family: var(--font-titoli); margin-right: 6px; }
.archivio-gradi { display: flex; gap: 6px; flex-wrap: wrap; }
.gettone-grado {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--foglio-bordo);
}
.archivio-parola { align-self: center; font-size: 12px; color: inherit; opacity: .85; text-decoration: underline; text-underline-offset: 2px; margin-left: -2px; }
.gettone-grado.vinta { background: var(--verde); border-color: var(--verde); color: var(--contatore-testo); }
.gettone-grado.persa { background: var(--rosso); border-color: var(--rosso); color: var(--contatore-testo); }
.gettone-grado.in-corso { background: var(--giallo); border-color: var(--giallo); color: var(--giallo-testo); }
.gettone-grado.nuovo:hover { border-color: var(--accento); }

/* ---------- sfide (piano 3) ---------- */

.link-sfida { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.link-sfida input {
    flex: 1 1 220px;
    min-width: 0;
    font: inherit;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--tessera-bordo);
    background: var(--tessera-sfondo);
    color: var(--tessera-testo);
}
.solo-caso[hidden], .solo-scrivo[hidden] { display: none; }

/* ---------- dettaglio lettera per lettera a partita finita ---------- */

.tessera.d-v, .d.d-v { background: var(--verde); border-color: var(--verde); color: var(--contatore-testo); }
.tessera.d-g, .d.d-g { background: var(--giallo); border-color: var(--giallo); color: var(--giallo-testo); }
.tessera.d-r, .d.d-r { background: var(--rosso); border-color: var(--rosso); color: var(--contatore-testo); opacity: .8; }
.legenda-dettaglio { margin: 4px 0 0; font-size: 12.5px; color: var(--testo-tenue); text-align: center; line-height: 2; }
.legenda-dettaglio[hidden] { display: none; }
.d { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 600; }

.modulo-interruttori { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 16px; align-items: flex-start; }
.modulo .interruttore { flex-direction: row; font-weight: 400; display: grid; }

/* ---------- caffè, pubblicità, consenso, crediti (piano 4) ---------- */

.fine-caffe { margin: 10px 0 0; font-size: 14px; color: var(--pannello-testo); }

/* L'omaggio a fine partita vinta (9/11/2026): un invito, diverso per tema. A: un biglietto a bordo verde con la
   tessera del regalo; B: un'etichetta di carta col foro e lo spago, che entra oscillando; C: un adesivo giallo che
   dondola. Il link si legge «Altri 3 cifrari da stampare gratis»; icona e freccia sono aria-hidden. */
.fine-omaggio { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 14px auto 2px;
    padding: 10px 16px 10px 12px; text-decoration: none; text-align: left; line-height: 1.25; font-size: 15px;
    color: var(--rotolo-riquadro-testo); position: relative; }
.fine-omaggio strong { display: block; }
.fo-sotto { font-size: 13px; opacity: .85; }
.fo-icona { flex: none; display: grid; place-items: center; width: 38px; height: 38px; font-size: 20px; }
.fo-icona i { font-style: normal; }
.fo-freccia { flex: none; font-weight: 700; transition: transform .2s; }
.fine-omaggio:hover .fo-freccia, .fine-omaggio:focus-visible .fo-freccia { transform: translateX(3px); }

[data-tema="a"] .fine-omaggio { border: 2px solid #538d4e; border-radius: 6px; background: #1a1a1b; color: #f2f2f2;
    box-shadow: 0 0 0 0 rgba(83, 141, 78, .45); animation: fo-alone 2.4s ease-out .6s 2; }
[data-tema="a"] .fo-icona { background: #538d4e; border-radius: 4px; }
[data-tema="a"] .fo-sotto { color: #8fc58a; opacity: 1; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; font-weight: 700; }
[data-tema="a"] .fo-freccia { color: #8fc58a; }
@keyframes fo-alone { to { box-shadow: 0 0 0 10px rgba(83, 141, 78, 0); } }

[data-tema="b"] .fine-omaggio { background: #fffaf0; color: #3b2a1e; border: 1.5px solid #c9b48f; border-radius: 4px 14px 14px 4px;
    padding-left: 30px; margin-top: 30px; box-shadow: 0 3px 0 rgba(59, 42, 30, .12); transform-origin: 14px 0;
    animation: fo-oscilla 1.6s ease-out .4s both; }
[data-tema="b"] .fine-omaggio::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
    border-radius: 50%; border: 1.5px solid #c9b48f; background: var(--rotolo-riquadro-sfondo, #f6efe2); }
[data-tema="b"] .fine-omaggio::after { content: ""; position: absolute; left: 14px; top: calc(50% - 30px); width: 1.5px; height: 30px;
    background: #b5532f; transform-origin: bottom center; transform: rotate(-28deg); border-radius: 1px; }
[data-tema="b"] .fine-omaggio strong { font-family: var(--font-titoli); font-size: 17px; font-weight: 700; }
[data-tema="b"] .fo-sotto { font-family: var(--font-titoli); font-style: italic; color: #b5532f; opacity: 1; }
[data-tema="b"] .fo-freccia { color: #b5532f; }
@keyframes fo-oscilla { 0% { transform: rotate(-9deg); opacity: 0; } 25% { opacity: 1; } 45% { transform: rotate(5deg); }
    70% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }

[data-tema="c"] .fine-omaggio { background: #facc15; color: #2b1a6b; border-radius: 999px; padding-right: 20px;
    box-shadow: 0 5px 0 rgba(43, 26, 107, .3); transform: rotate(-2deg); animation: fo-dondola 2.6s ease-in-out .5s infinite; }
[data-tema="c"] .fine-omaggio strong { font-weight: 700; }
[data-tema="c"] .fo-icona { background: #fff; border-radius: 50%; box-shadow: 0 3px 0 rgba(43, 26, 107, .2); }
[data-tema="c"] .fo-icona i { display: inline-block; animation: fo-salta 2.6s ease-in-out .5s infinite; }
@keyframes fo-dondola { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(1.5deg); } }
@keyframes fo-salta { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-5px) rotate(-8deg); } 80% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .fine-omaggio, .fo-icona i { animation: none !important; }
    [data-tema="c"] .fine-omaggio { transform: rotate(-2deg); }
}
.piede a { color: inherit; }

.pubblicita {
    margin: 16px auto;
    width: min(100% - 32px, 468px);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--foglio-bordo);
    border-radius: 8px;
    color: var(--testo-tenue);
    font-size: 12px;
}
.finestra .pubblicita { width: 100%; margin: 12px 0 0; }

.banner-consenso {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 20;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--pannello);
    color: var(--pannello-testo);
    border: 1px solid var(--foglio-bordo);
    box-shadow: var(--ombra);
    font-size: 14px;
}
.banner-consenso p { margin: 0 0 8px; }
.banner-consenso .pulsanti { margin-top: 4px; }

.crediti li { margin-bottom: 12px; }

/* ---------- profilo (task 12) ---------- */

.profilo-chi { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.profilo-chi > div { display: flex; flex-direction: column; min-width: 0; }
.profilo-chi strong { font-family: var(--font-titoli); font-size: 22px; line-height: 1.2; }
.profilo-chi span, .profilo-chi small { overflow-wrap: anywhere; }
.profilo-chi small { color: var(--testo-tenue); }
.profilo-iniziale {
    flex: none;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accento);
    color: var(--accento-testo);
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 26px;
}
.profilo-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.profilo-numeri > * {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--foglio);
    border: 1px solid var(--foglio-bordo);
    color: var(--testo);
    text-decoration: none;
}
.profilo-numeri > a:hover { border-color: var(--accento); }
.profilo-numeri h3 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); }
.profilo-numeri p { margin: 2px 0; font-size: 15px; }
.profilo-numeri strong { font-family: var(--font-titoli); font-size: 18px; }

.ultime-partite { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ultime-partite li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--foglio);
    border: 1px solid var(--foglio-bordo);
    border-left: 4px solid var(--foglio-bordo);
    font-size: 14px;
}
.ultime-partite li.esito-vinta { border-left-color: var(--verde); }
.ultime-partite li.esito-persa { border-left-color: var(--rosso); }
.ultime-partite .up-quando, .ultime-partite .up-numeri { color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.ultime-partite .up-cosa { flex: 1 1 auto; }
.ultime-partite .up-parola { font-family: var(--font-tessere); font-weight: 700; letter-spacing: .08em; }

/* ---------- calendario personale nel profilo (piano 6) ---------- */
/* Tre puntini per giorno: Facile, Medio, Difficile. Ogni tema ha la sua versione, non solo i suoi colori:
   B (la base qui sotto) è una pagina da muro con gli anelli, timbri a inchiostro e la ceralacca nei giorni col tris;
   A sono tessere d'ardesia che si girano; C bolle e caramelle che cadono. Il giorno col cifrario è un <details>:
   la scelta del livello si apre sotto la casella, attaccata al bordo nelle colonne di lato. */

.calendario-mese {
    position: relative;
    margin: 20px 0 8px;
    padding: 26px 10px 12px;
    color: #3b2a1e;
    background: radial-gradient(ellipse at 50% 30%, #fffaf0 0, #f6ebd2 75%, #ead9b5 100%);
    border: 1px solid #cdb99a;
    box-shadow: inset 0 0 24px rgba(139, 111, 78, .28), 0 6px 14px rgba(59, 42, 30, .15);
    transform-origin: 50% 0;
    animation: cal-sfoglia .9s .15s cubic-bezier(.3, .8, .3, 1) both;
}
.cal-anelli { position: absolute; top: -9px; left: 22px; right: 22px; display: flex; justify-content: space-between; }
.cal-anelli i { width: 10px; height: 22px; border-radius: 6px; background: linear-gradient(90deg, #3b2c1e, #8b6f4e, #3b2c1e); box-shadow: 0 2px 2px rgba(0, 0, 0, .3); }

.cal-testa { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; margin-bottom: 10px; }
.cal-testa h3 { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.cal-nome { font: italic 400 24px var(--font-titoli); color: #7a3018; text-transform: capitalize; }
.cal-anno { order: -1; font: 900 15px var(--font-titoli); letter-spacing: 3px; color: #3b2a1e; }
.cal-freccia { width: 36px; height: 36px; display: grid; place-items: center; text-decoration: none; font: 900 22px var(--font-titoli); color: #b5532f; }
.cal-freccia:focus-visible, .cal-casella:focus-visible, .cal-scelta a:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }

.cal-sett, .cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-sett { gap: 0; margin-bottom: 4px; }
.cal-sett span { text-align: center; font: italic 400 12px var(--font-titoli); color: #5e4631; }
.cal-griglia { gap: 0; border-top: 1px solid #d9c9ad; border-left: 1px solid #d9c9ad; }
.cal-griglia > * { min-width: 0; }
.cal-giorno { position: relative; }

.cal-casella, .cal-vuoto {
    aspect-ratio: 1 / 1.08;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 5px;
    border-right: 1px solid #d9c9ad;
    border-bottom: 1px solid #d9c9ad;
}
.cal-vuoto, .cal-casella.senza { background: rgba(205, 185, 154, .15); }
summary.cal-casella { cursor: pointer; list-style: none; }
summary.cal-casella::-webkit-details-marker { display: none; }
.cal-giorno[open] > summary { background: rgba(181, 83, 47, .1); }
.cal-n { font: 700 14px var(--font-titoli); line-height: 1; }
.cal-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cal-casella.oggi::after { content: ""; position: absolute; inset: 3px; border: 2px solid #b5532f; border-radius: 50%; transform: rotate(-8deg); pointer-events: none; }

.cal-punti { display: flex; gap: 3px; }
.cal-punto { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #b49c78; }
.cal-punto.vinta { background: var(--verde); border-color: var(--verde); }
.cal-punto.persa { background: var(--rosso); border-color: var(--rosso); }
.cal-punto.in_corso { border: 1.5px dashed #8b6f4e; }
.cal-griglia .cal-punto.vinta, .cal-griglia .cal-punto.persa { animation: cal-timbra .35s ease-out calc(.9s + var(--i) * 22ms) both; }
.cal-sigillo {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 1;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d0623a, #8a2f14);
    color: #fbe6c8;
    font: 900 9px var(--font-titoli);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    animation: cal-timbra .4s ease-out calc(1.3s + var(--i) * 22ms) both;
}

.cal-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 12px 0 0; font: italic 400 13px var(--font-titoli); }
.cal-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legenda .cal-punto { width: 10px; height: 10px; }

.cal-scelta {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    translate: -50% 0;
    z-index: 5;
    width: 200px;
    padding: 10px;
    background: #fffaf0;
    border: 1px solid #cdb99a;
    box-shadow: 0 8px 24px rgba(59, 42, 30, .25);
}
/* Nelle prime due colonne e nelle ultime due la scelta si attacca al bordo, così non esce dalla pagina a 320 px. */
.cal-griglia > :nth-child(7n+1) .cal-scelta, .cal-griglia > :nth-child(7n+2) .cal-scelta { left: 0; translate: none; }
.cal-griglia > :nth-child(7n+6) .cal-scelta, .cal-griglia > :nth-child(7n) .cal-scelta { left: auto; right: 0; translate: none; }
.cal-scelta p { margin: 0 0 6px; text-align: center; font: italic 400 15px var(--font-titoli); }
.cal-scelta a { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 10px; text-decoration: none; font-size: 14px; color: #3b2a1e; border-bottom: 1px dashed #cdb99a; }
.cal-scelta a:hover { background: rgba(181, 83, 47, .08); }
.cal-scelta a b { font-size: 12px; font-weight: 600; color: #b5532f; }

/* A · tessere d'ardesia: niente pagina, ogni giorno si gira; tre mini contatori quadrati, oggi col bordo verde acceso. */
:root[data-tema="a"] .calendario-mese { padding: 0; color: var(--testo); background: none; border: 0; box-shadow: none; animation: none; }
:root[data-tema="a"] .cal-anelli, :root[data-tema="a"] .cal-sigillo { display: none; }
:root[data-tema="a"] .cal-testa h3 { flex-direction: row; justify-content: center; gap: .6em; }
:root[data-tema="a"] .cal-nome, :root[data-tema="a"] .cal-anno { order: 0; font: 800 13px var(--font); letter-spacing: 4px; text-transform: uppercase; color: var(--testo-tenue); }
:root[data-tema="a"] .cal-freccia { background: #2a2a2d; color: var(--testo); border-radius: 4px; font: 600 18px var(--font); }
:root[data-tema="a"] .cal-sett, :root[data-tema="a"] .cal-griglia { gap: 5px; border: 0; }
:root[data-tema="a"] .cal-sett span { font: 600 11px var(--font); color: var(--testo-tenue); }
:root[data-tema="a"] .cal-casella { background: #1e1e20; border: 1px solid #2c2c2e; border-radius: 4px; animation: cal-gira .35s ease-out calc(var(--i) * 18ms) both; }
:root[data-tema="a"] .cal-casella.senza { background: transparent; }
:root[data-tema="a"] .cal-vuoto { visibility: hidden; }
:root[data-tema="a"] .cal-giorno[open] > summary { border-color: #6b6b6e; }
:root[data-tema="a"] .cal-casella.tris { background: linear-gradient(#25331f, #1e1e20); }
:root[data-tema="a"] .cal-casella.oggi { border-color: #538d4e; box-shadow: 0 0 0 1px #538d4e, 0 0 12px rgba(83, 141, 78, .5); }
:root[data-tema="a"] .cal-casella.oggi::after { content: none; }
:root[data-tema="a"] .cal-n { align-self: flex-start; margin-left: 5px; font: 600 13px var(--font); color: var(--testo-tenue); }
:root[data-tema="a"] .oggi .cal-n { color: #fff; }
:root[data-tema="a"] .cal-punto { border-radius: 2px; border: 1px solid #4a4a4e; }
:root[data-tema="a"] .cal-punto.vinta { border-color: var(--verde); }
:root[data-tema="a"] .cal-punto.persa { border-color: var(--rosso); }
:root[data-tema="a"] .cal-punto.in_corso { border: 1px dashed var(--giallo); }
:root[data-tema="a"] .cal-griglia .cal-punto.vinta, :root[data-tema="a"] .cal-griglia .cal-punto.persa { animation: none; }
:root[data-tema="a"] .cal-griglia .cal-punto.in_corso { animation: cal-pulsa 1.4s ease-in-out infinite; }
:root[data-tema="a"] .cal-legenda { font: 12px var(--font); color: var(--testo-tenue); }
:root[data-tema="a"] .cal-scelta { background: #1e1e20; border: 1px solid #3a3a3c; border-radius: 6px; box-shadow: 0 8px 28px rgba(0, 0, 0, .6); }
:root[data-tema="a"] .cal-scelta p { font: 600 13px var(--font); }
:root[data-tema="a"] .cal-scelta a { background: #2a2a2d; color: var(--testo); border: 0; border-radius: 4px; }
:root[data-tema="a"] .cal-scelta a:hover { background: #3a3a3c; }
:root[data-tema="a"] .cal-scelta a b { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--testo-tenue); }

/* C · bolle e caramelle: scheda bianca che rimbalza, giorni a bolla, gli esiti cadono; stellina nei giorni col tris, oggi giallo. */
:root[data-tema="c"] .calendario-mese { padding: 14px 10px 12px; color: #2b1a6b; background: #fff; border: 0; border-radius: 22px;
    box-shadow: 0 8px 0 rgba(40, 10, 120, .25); transform-origin: 50% 50%; animation: cal-rimbalza .8s .1s cubic-bezier(.34, 1.56, .64, 1) both; }
:root[data-tema="c"] .cal-anelli, :root[data-tema="c"] .cal-sigillo { display: none; }
:root[data-tema="c"] .cal-testa h3 { flex-direction: row; justify-content: center; gap: .3em; }
:root[data-tema="c"] .cal-nome, :root[data-tema="c"] .cal-anno { order: 0; font: 700 22px var(--font-titoli); letter-spacing: 0; color: #2b1a6b; }
:root[data-tema="c"] .cal-freccia { background: #facc15; color: #2b1a6b; border-radius: 50%; box-shadow: 0 3px 0 #c99a00; font: 700 18px var(--font); }
:root[data-tema="c"] .cal-sett, :root[data-tema="c"] .cal-griglia { gap: 5px; border: 0; }
:root[data-tema="c"] .cal-sett span { font: 500 12px var(--font); color: #5b4a9e; text-transform: capitalize; }
:root[data-tema="c"] .cal-casella { background: #f1ecff; border: 0; border-radius: 14px; }
:root[data-tema="c"] .cal-casella.senza { background: transparent; }
:root[data-tema="c"] .cal-vuoto { visibility: hidden; }
:root[data-tema="c"] .cal-giorno[open] > summary { box-shadow: 0 0 0 2px #6a3ef8; }
:root[data-tema="c"] .cal-casella.oggi { background: #facc15; box-shadow: 0 3px 0 #c99a00; }
:root[data-tema="c"] .cal-casella.oggi::after { content: none; }
:root[data-tema="c"] .cal-casella.tris::before { content: "★"; position: absolute; top: -6px; right: -4px; z-index: 1; font-size: 15px; line-height: 1; color: #f43f5e; rotate: 14deg; }
:root[data-tema="c"] .cal-n { font: 700 13px var(--font); }
:root[data-tema="c"] .cal-punto { border: 2px solid #c9bdf5; }
:root[data-tema="c"] .cal-punto.vinta { border-color: var(--verde); }
:root[data-tema="c"] .cal-punto.persa { border-color: var(--rosso); }
:root[data-tema="c"] .cal-punto.in_corso { border: 2px dashed #6a3ef8; }
:root[data-tema="c"] .cal-griglia .cal-punto.vinta, :root[data-tema="c"] .cal-griglia .cal-punto.persa { animation: cal-cade .6s cubic-bezier(.34, 1.8, .64, 1) calc(.6s + var(--i) * 25ms) both; }
:root[data-tema="c"] .cal-griglia .cal-punto.in_corso { animation: cal-ruota 3s linear infinite; }
:root[data-tema="c"] .cal-legenda { font: 500 13px var(--font); color: #5b4a9e; }
:root[data-tema="c"] .cal-scelta { background: #fff; border: 0; border-radius: 18px; box-shadow: 0 6px 0 rgba(40, 10, 120, .3), 0 0 0 3px #facc15;
    animation: cal-scelta-c .45s cubic-bezier(.34, 1.56, .64, 1) both; }
:root[data-tema="c"] .cal-scelta p { font: 700 15px var(--font); color: #2b1a6b; }
:root[data-tema="c"] .cal-scelta a { background: #f1ecff; color: #2b1a6b; border: 0; border-radius: 12px; font-weight: 600; }
:root[data-tema="c"] .cal-scelta a:hover { background: #e4dbff; }
:root[data-tema="c"] .cal-scelta a b { padding: 1px 8px; border-radius: 999px; background: #facc15; color: #2b1a6b; }

@keyframes cal-sfoglia { from { transform: perspective(700px) rotateX(-80deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cal-timbra { 0% { transform: scale(2.2); opacity: 0; } 70% { transform: scale(.85); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes cal-gira { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cal-pulsa { 50% { opacity: .35; } }
@keyframes cal-rimbalza { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cal-cade { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cal-ruota { to { transform: rotate(360deg); } }
@keyframes cal-scelta-c { from { scale: .6; opacity: 0; } to { scale: 1; opacity: 1; } }
/* Chi non vuole animazioni vede il calendario già fermo, puntini compresi. */
@media (prefers-reduced-motion: reduce) {
    .calendario-mese, .calendario-mese *, .calendario-mese *::before, .calendario-mese *::after { animation: none !important; }
}

/* ---------- Home: l'obiettivo del dominio («Un indirizzo tutto per Cifrollo», al posto della pausa caffè) ----------
   Dalle bozze approvate da Jack (docs/superpowers/specs/bozze/2026-11-06-obiettivo/): l'indirizzo cifrollo.it si scopre lettera
   per lettera a ogni euro; una versione per tema: A tabellone delle partenze, B pergamena che si srotola, C tessere sull'asta gialla.
   Lo stato finale è lo stile di base e le animazioni partono "da" qualcosa, solo con .vista (la scheda è entrata nello schermo):
   chi riduce il movimento, o non ha JS, vede subito tutto fermo al suo posto. */

/* ================= struttura comune ================= */
.scheda-obiettivo { --p: .4; --k: 4; position: relative; overflow: hidden; text-align: center; padding: 20px 18px 16px; }
.scheda-obiettivo h2 { margin: 0; font-family: var(--font-titoli); font-size: 22px; line-height: 1.2; text-wrap: balance; }
.ob-frase { margin: 6px auto 14px; max-width: 34em; color: var(--testo-tenue); font-size: 15px; line-height: 1.45; text-wrap: balance; }
.ob-frase strong { color: var(--testo); white-space: nowrap; }
.scheda-obiettivo .nobr { white-space: nowrap; }
/* senza JS non c'è il tema sull'html: le lettere ancora da pagare restano appena accennate */
:root:not([data-tema]) .ob-t:not(.svelata) { opacity: .3; }
.ob-occhiello { display: none; margin: 0 0 6px; }
.ob-occhiello span { display: none; }

.ob-scena { container-type: inline-size; max-width: 420px; margin: 0 auto; }
.ob-rullo { display: flex; justify-content: center; align-items: stretch; }
.ob-asta, .ob-sigillo, .ob-coriandoli, .ob-led, .ob-clessidra { display: none; }
.ob-carta { position: relative; }

.ob-indirizzo { --g: 4px; --t: clamp(18px, calc((100cqi - 10 * var(--g)) / 11), 34px);
    display: flex; justify-content: center; gap: var(--g); }
.ob-t { width: var(--t); height: calc(var(--t) * 1.18); display: grid; place-items: center; flex: none;
    font: 700 calc(var(--t) * .62) / 1 var(--font-tessere); }

.ob-progresso { max-width: 420px; margin: 14px auto 0; }
.ob-traccia { position: relative; height: 12px; border-radius: 99px; background: var(--foglio-bordo); }
.ob-riempi { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--accento); }
.ob-adesivo { display: none; }
.ob-cifre { margin: 8px 0 0; font-size: 15px; color: var(--testo-tenue); font-variant-numeric: tabular-nums;
    display: flex; justify-content: center; align-items: center; gap: 8px; }
.ob-cifre strong { color: var(--testo); font-size: 18px; }
.ob-fatto { margin: 8px auto 0; max-width: 30em; font-weight: 600; color: var(--testo); text-wrap: balance; }

.ob-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; }
.ob-azioni a { text-align: center; }
.ob-nota { margin: 10px 0 0; font-size: 13px; color: var(--testo-tenue); }
@media (max-width: 430px) {
    .ob-azioni { flex-direction: column; align-items: center; }
    .ob-azioni a { width: 100%; max-width: 300px; }
}
@media (max-width: 359px) {
    .scheda-obiettivo { padding-inline: 14px; }
    .ob-azioni a { font-size: 14px; padding-inline: 10px; }
    [data-tema="a"] .ob-scena { padding: 8px 5px; }
    [data-tema="a"] .ob-indirizzo { --g: 2px; --t: clamp(17px, calc((100cqi - 10px - 10 * var(--g)) / 11), 32px); }
}
/* in attesa di entrare nello schermo, la scena non si vede (poi parte l'animazione) */
.scheda-obiettivo.attesa .ob-scena, .scheda-obiettivo.attesa .ob-traccia, .scheda-obiettivo.attesa .ob-led { visibility: hidden; }


/* ================= A · Pulito e scuro: il tabellone delle partenze =================
   «Prossima fermata»: l'indirizzo è un tabellone a palette. Ogni euro accende una lucina (15 in tutto);
   le lettere già pagate girano e si fermano verdi, la prossima lampeggia come un cursore. Una luce da scanner passa sopra. */
[data-tema="a"] .ob-occhiello, [data-tema="a"] .ob-occ-a { display: block; }
[data-tema="a"] .ob-occhiello { font-size: 11px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--accento); }
[data-tema="a"] .scheda-obiettivo h2 { font-weight: 800; letter-spacing: -.01em; }
[data-tema="a"] .ob-scena { position: relative; padding: 10px 8px; border-radius: 8px; background: #0b0b0c; border: 1px solid #2c2c2e;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .8); overflow: hidden; }
[data-tema="a"] .ob-indirizzo { --g: 3px; --t: clamp(17px, calc((100cqi - 16px - 10 * var(--g)) / 11), 32px); perspective: 300px; }
[data-tema="a"] .ob-t { position: relative; border-radius: 3px; text-transform: uppercase; font-weight: 800; font-size: calc(var(--t) * .72); background: linear-gradient(#202022 50%, #1a1a1c 50%);
    color: transparent; box-shadow: 0 1px 0 #000; }
/* la fessura a metà della palette */
[data-tema="a"] .ob-t::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .9); }
[data-tema="a"] .ob-t.svelata { background: linear-gradient(#4a8f45 50%, #3f7a3a 50%); color: #fff; }
[data-tema="a"] .ob-t.prossima::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 18%; height: 2px; background: var(--accento);
    animation: ob-a-cursore 1s steps(2) infinite; }
@keyframes ob-a-cursore { 50% { opacity: 0; } }
/* la luce dello scanner che passa sul tabellone */
[data-tema="a"] .ob-scena::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(143, 197, 138, .22), transparent); transform: translateX(-110%); opacity: 0; }
[data-tema="a"] .vista .ob-scena::after { animation: ob-a-scanner 1.4s 1s ease-in-out; }
[data-tema="a"] .vista[data-stato="raggiunto"] .ob-scena::after { animation: ob-a-scanner 1.6s 1.4s ease-in-out 2; }
@keyframes ob-a-scanner { 0% { transform: translateX(-110%); opacity: 1; } 100% { transform: translateX(260%); opacity: 1; } }
[data-tema="a"] .vista .ob-t.svelata { animation: ob-a-giro .5s calc(.2s + var(--i) * .12s) cubic-bezier(.3, .8, .3, 1) both; }
@keyframes ob-a-giro {
    0% { transform: rotateX(90deg); background: linear-gradient(#202022 50%, #1a1a1c 50%); color: transparent; }
    50% { transform: rotateX(-30deg); }
    100% { transform: rotateX(0); }
}
/* le 15 lucine, una per euro */
[data-tema="a"] .ob-traccia { display: none; }
[data-tema="a"] .ob-led { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; }
[data-tema="a"] .ob-led i { height: 8px; border-radius: 2px; background: #2c2c2e; }
[data-tema="a"] .ob-led i.on { background: var(--accento); box-shadow: 0 0 6px rgba(83, 141, 78, .8); }
[data-tema="a"] .vista .ob-led i.on { animation: ob-a-led .3s calc(var(--i) * .07s) both; }
@keyframes ob-a-led { from { background: #2c2c2e; box-shadow: none; } }
[data-tema="a"] .ob-cifre { font-size: 13px; letter-spacing: .5px; }
[data-tema="a"] .ob-cifre strong { color: #8fc58a; font-size: 20px; font-weight: 800; }
/* raggiunto: tabellone tutto verde che respira */
[data-tema="a"] [data-stato="raggiunto"] .ob-scena { border-color: #3f7a3a; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .8), 0 0 0 1px #3f7a3a, 0 0 22px rgba(83, 141, 78, .35); }
[data-tema="a"] .vista[data-stato="raggiunto"] .ob-scena { animation: ob-a-respiro 2.4s 2.2s ease-in-out infinite; }
@keyframes ob-a-respiro { 50% { box-shadow: inset 0 2px 10px rgba(0, 0, 0, .8), 0 0 0 1px #3f7a3a, 0 0 34px rgba(83, 141, 78, .6); } }
[data-tema="a"] .ob-fatto { color: #8fc58a; }
[data-tema="a"] .ob-spunta { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: var(--accento); color: #fff; font-size: 13px; margin-right: 2px; }


/* ================= B · Carta italiana: la pergamena che si srotola =================
   Due aste di legno al centro: a ogni euro la pergamena si apre un po' di più e l'indirizzo
   compare scritto a inchiostro. Sotto, una clessidra che scorre; a 15 € arriva il sigillo di ceralacca. */
[data-tema="b"] .scheda-obiettivo h2 { font-weight: 900; }
[data-tema="b"] .ob-frase strong { font-family: var(--font-titoli); font-style: italic; font-weight: 400; font-size: 1.12em; color: var(--accento); }
[data-tema="b"] .ob-scena { position: relative; padding: 6px 0; }
/* la guida tratteggiata: fin dove arriverà la pergamena a 15 € */
[data-tema="b"] .ob-scena::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1.5px dashed var(--tessera-bordo); }
[data-tema="b"] .ob-scena::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 6px); height: 12px;
    border-left: 2px solid var(--tessera-bordo); border-right: 2px solid var(--tessera-bordo); }
[data-tema="b"] .ob-rullo { position: relative; z-index: 1; }
[data-tema="b"] .ob-asta { display: block; flex: none; width: 13px; margin: -8px 0; border-radius: 7px; position: relative;
    background: linear-gradient(90deg, var(--rotolo-asta-basso), var(--rotolo-asta-alto) 45%, var(--rotolo-asta-basso)); box-shadow: var(--rotolo-asta-ombra); }
[data-tema="b"] .ob-asta::before, [data-tema="b"] .ob-asta::after { content: ""; position: absolute; left: 50%; width: 11px; height: 9px; margin-left: -5.5px; border-radius: 50%; background: var(--rotolo-pomolo); }
[data-tema="b"] .ob-asta::before { top: -6px; }
[data-tema="b"] .ob-asta::after { bottom: -6px; }
[data-tema="b"] .ob-carta { width: calc(var(--p) * (100cqi - 26px)); min-width: 6px; height: 64px; overflow: hidden;
    background: var(--rotolo-carta-sfondo); box-shadow: var(--rotolo-ombra); border-block: 1px solid var(--rotolo-contorno);
    display: grid; place-items: center; }
[data-tema="b"] .vista .ob-carta { animation: ob-b-srotola 1.4s .2s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes ob-b-srotola { from { width: 6px; } }
[data-tema="b"] .ob-indirizzo { gap: 0; }
[data-tema="b"] .ob-t { width: auto; height: auto; font: italic 400 30px/1 var(--font-titoli); color: var(--testo); }
[data-tema="b"] .ob-t:not(.svelata) { display: none; }
[data-tema="b"] .ob-t.punto { color: var(--accento); }
/* l'inchiostro: ogni lettera si scrive da sinistra a destra, una dopo l'altra mentre la carta si apre */
[data-tema="b"] .vista .ob-t.svelata { animation: ob-b-inchiostro .35s calc(.7s + var(--i) * .13s) ease-out both; }
@keyframes ob-b-inchiostro { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
[data-tema="b"] .ob-cifre { font-family: var(--font-titoli); font-style: italic; font-size: 16px; }
[data-tema="b"] .ob-cifre strong { font-style: normal; font-weight: 900; font-size: 22px; color: var(--accento); }
[data-tema="b"] .ob-traccia { display: none; }
/* la clessidra: la sabbia scende finché non si arriva a 15 € */
[data-tema="b"] .ob-clessidra { display: inline-block; position: relative; width: 16px; height: 22px; flex: none; }
[data-tema="b"] .ob-clessidra::before, [data-tema="b"] .ob-clessidra::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--rotolo-asta-alto); }
[data-tema="b"] .ob-clessidra::before { top: 0; }
[data-tema="b"] .ob-clessidra::after { bottom: 0; }
[data-tema="b"] .ob-clessidra i { position: absolute; inset: 2px 2px; background:
    linear-gradient(var(--giallo), var(--giallo)) 50% 100% / 100% 40% no-repeat,
    linear-gradient(var(--giallo), var(--giallo)) 50% 0 / 100% 22% no-repeat, #fffaf0;
    clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%, 45% 50%); outline: 0; }
[data-tema="b"] .vista .ob-clessidra { animation: ob-b-gira 4s 1.6s ease-in-out infinite; }
@keyframes ob-b-gira { 0%, 80% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
[data-tema="b"] [data-stato="raggiunto"] .ob-clessidra { display: none; }
/* il sigillo di ceralacca, a obiettivo raggiunto */
[data-tema="b"] [data-stato="raggiunto"] .ob-sigillo { display: grid; place-items: center; position: absolute; right: 6px; bottom: 4px; z-index: 2;
    width: 30px; height: 30px; border-radius: 47% 53% 50% 48%; background: radial-gradient(circle at 35% 30%, #c8613b, #8e2f17 70%);
    color: #f6d7c3; font: 900 15px/1 var(--font-titoli); box-shadow: 0 2px 3px rgba(59, 42, 30, .45), inset 0 0 0 3px rgba(0, 0, 0, .12); transform: rotate(-12deg); }
[data-tema="b"] [data-stato="raggiunto"] .ob-carta { overflow: visible; }
[data-tema="b"] .vista[data-stato="raggiunto"] .ob-sigillo { animation: ob-b-timbro .45s 2.4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes ob-b-timbro { from { transform: scale(2.4) rotate(-30deg); opacity: 0; } }
[data-tema="b"] .ob-fatto { font-family: var(--font-titoli); font-style: italic; font-weight: 400; font-size: 18px; color: var(--accento); }
[data-tema="b"] .ob-spunta { display: none; }
[data-tema="b"] .ob-nota { font-style: italic; }


/* ================= C · Allegro e colorato: le tessere che saltano sull'asta gialla =================
   Tessere tonde appoggiate sull'asta gialla: ogni euro ne fa saltare su una. La barra a strisce
   porta un adesivo con la cifra; a 15 € l'adesivo dice «Fatto!» e piovono i coriandoli. */
[data-tema="c"] .ob-occhiello, [data-tema="c"] .ob-occ-c { display: inline-block; }
[data-tema="c"] .ob-occhiello { padding: 3px 12px; border-radius: 99px; background: var(--giallo); color: var(--accento-testo);
    font-size: 13px; font-weight: 700; transform: rotate(-3deg); box-shadow: 0 3px 0 #c99a00; margin-bottom: 10px; }
[data-tema="c"] .vista .ob-occhiello { animation: ob-c-dondola 3s 1s ease-in-out infinite; }
@keyframes ob-c-dondola { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
[data-tema="c"] .scheda-obiettivo h2 { font-weight: 700; font-size: 24px; }
[data-tema="c"] .ob-frase strong { color: var(--giallo); }
[data-tema="c"] .ob-scena { position: relative; padding: 4px 0 14px; }
/* l'asta gialla su cui stanno le tessere */
[data-tema="c"] .ob-scena::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 9px; border-radius: 99px;
    background: var(--rotolo-asta-alto); box-shadow: var(--rotolo-asta-ombra); }
[data-tema="c"] .ob-indirizzo { --g: 3px; --t: clamp(18px, calc((100cqi - 10 * var(--g)) / 11), 34px); }
[data-tema="c"] .ob-t { height: var(--t); font-size: calc(var(--t) * .7); border-radius: 50%; color: transparent; border: 2px dashed rgba(255, 255, 255, .45); }
[data-tema="c"] .ob-t.svelata { background: var(--tessera-sfondo); color: var(--tessera-testo); border: 0; box-shadow: var(--tessera-ombra); }
[data-tema="c"] .ob-t.punto { --t2: calc(var(--t) * .55); }
[data-tema="c"] .ob-t.prossima { border-color: var(--giallo); }
[data-tema="c"] .vista .ob-t.prossima { animation: ob-c-pulsa 1.2s 1.6s ease-in-out infinite; }
@keyframes ob-c-pulsa { 50% { transform: scale(1.15); } }
[data-tema="c"] .vista .ob-t.svelata { animation: ob-c-salta .6s calc(.2s + var(--i) * .09s) cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ob-c-salta { from { transform: translateY(26px) scale(.2); opacity: 0; } }
/* raggiunto: dopo l'ingresso, un'ola delle tessere */
[data-tema="c"] .vista[data-stato="raggiunto"] .ob-t.svelata { animation: ob-c-salta .6s calc(.2s + var(--i) * .09s) cubic-bezier(.34, 1.56, .64, 1) both,
    ob-c-ola .5s calc(1.8s + var(--i) * .06s) ease-in-out 2; }
@keyframes ob-c-ola { 50% { transform: translateY(-8px); } }
/* la barra a strisce con l'adesivo */
[data-tema="c"] .ob-progresso { margin-top: 26px; }
[data-tema="c"] .ob-traccia { height: 18px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .12); }
[data-tema="c"] .ob-riempi { min-width: 18px; background: repeating-linear-gradient(-45deg, #facc15 0 10px, #fde047 10px 20px); box-shadow: 0 3px 0 #c99a00;
    background-size: 28.28px 28.28px; }
[data-tema="c"] .vista .ob-riempi { animation: ob-c-cresce 1.2s .3s cubic-bezier(.34, 1.3, .64, 1) both, ob-c-strisce 1s linear infinite; }
@keyframes ob-c-cresce { from { width: 0; } }
@keyframes ob-c-strisce { to { background-position: 28.28px 0; } }
[data-tema="c"] .ob-adesivo { display: block; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%) rotate(-8deg);
    padding: 3px 9px; border-radius: 99px; background: #fff; color: var(--tessera-testo); font: 700 14px/1.2 var(--font); white-space: nowrap;
    box-shadow: 0 3px 0 rgba(40, 10, 120, .3); border: 2px solid var(--giallo); }
/* agli estremi l'adesivo non deve uscire dalla barra */
[data-tema="c"] [data-stato="vuoto"] .ob-adesivo { transform: translate(0, -50%) rotate(-8deg); right: auto; left: -4px; }
[data-tema="c"] [data-stato="raggiunto"] .ob-adesivo { transform: translate(0, -50%) rotate(-8deg); right: -4px; background: var(--rosso); color: #fff; border-color: #fff; }
[data-tema="c"] .ob-cifre { color: var(--testo-tenue); font-size: 15px; }
[data-tema="c"] .ob-cifre strong { color: #fff; font-size: 20px; }
[data-tema="c"] .ob-fatto { color: var(--giallo); font-size: 17px; }
[data-tema="c"] .ob-spunta { display: none; }
/* i coriandoli, solo a obiettivo raggiunto */
[data-tema="c"] [data-stato="raggiunto"] .ob-coriandoli { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
[data-tema="c"] .ob-coriandoli i { position: absolute; top: -14px; left: var(--x); width: 8px; height: 12px; border-radius: 2px; opacity: 0;
    background: var(--rotolo-coriandolo-1); }
[data-tema="c"] .ob-coriandoli .ob-c2 { background: var(--rotolo-coriandolo-2); border-radius: 50%; width: 9px; height: 9px; }
[data-tema="c"] .ob-coriandoli .ob-c3 { background: var(--rotolo-coriandolo-3); }
[data-tema="c"] .ob-coriandoli .ob-c5 { background: var(--rotolo-coriandolo-5); border-radius: 50%; width: 9px; height: 9px; }
[data-tema="c"] .vista .ob-coriandoli i { animation: ob-c-pioggia 2.6s calc(1.4s + var(--d)) cubic-bezier(.3, .2, .6, 1) 2; }
@keyframes ob-c-pioggia {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(460px) rotate(540deg); opacity: 0; }
}
[data-tema="c"] .scheda-obiettivo .secondario { border-color: rgba(255, 255, 255, .7); }


@media (prefers-reduced-motion: reduce) {
    .scheda-obiettivo, .scheda-obiettivo *, .scheda-obiettivo *::before, .scheda-obiettivo *::after { animation: none !important; }
    .scheda-obiettivo.attesa .ob-scena, .scheda-obiettivo.attesa .ob-traccia, .scheda-obiettivo.attesa .ob-led { visibility: visible; }
}

/* ---------- Home: l'Allenamento ----------
   Centrato: in alto le tessere vuote, tante quante le lettere scelte, che si srotolano a ogni cambio;
   sotto lettere e livello, la descrizione del livello e il pulsante che dice quante lettere. */

.scheda-allenamento .libera { text-align: center; }
.scheda-allenamento .libera fieldset { margin: 0 0 14px; }
.scheda-allenamento .libera legend { margin-inline: auto; }
.scheda-allenamento .gettoni { justify-content: center; }
.scheda-allenamento .azioni { justify-content: center; }
.allena-rotolo {
    display: flex;
    justify-content: center;
    gap: clamp(3px, 1vw, 6px);
    min-height: 38px;
    margin: 2px 0 16px;
    padding: 10px 8px;
    border-radius: 12px;
    background: var(--sfondo);
    border: 1px dashed var(--foglio-bordo);
}
.tessera-vuota {
    display: none;
    width: clamp(20px, 7vw, 30px);
    aspect-ratio: 1;
    border-radius: var(--tessera-raggio);
    border: 1.5px solid var(--tessera-bordo);
    background: var(--tessera-sfondo);
    box-shadow: var(--tessera-ombra);
}
.tessera-vuota.accesa { display: block; }
.allena-rotolo.srotola .tessera-vuota.accesa { animation: srotola .38s cubic-bezier(.3, 1.4, .6, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes srotola {
    from { opacity: 0; transform: translateX(-10px) scale(.6) rotate(-8deg); }
    to   { opacity: 1; transform: none; }
}
.allena-descr { margin: 8px 0 0; font-size: 13.5px; color: var(--testo-tenue); min-height: 1.2em; }
.scheda-allenamento #allena-via { min-width: 190px; }
@media (prefers-reduced-motion: reduce) {
    .allena-rotolo.srotola .tessera-vuota.accesa { animation: none; }
}

/* ---------- /indovina-la-parola-del-giorno (9/11/2026): la pagina per chi arriva da Google ----------
   Tutto centrato. Le cinque tessere «?» si animano per tema: A girano una dopo l'altra come un tabellone,
   B si posano come foglietti di carta, C saltano a ola. Con «riduci movimento» stanno ferme. */
.pagina-giorno-seo { text-align: center; }
.pagina-giorno-seo .regole { text-align: left; margin: 26px auto 0; padding: 4px 18px 14px; border-radius: 16px;
    background: var(--foglio, var(--pannello)); border: 1px solid var(--foglio-bordo, var(--bordo)); }
.pagina-giorno-seo .regole h2 { text-align: center; font-size: 21px; margin: 16px 0 10px; }
.pagina-giorno-seo .regole h3 { text-align: center; font-family: var(--font-titoli); font-size: 16px; margin: 18px 0 6px; }
.pagina-giorno-seo .griglia.esempio { align-items: center; margin: 8px auto; }
.pagina-giorno-seo .azioni { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pagina-giorno-seo .azioni a { margin-top: 0; }
.pg-testa { padding: 14px 0 4px; }
.pg-testa h1 { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.1; margin: 14px 0 10px; text-wrap: balance; }
.pg-sotto { max-width: 30em; margin: 0 auto 18px; color: var(--testo-tenue); font-size: 17px; text-wrap: balance; }
.pg-ombra { --t: 48px; }
.pg-ombra .tessera { animation: var(--pg-anim, none) 3.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .16s); }
.pg-ombra .tessera:nth-child(1) { --k: 0; } .pg-ombra .tessera:nth-child(2) { --k: 1; } .pg-ombra .tessera:nth-child(3) { --k: 2; }
.pg-ombra .tessera:nth-child(4) { --k: 3; } .pg-ombra .tessera:nth-child(5) { --k: 4; }
.pg-ombra .contatori { display: none; }
.pg-livelli { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.pg-livelli li { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--sfondo); border: 1px solid var(--bordo); }
.pg-livelli .tacche { display: inline-flex; gap: 2px; vertical-align: -1px; margin-right: 6px; }
.pg-livelli .tacche i { width: 4px; height: 12px; border-radius: 1px; background: var(--tessera-bordo); }
.pg-livelli .tacche i.on { background: var(--accento); }
.pagina-giorno-seo details { border-top: 1px solid var(--bordo); padding: 2px 0; }
.pagina-giorno-seo details:first-of-type { border-top: 0; }
.pagina-giorno-seo summary { cursor: pointer; list-style: none; font-weight: 600; padding: 10px 28px 10px 0; position: relative; }
.pagina-giorno-seo summary::-webkit-details-marker { display: none; }
.pagina-giorno-seo summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 22px; color: var(--accento); transition: transform .2s; }
.pagina-giorno-seo details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pagina-giorno-seo details p { margin: 0 0 12px; }
.pagina-giorno-seo > .azioni:last-child { margin: 26px 0 10px; }

[data-tema="a"] .pg-ombra { --pg-anim: pg-gira; perspective: 400px; }
[data-tema="a"] .pg-testa h1 { letter-spacing: -.5px; }
@keyframes pg-gira { 0%, 55%, 100% { transform: rotateX(0); } 65% { transform: rotateX(90deg); background: #538d4e; } 75% { transform: rotateX(0); background: #538d4e; color: #fff; } 90% { background: transparent; } }

[data-tema="b"] .pg-ombra { --pg-anim: pg-posa; }
[data-tema="b"] .pg-ombra .tessera { box-shadow: 0 3px 0 rgba(59, 42, 30, .12); }
[data-tema="b"] .pg-ombra .tessera:nth-child(odd) { rotate: -3deg; } [data-tema="b"] .pg-ombra .tessera:nth-child(even) { rotate: 2.5deg; }
[data-tema="b"] .pg-testa h1 { font-style: italic; }
[data-tema="b"] .pg-sotto { font-family: var(--font-titoli); font-style: italic; font-size: 18px; }
@keyframes pg-posa { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px) rotate(4deg); } 90% { transform: translateY(0) rotate(-1deg); } }

[data-tema="c"] .pg-ombra { --pg-anim: pg-ola; }
[data-tema="c"] .pagina-giorno-seo .regole { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); }
[data-tema="c"] .pg-livelli li { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
[data-tema="c"] .pg-livelli .tacche i:not(.on) { background: rgba(255, 255, 255, .35); }
[data-tema="c"] .pg-livelli .tacche i.on { background: var(--giallo); }
[data-tema="c"] .pg-sotto { color: #efeaff; }
@keyframes pg-ola { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-12px) scale(1.08); } 80% { transform: translateY(0) scale(.96); } }

@media (prefers-reduced-motion: reduce) { .pg-ombra .tessera { animation: none !important; } }