/* ============================================================
   APP.CSS — stile della shell e delle attività F0.
   Le variabili arrivano da kids-base.css (Appendice B.2): qui solo
   ciò che è proprio dell'app. Un solo sfondo tematico per mondo.
   NOTA F0: Fredoka e Nunito non sono ancora impacchettati in locale
   (si fa in F1 come in ricalca-lettere: fonts.css + www/fonts/);
   nel frattempo si scende sui font di sistema.
   ============================================================ */

/* ============================================================
   L'IDIOMA — lo stesso di Ricalca le Lettere
   ------------------------------------------------------------
   Le due app sono sorelle e devono sembrarlo: kids-base.css è già
   identico nelle due (stesso teal, stesso ambra, stesso Fredoka),
   ma qui dentro era cresciuto un dialetto diverso — bordi spessi
   colorati e ombre dure a scalino, con la pressione che affonda.

   Da qui in avanti valgono queste tre regole, e nient'altro:

     1. Superficie bianca, angoli tondi, NIENTE bordo.
     2. Ombra diffusa in teal, mai un'ombra dura a scalino.
     3. Premendo si RIMPICCIOLISCE (scale), non affonda (translateY).

   Il colore resta dove serve — icona, etichetta e velatura
   dell'ombra — perché le sei porte le distingue il colore, ed è
   l'unica cosa che può usare un bambino che non legge.
   ============================================================ */
:root {
    --morbida-sm: 0 3px 8px rgba(10, 91, 99, .12);
    --morbida:    0 4px 10px rgba(10, 91, 99, .15);
    --morbida-lg: 0 10px 26px rgba(10, 91, 99, .14);
    --morbida-xl: 0 12px 30px rgba(10, 91, 99, .15);
    --scelto:     0 5px 14px rgba(10, 91, 99, .28);

    --soft: #eef4f4;          /* fondo dei gruppi di scelta */
    --nota-bg: #f3f8f8;       /* fondo delle noterelle */
    --testo-soft: #5d6b6b;    /* sottotitoli e testo spento */
    --tratteggio: #cfe2e2;    /* bordo tratteggiato dei box per adulti */
}

/* ---------- Scena ----------
   SITO: schermate, HUD, riquadro della consegna e schermata finale
   seguono il modello delle app kids e stanno in style.css. Qui
   restano solo le scene dei giochi, come nell'app Android. */
@keyframes schermataIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- La consegna si distingue dalle risposte (B.1) ---------- */
/* Il box tratteggiato di Ricalca: si distingue dalle risposte senza
   gridare, con lo stesso tratteggio tenue del riquadro per i genitori. */
.consegna-card {
    position: relative;
    width: 100%;
    background: var(--card);
    border: 2px dashed var(--tratteggio);
    border-radius: 18px;
    box-shadow: var(--morbida-sm);
    padding: 14px 64px 14px 14px;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.consegna-card .say-btn { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.consegna-card .say-btn:active { transform: translateY(-50%) scale(.92); }

.consegna-scena { font-size: clamp(40px, 10vw, 56px); line-height: 1; }


/* ---------- La scelta non attesa (versione del sito) ----------
   Nell'app la scelta non attesa dondolava e restava toccabile, e
   dopo due errori la risposta giusta pulsava. Sul sito vale il cap. 8
   di GUIDA-APP-KIDS.md: dondola un attimo, poi si SPEGNE e resta al
   suo posto (sparire sposterebbe le altre sotto il dito), e la
   risposta giusta non si indica mai. */
.dondola { animation: dondola .5s ease; }

@keyframes dondola {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(4deg); }
    75% { transform: rotate(-2deg); }
}

/* animation:none è obbligatorio: togliendo .dondola l'animazione
   d'ingresso ripartirebbe da capo (GUIDA-APP-KIDS.md, cap. 3). */
.fuori {
    opacity: .3;
    pointer-events: none;
    filter: grayscale(1);
    box-shadow: none !important;
    transform: none;
    animation: none !important;
}

/* Doppio tocco protetto: a risposta accolta, tutte le opzioni si
   bloccano finché il riscontro non è finito. */
.blocca-tutto button { pointer-events: none; }

@keyframes trovata {
    0% { transform: scale(1); }
    45% { transform: scale(1.15); }
    100% { transform: scale(1.05); }
}

/* ---------- Tanti Quanti ---------- */
.tq-tavolo {
    width: 100%;
    max-width: 640px;
    align-self: center;
    background: linear-gradient(180deg, #fef3c7, #fde68a);
    border: 3px solid #d97706;
    border-radius: var(--kids-radius);
    padding: 16px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(6px, 2vw, 16px);
    margin: 6px 0;
    flex: 0 0 auto;
}

.tq-posto {
    position: relative;
    width: clamp(88px, 17vw, 116px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tq-orsetto { font-size: clamp(44px, 10vw, 60px); line-height: 1.1; transition: transform .2s ease; }

.tq-posto.servito .tq-orsetto { animation: orsettoFelice .6s ease; }

@keyframes orsettoFelice {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18) rotate(-4deg); }
}

.tq-piattino {
    width: clamp(52px, 11vw, 64px);
    height: clamp(52px, 11vw, 64px);
    border: 3px dashed #b45309;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(34px, 8vw, 44px);
    line-height: 1;
}

.tq-posto.servito .tq-piattino { border-style: solid; background: #fff; }

.tq-vassoio-zona {
    width: 100%;
    max-width: 640px;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: auto 0 6px;
}

.tq-vassoio {
    flex: 1;
    min-height: 96px;
    background: linear-gradient(180deg, #e0f2fe, #bae6fd);
    border: 3px solid #0284c7;
    border-radius: var(--kids-radius);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
}

.tq-tazza {
    font-size: clamp(38px, 9vw, 50px);
    line-height: 1;
    width: clamp(52px, 11vw, 64px);
    height: clamp(52px, 11vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;              /* il drag è dell'app, non dello scroll */
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.tq-tazza.in-volo { position: fixed; z-index: 50; pointer-events: none; transform: scale(1.15); filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)); }

.tq-campanello {
    background: var(--card);
    border: none;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    min-width: 72px;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(245, 158, 11, .35);
    transition: transform .1s ease, box-shadow .1s ease;
}

.tq-campanello:active { transform: scale(.92); }

/* ---------- Traccia i Numeri ---------- */
.tn-zona {
    width: 100%;
    max-width: 640px;
    align-self: center;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#tn-canvas {
    width: 100%;
    height: 100%;
    max-height: 100%;
    touch-action: none;
    border-radius: var(--kids-radius);
    background: linear-gradient(180deg, #f0fdf4, #ecfeff);
    border: 3px solid #86efac;
}

.tn-oggetti {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: clamp(36px, 9vw, 52px);
    line-height: 1;
    min-height: 64px;
    align-items: center;
    flex: 0 0 auto;
}

.tn-oggetti span { opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .25s ease; }
.tn-oggetti span.conta { opacity: 1; transform: scale(1); }
.tn-oggetti span.conta-ora { animation: trovata .5s ease; }

/* ---------- Traguardo ---------- */
#fine-screen { justify-content: center; }

.fine-contenuto { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.fine-icona { font-size: clamp(80px, 24vw, 140px); line-height: 1; animation: trovata .8s ease; }

.fine-fiore { font-size: 44px; animation: fioreSboccia 1s ease .4s backwards; }

@keyframes fioreSboccia {
    from { opacity: 0; transform: scale(.2) rotate(-30deg); }
    to   { opacity: 1; transform: none; }
}

.fine-azioni { display: flex; gap: 16px; }

/* Come i tondi grandi di Ricalca: fondo spento, i principali in teal. */
.btn-grande {
    border: none;
    background: var(--soft);
    color: var(--brand);
    border-radius: 50%;
    width: 84px;
    height: 84px;
    min-width: 84px;
    font-size: 2rem;
    box-shadow: var(--morbida);
    transition: transform .1s ease, box-shadow .1s ease;
}

.btn-grande.primario {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--scelto);
}

.btn-grande:active { transform: scale(.92); }

/* ---------- Coriandoli (fatti in casa, B.2) ---------- */
.coriandoli { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 100; }

.coriandoli span {
    position: absolute;
    top: -24px;
    font-size: 22px;
    animation: coriandoloGiu linear forwards;
}

@keyframes coriandoloGiu {
    to { transform: translateY(110vh) rotate(720deg); opacity: .7; }
}

/* ---------- Colpo d'Occhio ---------- */
.co-cornice {
    position: relative;
    width: min(100%, min(560px, 52vh));
    aspect-ratio: 1;
    align-self: center;
    flex: 0 1 auto;
    min-height: 0;
    background: linear-gradient(180deg, #fff7e6, #fffdf6);
    border: 3px dashed var(--accent);
    border-radius: var(--kids-radius);
    overflow: hidden;
}

.co-scena { position: absolute; inset: 0; }

.co-pallino {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: clamp(34px, 9vw, 52px);
    line-height: 1;
}

.co-tenda {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(100deg, #dc2626 0 26px, #b91c1c 26px 52px);
    box-shadow: inset 0 -14px 22px rgba(0, 0, 0, .18);
    transform: translateY(-104%);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.co-tenda.giu { transform: translateY(0); }

.co-carte {
    display: flex;
    gap: clamp(10px, 3vw, 20px);
    justify-content: center;
    width: min(100%, 520px);
    align-self: center;
    padding: 16px 0 4px;
    flex: 0 0 auto;
}

.co-carta {
    flex: 1 1 0;
    max-width: 150px;
    min-height: 100px;
    background: var(--card);
    border: none;
    border-radius: 22px;
    box-shadow: var(--morbida-lg);
    font-family: var(--kids-font-title);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 700;
    color: var(--brand);
    transition: transform .12s ease, box-shadow .12s ease;
}

.co-carta:active { transform: scale(.96); }
.co-carta.dondola { animation: dondola .5s ease; }
.co-carta.trovata { animation: trovata .6s ease; color: #047857; box-shadow: 0 10px 26px rgba(16, 185, 129, .38); }

/* ---------- Le Torri ---------- */
.torri-sfilata {
    width: 100%;
    max-width: 640px;
    align-self: center;
    min-height: 90px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
}

.torri-animale {
    border: none;
    background: transparent;
    font-size: clamp(44px, 11vw, 60px);
    line-height: 1;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    animation: sfilaAnimale .5s ease backwards;
}

@keyframes sfilaAnimale {
    from { transform: scale(.3); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@keyframes sfilaAnimale {
    from { transform: translateX(120%); opacity: 0; }
    30%  { opacity: 1; }
    to   { transform: translateX(0); opacity: 1; }
}

.torri-colonne {
    flex: 1 1 auto;
    width: min(100%, 640px);
    align-self: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(10px, 4vw, 28px);
    min-height: 0;
    padding-bottom: 4vh;
}

/* Colonna NON invertita: l'etichetta resta fissa in cima, il
   piedistallo fisso in fondo; solo la torre di cubi in mezzo cresce. */
.torri-colonna {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 64px;
    touch-action: none;
}


.torri-etichetta {
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1;
    margin-bottom: 6px;
}

/* Invertita SOLO qui: ogni cubo aggiunto (ultimo figlio nel DOM)
   compare in cima alla pila, non in fondo. */
.torri-cubi {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2px;
    min-height: 0;
}

.torri-cubo {
    width: clamp(48px, 12vw, 64px);
    height: clamp(30px, 7vw, 38px);
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, .15);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
    animation: cuboPosato .35s ease;
}

@keyframes cuboPosato {
    from { transform: translateY(-40px) scale(.7); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.torri-piedistallo {
    width: clamp(70px, 15vw, 96px);
    height: 10px;
    background: #92400e;
    border-radius: 4px;
}

/* ---------- Conta con Me ---------- */
.ccm-prato {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: 640px;
    align-self: center;
    min-height: 0;
    background: linear-gradient(180deg, #dcfce7, #bbf7d0);
    border: 3px solid #4ade80;
    border-radius: var(--kids-radius);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: clamp(10px, 3vw, 22px);
    padding: 16px;
}

.ccm-oggetto {
    position: relative;
    width: clamp(76px, 16vw, 96px);
    height: clamp(76px, 16vw, 96px);
    min-width: 76px;
    border: 3px solid transparent;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    font-size: clamp(40px, 9vw, 54px);
    line-height: 1;
    transition: transform .12s ease, border-color .2s ease, background .2s ease;
}

.ccm-oggetto.libero { position: absolute; transform: translate(-50%, -50%); }
.ccm-oggetto:active { transform: scale(.94); }
.ccm-oggetto.libero:active { transform: translate(-50%, -50%) scale(.94); }

/* Contato: si illumina e si spunta, ma RESTA al suo posto. */
.ccm-oggetto.contato {
    border-color: var(--kids-green);
    background: #fff;
}

.ccm-oggetto.contato::after {
    content: attr(data-numero);
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kids-green);
    color: #fff;
    font-family: var(--kids-font-title);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.salterella { animation: salterella .5s ease; }

@keyframes salterella {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-14px); }
    70% { transform: translateY(0); }
    85% { transform: translateY(-5px); }
}

.ccm-oggetto.libero.salterella { animation: salterellaLibero .5s ease; }

@keyframes salterellaLibero {
    0%, 100% { transform: translate(-50%, -50%); }
    40% { transform: translate(-50%, calc(-50% - 14px)); }
}

/* ---------- Dammi il Numero ---------- */
.dn-personaggio {
    font-size: clamp(56px, 13vw, 76px);
    line-height: 1;
    align-self: center;
    flex: 0 0 auto;
    transition: transform .3s ease;
}

.dn-personaggio.guarda { transform: translateY(8px) rotate(-8deg); }

.dn-albero {
    width: min(100%, 640px);
    align-self: center;
    flex: 1 1 auto;
    min-height: 120px;
    background:
        radial-gradient(closest-side at 50% 40%, #22c55e 78%, transparent 80%),
        linear-gradient(180deg, transparent 78%, #92400e 78%);
    border-radius: var(--kids-radius);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
}

.dn-mela {
    font-size: clamp(38px, 9vw, 48px);
    line-height: 1;
    width: clamp(52px, 11vw, 62px);
    height: clamp(52px, 11vw, 62px);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.dn-mela.in-volo { position: fixed; z-index: 50; pointer-events: none; transform: scale(1.15); filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)); }

.dn-basso {
    width: min(100%, 640px);
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    flex: 0 0 auto;
}

.dn-cestino {
    flex: 1;
    min-height: 92px;
    background: linear-gradient(180deg, #fde68a, #d97706);
    border: 3px solid #b45309;
    border-radius: 14px 14px var(--kids-radius) var(--kids-radius);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
}

/* ---------- Uno di Più, Uno di Meno ---------- */
.scala-scena {
    flex: 1 1 auto;
    width: min(100%, 640px);
    align-self: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
    padding-bottom: 4vh;
}

.scala-gradini {
    display: flex;
    align-items: flex-end;
    gap: clamp(4px, 1.5vw, 10px);
    width: 100%;
    justify-content: center;
}

.scala-gradino {
    position: relative;
    flex: 1 1 0;
    max-width: 110px;
    min-width: 56px;
    height: calc(96px + var(--alza) * 26px);
    border: 3px solid #a16207;
    border-radius: 12px 12px 6px 6px;
    background: linear-gradient(180deg, #fde68a, #f59e0b);
    box-shadow: 0 6px 0 #92400e;
    font-family: var(--kids-font-title);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* Il gradino resta di legno con la sua costa spessa — è un oggetto
   disegnato, non un comando — ma premuto si rimpicciolisce come
   tutto il resto dell'app. */
.scala-gradino:active { transform: scale(.96); }

.scala-cifra { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 700; color: #78350f; }

.scala-rana {
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 44px;
    line-height: 1;
    pointer-events: none;
}

.scala-rana.salta { animation: ranaSalta .6s ease; }

@keyframes ranaSalta {
    0% { transform: translate(-50%, 30px) scale(.6); opacity: 0; }
    60% { transform: translate(-50%, -14px) scale(1.1); opacity: 1; }
    100% { transform: translateX(-50%); }
}

/* ---------- Aggiungi e Togli ---------- */
.at-teatrino {
    position: relative;
    width: min(100%, 640px);
    align-self: center;
    flex: 1 1 auto;
    min-height: 140px;
    background: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 100%);
    border: 3px solid #7dd3fc;
    border-radius: var(--kids-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.at-ramo {
    display: flex;
    gap: clamp(6px, 2vw, 14px);
    justify-content: center;
    align-items: flex-end;
    min-height: 90px;
    border-bottom: 8px solid #92400e;
    border-radius: 0 0 8px 8px;
    padding: 0 18px 4px;
    flex-wrap: wrap;
}

.at-uccellino {
    border: none;
    background: transparent;
    font-size: clamp(38px, 9vw, 52px);
    line-height: 1;
    padding: 2px;
    min-width: 48px;
    min-height: 48px;
    transition: transform .5s ease, opacity .5s ease;
}

.at-uccellino.arriva { animation: uccellinoArriva .5s ease; }
.at-uccellino.volavia { transform: translate(-60px, -120px) rotate(-20deg); opacity: 0; }

@keyframes uccellinoArriva {
    from { transform: translate(60px, -100px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* display:flex di classe vincerebbe sull'attributo hidden: si esplicita. */
.at-nuvola[hidden] { display: none; }

.at-nuvola {
    position: absolute;
    inset: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(110px, 40vw, 220px);
    background: rgba(255, 255, 255, .55);
    border-radius: var(--kids-radius);
    z-index: 2;
}

.at-carte {
    display: flex;
    gap: clamp(10px, 3vw, 20px);
    justify-content: center;
    width: min(100%, 520px);
    align-self: center;
    padding: 12px 0 4px;
    flex: 0 0 auto;
}

.at-carta {
    flex: 1 1 0;
    max-width: 150px;
    min-height: 100px;
    background: var(--card);
    border: none;
    border-radius: 22px;
    box-shadow: var(--morbida-lg);
    font-family: var(--kids-font-title);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 700;
    color: var(--brand);
    transition: transform .12s ease, box-shadow .12s ease;
}

.at-carta:active { transform: scale(.96); }
.at-carta.dondola { animation: dondola .5s ease; }
.at-carta.trovata { animation: trovata .6s ease; color: #047857; box-shadow: 0 10px 26px rgba(16, 185, 129, .38); }

/* ---------- Mondo Primi Giochi (0-2): bersagli ≥140px ---------- */
.primi-scena {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--kids-radius);
    touch-action: none;
}

/* 🏠 a pressione prolungata: mentre si tiene, si riempie piano */
.home-lungo { position: relative; overflow: hidden; }

.home-lungo.tenuto::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(10, 91, 99, .25);
    animation: tieniPremuto 3s linear forwards;
    transform-origin: bottom;
}

@keyframes tieniPremuto {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* Tocca e Scoppia */
.ts-oggetto {
    position: absolute;
    bottom: -170px;
    width: 150px;
    height: 165px;
    min-width: 150px;
    border: none;
    background: transparent;
    padding: 0;
    animation: sale linear forwards;
    touch-action: none;
}

@keyframes sale {
    to { transform: translateY(calc(-100vh - 180px)); }
}

.ts-pallone::before {
    content: '';
    display: block;
    width: 140px;
    height: 150px;
    border-radius: 50% 50% 48% 48%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), transparent 45%), var(--c);
    box-shadow: inset -8px -12px 22px rgba(0, 0, 0, .12);
}

.ts-pallone::after {
    content: '';
    display: block;
    width: 3px;
    height: 34px;
    margin: -6px auto 0;
    background: rgba(15, 23, 42, .35);
    border-radius: 2px;
}

.ts-bolla::before {
    content: '';
    display: block;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9), transparent 40%),
        color-mix(in srgb, var(--c) 45%, transparent);
    border: 3px solid color-mix(in srgb, var(--c) 70%, white);
}

/* Cucù */
#cucu-scena { display: flex; align-items: flex-end; justify-content: center; }

.cucu-animale {
    position: absolute;
    left: 50%;
    top: 26%;
    font-size: 110px;
    line-height: 1;
    transform: translate(-50%, 0);
    transition: left .9s ease, top .9s ease, opacity .3s ease;
    z-index: 1;
    pointer-events: none;
}

.cucu-animale.saluta { animation: dondolaPiano 1.2s ease-in-out infinite; }
.cucu-animale.corre { transform: translate(-50%, 0) scale(.8); }
.cucu-animale.nascosto { opacity: 0; }
.cucu-animale.spunta { opacity: 1; transform: translate(-50%, -46%) scale(1.05); animation: trovata .6s ease; z-index: 3; }
.cucu-animale.capolino { opacity: 1; transform: translate(-50%, -30%) scale(.75); }

.cucu-cespugli {
    display: flex;
    gap: clamp(12px, 4vw, 32px);
    justify-content: center;
    width: 100%;
    padding-bottom: 8vh;
    z-index: 2;
}

.cucu-cespuglio {
    width: clamp(140px, 30vw, 190px);
    height: clamp(120px, 24vw, 160px);
    min-width: 140px;
    border: none;
    border-radius: 50% 50% 18px 18px;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .25), transparent 40%),
        linear-gradient(180deg, #34d399, #059669);
    box-shadow: 0 8px 0 #047857;
    font-size: 52px;
    z-index: 2;
    transition: transform .15s ease;
}

.cucu-cespuglio:active { transform: scale(.96); }
.cucu-cespuglio.ondeggia { animation: dondola .7s ease; }
.cucu-cespuglio.scosta { animation: cespuglioScosta .5s ease; }

@keyframes cespuglioScosta {
    0%, 100% { transform: rotate(0); }
    35% { transform: rotate(-7deg) translateX(-6px); }
    70% { transform: rotate(5deg) translateX(4px); }
}

/* Pioggia di Stelle */
.stelle-cielo {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .5) 2px, transparent 3px),
        radial-gradient(circle at 70% 35%, rgba(255, 255, 255, .5) 2px, transparent 3px),
        radial-gradient(circle at 45% 60%, rgba(255, 255, 255, .4) 2px, transparent 3px),
        linear-gradient(180deg, #1e3a8a 0%, #3b82f6 80%, #93c5fd 100%);
}

.stelle-volante {
    position: absolute;
    font-size: 44px;
    line-height: 1;
    transition: transform .6s cubic-bezier(.5, 0, .8, 1), opacity .6s ease;
    pointer-events: none;
    z-index: 2;
}

.stelle-cestino {
    flex: 0 0 auto;
    width: min(100%, 520px);
    align-self: center;
    min-height: 84px;
    margin-top: 8px;
    background: linear-gradient(180deg, #fbbf24, #d97706);
    border: 3px solid #b45309;
    border-radius: 14px 14px var(--kids-radius) var(--kids-radius);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 30px;
    padding: 8px;
}

/* ------------------------------------------------------------
   Il Cestino della Frutta
   ------------------------------------------------------------
   L'albero e il cesto sono disegnati (SVG in index.html), non
   scatole con gli angoli tondi: la prima versione era un uovo
   verde con uno stecchino sotto e un'asse di legno per cesto.
   Qui il colore lo danno --chioma e --tronco, che cambiano a
   ogni giro insieme al frutto.

   #cestino-chioma non si vede: e' solo il riquadro invisibile
   dove si appendono i frutti, ritagliato sulla chioma disegnata.
   ------------------------------------------------------------ */
.cestino-scena {
    background: linear-gradient(180deg, #cdeafd 0%, #e8f6fe 46%, #dff5e3 100%);
    position: relative;
    overflow: hidden;
}

.cestino-albero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cestino-tronco { fill: var(--tronco, #8b5a2b); }

.cestino-foglie circle { fill: var(--chioma, #3fa34d); }

/* Due tuffi di luce in alto a sinistra: bastano a dare volume
   senza sfumature pesanti. */
.cestino-foglie-luce circle {
    fill: #fff;
    opacity: .22;
}

.cestino-prato { fill: #8fd97a; }

/* Lo strato dei frutti copre tutta la scena: le posizioni non sono
   percentuali di questo riquadro, ma punti dell'albero disegnato,
   convertiti in pixel dal JS. Un rettangolo non basterebbe — i suoi
   angoli cadono fuori dalla chioma, che è tonda. */
.cestino-chioma {
    position: absolute;
    inset: 0;
}

/* Il cesto */
/* L'altezza comanda, la larghezza segue: su uno schermo basso il cesto
   si stringe invece di rubare spazio all'albero. */
.cestino-zona {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    height: clamp(92px, 19vh, 150px);
    max-width: 88%;
    aspect-ratio: 20 / 11;
    margin-top: 6px;
}

.cestino-disegno {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cestino-dentro { fill: #6b3f1b; }
.cestino-pancia { fill: #d09154; }

.cestino-intreccio path {
    fill: none;
    stroke: #a4682f;
    stroke-width: 4;
    stroke-linecap: round;
    opacity: .5;
}

/* L'orlo dietro e' piu' sottile e chiaro, quello davanti spesso e
   scuro: bastano due archi per far girare il cesto. */
.cestino-orlo-dietro { fill: none; stroke: #c08a4e; stroke-width: 7; }
.cestino-orlo { fill: none; stroke: #a4682f; stroke-width: 11; stroke-linecap: round; }

/* I frutti raccolti si posano nella bocca del cesto: devono starci
   in DIECI, su due file, anche sullo schermo più basso. */
.cestino-cesto {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 6%;
    height: 40%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 0 2px;
    font-size: clamp(17px, 5.5vw, 26px);
    line-height: 1;
}

/* Appeso per il centro: le posizioni in POSTI sono i punti dove sta
   il frutto, non il suo angolo. In volo la transform viene rimpiazzata
   da .in-volo, quindi il trascinamento resta preciso. */
.cestino-frutto {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    min-width: 140px;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 92px;
    line-height: 140px;
    text-align: center;
    touch-action: none;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .22));
}

.cestino-frutto.in-volo {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    transform: scale(1.1);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25));
}

.cestino-frutto.cade {
    transition: transform .6s cubic-bezier(.5, 0, .8, 1), opacity .6s ease;
}


/* Le Impronte */
.impronte-sentiero {
    background: linear-gradient(180deg, var(--cielo, #dbeafe) 0%, #fef3c7 100%);
}

.impronte-orma {
    position: absolute;
    font-size: 54px;
    line-height: 1;
    margin: -27px 0 0 -27px;      /* centrata sul dito */
    pointer-events: none;
    filter: hue-rotate(var(--tinta, 0deg));
    transform: rotate(var(--gira, 0deg));
    animation: ormaPosata .35s ease;
}

@keyframes ormaPosata {
    from { transform: scale(.4) rotate(var(--gira, 0deg)); opacity: 0; }
    to   { transform: scale(1) rotate(var(--gira, 0deg)); opacity: 1; }
}

.impronte-orma.accesa { animation: ormaAccesa .5s ease; }

@keyframes ormaAccesa {
    0%, 100% { transform: rotate(var(--gira, 0deg)) scale(1); }
    50%      { transform: rotate(var(--gira, 0deg)) scale(1.45); }
}

.impronte-animale {
    position: absolute;
    left: -90px;
    bottom: 12px;
    font-size: 78px;
    line-height: 1;
    pointer-events: none;
    animation: animaleCammina 2.6s ease-in-out forwards;
}

@keyframes animaleCammina {
    to { transform: translateX(calc(100vw + 120px)); }
}

/* ------------------------------------------------------------
   Il Trenino
   ------------------------------------------------------------
   Il treno andava all'indietro: la locomotiva guarda a sinistra e i
   vagoni le stanno dietro, ma alla partenza usciva verso destra.
   Adesso parte da dove guarda, e il treno nuovo arriva da destra
   attraversando la scena nello stesso verso.

   Il resto della scena era un gradiente vuoto con una banda a scacchi
   per binario: ora c'e' un paesaggio (nuvole, colline, prato) e una
   massicciata con le traversine e la rotaia sopra.
   ------------------------------------------------------------ */
.trenino-scena {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #bfe3fb 0%, #dcf1fd 55%, #eef9fe 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}

/* --- cielo --- */
/* Nuvola a tre lobi con gli pseudo-elementi: col solo box-shadow
   veniva una salsiccia, non una nuvola. */
.trenino-nuvola {
    position: absolute;
    background: #fff;
    border-radius: 999px;
    opacity: .85;
}

.trenino-nuvola::before, .trenino-nuvola::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
}

.trenino-nuvola::before {
    width: 60%; height: 150%;
    left: 14%; bottom: 26%;
}

.trenino-nuvola::after {
    width: 42%; height: 118%;
    right: 10%; bottom: 20%;
}

.trenino-nuvola-1 { width: 74px; height: 20px; left: 10%; top: 10%; }
.trenino-nuvola-2 { width: 56px; height: 15px; left: 62%; top: 20%; opacity: .7; }
.trenino-nuvola-3 { width: 62px; height: 17px; left: 34%; top: 31%; opacity: .55; }

/* --- colline dietro il prato --- */
/* La cupola vuole il raggio in due assi: con un 50% secco su una
   forma larga e bassa venivano due dossi squadrati. */
.trenino-collina {
    position: absolute;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: #a9dcab;
}

.trenino-collina-1 { width: 52%; height: 6%;  left: -4%;  bottom: 22.6%; }
.trenino-collina-2 { width: 44%; height: 4.5%; right: -3%; bottom: 22.6%; background: #c2e6c3; }

.trenino-prato {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 23%;
    background: linear-gradient(180deg, #a6dca6 0%, #8ed08e 100%);
}

/* --- il binario --- */
/* Traversine chiare e sottili sotto una rotaia ben visibile: prima
   erano pali larghi e scuri, e sembrava una staccionata. */
.trenino-massicciata {
    position: relative;
    flex: 0 0 auto;
    height: clamp(9px, 2vh, 15px);
    margin-bottom: 10%;
    /* traversine viste di taglio: brevi, tenui e distanziate */
    background:
        repeating-linear-gradient(90deg,
            rgba(150, 112, 70, .38) 0 6px, transparent 6px 26px),
        linear-gradient(180deg, #e2d8c6, #d0c3ad);
}

.trenino-rotaia {
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 5px;
    background: linear-gradient(180deg, #c6ced4 0%, #8a949c 55%, #667079 100%);
    border-radius: 2px;
}

/* --- il convoglio --- */
/* Locomotiva e vagoni sono disegnati e hanno tutti la stessa altezza:
   così stanno in fila sulla rotaia con le ruote allineate. La larghezza
   la decide il pezzo, perché un carro merci è più lungo di una cisterna.
   Sei pezzi devono entrare nei 360 px dello schermo più stretto: la fila
   dev'essere visibile fino all'ultimo, è il punto del gioco. */
.trenino-convoglio {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    padding-left: 14px;
    margin-bottom: -4px;          /* le ruote poggiano sulla rotaia */
    white-space: nowrap;
}

/* 11.5vw e non di più: i pezzi disegnati sono larghi circa 1,27 volte
   la loro altezza, e sei di fila devono entrare nei 360 px dello
   schermo più stretto. Con le emoji ci stava un carattere più grande,
   ma un vagone disegnato è più lungo di un'emoji. */
.trenino-loco, .trenino-vagone {
    height: clamp(34px, 11.5vw, 72px);
    width: auto;
    flex: 0 0 auto;
    pointer-events: none;
}

/* Parte da dove guarda la locomotiva: a SINISTRA. */
.trenino-convoglio.parte {
    transition: transform 1.1s cubic-bezier(.45, 0, .75, .35);
    transform: translateX(-125vw);
}

/* Il treno nuovo entra da destra e attraversa nello stesso verso. */
.trenino-convoglio.arriva { animation: trenoArriva 1s cubic-bezier(.2, .7, .3, 1); }

@keyframes trenoArriva {
    from { transform: translateX(115vw); }
    to   { transform: none; }
}

.trenino-vagone { animation: vagoneAggancia .32s ease; }

@keyframes vagoneAggancia {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* --- il fumo della partenza --- */
.trenino-fumo { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.trenino-sbuffo {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    animation: sbuffo 1.5s ease-out forwards;
}

@keyframes sbuffo {
    from { transform: translate(0, 0) scale(.5); opacity: .95; }
    to   { transform: translate(-70px, -110px) scale(2.1); opacity: 0; }
}

/* Le Mani */
/* Fondo azzurro tenue, non più giallo: le mani sono color pelle e
   sul giallo si impastavano. L'azzurro le stacca senza gridare. */
.mani-scena {
    background: linear-gradient(180deg, #dbeeff 0%, #eef7fd 60%, #f6fbfe 100%);
    display: grid;
    place-items: center;
    padding: clamp(10px, 3vh, 28px);
    touch-action: none;
}

/* Il fotogramma riempie la scena senza deformarsi. Le dieci figure
   condividono la stessa tela quadrata, quindi passando da una mano a
   due la scala non cambia: cresce solo quello che c'e' dentro. */
.mani-figura {
    width: 100%;
    height: 100%;
    max-height: min(100%, 62vh);
    object-fit: contain;
    pointer-events: none;
    transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.3, .64, 1);
}

/* A zero dita: l'anteprima di cosa succede toccando. */
.mani-figura.in-attesa {
    opacity: .32;
    animation: dondolaPiano 2.2s ease-in-out infinite;
}

.mani-scena.saluta .mani-figura { animation: dondolaPiano 1s ease-in-out infinite; }

/* Il Tamburello */
.tam-scena {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 6vw, 48px);
    flex-wrap: wrap;
}

.tam-tamburo {
    width: clamp(150px, 38vw, 240px);
    height: clamp(150px, 38vw, 240px);
    min-width: 150px;
    border-radius: 50%;
    border: 6px solid #b45309;
    font-size: clamp(56px, 14vw, 90px);
    box-shadow: 0 10px 0 #92400e, var(--kids-shadow);
    transition: transform .1s ease;
    touch-action: none;
}

.tam-1 { background: radial-gradient(circle at 35% 30%, #fecaca, #ef4444); }
.tam-2 { background: radial-gradient(circle at 35% 30%, #bfdbfe, #3b82f6); }

.tam-tamburo.battuto { animation: tamburoBatte .25s ease; }

@keyframes tamburoBatte {
    0% { transform: scale(1); }
    40% { transform: scale(.93); }
    100% { transform: scale(1); }
}

/* ---------- Pausa gentile ---------- */
.pausa-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 91, 99, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
}

.pausa-overlay[hidden] { display: none; }

.pausa-carta {
    background: var(--card);
    border-radius: var(--kids-radius);
    box-shadow: var(--kids-shadow);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
}

.pausa-uccellino { font-size: 90px; line-height: 1; animation: dondolaPiano 2.4s ease-in-out infinite; }

.pausa-sbadiglio {
    position: absolute;
    top: 22px;
    right: 26px;
    font-size: 34px;
    animation: sbadiglio 2.4s ease-in-out infinite;
}

@keyframes sbadiglio {
    0%, 100% { opacity: .3; transform: translateY(0) scale(.9); }
    50% { opacity: 1; transform: translateY(-10px) scale(1.1); }
}

/* ---------- Varie ---------- */
@keyframes dondolaPiano {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* Le animazioni si spengono tutte insieme quando il sistema lo chiede. */
@media (prefers-reduced-motion: reduce) {
    .screen.active, .splash-logo, .forma-btn.dondola,
    .pulsa-piano, .pulsa-forte, .forma-btn.trovata, .tq-posto.servito .tq-orsetto,
    .fine-icona, .fine-fiore, .tn-oggetti span.conta-ora, .coriandoli span,
    .ts-oggetto, .cucu-animale.saluta, .cucu-cespuglio.ondeggia, .cucu-cespuglio.scosta,
    .tam-tamburo.battuto, .salterella, .ccm-oggetto.libero.salterella,
    .at-uccellino.arriva, .scala-rana.salta, .inc-buco.pieno svg, .bl-posto.pieno svg,
    .sp-griglia.chiude, .giardino-prato span, .pausa-uccellino, .pausa-sbadiglio,
    .home-lungo.tenuto::after, .stelle-volante, .attivita-presto,
    .co-carta.trovata, .torri-animale, .torri-cubo {
        animation: none !important;
    }
}