/* =====================================================================
 * 听 Il nastro della lezione (lesson-nastro.php, assets/js/nastro.js).
 * La frase corrente al centro del "palco", grande, con pinyin e
 * significato; le altre sopra e sotto, piccole e sfumate: quando si
 * avanza l'elenco scorre verso l'alto, ma il testo si legge da fermo.
 * ===================================================================== */
.nastro-testata { text-align: center; }
.nastro-testata h1 { margin-bottom: .1rem; }
.nastro-testata h1 .testo-cinese { color: var(--c-giada-scuro); }
.nastro-pinyin-titolo { display: block; font-size: .95rem; font-weight: 500; color: var(--c-giada-scuro); }
.nastro-sotto { max-width: 62ch; margin: .35rem auto 0; color: var(--c-pietra); font-size: .95rem; }

.nastro {
    max-width: 780px;
    margin: 1rem auto;
    padding: 1rem 1.1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--c-bordo);
    border-radius: 18px;
    box-shadow: var(--ombra-morbida, 0 8px 24px rgba(16, 36, 29, .08));
}

/* Le quattro modalità: pulsanti radio a tessere. */
.nastro-modi { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 0 0 .8rem; padding: 0; border: 0; min-width: 0; }
.nastro-modo { position: relative; margin: 0; }
.nastro-modo input { position: absolute; opacity: 0; pointer-events: none; }
.nastro-modo > span {
    display: block;
    height: 100%;
    padding: .5rem .6rem;
    font-size: .86rem;
    line-height: 1.3;
    border: 1px solid var(--c-bordo);
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.nastro-modo i { color: var(--c-giada); margin-right: .15rem; }
.nastro-modo small { display: block; margin-top: .15rem; font-size: .76rem; color: var(--c-pietra); }
.nastro-modo > span:hover { background: var(--c-nebbia); }
.nastro-modo input:checked + span { background: var(--c-nebbia); border-color: var(--c-giada); box-shadow: inset 0 0 0 1px var(--c-giada); }
.nastro-modo input:focus-visible + span { outline: 2px solid var(--c-giada); outline-offset: 2px; }

.nastro-ripresa { margin: 0 0 .7rem; padding: .4rem .8rem; font-size: .9rem; background: var(--c-nebbia); border-radius: 10px; }
.nastro-ripresa i { color: var(--c-giada); }
.nastro-ripresa[hidden] { display: none; }
.nastro-collegamento { padding: 0; font: inherit; color: var(--c-giada-scuro); text-decoration: underline; background: none; border: 0; cursor: pointer; }

/* Il palco: la finestra sfuma in alto e in basso; i segnali stanno sopra, fuori dalla sfumatura. */
.nastro-palco {
    position: relative;
    height: clamp(270px, 46vh, 400px);
    background: linear-gradient(var(--c-nebbia), #fff 28%, #fff 72%, var(--c-nebbia));
    border-radius: 14px;
}
.nastro-finestra {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
    mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
}
.nastro-elenco { position: relative; margin: 0; padding: 0; list-style: none; }
.nastro-palco.pronto .nastro-elenco { transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.nastro-voce { padding: .3rem 1rem; text-align: center; opacity: .25; cursor: pointer; transition: opacity .35s; }
.nastro-voce.vicina { opacity: .5; }
.nastro-voce .nastro-pinyin, .nastro-voce .nastro-traduzione { display: none; }
.nastro-voce .nastro-cinese { font-size: 1.15rem; }
.nastro-voce.corrente { padding: .8rem 1rem; opacity: 1; cursor: default; }
.nastro-voce.corrente .nastro-pinyin { display: block; font-size: 1rem; color: var(--c-giada-scuro); }
.nastro-voce.corrente .nastro-cinese { display: block; font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1.35; color: var(--c-inchiostro); }
.nastro-voce.corrente .nastro-traduzione { display: block; margin-top: .25rem; font-size: 1.05rem; color: var(--c-pietra); }
.nastro-cinese mark { padding: 0; color: var(--c-giada-scuro); background: none; border-bottom: 3px solid var(--c-menta); }

/* Ascolto attivo: prima nulla (l'orecchio), poi caratteri e pinyin, poi il significato. */
.livello-0 .nastro-voce.corrente > span { visibility: hidden; }
.livello-1 .nastro-voce.corrente .nastro-traduzione { visibility: hidden; }
.in-ascolto .modo-attivo .nastro-voce.dopo .nastro-cinese { visibility: hidden; }
.nastro-orecchio {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    align-content: center;
    gap: .3rem;
    color: var(--c-giada);
    pointer-events: none;
}
.nastro-orecchio i { font-size: 2.6rem; animation: nastro-pulsa 1.6s ease-in-out infinite; }
.nastro-orecchio span { font-size: .9rem; color: var(--c-pietra); }
.livello-0 .nastro-orecchio { display: grid; }
@keyframes nastro-pulsa { 50% { transform: scale(1.12); opacity: .7; } }

/* Ripeti ad alta voce: l'invito con la barra del tempo a disposizione. */
.nastro-ripeti {
    position: absolute;
    left: 50%;
    bottom: .7rem;
    display: none;
    align-items: center;
    gap: .45rem;
    padding: .3rem .9rem;
    font-size: .85rem;
    color: #fff;
    white-space: nowrap;
    background: var(--c-giada-scuro);
    border-radius: 999px;
    transform: translateX(-50%);
}
.in-ripetizione .nastro-ripeti { display: flex; }
.nastro-ripeti-barra { width: 80px; height: 5px; overflow: hidden; background: rgba(255, 255, 255, .35); border-radius: 3px; }
.nastro-ripeti-barra span { display: block; width: 0; height: 100%; background: #fff; }

.nastro-stato { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .6rem; font-size: .9rem; color: var(--c-pietra); }
.nastro-termine .testo-cinese { font-size: 1.1rem; color: var(--c-inchiostro); }
.nastro-avanzamento { width: 100%; accent-color: var(--c-giada); }

.nastro-comandi { display: flex; justify-content: center; align-items: center; gap: .8rem; margin: .5rem 0 .7rem; }
.nastro-tasto {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 1.05rem;
    color: var(--c-inchiostro);
    background: #fff;
    border: 1px solid var(--c-bordo);
    border-radius: 50%;
    transition: background .2s, transform .1s;
}
.nastro-tasto:hover { background: var(--c-nebbia); }
.nastro-tasto:active { transform: scale(.95); }
.nastro-tasto:focus-visible { outline: 2px solid var(--c-giada); outline-offset: 2px; }
.nastro-tasto-principale { width: 64px; height: 64px; font-size: 1.4rem; color: #fff; background: var(--c-giada); border: 0; box-shadow: 0 6px 16px rgba(0, 120, 79, .3); }
.nastro-tasto-principale:hover { background: var(--c-giada-scuro); }

.nastro-opzioni { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.2rem; font-size: .88rem; color: var(--c-pietra); }
.nastro-opzioni select { margin-left: .3rem; padding: .15rem .4rem; border: 1px solid var(--c-bordo); border-radius: 8px; }
.nastro-spunta input { margin-right: .25rem; accent-color: var(--c-giada); }
.nastro-avviso { margin: .5rem 0 0; font-size: .88rem; text-align: center; color: var(--c-pietra); }
.nastro-avviso[hidden] { display: none; }

.nastro-admin { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; padding-top: .7rem; font-size: .84rem; color: var(--c-pietra); border-top: 1px dashed var(--c-bordo); }

.nastro-tutte { max-width: 780px; margin: 0 auto 1.5rem; }
.nastro-tutte summary { color: var(--c-giada-scuro); cursor: pointer; }
.nastro-tutte ol { margin-top: .5rem; }
.nastro-tutte li { margin: .25rem 0; }
.nastro-tutte .testo-cinese { font-size: 1.05rem; }
.nastro-tutte-traduzione { margin-left: .4rem; font-size: .88rem; color: var(--c-pietra); }

@media (max-width: 640px) {
    .nastro { padding: .75rem; border-radius: 14px; }
    .nastro-modi { grid-template-columns: repeat(2, 1fr); }
    .nastro-voce.corrente { padding: .6rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .nastro-palco.pronto .nastro-elenco, .nastro-voce, .nastro-modo > span { transition: none; }
    .nastro-orecchio i { animation: none; }
}