/* ============================================================
   PICCOLISSIMI · NUMERI — lo stile del sito.
   ------------------------------------------------------------
   Questo foglio è il modello delle app kids (_modello/style.css):
   schermate, HUD, riquadro della consegna, schede, schermata finale
   e scheda per gli adulti, con le stesse regole e gli stessi valori.
   gioco.css, caricato prima, tiene solo le SCENE dei giochi (albero,
   trenino, gradini, torri…), che vengono dall'app Android.

   Le ultime sezioni («Le scene col linguaggio del sito») portano le
   carte e i pulsanti dei giochi allo stesso linguaggio delle altre
   app: bordo colorato e ombra piena sotto, che si abbassa premendo.
   ============================================================ */

/* ---------- Layout principale ---------- */
.game-container {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(16px, 3vw, 36px) 12px 48px;
    overflow: hidden;
    color: var(--ink);
    font-family: var(--kids-font-body);
    /* Lo sfondo dell'app: l'ambra dei numeri e un velo d'azzurro. */
    background:
        radial-gradient(620px 320px at 6% -40px, rgba(245, 158, 11, .14), transparent 60%),
        radial-gradient(720px 420px at 104% 104%, rgba(56, 189, 248, .14), transparent 60%),
        linear-gradient(180deg, #fffbeb 0%, #f0f9ff 100%);
}

.bg-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bg-decor span {
    position: absolute;
    opacity: .13;
    line-height: 1;
    animation: decorFloat 9s ease-in-out infinite alternate;
}

@keyframes decorFloat {
    from { transform: translateY(-12px) rotate(-8deg); }
    to   { transform: translateY(14px) rotate(10deg); }
}

.pn-palco { display: contents; }

/* ---------- Schermate ---------- */
.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 760px;
    padding: .5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.screen.active {
    display: flex;
    animation: fadeIn .4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Le schermate di gioco hanno un'altezza: le scene dell'app (albero,
   prato, tavolo degli orsetti) crescono per riempirla. */
.att-screen {
    height: clamp(560px, calc(100dvh - 150px), 860px);
}

.att-screen > :not(.hud):not(.prompt-card) { flex-shrink: 1; }

/* ---------- Schermata iniziale ---------- */
.hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 18px);
    margin-bottom: .9rem;
    min-height: 92px;
}

.hero-item {
    width: clamp(62px, 12vw, 88px);
    aspect-ratio: 1;
    border-radius: 20px;
    background: #fff;
    border: 3px solid #d7efec;
    box-shadow: 0 5px 0 rgba(10, 91, 99, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    line-height: 1;
    animation: heroBob 2.6s ease-in-out infinite;
}

.hero-item:nth-child(2) { animation-delay: .35s; }
.hero-item:nth-child(3) { animation-delay: .7s; }
.hero-item:nth-child(4) { animation-delay: 1.05s; }

@keyframes heroBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.game-title {
    font-family: var(--kids-font-title);
    font-size: clamp(2rem, 5.6vw, 3.2rem);
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 .4rem;
    text-shadow: 0 3px 0 rgba(10, 91, 99, .12);
}

.game-subtitle {
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    color: var(--ink-2);
    font-weight: 700;
    margin: 0 0 1.4rem;
}

.choose-label {
    font-family: var(--kids-font-title);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brand);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* ---------- Lingue (come in Forme Geometriche e Le Paperelle) ---------- */
.lang-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 auto 1.6rem;
}

.lang-btn {
    appearance: none;
    border: 2px solid #d7efec;
    background: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font-family: var(--kids-font-title);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink-2);
    cursor: pointer;
    transition: transform .15s ease;
}

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

.lang-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ---------- Le fasce d'età e le schede dei giochi ---------- */
.pn-fascia { width: 100%; margin: 0 0 1.8rem; }

.pn-fascia-titolo {
    font-family: var(--kids-font-title);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand);
    margin: 0 0 .2rem;
}

.pn-fascia-nota {
    margin: 0 0 .9rem;
    color: var(--ink-2);
    font-size: .92rem;
    font-weight: 700;
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 300px));
    gap: clamp(12px, 2.5vw, 22px);
    justify-content: center;
    width: 100%;
}

.level-card {
    --lvl: #22c55e;
    --lvl-dark: #15803d;
    --lvl-soft: #f0fdf4;
    appearance: none;
    border: 3px solid var(--lvl);
    background: #fff;
    border-radius: var(--kids-radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 7px 0 var(--lvl-dark), var(--kids-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    font-family: var(--kids-font-body);
}

.level-card:hover {
    transform: translateY(-4px);
    background: var(--lvl-soft);
    box-shadow: 0 11px 0 var(--lvl-dark), var(--kids-shadow);
}

.level-card:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--lvl-dark);
}

.level-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Un colore per fascia d'età (gli stessi delle fasce nell'app). */
.level-card.f02 { --lvl: #ec4899; --lvl-dark: #be185d; --lvl-soft: #fdf2f8; }
.level-card.f23 { --lvl: #f59e0b; --lvl-dark: #b45309; --lvl-soft: #fffbeb; }
.level-card.f34 { --lvl: #10b981; --lvl-dark: #047857; --lvl-soft: #ecfdf5; }
.level-card.f46 { --lvl: #3b82f6; --lvl-dark: #1d4ed8; --lvl-soft: #eff6ff; }

.level-icon {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    line-height: 1;
}

.level-icon img { width: 100%; height: 100%; object-fit: contain; }

.level-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.level-name {
    font-family: var(--kids-font-title);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.level-desc {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink-2);
    line-height: 1.3;
}

/* ---------- Scheda per gli adulti ---------- */
.info-box {
    background: #fff;
    border: 2px dashed #cfe2e2;
    border-radius: 18px;
    padding: 1.3rem 1.4rem;
    margin-top: 1rem;
    width: 100%;
    text-align: left;
    color: #3b4a4a;
    font-size: .95rem;
    line-height: 1.6;
}

.info-box h2 {
    font-family: var(--kids-font-title);
    font-size: 1.15rem;
    color: var(--brand);
    margin: 0 0 .7rem;
}

.info-box h3 {
    font-family: var(--kids-font-title);
    font-size: 1rem;
    color: var(--brand);
    margin: 1.1rem 0 .4rem;
}

.info-box p { margin: 0 0 .55rem; }
.info-box ul { margin: 0 0 .55rem; padding-left: 1.2rem; }
.info-box li { margin-bottom: .35rem; }

.info-box .info-tip {
    margin-top: .9rem;
    background: #f0fdfa;
    border-radius: 12px;
    padding: .6rem .8rem;
}

/* ---------- HUD ---------- */
.hud {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 1rem;
    flex: 0 0 auto;
}

.hud-pill {
    background: #fff;
    border: 2px solid #ffe1a6;
    border-radius: 999px;
    padding: .45rem 1rem;
    font-family: var(--kids-font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    box-shadow: var(--kids-shadow-sm);
    white-space: nowrap;
}

.free-pill { border-color: #bae6fd; font-size: 1.05rem; margin-right: auto; }

.hud-progress {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.progress-track {
    flex: 1;
    height: 16px;
    background: #e4ece7;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(10, 91, 99, .12);
}

.progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.hud-right { display: flex; gap: 8px; margin-left: auto; }

.hud-btn {
    appearance: none;
    border: 2px solid #d7efec;
    background: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--kids-shadow-sm);
    transition: transform .15s ease, background .15s ease;
    padding: 0;
    line-height: 1;
}

.hud-btn:hover { transform: translateY(-2px); background: #f0fdfa; }
.hud-btn.home { border-color: var(--brand); background: #f0fdfa; }

/* Sta nell'HUD accanto al 🏠: da spento resta ben visibile che è spento. */
.hud-btn.audio-btn { border-color: #ffe1a6; background: #fff8ec; }
.hud-btn.audio-btn[aria-pressed="true"] { border-color: #fecaca; background: #fef2f2; opacity: .85; }

/* ---------- Consegna ---------- */
.prompt-card {
    position: relative;
    background: #fff;
    border: 3px solid #d7efec;
    border-radius: var(--kids-radius);
    box-shadow: var(--kids-shadow-sm);
    padding: 1rem 3.6rem 1rem 1.4rem;
    width: 100%;
    min-height: 4.2rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
}

.say-btn {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #ffe1a6;
    background: #fff8ec;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: var(--kids-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: transform .15s ease;
}

.say-btn:hover { transform: scale(1.1); }
.say-btn:active { transform: scale(.9); }

.prompt-text {
    font-family: var(--kids-font-title);
    font-size: clamp(1.15rem, 3.6vw, 1.6rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

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

.result-content {
    background: #fff;
    border: 3px solid #d7efec;
    color: var(--ink);
    padding: clamp(1.6rem, 5vw, 3rem);
    border-radius: 28px;
    text-align: center;
    width: min(480px, 94%);
    box-shadow: var(--kids-shadow);
}

.stars-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: clamp(2.4rem, 8vw, 3.4rem);
    margin-bottom: .4rem;
    min-height: 1.2em;
}

.stars-row .star.earned { animation: starPop .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.stars-row .star:nth-child(2) { animation-delay: .15s; }
.stars-row .star:nth-child(3) { animation-delay: .3s; }

@keyframes starPop {
    from { transform: scale(0) rotate(-40deg); }
}

.end-icon {
    font-size: clamp(3rem, 9vw, 4.2rem);
    margin-bottom: .6rem;
    animation: heroBob 2.4s ease-in-out infinite;
}

#end-title {
    font-family: var(--kids-font-title);
    font-size: clamp(1.8rem, 5.5vw, 2.4rem);
    font-weight: 700;
    margin: 0 0 .4rem;
    color: var(--brand);
}

.final-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-2);
    margin: 0 0 1.6rem;
}

.action-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.btn-big {
    appearance: none;
    font-family: var(--kids-font-title);
    font-size: 1.15rem;
    font-weight: 600;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-big.primary   { background: var(--brand); color: #fff; box-shadow: 0 5px 0 #063d42; }
.btn-big.secondary { background: var(--accent); color: #4a3200; box-shadow: 0 5px 0 #b97b00; }
.btn-big.ghost     { background: #fff; color: var(--brand); border: 2px solid var(--brand); box-shadow: 0 5px 0 rgba(10, 91, 99, .25); }

.btn-big:hover { transform: translateY(-2px); }
.btn-big:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

/* La pausa gentile usa gli stessi pulsanti. */
.pausa-carta { border: 3px solid #d7efec; border-radius: 28px; }
.pausa-carta .action-area { width: min(320px, 80vw); }

/* ============================================================
   Le scene col linguaggio del sito
   ------------------------------------------------------------
   Nell'app le carte erano bianche, senza bordo, con un'ombra
   sfumata. Sul sito tutto ciò che si tocca è un tasto vero: bordo
   chiaro, ombra piena sotto, e premendo si abbassa (GUIDA-APP-KIDS,
   cap. 3).
   ============================================================ */

/* Le carte-risposta: come .option-btn del modello. */
.co-carta,
.at-carta {
    background: #fff;
    border: 3px solid #e6f2f0;
    border-radius: var(--kids-radius);
    box-shadow: 0 5px 0 rgba(10, 91, 99, .10), var(--kids-shadow-sm);
    color: var(--ink);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.co-carta:hover,
.at-carta:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #bfe6e0;
    box-shadow: 0 10px 0 rgba(10, 91, 99, .10), var(--kids-shadow);
}

.co-carta:active,
.at-carta:active { transform: scale(.94); box-shadow: 0 2px 0 rgba(10, 91, 99, .10); }

.co-carta.trovata,
.at-carta.trovata {
    border-color: #22c55e;
    background: #f0fdf4;
    color: #15803d;
    box-shadow: 0 5px 0 #15803d;
}

/* Le cose da contare toccando: tasti tondi col bordo. */
.ccm-oggetto {
    background: #fff;
    border: 3px solid #e6f2f0;
    box-shadow: 0 5px 0 rgba(10, 91, 99, .10);
}

.ccm-oggetto.contato {
    border-color: #22c55e;
    background: #f0fdf4;
}

/* Il campanello: come un pulsante dell'HUD, più grande. */
.tq-campanello {
    border: 3px solid #ffe1a6;
    background: #fff8ec;
    box-shadow: 0 5px 0 #f3c56b;
}

.tq-campanello:active { transform: translateY(3px); box-shadow: 0 1px 0 #f3c56b; }

/* Le cornici delle scene: il bordo chiaro dei riquadri del sito. */
.co-cornice,
.tq-tavolo,
.at-teatrino,
.primi-scena,
.tn-zona {
    border: 3px solid #d7efec;
    border-radius: var(--kids-radius);
    box-shadow: var(--kids-shadow-sm);
}

/* ---------- Touch ----------
   kids-base.css impone min-height:44px a tutti i button sugli schermi
   touch: il minimo va imposto anche in larghezza. NON togliere. */
@media (pointer: coarse) {
    .hud-btn, .say-btn { min-width: 44px; min-height: 44px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .level-grid { grid-template-columns: minmax(200px, 340px); }

    .level-icon { font-size: 2rem; }
    .level-name { font-size: 1.15rem; }
    .level-desc { font-size: .85rem; }

    .hud { gap: 8px; }
    .hud-pill { font-size: 1rem; padding: .4rem .8rem; }

    .prompt-card { padding: .9rem 3.2rem .9rem 1rem; }
    .say-btn { top: .6rem; right: .6rem; }

    .co-carta, .at-carta { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-item,
    .bg-decor span,
    .end-icon,
    .stars-row .star,
    .screen.active,
    .lang-btn {
        animation: none !important;
        transition: none;
    }
}