/* Mood - Storie: rail + player verticale (CSS esterno dedicato) */
.story-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 12px 12px;
    margin: 0 0 14px;
    scrollbar-width: none;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: 16px;
}
.story-rail::-webkit-scrollbar { display: none; }

/* Contenitore delle frecce di scroll per la rail storie */
.story-rail-wrap {
    position: relative;
}
.story-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--mood-bg-card, rgba(255, 255, 255, 0.95));
    color: var(--mood-primary, #6c5ce7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 22;
    transition: opacity 0.2s ease, transform 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.story-scroll-arrow:hover { transform: translateY(-50%) scale(1.06); }
.story-scroll-arrow[hidden] { display: none; }
.story-scroll-arrow--left { left: 6px; }
.story-scroll-arrow--right { right: 6px; }
.story-scroll-arrow svg { width: 20px; height: 20px; pointer-events: none; }
/* Gradiente sfumato ai lati per far capire che le storie continuano */
.story-rail-wrap::before,
.story-rail-wrap::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    width: 22px;
    pointer-events: none;
    z-index: 21;
    border-radius: 50px;
}
.story-rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--mood-bg-card, #15152a) 0%, transparent 100%); }
.story-rail-wrap::after {right: 0;background: linear-gradient(270deg, var(--mood-bg-card, #15152a) 0%, transparent 100%);}

.story-ring {
    flex: 0 0 auto;
    width: 66px;
    text-align: center;
    cursor: pointer;
}
.story-ring .ring {
    width: 60px;
    height: 60px;
    margin: 0 auto 4px;
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(#6C5CE7, #00CEC9, #A29BFE, #6C5CE7);
}
.story-ring.all-seen .ring { background: var(--mood-border); }
.story-ring .ring-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--mood-bg);
    overflow: hidden;
    border: 2px solid var(--mood-bg-card);
    box-sizing: border-box;
}
.story-ring img, .story-ring video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-ring .ring-name {
    font-size: 0.72rem;
    color: var(--mood-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 66px;
}
.story-ring.add-ring .ring { background: var(--mood-border); }
.story-ring.add-ring .ring-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mood-primary);
}
.story-ring.add-ring .ring-inner svg {
    width: 22px;
    height: 22px;
}

.story-rail-empty { padding: 14px 16px; }

/* Player storie */
.story-player {
    position: fixed;
    inset: 0;
    z-index: 1010; /* sopra la bottom nav mobile (1000) per non farla tagliare la storia */
    background: #000;
}
.story-player.hidden { display: none; }

/* IL MODELLO CONDIVISO (una storia dentro una cornice che non e' lo schermo intero) sta in
   FONDO al file: la misura si dichiara DOPO la pelle del visore, perche' alcune regole hanno lo
   stesso peso e le vincerebbe lui - che e' esattamente il difetto "va tutto fuori schermo".
   Cercare "IL MODELLO CONDIVISO - IL REGOLO". */

.story-player .story-stage {
    width: 100%;
    height: 100%;
    max-width: -webkit-fill-available;
    margin: 0 auto;
    position: relative;
    overflow-y: auto !important;
    padding: 1rem !important;
}
.story-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.story-media img,
.story-media video {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;   /* le bande del video mostrano il colore della storia, non il nero */
}
/* Le immagini riempiono lo stage (cover); i video si vedono INTERI (contain),
   letter-box sul gradiente: mai tagliati ne' troppo larghi.
   IL FONDO DI QUESTE BANDE NON E' NERO (titolare, 15/09/2026: "il background del tasto dove e'
   presente il nome del profilo non e' nel contesto ... si vede che non arriva fino al basso
   dell'immagine"): con `contain` un video piu' stretto del suo riquadro lascia due bande, e il nero
   fisso faceva sembrare che la storia "finisse" prima. Adesso la banda e' TRASPARENTE e mostra il
   colore della storia, cioe' la stessa cornice - la storia arriva fino in fondo. */
.story-media img { object-fit: cover; }
.story-media video { object-fit: contain; }

/* LA BARRA LIKE E COMMENTI NON COPRE IL TESTO (titolare, 15/09/2026: "la barra in basso like e
   commenti copre il testo in basso o meglio se alzo di 4rem lo vedo"). La barra e' alta 63px e il
   testo partiva da 66px: 3px di distacco, che alla vista e' "coperto". Adesso il distacco e'
   dichiarato in un nome solo (`--sp-barra`): chi cambia la barra cambia anche il testo. */
.story-player {--sp-barra: 86px;}

.story-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--sp-barra, 86px) + env(safe-area-inset-bottom));
    padding: 50px 18px 8px;
    color: #fff;
    font-size: 1.28rem;
    line-height: 1.55;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: left;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0) 99%);
    overflow-wrap: anywhere;
    /* LE RIGHE CHE L'AUTORE HA SCRITTO RESTANO LE SUE (18/09/2026). Nel compositore il testo si
       scrive con `white-space: pre-wrap` (vedi `.sc-scrivendo`): chi preme invio VEDE una riga
       nuova, e quella riga nuova finisce nel testo salvato (`\n`). Qui il foglio non lo diceva,
       quindi la storia pubblicata mostrava lo stesso testo con le righe ACCORPATE: l'autore vedeva
       4 righe mentre scriveva e ne vedeva 3 nel visore («non e' allineato il preview», titolare).
       Con `pre-wrap` provino e storia pubblicata hanno le stesse righe. */
    white-space: pre-wrap;
    /* Il testo NON prende i tocchi: le zone "avanti/indietro" stanno sotto di lui, e un tocco sul
       testo non faceva avanzare niente (misurato il 17/09/2026: "#spText intercepts pointer
       events": la storia si mandava avanti solo toccando il bordo). Si legge, non si tocca -
       TRANNE il link, che e' l'unica parte del testo che si tocca (vedi `.story-link` qui sotto). */
    pointer-events: none;
    /* Sopra i veli degli effetti (`::after`, z-index 3) e sotto la barra azioni (6). */
    z-index: 5;
}

/* ---------- IL LINK NEL TESTO: FUORI DAL TESTO, SUL TESTO (titolare, 20/09/2026) ----------
   «in storie se aggiungo un link ... dovrebbe toglierlo ... e rendere href il testo». La regola di
   scrittura sta in un posto solo, `assets/js/stories.js` (`senzaLink`/`conLink`): l'indirizzo non si
   mostra, e il tocco lo prende la frase. Qui c'e' solo il vestito - e serve in tre posti (il visore,
   la storia dentro un post, la tessera del profilo), quindi e' scritto senza chiedere chi e' il padre.
   `color: inherit`: il colore resta quello della storia, perche' un blu da browser in mezzo a una
   storia chiara o scura non si legge. La sottolineatura usa `currentColor` per lo stesso motivo:
   sul testo bianco del visore e su quello scuro della tessera si vede uguale.
   `pointer-events: auto` SOLO sul link (il resto del testo resta trasparente ai tocchi, vedi sopra):
   senza questa riga il link sarebbe un disegno - il tocco passerebbe alla zona "avanti" e la storia
   andrebbe avanti invece di aprire l'indirizzo. Il link sta a `z-index: 5` (il testo), le zone a 2. */
.story-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: currentColor;
    cursor: pointer;
}
.story-link:active { text-decoration-thickness: 3px; }
.story-text .story-link { pointer-events: auto; }
/* L'ENTRATA DEL TESTO - perche' prima NON si vedeva (titolare, 15/09/2026: "queste non le vedo
   funzionare ... e non le comprendo"):
   1. `storyTextIn` finiva con `transform: none`, ma i template centrati/citazione si posizionano
      proprio con `transform: translateY(-50%)`: a fine animazione il testo SALTava in un altro
      punto, e per non farlo saltare... si toglieva l'animazione;
   2. per le storie di SOLO TESTO c'era `animation: none` sulla regola piu' forte: nessuna entrata,
      mai;
   3. l'animazione partiva una volta sola (un'animazione CSS riparte solo su un elemento NUOVO).
   Adesso le animazioni sono una SCELTA dell'autore (`st-anim-...`), si muovono con `translate` e
   `scale` - proprieta' singole, che si SOMMANO al `transform` del template invece di cancellarlo -
   e le distanze sono in `em`, quindi la stessa animazione va bene sullo schermo intero e dentro
   una scheda da 316px. I nomi e le chiavi stanno in "EFFETTI E ANIMAZIONI DEL TESTO". */

/* Barra azioni (like + risposta all'autore) */
.story-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
}
.story-like {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.story-like svg { width: 20px; height: 20px; }
.story-like.is-liked { background: var(--mood-primary, #6c5ce7); border-color: var(--mood-primary, #6c5ce7); }
.story-like.is-liked svg { fill: #fff; }
.story-reply {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.story-reply input {
    flex: 1 1 auto;
    min-width: 0;
    /* Anche il campo "Rispondi a ..." (che porta il NOME del profilo) prende il colore della storia:
       era un vetro bianco uguale per tutti, fuori contesto su un fondo corallo o ghiaccio. */
    background: color-mix(in srgb, var(--sp-c2, #2A2A4A) 42%, rgba(255, 255, 255, 0.16));
    border: 1px solid color-mix(in srgb, var(--sp-c1, #6C5CE7) 55%, rgba(255, 255, 255, 0.35));
    color: #fff;
    border-radius: 999px;
    padding: 9px 14px;
    font: inherit;
    font-size: 0.9rem;
    outline: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.story-reply input::placeholder { color: rgba(255, 255, 255, 0.7); }
.story-reply-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mood-primary, #6c5ce7);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}
.story-reply-send svg { width: 18px; height: 18px; }
.story-progress {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    gap: 4px;
}
.story-progress i {
    height: 3px;
    flex: 1;
    border-radius: 3px;
    background: rgb(3 169 244 / 56%);
    overflow: hidden;
    position: relative;
}
.story-progress i b {
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}
.story-progress i.is-done b { transform: scaleX(1); }
.story-progress i.is-current b { animation: storyBar linear forwards; }
@keyframes storyBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.story-head {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    color: var(--text-color-white);
    gap: 3px;
    padding-left: 0rem;
    padding-right: initial;
    padding-top: 4px;
    justify-content: space-between;
    width: -webkit-fill-available;
}
.story-head .story-head-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.4);
}
.story-head-name { font-weight: 700; font-size: 0.9rem; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* IL RIUTILIZZO, DICHIARATO (17/09/2026): nel visore, accanto al nome; nella miniatura, in un
   cerchio. Una storia riproposta non e' una novita' - chi la guarda lo deve sapere (richiesta del
   titolare: "va indicato che e' stato riutilizzato in quanto ha molto valore"). */
.story-head-rip {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: color-mix(in srgb, var(--sp-c1, #6C5CE7) 75%, rgba(10, 10, 22, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    vertical-align: middle;
}
.story-head-rip.hidden { display: none; }

.story-rect-rip {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(10, 10, 22, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
}
.story-rect-rip svg,
.story-rect-rip i { inline-size: 13px; block-size: 13px; }
/* Il bottone di chiusura era di un blu fisso (rgb(33 150 243 / 63%)): su una storia corallo o
   gialla quel blu non c'entra niente - e' il "non e' nel contesto" del titolare. Adesso porta il
   colore della storia (`--sp-c1`, scritto da `applyPlayerBg`). */
.story-close {
    margin-left: auto;
    background: color-mix(in srgb, var(--sp-c1, #6C5CE7) 62%, rgba(10, 10, 22, 0.35));
    border: 0;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.story-tap { position: absolute; top: 0; bottom: 0; z-index: 2; width: 50%; }
.story-tap.prev { left: 0; }
.story-tap.next { right: 0; }

/* Il TESTO non prende i tocchi: le zone "avanti/indietro" stanno sotto di lui, quindi un tocco sul
   testo non faceva avanzare niente (misurato il 17/09/2026: "#spText intercepts pointer events" -
   la storia si poteva mandare avanti solo toccando il bordo). Il testo si legge, non si tocca. */

.story-muted-hint {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 4;
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
    background: rgba(0,0,0,0.4);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Testo/creatore */
/* L'ALTEZZA DELLO SCHERMO E' DEL VISORE, NON DI OGNI STORIA (18/09/2026). Questa riga diceva
   `height: 100vh` a QUALUNQUE storia dentro un player: anche alla superficie del provino del
   compositore (`#scTryStage`) e alla cornice della scheda di un post. Misurato: il provino e' un
   riquadro da 291x388, e dentro di lui la storia veniva alta 844px - cioe' si vedeva solo la fetta
   in cima, con il testo fuori («vedi che non e' allineato il preview», titolare). Con l'id del
   visore la regola vale solo dove serve, e ogni cornice riprende la SUA altezza. */
#storyPlayerEl .story-stage.story-text-only {
    /* Il fondo di questa cornice lo porta il COLORE scelto (`stage-color-...`) e, se l'autore lo
       vuole, l'effetto "Aurora" (`stage-fx-aurora`) che lo fa scorrere. Qui c'era un'animazione
       del fondo (storyGradShift) SENZA fondo da animare - il gradiente era commentato: animava
       il nulla. Per questo, di quelle animazioni, non se ne vedeva una. */
    height: 100dvh;
    height: 100vh;
}
/* LA CORNICE DEL VISORE E' LA MISURA DEL TESTO (18/09/2026). Il titolare: «i caratteri non
   rispettano proporzioni ... anteprima non è sincrona al template». La causa: nel visore il
   carattere era `160%` (un numero FISSO rispetto alla radice: 25,6px su un telefono), mentre
   nella cornice piccola (provino, scheda) e' una frazione della cornice. Due modelli = due
   risultati. Qui il visore dichiara la sua cornice e usa la STESSA frazione del provino:
   su un telefono da 390px 6,56cqw = 25,6px, cioe' esattamente i pixel di prima - ma ora il
   carattere cresce con la cornice invece di restare fermo su schermi grandi. */
#storyPlayerEl .story-stage {container-type: inline-size;overflow: hidden !important;}

/* E SU UNO SCHERMO LARGO LA CORNICE E' UNA STORIA, NON UNA PAGINA (18/09/2026). Misurato il
   18/09/2026: su una finestra da 1440x900 lo stage era largo quanto la finestra, e il testo -
   misurato in `cqw`, cioe' in frazione della cornice - arrivava a **92px** (6,4% di 1440) contro i
   **26px** del provino: sul monitor la storia si leggeva come un cartellone. Una storia e' verticale:
   qui la cornice prende la forma di una storia (9/16, la stessa misura della scheda di un post in
   questo foglio) e si centra, cosi' la frazione del provino vale anche sul monitor: 6,56% di ~490px
   = ~32px invece di 92. Il fondo intorno e' quello della storia (`.story-player`), quindi il colore
   resta il suo fino ai bordi dello schermo. */
@media (min-width: 900px) {
    #storyPlayerEl .story-stage {
        inline-size: min(100vw, calc(100dvh * 9 / 16));
        block-size: 100vh;
        block-size: 100dvh;
        margin-inline: auto;
        border-radius: 18px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    }
}

/* Storie SOLO TESTO, IN OGNI CORNICE (riscritto il 18/09/2026, ore 19).
   PERCHE' E' STATO RISCRITTO: qui c'era UNA regola con QUATTRO classi
   (`.story-player .story-stage.story-text-only .story-text`) che vinceva su ogni template (due
   classi): nel provino del compositore "Grande", "Citazione" e "Fianco" diventavano identici agli
   altri tre - misurato: stesso carattere (18,97px), stesso riquadro, stesso posto per tutti e sei i
   comandi ("non cambia nulla", titolare) - e nella storia pubblicata il template scelto dall'autore
   non si vedeva piu'. Adesso il modello e' CONDIVISO e i template comandano:
     • qui ci sono solo le cose comuni: il riquadro abbraccia il testo, non esce mai dalla cornice,
       e il carattere e' una FRAZIONE della cornice (`cqw`) - la stessa frazione vale nel provino da
       289px, nella scheda del post e sul visore da 506px, quindi provino e pubblicato si somigliano;
     • il POSTO lo decide il template, con il LAYOUT (`inset-block`), non con `transform`;
     • le regole qui sotto hanno TRE classi, quindi vincono su queste due: i template si vedono. */
/* DUE classi, NON tre (18/09/2026): con tre classi questa regola vinceva anche sui template, che ne
   hanno due - e "Fianco" restava largo quanto tutto il palco (`larghezza 242,9px` invece di `52%`),
   "Grande" non ingrandiva, "Citazione" non citava. Con due classi i template vincono e il provino
   torna a mostrare quello che l'autore sceglie; il posto del testo lo decidono le regole qui sotto
   (tre classi) solo dove serve il LAYOUT al posto del `transform`. */
.story-text-only .story-text {
    z-index: 7;
    block-size: fit-content;
    max-block-size: calc(100% - 24px);
    inset-inline: 8%;
    width: auto;
    text-align: center;
    background: transparent;
    /* Il `transform` del template non serve piu': il centro lo fa il layout. Le animazioni del testo
       usano `translate`/`scale` (proprieta' SINGOLE), quindi non vengono toccate da questa riga. */
    transform: none;
    /* LA STESSA FRAZIONE DELLA SCHEDA DEL POST (5,25cqw): cosi' il testo che si scrive nel provino e
       quello che si pubblica hanno la stessa proporzione. Prima erano 6,56cqw qui contro 5,25cqw nel
       provino: due misure per la stessa storia. */
    font-size: calc(var(--sc-testo, 1) * 5.25cqw);
}
/* Dove sta il testo, per ogni template (tre classi: vincono sulle due qui sopra). */
.story-stage.story-text-only .stage-tpl-center .story-text,
.story-stage.story-text-only .stage-tpl-quote .story-text {
    inset-block: 0;
    margin-block: auto;
    transform: none;      /* il centro e' il layout, non `translateY(-40%)` */
}
.story-stage.story-text-only .stage-tpl-top .story-text {
    inset-block: 96px auto;
    margin-block: 0;
}
.story-stage.story-text-only .stage-tpl-bottom .story-text,
.story-stage.story-text-only .stage-tpl-big .story-text {
    inset-block: auto 0;
    margin-block: 0;
}
/* "Fianco" non compare qui: il suo posto (colonna a destra, sopra la barra azioni) lo decide la sua
   regola, che ha due classi come questa e viene dopo. */

/* I COLORI NON SI DICHIARANO QUI: una definizione sola, per la storia e per ogni cornice che la
   ospita, sta in fondo al file - "UNA SOLA DEFINIZIONE DEI COLORI". Qui prima c'era una copia
   (`.story-player .story-stage.stage-color-...`): due copie dello stesso colore significano due
   colori diversi (era il difetto "nelle storie ci sono i colori giusti, nei post sono finti"). */
.story-player .story-stage.story-creator-stage { padding: 0; }

.story-creator {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    padding: 4px 16px 24px 20px;
    display: block;
    margin-bottom: 4rem;
    overscroll-behavior: contain;
    scrollbar-width: none;
    text-align: center;
}

/* La casella di scrittura separata (`.story-creator-text`) e i suoi due riquadri di "anteprima"
   (`.story-preview`) non ci sono piu': dal 17/09/2026 si scrive dentro la storia e il media entra li'
   dentro. Le loro regole sono uscite con loro - un foglio di stile che parla di elementi che non
   esistono e' zavorra che confonde chi lo rilegge. */

/* ===== Font storie (6+ caratteri) ===== */
.st-font-sans { font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; }
.st-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.st-font-times { font-family: 'Times New Roman', Times, serif; }
.st-font-mono { font-family: 'Courier New', Courier, monospace; }
.st-font-vista { font-family: Verdana, Geneva, sans-serif; }
.st-font-trebuchet { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', sans-serif; }
.st-font-impact { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: 0.4px; }
/* I SEI CARATTERI AGGIUNTI (18/09/2026): solo caratteri di sistema, niente da scaricare - una storia
   non deve pesare di piu', e non c'e' un carattere che arriva dopo e cambia il disegno. */
.st-font-helvetica { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.st-font-palatino { font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; }
.st-font-garamond { font-family: Garamond, 'Apple Garamond', 'Times New Roman', serif; }
.st-font-tahoma { font-family: Tahoma, Geneva, Verdana, sans-serif; }
.st-font-arialblack { font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif; letter-spacing: 0.2px; }
.st-font-georgia { font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.1px; }

/* ===== Template storie ===== */
.stage-tpl-bottom .story-text {
    bottom: 0;
    top: auto;
    /* Lo spazio sotto il testo segue la BARRA VERA (misurata da `stories.js` in `--sp-barra`), non
       un numero scritto a mano: con una barra piu' alta (telefono, campo risposta + "mi piace")
       il testo si alza da solo. Il ripiego resta 5rem per chi non ha la variabile. */
    padding-bottom: calc(var(--sp-barra, 5rem) + 8px);
}

.stage-tpl-center .story-text {
    top: 46%; bottom: auto;
    transform: translateY(-46%);
    text-align: center;
    padding: 26px 20px;
    background: none;
    /* LA STESSA FRAZIONE DELLA SCHEDA DEL POST (5,95cqw): cosi' "Centrato" ha la stessa proporzione
       nel provino da 289px e sul visore da 506px. Prima era 1,45rem, cioe' una misura FISSA. */
    font-size: calc(var(--sc-testo, 1) * 5.95cqw);
}
.stage-tpl-top .story-text {
    /* SOTTO L'INTESTAZIONE, AL VERO SPAZIO CHE OCCUPA (18/09/2026). Qui c'erano 130px "pieni": misurata
       dal vivo, l'intestazione della storia (barrette, avatar, nome) e' alta 46,6px e va da 16px a
       62,6px DENTRO la cornice - identica su telefono (390x844) e su monitor (506x900). 130px erano il
       doppio: «Alto» restava a un sesto della storia, e il titolare lo ha visto subito nella scheda del
       post («quando si clicca su alto ...»). Adesso 72px: dieci pixel sotto l'intestazione.
       NELLA CORNICE DEL POST non c'e' intestazione: li' valgono i 3,3cqw della regola dedicata. */
    top: 72px; bottom: auto;
    background: none;
    font-size: calc(var(--sc-testo, 1) * 5.33cqw);   /* la stessa della scheda del post */
}
.stage-tpl-big .story-text {font-size: calc(var(--sc-testo, 1) * 8.2cqw);font-weight: 800;line-height: 1.12;letter-spacing: -0.5px;bottom: 0;padding-bottom: 3.5rem;background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45%) 38%, rgb(0 0 0 / 88%) 100%);}
.stage-tpl-quote .story-text {
    /* UNA CITAZIONE SI VEDE DAL CARATTERE (18/09/2026): «è bruttissimo il carattere ... non è da
       citazione» (titolare). Il corsivo da solo, nel carattere scelto per il testo, non fa una
       citazione: qui il template porta il SUO carattere (serif), la riga piu' stretta (1,32 invece di
       1,55) e i segni grandi qui sotto. Una riga sola da togliere, se non piace. */
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    text-align: center;
    /* L'INTERLINEA DELLA CITAZIONE (18/09/2026). Il titolare: «la line-height è appiccicata ...
       l'interlinea dovrebbe essere almeno un 130%». Era 1,32 (132%): col corsivo serif - che ha la
       lettera piu' alta e piu' larga del sans - le righe si toccavano lo stesso. Adesso 1,42, che
       lascia respirare quattro righe senza sciogliere il blocco della citazione. */
    line-height: 1.42;
    top: 40%; bottom: auto;
    transform: translateY(-40%);
    padding: 20px;
    background: none;
    font-size: calc(var(--sc-testo, 1) * 3.54cqw);   /* la stessa della scheda del post */
}
/* IL SEGNO DELLA CITAZIONE: GRANDE, PROPORZIONATO AL TESTO, SENZA BUCHI (18/09/2026).
   Prima era `3rem` (48px) sempre: sul visore da 506px era appena piu' alto del testo (31px) e la sua
   riga si prendeva un rigo intero vuoto - «i doppi apici sono piccolissimi e c'e' un sacco di spazio»
   (titolare). Adesso e' 2,4 volte il carattere del testo, con la riga schiacciata e un margine
   negativo: grande come un segno di citazione, senza aprire un buco sopra il testo. */
.stage-tpl-quote .story-text::before {
    content: '\201C';
    display: block;
    font-size: 2.4em;
    line-height: 1.2;
    margin-bottom: -0.28em;
    opacity: 0.72;
}
.stage-tpl-split .story-text {
    top: auto; bottom: 0;
    width: 52%;
    right: 0;
    left: auto;
    border-left: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.35);
    font-size: calc(var(--sc-testo, 1) * 4.02cqw);   /* la stessa della scheda del post */
    bottom: calc(var(--sp-barra, 86px) + env(safe-area-inset-bottom));  /* sopra la barra azioni */
}

/* ===== Colori / gradienti automatici =====
   Anche questi hanno UNA sola definizione (in fondo al file): qui c'erano le copie vecchie a due
   tappe e 150 gradi, diverse da quelle che le storie usavano davvero. */

/* ==========================================================================
   EFFETTI E ANIMAZIONI DEL TESTO
   --------------------------------------------------------------------------
   Richiesta del titolare (15/09/2026): "oltre ai gradienti .. magari effetti .. cosi' diventa
   tutto molto bello ... piu' colori gradienti e diverse animazioni".
   GLI EFFETTI (`stage-fx-...`) vivono sullo STAGE: un velo `::after` (ultimo figlio, quindi sopra
   il media e sotto il testo, che ha z-index 5) e, per "aurora" e "zoom", un movimento del fondo
   o del media. `pointer-events: none`: i tocchi passano oltre, il visore continua a funzionare.
   LE ANIMAZIONI (`st-anim-...`) muovono il testo con `translate` e `scale` - proprieta' SINGOLE, che
   si sommano al `transform` del template invece di cancellarlo (e' il difetto che le rendeva
   invisibili o le faceva saltare). Le distanze sono in `em`: la stessa animazione va bene sullo
   schermo intero e dentro una scheda da 316px, senza due copie da tenere allineate.
   Le classi le scrive `stories.js` (`applyStageStyle`: `effects` e `anim` dello stile della
   storia), quindi valgono ovunque: visore, anteprima del profilo, scheda del post, provino del
   compositore. "Nessuno"/"Nessuna" non portano classe: nessun effetto, nessuna animazione.
   ========================================================================== */

/* Il velo, per gli effetti che ne hanno bisogno. */
.stage-fx-riflesso::after,
.stage-fx-bolle::after,
.stage-fx-neon::after,
.stage-fx-vignetta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Aurora: il fondo (quello scelto, qualunque sia) scorre.
   PIU' VISIBILE (18/09/2026): il movimento c'era - misurato: la posizione del fondo passava da 0,24%
   a 39,7% in tre secondi - ma con un ciclo di 16s e un ingrandimento di 2,6 volte si spostava troppo
   piano per accorgersene («effetto Aurora: non vedo nulla che cambia», titolare). Adesso il fondo e'
   ingrandito 3,2 volte e la corsa e' in diagonale (da sinistra-alto a destra-basso, non solo in
   orizzontale) in 9 secondi: si vede che la luce si muove, restando un respiro lento. */
.story-player .story-stage.stage-fx-aurora,
.story-stage.stage-fx-aurora {
    background-size: 320% 320% !important;
    animation: fxAurora 9s ease-in-out infinite;
}
@keyframes fxAurora {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 100%; }
}

/* Riflesso: una lama di luce che attraversa la storia.
   I VALORI SONO DEL TITOLARE (18/09/2026: «ecco come deve essere l'effetto», riga per riga).
   Rispetto al mio tentativo precedente cambiano:
     • la banda bianca e' piu' LARGA e piu' tenue: 0,16 ai lati e cuore a 0,25 (era 0,55);
     • il movimento e' piu' VELOCE: `fxLuce` a 3,5s (era 7,5s);
     • la lama e' spostata di 149px a sinistra (`margin-left`): con il riquadro a `inset: 0` la
       misura lo allarga verso sinistra - ed e' in PIXEL, quindi su una cornice piccola (la scheda
       di un post, ~145px) pesa molto di piu' che sul visore.
   Restano `mix-blend-mode: screen` (la luce schiarisce quello che c'e' sotto, non ci appoggia un
   velo grigio) e la banda calda gialla al 20%. I fotogrammi (`@keyframes fxLuce`) sono quelli di
   prima: movimento piu' dissolvenza in entrata e in uscita. */
.stage-fx-riflesso::after {
    background: linear-gradient(102deg, transparent 28%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.25) 52%, rgba(255, 255, 255, 0.16) 60%, transparent 74%),
        linear-gradient(102deg, transparent 16%, rgb(255 235 59 / 20%) 51%, transparent 81%);
    mix-blend-mode: screen;
    will-change: transform, opacity;
    margin-left: -149px;
    animation: fxLuce 9.5s ease-in-out infinite;
}
@keyframes fxLuce {
    0%   { transform: translateX(-120%); opacity: 0; }
    10%  { opacity: 1; }                                /* la lama si accende entrando */
    45%  { opacity: 1; }
    62%  { transform: translateX(120%); opacity: 0; }    /* e si spegne uscendo */
    100% { transform: translateX(120%); opacity: 0; }
}

/* Bolle: sfere morbide che salgono (fuori fuoco). */
.stage-fx-bolle::after {
    background-image:
        radial-gradient(circle 14px at 20% 84%, rgba(255, 255, 255, 0.22), transparent 70%),
        radial-gradient(circle 9px at 62% 70%, rgba(255, 255, 255, 0.18), transparent 70%),
        radial-gradient(circle 18px at 44% 96%, rgba(255, 255, 255, 0.14), transparent 70%),
        radial-gradient(circle 7px at 82% 88%, rgba(255, 255, 255, 0.20), transparent 70%);
    animation: fxSalgono 13s linear infinite;
}
@keyframes fxSalgono {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 6px -320px, -8px -260px, 10px -380px, -6px -300px; }
}
/* Neon: la storia si accende. Un alone che respira ai bordi e la scritta che brilla.
   Sostituisce la GRANA, tolta su richiesta del titolare (18/09/2026: «non mi piace l'effetto grana,
   non vuol dire nulla»): questo una cosa la dice, e si vede sia su una foto sia su un fondo scuro.
   Costa poco: due gradienti e una `filter` - niente turbolenza SVG, che era la parte pesante della
   grana (e sul telefono si sente). */
.stage-fx-neon::after {
    background-image:
        radial-gradient(120% 80% at 50% 112%, rgba(255, 255, 255, 0.20), transparent 62%),
        radial-gradient(120% 80% at 50% -12%, rgba(255, 255, 255, 0.14), transparent 62%);
    animation: fxNeonAlone 4.6s ease-in-out infinite;
}
@keyframes fxNeonAlone {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}
/* La scritta brilla: `filter` e non `text-shadow`, cosi' l'ombra che tiene leggibile il testo non
   viene cancellata dall'animazione. */
.stage-fx-neon .story-text { animation: fxNeonTesto 4.6s ease-in-out infinite; }
@keyframes fxNeonTesto {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45)); }
    50%      { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 26px rgba(255, 255, 255, 0.35)); }
}

/* Vignetta: gli angoli si abbassano, il centro resta acceso (e il testo si legge meglio). */
.stage-fx-vignetta::after {
    background: radial-gradient(ellipse 80% 64% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
}

/* Zoom lento: il media respira (solo se l'autore lo chiede). */
.story-stage.stage-fx-zoom .story-media img,
.stage-fx-zoom .story-media img,
.stage-fx-zoom .story-media video { animation: fxZoom 9s ease-in-out infinite alternate; }
/* 9 secondi per un 22% (era 20 secondi per un 12%): il titolare vedeva "una parvenza di zoom"
   (17/09/2026) e aveva ragione: su un video di quindici secondi, un 12% in venti secondi non si
   vede. Adesso il respiro si legge. */
@keyframes fxZoom { from { scale: 1; } to { scale: 1.22; } }

/* ---- Le animazioni del testo --------------------------------------------------------- */
.story-stage.st-anim-salita .story-text { animation: storyTextIn 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
@keyframes storyTextIn { from { opacity: 0; translate: 0 1em; } to { opacity: 1; translate: 0 0; } }

.story-stage.st-anim-destra .story-text { animation: storyTextDaDestra 0.95s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
@keyframes storyTextDaDestra { from { opacity: 0; translate: 3.2em 0; } to { opacity: 1; translate: 0 0; } }

.story-stage.st-anim-dissolvenza .story-text {animation: storyTextDissolvenza 2.1s ease both;}
@keyframes storyTextDissolvenza { from { opacity: 0; } to { opacity: 1; } }

.story-stage.st-anim-ingrandisci .story-text { animation: storyTextIngrandisci 0.95s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes storyTextIngrandisci { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }

/* SCRITTURA: MACCHINA DA SCRIVERE, CARATTERE PER CARATTERE (18/09/2026).
   Titolare: «hai tolto scrivere.. che dovrebbe imitare macchina da scrivere.. carattere per
   carattere». Prima questa regola svelava il testo a 28 scatti fissi, qualunque fosse la frase:
   «uscivano» gruppi di lettere, non lettere - e 2,4s anche per tre parole.
   Adesso gli scatti sono TANTI QUANTI SONO I CARATTERI (`--sc-caratteri`, lo scrive `stories.js`),
   e il tempo e' proporzionato al testo. Nel VISORE i caratteri sono anche `span` separati
   (`.sc-car`), uno per lettera: nascono uno dopo l'altro davvero, come si batte.
   Nel COMPOSITORE restano uno svelamento a scatti (li' il testo si scrive: spezzarlo in `span`
   mentre si digita romperebbe la scrittura), ma con lo stesso ritmo per carattere. */
.story-stage.st-anim-scrittura .story-text {
    animation: storyTextScrittura calc(var(--sc-caratteri, 28) * 0.06s) steps(var(--sc-caratteri, 28), end) both;
}
@keyframes storyTextScrittura {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    1%   { opacity: 1; }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
/* Il testo battuto carattere per carattere: gli spazi si vedono come si scrivono (altrimenti
   tre spazi di fila sparirebbero) e l'animazione del blocco si spegne - a battere sono i caratteri. */
.story-text.sc-scrivendo {
    white-space: pre-wrap;
    animation: none !important;
}
/* I CARATTERI UNO PER UNO. Non con 36 animazioni ritardate in fila: misurato il 18/09/2026, su 36
   caratteri 4 restavano invisibili per sempre (l'opacita' restava a 0 nonostante l'animazione
   dichiarata) - e un carattere che non compare e' un difetto, non un dettaglio. La battitura la
   guida `stories.js` un carattere alla volta (`is-scritto`), che e' anche piu' fedele: si puo'
   fermare, riprendere e pulire. Qui resta solo il disegno. */
.story-text .sc-car {
    opacity: 0;
    transition: opacity 80ms linear;
}
.story-text .sc-car.is-scritto { opacity: 1; }
/* IL CURSORE: la barretta che batte mentre si scrive, e resta li' finche' la storia vive. */
.story-text .sc-cursore {
    display: inline-block;
    inline-size: 0.09em;
    block-size: 1em;
    margin-left: 0.05em;
    vertical-align: -0.12em;
    background: currentColor;
    animation: scCursore 0.62s steps(1) infinite;
}
@keyframes scCursore {
    0%, 55%     { opacity: 1; }
    55.01%, 100% { opacity: 0.15; }
}

.story-stage.st-anim-rimbalzo .story-text { animation: storyTextRimbalzo 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes storyTextRimbalzo { from { opacity: 0; translate: 0 1.2em; scale: 0.94; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* Dentro una scheda la stessa entrata porta il nome che il titolare conosce: `storyTextInDentro`
   (specificita' maggiore: vince solo sul NOME dell'animazione, durata e curva restano quelle). */
.story-player--dentro .story-stage.st-anim-salita .story-text {animation-name: storyTextInDentro;}
@keyframes storyTextInDentro { from { opacity: 0; translate: 0 1em; } to { opacity: 1; translate: 0 0; } }

/* Chi ha chiesto meno movimento (sistema operativo) non se lo prende: il testo resta fermo,
   leggibile; gli effetti si spengono. */
@media (prefers-reduced-motion: reduce) {
    .story-stage[class*="st-anim-"] .story-text,
    .stage-fx-neon .story-text,          /* anche la scritta che brilla col Neon */
    .story-stage[class*="stage-fx-"]::after,
    .story-stage.stage-fx-aurora,
    .stage-fx-zoom .story-media img,
    .stage-fx-zoom .story-media video { animation: none !important; }
}

/* Player: gradiente di sfondo centrato (dietro lo stage).
   Il secondo colore era un oro fisso (#fbc36c): adesso e' il secondo colore della storia, come il
   primo - cosi' il contorno del visore e' abbinato e non "un colore che non c'entra". */
.story-player {background: radial-gradient(circle at 50% 30%, var(--sp-c1, #2A2A4A), var(--sp-c2, #0D0D1A));}
.story-player .story-stage.stage-textonly-grad { box-shadow: 0 0 60px rgba(108, 92, 231, 0.25); }

/* ==========================================================================
   PANNELLO DI STILE DEL COMPOSITORE DI STORIE - UNA DEFINIZIONE SOLA (20/09/2026)
   --------------------------------------------------------------------------
   Segnalazione del titolare: "ora sistemiamo questo monolito che lo odio". Qui c'era un pastiche a
   QUATTRO strati, tutti sugli stessi comandi:
     1. la base (righe 538-557, 863-912, 1072-1200, 1421-1465): le stesse regole definite due volte
        (`.story-file-btn` a 538 e a 1086, `.story-publish` a 548 e a 1183, `.story-style-label` a
        870 e a 1073, `.st-tpl-btn` a 871 e a 1117, `.st-color-dot` a 889 e a 1158);
     2. la tinta della storia (1540-1559): i comandi prendono il colore scelto, via il bianco slegato;
     3. le misure per il dito (1713-1730): `min-height: 44px`, pallini a 34px, pubblica appiccicata;
     4. gli adattamenti dello schermo grande (1734-1757): quelli restano dove sono, parlano del
        DISEGNO DELLA PAGINA, non dei comandi.
   Vinceva l'ultima: leggendo non si capiva quale fosse quella vera, e un pezzo di regola stava in
   un posto e un pezzo in un altro (il pallino "auto" prendeva il gradiente da una definizione e
   misura e ombra da un'altra; i suoi 33px erano morti, perche' lo strato 3 li portava a 34).

   ADESSO: i comandi del compositore si definiscono QUI e basta, nell'ordine in cui devono vincere
   (base, tinta, comando scelto, sotto il dito). Le sezioni sono avvolte in `.st-gruppo` (nome +
   comandi): la distanza la decide il foglio, non un `padding-right: 17px` messo a mano.

   I VALORI NON SONO CAMBIATI: sono copiati da quelli che vincevano, misurati uno per uno col
   calcolatore del navigatore prima e dopo (`tools/checks/stili_compositore.py`, che confronta le
   proprieta' e non l'occhio). La pelle e' la stessa: cambia soltanto DOVE sta scritta.
   ========================================================================== */

.story-creator {
    --st-raggio-pillola: 999px;
    --st-raggio-riquadro: 10px;
    --st-dito: 44px;          /* la misura comoda minima per un comando che si tocca */
    --st-pallino: 34px;
    --st-nome-testo: rgba(255, 255, 255, 0.78);
}

/* LA DISPOSIZIONE (20/09/2026). Richiesta del titolare: "sono disposti malissimo un elemento sotto
   l'altro non sono organizzati". Qui c'e' l'ordine del pannello: una BARRA per le azioni, una
   GRIGLIA di riquadri per i comandi (due colonne da computer, una da telefono), la legenda in fondo.
   Ogni riquadro raccoglie i comandi che hanno lo stesso senso, e dentro ognuno i campi portano il
   loro nome piccolo: si vede dove si sta scegliendo, senza indovinare. */
/* I COMANDI DELLA STORIA, SULLA STORIA (20/09/2026). Il titolare, sulla barra con il consiglio, il
   contatore e i due comandi: "questo e' ancora un monolito". Adesso i comandi che riguardano la
   storia stanno in alto a destra DENTRO la storia, e il contatore in basso a destra: ognuno dove
   serve. Sopra i riquadri non c'e' piu' nessuna barra: il pannello comincia dai riquadri. */
.st-comandi-storia {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 3;
    display: flex;
    gap: 8px;
}
.st-comando-storia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(10, 10, 22, 0.45);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.15s, border-color 0.15s;
}
.st-comando-storia:hover { background: rgba(10, 10, 22, 0.66); border-color: rgba(255, 255, 255, 0.55); }
.st-comando-storia input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.st-comando-storia svg { pointer-events: none; }
.st-griglia {
    grid-column: 1 / -1;
    display: flex;                /* due colonne indipendenti: nessun buco sotto i riquadri piu' corti */
    gap: 12px;
    align-items: stretch;
}
.st-colonna {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.st-riquadro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sp-c2, #2A2A4A) 30%, rgba(10, 10, 22, 0.4));
    border: 1px solid color-mix(in srgb, var(--sp-c1, #6C5CE7) 32%, rgba(255, 255, 255, 0.14));
}
.st-riquadro-nome {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--st-nome-testo, rgba(255, 255, 255, 0.78));
}
.st-campo { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.st-campo-nome { font-size: 0.72rem; color: rgba(255, 255, 255, 0.66); }
.story-style-hint { font-weight: 400; opacity: 0.72; }
.story-style {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 10px;                    /* i comandi dello stesso campo stanno vicini: e' un gruppo, non una fila */
    align-items: center;
    padding: 0;
}
/* Da telefono i riquadri vanno in colonna: un riquadro per riga, ma sempre divisi per senso. */
@media (max-width: 760px) {
    .st-griglia { flex-direction: column; }
}
.story-style-label {                    /* compatibilita': il nome vecchio della sezione */
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--st-nome-testo, rgba(255, 255, 255, 0.78));
}
/* ===== 1) LA BASE DEI COMANDI ============================================== */

/* Template: pillole con i nomi dei modelli di testo. */
.st-tpl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--st-dito, 44px);
    padding: 7px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--st-raggio-pillola, 999px);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.st-tpl-btn.is-active {
    background: linear-gradient(135deg, var(--sp-c1, #6C5CE7), var(--sp-c2, #00CEC9));
    border-color: color-mix(in srgb, var(--sp-c1, #6C5CE7) 30%, #ffffff);
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--sp-c1, #6C5CE7) 45%, transparent);
}

/* Effetti e Animazione: dicono cosa fara' la storia, quindi portano il suo colore. */
.st-fx-btn,
.st-anim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--st-dito, 44px);
    padding: 6px 10px;
    font-size: 0.78rem;
    border-radius: var(--st-raggio-pillola, 999px);
    cursor: pointer;
    color: #fff;
    background: color-mix(in srgb, var(--sp-c2, #2A2A4A) 45%, rgba(10, 10, 22, 0.5));
    border: 1px solid color-mix(in srgb, var(--sp-c1, #6C5CE7) 45%, rgba(255, 255, 255, 0.3));
    transition: filter 0.18s, box-shadow 0.18s;
}
.st-fx-btn:hover,
.st-anim-btn:hover { filter: brightness(1.18); }
.st-fx-btn.is-active,
.st-anim-btn.is-active {
    background: linear-gradient(135deg, var(--sp-c1, #6C5CE7), var(--sp-c2, #00CEC9));
    border-color: color-mix(in srgb, var(--sp-c1, #6C5CE7) 30%, #ffffff);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--sp-c1, #6C5CE7) 45%, transparent);
}

/* Il carattere: un menu a tendina (la freccia e' disegnata come sfondo, non quella di sistema). */
.story-font-sel {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.85)' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--st-raggio-riquadro, 10px);
    padding: 10px 34px 10px 12px;
    font-size: 0.86rem;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.story-font-sel:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }
.story-font-sel option { background: #1b1b2f; color: #fff; }
/* Aggiungi foto/video: e' un'etichetta (apre la scelta del file), non un pulsante. */

/* Il pallino del colore: mostra il gradiente che dara' alla storia (`--dot` e' il ripiego per un
   foglio vecchio). Quello "auto" porta la ruota dei colori. */
.st-color-dot {
    inline-size: var(--st-pallino, 34px);
    block-size: var(--st-pallino, 34px);
    padding: 0;
    border: 0 solid transparent;   /* invisibile: e' il bordo dei pallini di prima (larghezza 0) */
    border-radius: 50%;
    cursor: pointer;
    background-image: linear-gradient(140deg, var(--dot1, #6C5CE7), var(--dot2, #2A2A4A));
    background-color: var(--dot, #cccccc);
    background-size: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 2px color-mix(in srgb, var(--sp-c1, #6C5CE7) 45%, #ffffff);
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.st-color-dot:hover { transform: scale(1.12); }
.st-color-dot.is-active {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 0 4px color-mix(in srgb, var(--sp-c1, #6C5CE7) 45%, #ffffff);
}
.st-color-dot.dot-auto {
    background-image: conic-gradient(#6C5CE7, #00CEC9, #FF6B6B, #FDCB6E, #E84393, #A29BFE, #6C5CE7);
    border-color: color-mix(in srgb, var(--sp-c1, #6C5CE7) 28%, rgba(255, 255, 255, 0.45));
}

/* La spiegazione del comando scelto, dentro il riquadro che lo contiene (20/09/2026). Prima era
   una legenda unica sotto i riquadri: una banda larga con una frase. Adesso sta sotto ai comandi
   che spiega, piccola e senza sfondo: e' una nota, non una sezione. */
.st-riquadro-nota {
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
}
/* Rivedi l'animazione. */

/* ===== 2) LA TINTA DELLA STORIA (16/09/2026) ===============================
   I comandi prendono il colore scelto per la storia: prima erano un bianco slegato, e il titolare
   lo aveva segnalato ("evitiamo il bianco che non e' abbinato ai colori dei bottoni e tutto il
   resto"). L'ordine conta: questa tinta viene DOPO la base, e `:hover` prima del comando scelto,
   altrimenti il comando scelto perderebbe il suo gradiente. */
.st-tpl-btn,
.story-font-sel {
    background: color-mix(in srgb, var(--sp-c2, #2A2A4A) 42%, rgba(10, 10, 22, 0.5));
    border-color: color-mix(in srgb, var(--sp-c1, #6C5CE7) 42%, rgba(255, 255, 255, 0.32));
}
.st-tpl-btn:hover {
    background: color-mix(in srgb, var(--sp-c1, #6C5CE7) 32%, rgba(10, 10, 22, 0.45));
    border-color: color-mix(in srgb, var(--sp-c1, #6C5CE7) 45%, rgba(255, 255, 255, 0.4));
}

/* ===== 3) PUBBLICA (appiccicata in fondo, sempre sotto il dito) =========== */
.story-publish {
    background: linear-gradient(135deg, #6C5CE7, #00CEC9);
    border: 0;
    color: #fff;
    padding: 13px 18px;
    border-radius: var(--st-raggio-pillola, 999px);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    width: max-content;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.35);
    transition: filter 0.18s, transform 0.12s, box-shadow 0.18s;
}
.story-publish:hover { filter: brightness(1.12); box-shadow: 0 8px 26px rgba(108, 92, 231, 0.5); }
.story-publish:active { transform: scale(0.98); }
.story-publish:disabled { opacity: 0.55; cursor: not-allowed; filter: none; box-shadow: none; }
#storyCreatorEl .story-publish {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-block-start: 4px;
    box-shadow: 0 -12px 20px -12px rgba(0, 0, 0, 0.55);
}



/* Media in base al ratio: quadrate/orizzontali -> contenute sopra il gradiente */
.story-stage.media-contain .story-media img,
.story-stage.media-contain .story-media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Il media sta SOPRA il fondo sfocato (che e' il `::before` qui sotto). */
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   LE BANDE NON RESTANO VUOTE (20/09/2026)
   --------------------------------------------------------------------------
   Il titolare: «su iphone story-media e' troppo piccolo, e' tutto impastato dentro». Misurato su
   390x844 (cornice della storia 289x386):
       foto 16:9   -> disegnata 289x163 = 42% dell'altezza
       foto 1:1    -> disegnata 289x289 = 75%
       video 16:9  -> disegnata 289x163 = 42%
       foto 9:16   -> disegnata 289x514 = 133% (questa va bene)
   Cioe': con un media largo, quasi sei decimi della storia erano banda vuota, e il testo sopra
   sembrava appiccicato a una striscia.
   Qui il media resta INTERO (la regola del 15/09: «mai tagliati») e le bande si riempiono con lo
   STESSO media ingrandito e sfocato, che il compositore e il visore preparano in `fondoBande()`
   (`--st-fill`: la foto stessa, o un fotogramma del video). Se il fondo non c'e' (video protetto),
   le bande restano del colore della storia: si vede come prima, non peggio.
   ========================================================================== */
.story-stage.media-contain .story-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--st-fill, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(26px) saturate(1.15) brightness(0.92);
    transform: scale(1.25);          /* il bordo sfocato non deve scoprire gli angoli */
    pointer-events: none;            /* resta un fondo: il tocco non lo riguarda */
}

/* ===== Rail in stile Facebook: rettangoli arrotondati con anteprima + anello piccolo ===== */
.story-rail { align-items: flex-start; padding: 12px 12px 10px; }
.story-ring {width: 141px;}
.story-ring .ring-name { max-width: 80px; font-size: 0.7rem; }

.story-rect {
    position: relative;
    display: block;
    width: 150px;
    height: 250px;
    margin: 0 auto 5px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    background: linear-gradient(160deg, #7f8cff, #2a2a4a);
    border: 1px solid var(--mood-border);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.story-ring:not(.all-seen) .story-rect { border-color: #6C5CE7; box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.35); }
.story-ring:hover .story-rect { transform: translateY(-2px); }

.story-rect > img,
.story-rect > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Velatura bassa per nome/avatar leggibili */
.story-rect::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 36%;
    background: linear-gradient(transparent, rgba(8, 8, 20, 0.55));
    pointer-events: none;
}

/* Storie solo testo: sfondo gradiente + testo in basso */
.story-rect.is-text {/* Colore: lo porta la CLASSE DELLA STORIA (`stage-color-...`), messa da
   `stories.js` sulla miniatura (17/09/2026). Prima qui c'era un fondo SCRITTO E POI COMMENTATO:
   senza quello, tutte le storie di solo testo avevano la stessa miniatura vuota - "i colori in
   storie e' sempre lo stesso, non e' adattato alla storia vera" (titolare). */}

.story-rect .story-txt {
    position: absolute;
    left: 8px; right: 8px; bottom: 8px;
    z-index: 1;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Anello avatar piccolo sovrapposto in alto a sinistra */
.story-rect-ring {
    position: absolute;
    top: 5px; left: 5px;
    width: 38px; height: 38px;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(#6C5CE7, #00CEC9, #A29BFE, #6C5CE7);
    z-index: 2;
    box-sizing: border-box;
}
.story-ring.all-seen .story-rect-ring { background: var(--mood-border); }
.story-rect-ring .ring-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mood-bg);
    box-sizing: border-box;
    border: none;
}
.story-rect-ring img,
.story-rect-ring video {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Card "Il tuo" (crea storia) */
.story-ring.add-ring .story-rect {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(160deg, #eceefc, #c7cef8);
    border: 1px dashed var(--mood-border);
}
.story-ring.add-ring .story-rect::after { display: none; }
.story-add-ico {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--mood-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.5);
}
.story-add-ico svg { width: 18px; height: 18px; }
/* Nel riquadro "Crea storia": l'icona + si impila con le etichette */
.story-ring.add-ring .story-add-ico {
    position: static;
    transform: none;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}
.story-add-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #2a2a4a;
    line-height: 1.1;
}
.story-add-sub {
    font-size: 0.68rem;
    color: #4a4a6a;
    line-height: 1.2;
    text-align: center;
    padding: 0 12px;
}

/* ================= Pannello creazione storia - rifinitura completa ================= */
.story-player .story-stage.story-creator-stage {overflow: hidden;}

.story-creator::-webkit-scrollbar { display: none; }

/* Il campo di testo separato non c'e' piu' (17/09/2026): si scrive dentro la storia. Con lui se ne
   va anche il suo fondo BLU FISSO (`rgb(47 117 173)`), uno dei colori "non nel contesto" che il
   titolare aveva segnalato: adesso la casella di scrittura ha il colore della storia. */


/* Accessibile: focus da tastiera su elementi interattivi.
   Questo elenco di selettori era rimasto SENZA dichiarazioni (finiva con una virgola): si
   "mangiava" il blocco successivo, `.story-audio-note`, e chi prendeva il focus si ritrovava
   alto quanto la storia. Adesso ha di nuovo il suo contorno, tinto col colore scelto. */
.story-creator button:focus-visible,
.story-creator select:focus-visible,
.story-creator textarea:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sp-c1, #6C5CE7) 45%, #ffffff);
    outline-offset: 2px;
}

/* ==========================================================================
   UNA TRACCIA AUDIO IN UNA STORIA (non e' un'immagine)
   --------------------------------------------------------------------------
   Il file .mp3 finiva dentro un <img> e diventava l'icona rotta, nella miniatura
   della barra come nel lettore. Adesso la miniatura porta la nota e il lettore
   ha i comandi; la storia avanza quando la traccia finisce.
   ========================================================================== */
.story-audio-note {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 80px;
    background: color-mix(in srgb, var(--mood-primary, #6c5ce7) 14%, transparent);
    color: #fafaff;
}
.story-audio-note svg { inline-size: 30px; block-size: 30px; }
.story-media .story-audio {
    inline-size: 86%;
    max-inline-size: 420px;
    margin: auto;
}




/* ---------------------------------------------------------------------------
   IL MODELLO CONDIVISO - IL REGOLO.
   Una storia si vede in piu' posti: l'anteprima nella scheda del profilo, la
   scheda di un post, il visore. La pelle e' UNA (template, font, colore, testo,
   media): qui sotto non si riscrive nessuno stile, si dichiara solo la MISURA
   dentro una cornice che non e' lo schermo intero.

   La pelle del visore e' fatta di misure fisse, pensate per uno schermo intero:
   testo 20.5px, template "top" a 130px, solo-testo a 48px. Dentro una scheda da
   147px non potevano reggere: il testo usciva dalla cornice e si tagliava ("va
   tutto fuori schermo ... deve adattarsi, non essere assoluto", titolare
   15/09/2026). Qui ogni misura diventa una frazione della cornice - 1cqw = 1%
   della sua larghezza - cosi' la storia si ADATTA al posto in cui vive, senza
   doppioni e senza schermo intero.

   Il regolo e' il disegno del visore: 390px di larghezza = 100cqw, cioe'
   1cqw = 3.9px. I numeri accanto a ogni riga sono i pixel del disegno.
   --------------------------------------------------------------------------- */
.story-player--dentro {
    position: relative;
    inset: auto;
    z-index: auto;
    inline-size: 100%;
    block-size: 100%;
    background: transparent;
    overflow: hidden;
    /* La cornice e' la misura di riferimento di tutto cio' che sta dentro. */
    container-type: inline-size;
}
.story-player--dentro .story-stage {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    padding: 4.1cqw !important;
    border-radius: inherit;
}
.story-player--dentro .story-text {
    bottom: 16.9cqw;
    padding: 5.1cqw 4.6cqw 2.1cqw;
    font-size: 5.25cqw;
    line-height: 1.55;
    text-shadow: 0 0.5cqw 3.1cqw rgba(0, 0, 0, 0.7), 0 0 0.5cqw rgba(0, 0, 0, 0.45);
    animation: storyTextInDentro 0.5s ease both;
}
.story-player--dentro .stage-tpl-bottom .story-text {
    bottom: 0.0cqw;
}
.story-player--dentro .stage-tpl-center .story-text {
    padding: 6.7cqw 5.1cqw;
    font-size: calc(var(--sc-testo, 1) * 5.95cqw);
}
.story-player--dentro .stage-tpl-top .story-text {
    /* «ALTO» STA IN ALTO (18/09/2026). Il titolare: «quando si clicca su alto ... ora è a 33.3cqw» —
       e aveva ragione: 33,3cqw e' un quarto della cornice, il testo restava a meta' strada. La CORNICE
       DEL POST non ha intestazione (nome, avatar e barrette ci sono solo nel VISORE), quindi qui l'unico
       spazio da lasciare e' un margine: 3,3cqw. Nel visore restano i 130px dell'intestazione: due
       contesti, due spazi veri - e il controllo del progetto misura tutti e due. */
    top: 3.3cqw;
    font-size: calc(var(--sc-testo, 1) * 5.33cqw);
}
.story-player--dentro .stage-tpl-big .story-text {
    font-size: calc(var(--sc-testo, 1) * 8.2cqw);
}
.story-player--dentro .stage-tpl-quote .story-text {
    padding: 5.1cqw;
    /* LA STESSA INTERLINEA DEL VISORE (18/09/2026): la base della cornice piccola dice 1,55 e vinceva
       sul template (1,42), quindi la stessa citazione aveva due interlinee - misurato: 15,87px su
       10,24px = 1,55 nel provino contro 1,42 nel visore. */
    line-height: 1.42;
    /* LA CITAZIONE NELLA CORNICE PICCOLA (18/09/2026). Il titolare: «se clicco nell'editor su
       Citazione il testo è enorme ... poi è meglio 3.54cqw». Era 5,54cqw: con il corsivo serif e
       l'interlinea stretta diventava un blocco denso che riempiva la storia. 3,54cqw (misurato:
       14,1px su una cornice da 398px) e' un terzo piu' piccolo e sta dentro la citazione - e la
       stessa frazione va nel visore, altrimenti il provino e il pubblicato non si somigliano. */
    font-size: calc(var(--sc-testo, 1) * 3.54cqw);
    /* RIMESSO A POSTO il 19/09/2026: qui c'era tornato 5.54cqw (il commento sopra diceva 3,54 e il
       valore no) dopo una riscrittura in blocco di questo file alle 00:34 - con la citazione di
       nuovo «enorme» nel compositore, che era esattamente quello che il titolare aveva chiesto di
       correggere. Il controllo del progetto l'ha preso (1 rosso su 38: 5.54% invece di 3,54%). */
}
.story-player--dentro .stage-tpl-quote .story-text::before {
    /* LA STESSA REGOLA DEL VISORE (2,4 volte il carattere del testo): prima qui c'era `12,3cqw`, che
       nella scheda faceva il segno grande e nel visore piccolo - due citazioni diverse. */
    font-size: 2.4em;
}
.story-player--dentro .stage-tpl-split .story-text {
    bottom: 12.3cqw;
    font-size: calc(var(--sc-testo, 1) * 4.02cqw);
}
/* IL RIQUADRO ABBRACCIA IL TESTO, ANCHE NELLA CORNICE PICCOLA (18/09/2026).
   Qui c'era `height: -webkit-fill-available`, che faceva il riquadro ALTO QUANTO IL PALCO: dentro un
   riquadro alto il testo va in CIMA, quindi nel provino del compositore si scriveva in alto mentre
   la storia pubblicata - e questo e' il difetto che il titolare chiama "non e' allineato il preview".
   Misurato prima: riquadro 243x362 (= tutto il palco da 289x388) con il testo appiccicato in cima;
   adesso il riquadro e' alto quanto il testo e il posto lo decide il template in tutte e due. */
/* L'entrata del testo e' in px sul visore (14px da sotto): qui la stessa, in frazione. */
@keyframes storyTextInDentro {
    from { opacity: 0; transform: translateY(3.6cqw); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   LA STORIA DENTRO LA SCHEDA DI UN POST (`/post/...`, e ogni posto che ospita una
   storia). Il post e' largo e la storia e' verticale: la CORNICE del post e' tutta
   la larghezza del post e porta il FONDO DELLA STORIA - lo stesso colore che
   l'autore ha scelto - cosi' ai lati non resta il bianco (titolare, 15/09/2026:
   "eredita il colore di background usato nelle storie ... per riempire il post,
   senno' e' vuoto ... vedi che e' bianco"). La storia sta dentro con le SUE
   proporzioni: quelle del suo media (`--story-ratio`, scritto da `stories.js`),
   non un 9/16 deciso prima. Decide il media, la storia si adatta.

   La cornice e' la scheda del post stessa (`.mood-post-story`), non una scatola
   nuova: se questo foglio restasse indietro rispetto a `stories.js`, il disegno
   torna a quello di prima invece di rompersi.
   --------------------------------------------------------------------------- */
.mood-post-story {
    display: flex;                 /* la storia in mezzo, il fondo riempie i lati */
    justify-content: center;
    position: relative;
    /* LA STORIA ARRIVA AI BORDI DEL POST. La scheda ha 20px di respiro (`mood.css`:
       `.mood-card { padding: 20px }`) e la storia si fermava prima: restavano due strisce chiare ai
       lati - e' il "si vede che non arriva fino al basso dell'immagine" / "vedi che e' bianco" del
       titolare (15/09/2026). La cornice esce di quei 20px e il colore della storia va da un bordo
       all'altro, come una storia. */
    margin: 4px -20px 14px;
    inline-size: auto;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    /* Il fondo lo porta la CLASSE del colore della storia (la stessa dello stage, scritta da
       `stories.js`): stesso gradiente, quindi stessi colori. Questo e' solo il ripiego per un foglio
       vecchio, e sono comunque i colori della storia. */
    background: radial-gradient(circle at 50% 30%, var(--sp-c1, #2A2A4A), var(--sp-c2, #0D0D1A));
}
/* Dentro la cornice la storia si misura da se': 380px al massimo (resta una storia, non un
   manifesto a tutta pagina) e le proporzioni del suo media. Questa regola vince su
   `.story-player--dentro` perche' ha una classe in piu' ed e' scritta dopo. */
.story-player--dentro.story-player--post {
    flex: 0 0 auto;
    inline-size: min(100%, 380px);
    block-size: auto;
    aspect-ratio: var(--story-ratio, 9 / 16);
}
@media (max-width: 900px) {
    .story-mark{
    display: flex;
    flex-direction: column;
}
    .story-head {
        left: 0;
        padding-left: 1px;
    }
    .story-pause,
    .story-share {
        width: 28px;
        height: 28px;
        min-width: 28px;
    } 
    .story-pause svg,
    .story-share svg {
        width: 15px;
        height: 15px;
    } 
    .stage-tpl-big .story-text {
        font-size: calc(var(--sc-testo, 1) * 130%);
    }
}

/* ==========================================================================
   IL COMPOSITORE DI UNA STORIA: abbinato al colore che si sceglie
   --------------------------------------------------------------------------
   Qui si scelgono colore, effetti e animazione, e qui si vede il risultato: il pannello prende il
   colore della storia (`--sp-c1`/`--sp-c2`, scritti da `stories.js` con `applyPlayerBg`), cosi' i
   comandi non sono piu' un bianco/glass slegato - "evitiamo il bianco che non e' abbinato ai colori
   dei bottoni e tutto il resto" (titolare, 15/09/2026). Il PROVINO (`#scTry`) e' una storia in
   miniatura fatta con la STESSA pelle (`story-player--dentro`): mostra davvero come verra', e
   "Rivedi l'animazione" la fa ripartire.
   ========================================================================== */
.story-mark{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    margin-bottom: 1rem;
}
.story-try {
    position: relative;   /* i comandi e il contatore stanno dentro di lei, in un angolo */
    /* LA STORIA DAL VIVO (17/09/2026). Il pannello del compositore e' un flex in colonna: senza
       `flex: 0 0 auto` questo riquadro si schiacciava (chiedeva 228px e ne misurava 65: "l'anteprima
       e' in fondo e non si vede, e' schiacciata", titolare). Adesso ha la forma di una storia vera
       (9:16) e un tetto di altezza, cosi' si vede mentre si sceglie - non a parte, in fondo. */
    flex: 0 0 auto;
    inline-size: min(480px, 100%);
    block-size: auto;
    aspect-ratio: 3 / 4;
    max-block-size: -webkit-fill-available;
    margin: 2px auto 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--sp-c1, #6C5CE7) 40%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    min-height: 0;
}
/* IL RIQUADRO E' GIA' UNA STORIA IN PROPORZIONE (17/09/2026). Non serve rimpicciolire niente: il
   modello "dentro" (`.story-player--dentro`, in questo foglio) misura il testo in frazioni della
   larghezza (`cqw`, "IL MODELLO CONDIVISO"), quindi nel riquadro 9:16 la storia si disegna con le
   stesse proporzioni che avra' sul telefono - solo piu' piccola. Qui restano le sole cose che
   servono a SCRIVERE dentro la storia: il cursore, il segnaposto, la leggibilita' del testo. */
/* Il testo si scrive DENTRO la storia: il cursore di testo lo dice, il contorno no (una cornice
   tratteggiata in mezzo alla storia si vedrebbe anche nel disegno pubblicato - non c'e'). */
.story-try .story-text[contenteditable] {
    cursor: text;
    outline: none;
    /* IL TESTO SI DEVE POTER TOCCARE. Nella storia il testo e' trasparente ai tocchi
       (`pointer-events: none`: sotto di lui ci sono "avanti" e "indietro" - vedi `.story-text` in
       questo foglio). Nel compositore quel testo E' la casella di scrittura: senza questa riga il
       tocco attraversa il testo e non ci si puo' scrivere dentro. */
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
    /* L'aria di scrittura non si vede al buio: sopra una foto chiara un testo bianco sparirebbe, e
       l'autore scriverebbe senza vedere. Una velatura tenue tiene il testo leggibile mentre si scrive
       (nella storia pubblicata il fondo lo da' il template). */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
    caret-color: #fff;
    min-block-size: 1.6em;
}
/* Il segnaposto quando la storia e' vuota: si legge come un invito, non come testo scritto. */
.story-try .story-text[contenteditable]:empty::before {
    content: attr(data-segnaposto);
    opacity: 0.65;
    font-weight: 400;
}
.story-try .story-text[contenteditable]:focus:empty::before { opacity: 0.45; }
/* Il conteggio dei caratteri e l'aiuto: sotto il riquadro, piccoli e discreti. */
.story-block{
    /* GRIGLIA, NON UNA COLONNA (20/09/2026): il pannello mette le sue parti una accanto all'altra
       invece che una sotto l'altra (era la segnalazione del titolare). Le regole dei riquadri stanno
       con la pelle del compositore, in "PANNELLO DI STILE DEL COMPOSITORE DI STORIE". */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
    flex: 1;
    padding: 2rem;
    text-align: left;
}
/* IL CONTATORE DEI CARATTERI, SULLA STORIA (20/09/2026): sta in basso a destra dentro la storia,
   dove si scrive. Non ruba i tocchi al testo (`pointer-events: none`): e' un'informazione, non un
   comando. */
.sc-contatore {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-end: 12px;
    z-index: 3;
    font-size: 0.72rem;
    color: #fff;
    background: rgba(10, 10, 22, 0.45);
    border-radius: 999px;
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
    opacity: 0.92;
    pointer-events: none;
}

/* ==========================================================================
   UNA SOLA DEFINIZIONE DEI COLORI (16/09/2026)
   --------------------------------------------------------------------------
   "nei post non vedo la stessa cosa che si vede nelle storie ... nelle storie ci sono i colori
   giusti, nei post ci sono colori finti ... non e' uniforme: se e' in storie si deve vedere ovunque
   allo stesso modo" (titolare, 15/09/2026).

   Il difetto era questo: gli stessi colori erano dichiarati DUE volte e in due modi diversi. La
   storia (dentro `.story-player`) prendeva la famiglia a 160 gradi con la coda scura; la sua cornice -
   il fondo del post, il fondo del visore, la scheda del profilo - prendeva la famiglia vecchia a
   150 gradi, a due tappe, oppure un `radial-gradient` costruito con `--sp-c1`/`--sp-c2`. Risultato: due
   colori diversi nella stessa schermata, quello "giusto" e quello "finto".

   ADESSO il colore e' UNA regola sola e vale per QUALUNQUE elemento porti la classe: lo stage del
   visore, lo stage dentro la scheda, la cornice del post, il fondo del visore, la miniatura. Il
   colore non si scrive piu' due volte: si scrive qui e si legge ovunque. La classe la mette
   `stories.js` (`applyStageStyle`/`applyFrameStyle`), quindi il colore della storia e' lo stesso
   anche a mille chilometri di distanza dalla storia.

   Sta in FONDO al file di proposito: a parita' di specificita' vince l'ultima regola, e cosi' questa
   batte i fondi di ripiego di `.story-player` e `.mood-post-story` senza doverli cancellare (se
   questo foglio arrivasse da solo, senza il JS nuovo, il disegno resta quello di prima).
   ========================================================================== */
.stage-color-violet   { background: linear-gradient(160deg, #6C5CE7 0%, #3E2AB3 55%, #0D0D1A 100%); }
.stage-color-teal     { background: linear-gradient(160deg, #00CEC9 0%, #007B74 55%, #0D0D1A 100%); }
.stage-color-sunset   { background: linear-gradient(160deg, #FF6B6B 0%, #C0392B 55%, #0D0D1A 100%); }
.stage-color-ocean    { background: linear-gradient(160deg, #0097E6 0%, #0652DD 55%, #0D0D1A 100%); }
.stage-color-gold     { background: linear-gradient(160deg, #FDCB6E 0%, #D9A018 55%, #0D0D1A 100%); }
.stage-color-midnight { background: linear-gradient(160deg, #14142E 0%, #0D0D1A 55%, #000000 100%); }
.stage-color-magenta  { background: linear-gradient(160deg, #E84393 0%, #8E2DE2 55%, #1B0E2B 100%); }
.stage-color-verde    { background: linear-gradient(160deg, #00B894 0%, #00796B 55%, #0B1F1C 100%); }
.stage-color-indaco   { background: linear-gradient(160deg, #3742FA 0%, #1E1E8F 55%, #0D0D1A 100%); }
.stage-color-corallo  { background: linear-gradient(160deg, #E17055 0%, #B33939 55%, #1A1013 100%); }
.stage-color-lavanda  { background: linear-gradient(160deg, #A29BFE 0%, #6C5CE7 55%, #1A1730 100%); }
/* "Ghiaccio": prima era "Neve", un bianco freddo fuori dalla famiglia dei colori dei bottoni
   (titolare: "evitiamo il bianco che non e' abbinato ai colori dei bottoni e tutto il resto").
   Adesso e' un ghiaccio lavanda - chiaro, ma della stessa famiglia di Violet/Teal. */
.stage-color-snow     { background: linear-gradient(160deg, #F2F5FF 0%, #DDE4FA 55%, #C3CDF3 100%); }
/* Sui fondi chiari il testo bianco non si legge: la famiglia del ghiaccio si prende l'inchiostro. */
.stage-color-snow .story-text { color: #1A1A2E; text-shadow: none; }

/* I gradini automatici (una storia senza colore scelto). I valori NON si cambiano: il gradino e'
   `id % 6`, quindi ritoccare un gradiente vorrebbe dire cambiare il colore di storie gia'
   pubblicate - e una storia non si ritocca da sola. */
.stage-color-auto-0 { background: linear-gradient(140deg, #6C5CE7 0%, #00CEC9 55%, #15152A 130%); }
.stage-color-auto-1 { background: linear-gradient(140deg, #3E2AB3 0%, #A29BFE 60%, #0D0D1A 130%); }
.stage-color-auto-2 { background: linear-gradient(24deg, #00B894 0%, #0B737B 35%, #15152A 130%); }
.stage-color-auto-3 { background: linear-gradient(172deg, #E17055 0%, #E0BD7E 60%, #0D0D1A 130%); }
.stage-color-auto-4 { background: linear-gradient(140deg, #0097E6 0%, #6C5CE7 60%, #15152A 130%); }
.stage-color-auto-5 { background: linear-gradient(140deg, #0D0D1A 0%, #2A2A4A 55%, #6C5CE7 130%); }
/* ==========================================================================
   IL COMPOSITORE SI USA ANCHE SUL TELEFONO (18/09/2026)
   --------------------------------------------------------------------------
   Perche' e' stato riscritto, misurato: `stories.css` ha una regola del VISORE
   (`.story-player .story-stage { overflow-y: auto !important; padding: 1rem !important }`, piu' su in
   questo foglio) che colpisce OGNI storia dentro un player - quindi anche la superficie della storia
   dentro il compositore. Effetto sul telefono: il dito che scorre passava SOPRA la storia, che non ha
   nulla da scorrere, e il pannello dei comandi non si muoveva mai - «in mobile non scrolla ... quindi
   non si lavora» (titolare).
   Qui il compositore prende la sua forma: una colonna alta quanto lo schermo, la storia 3/4 in cima
   (scelta del titolare: «9/16 e' lunghissima»), i comandi che scorrono sotto, «Pubblica» fermo in
   fondo. Le regole sono scritte DOPO e con l'id (`#storyCreatorEl`): vincono su quelle del visore
   senza doverle cancellare (cosi' il visore resta esattamente com'era).
   ========================================================================== */
#storyCreatorEl {
    display: flex;
    flex-direction: column;
    height: 100vh;                 /* ripiego per i browser senza `dvh` */
    height: 100dvh;
    max-height: -webkit-fill-available;
    overflow: hidden;
}

#storyCreatorEl > .story-stage.story-creator-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;                  /* niente `height: 100%` del visore */
    display: flex;
    /* `!important` perche' il visore piu' su in questo foglio dichiara
       `.story-player .story-stage { overflow-y: auto !important }` (riga ~1632): senza, il contenitore
       del compositore scorreva ANCHE lui - misurato: `overflow auto` sullo stage - e il dito poteva
       prendere quello sbagliato. I contenitori che scorrono devono essere UNO: il blocco dei comandi. */
    overflow: hidden !important;
    padding: 0 !important;         /* niente `padding: 1rem !important` del visore */
    flex-direction: column;
}

#storyCreatorEl > .story-stage.story-creator-stage .story-head{
    padding-left: 9px;
    padding-right: 9px;
}

/* IL MIO ERRORE, CORRETTO (18/09/2026). Qui la storia stava DENTRO il pannello che scorre: scorrendo
   per arrivare ai comandi, la storia usciva dallo schermo - misurato dal vivo: la cornice a -440px,
   cioe' «i template non sono visibili come dovrebbero» (titolare). Adesso il pannello NON scorre:
   resta fermo con la storia, e a scorrere e' SOLO il blocco dei comandi (`.story-block`). */
#storyCreatorEl .story-creator {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 14px 8px;
    margin: 0;
    overflow: hidden !important;
}
/* PERCHE' `.story-mark` SI RESTRINGE (18/09/2026). Sul telefono il compositore non scorreva:
   misurato - `.story-mark` alto 1196px con `min-height: auto` e `flex 0/1/auto`, quindi NON si
   restringeva; lui e i comandi venivano tagliati da `.story-creator` (`overflow: hidden`), il blocco
   dei comandi restava alto quanto il suo contenuto (798px su 798px: niente da scorrere) e l'ultimo
   comando finiva a 1177px su uno schermo da 844. Provato con un dito vero: 0px di scorrimento.
   Con `flex: 1 1 auto` + `min-height: 0` il blocco dei comandi ha finalmente un'altezza minore del
   suo contenuto: e' lui a scorrere, la storia resta ferma e visibile sopra. */
/* ATTENZIONE: I COMANDI SONO DENTRO `.story-mark` (20/09/2026, misurato — e questo cambia la cura).
   Il DOM vero del compositore e':
       .story-creator
         └── .story-mark            ← contiene la storia E il blocco dei comandi
              ├── #scTry            (la storia, 46dvh)
              └── .story-block      (i comandi: l'UNICO che scorre)
         └── #scPublish
   Prova: misurato `.story-mark` = 1206px, cioe' 388 (storia) + 808 (comandi) + 10 (spazio). Percio'
   questo blocco NON puo' stare "alto quanto la storia" (`0 0 auto`): sarebbe alto 1206, i comandi
   finirebbero fuori dal pannello (che ha `overflow: hidden`) e SPARIREBBERO - misurato: i pallini dei
   colori non colpibili, coperti da «Pubblica». `.story-mark` e' la colonna che prende lo spazio che
   avanza (`1 1 auto`) e con `min-block-size: 0` puo' finalmente restringersi: dentro di lei la storia
   sta FERMA a 46dvh e a scorrere e' SOLO il blocco dei comandi. Questa era la forma curata il
   18/09/2026: cambiarla mi ha portato fuori strada per un giro, e i numeri l'hanno dimostrato. */
#storyCreatorEl .story-mark {
    flex: 1 1 auto;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    text-align: center;
}
/* LA STORIA: 3/4, alta al massimo meta' schermo cosi' i comandi si vedono senza scorrere.
   La larghezza si RICAVA dall'altezza (`block-size` + `aspect-ratio`): mettere solo un tetto di
   altezza rompeva la forma - misurato il 18/09/2026: 362x388 (h/l 1,07) invece di 3/4 (1,33). */
#storyCreatorEl .story-try {
    flex: 0 0 auto;
    block-size: 46dvh;
    min-block-size: 0;
    inline-size: auto;
    aspect-ratio: 3 / 4;
    max-inline-size: min(420px, 100%);
    margin: 0 auto;

}
/* La superficie della storia NON e' un contenitore che scorre: e' una storia. */
#storyCreatorEl #scTryStage {
    overflow: hidden !important;
    padding: 0 !important;
}
/* IL BLOCCO DEI COMANDI: e' LUI che scorre. Sta sotto la storia, che resta ferma e visibile:
   cosi' si scegli un template e lo si vede cambiare, senza risalire a cercare la storia. */
#storyCreatorEl .story-block {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    padding-bottom: 14px;
    overflow-y: auto !important;
    /* LE TRE RIGHE DEL TITOLARE (18/09/2026): sono la cura di «in mobile non scrolla ... quindi non si
       lavora», e vanno su OGNI contenitore che scorre - senza di loro il dito non trascina il
       pannello sul telefono. La penultima volta le ho tolte per sbaglio riscrivendo il pannello: da
       adesso il controllo del progetto (`check_storie_creatore.py`) le verifica, cosi' non spariscono
       piu' in silenzio. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* L'ULTIMA RIGA NON DEVE RESTARE A META' (20/09/2026 — misurato). Il difetto che il titolare chiama
       «non sono cliccabili all'istante»: misurato a 390x844, la riga dei template stava a y=757 con
       altezza 44, il blocco finiva a 776, quindi il CENTRO della riga (779) cadeva FUORI dal
       contenitore che scorre: il tocco non arrivava al pulsante ma a `div.story-creator`, che lo
       copriva. `scroll-padding` fa fermare lo scorrimento lasciando il respiro, e il riempimento in
       fondo fa arrivare l'ultima riga INTERA prima del bordo: cosi' un pulsante o si vede tutto o non
       si vede - non c'e' il caso "sembra cliccabile e non lo e'". */
    scroll-padding-block: 10px;
    padding-bottom: 12px;
    /* Il dito deve agire SUBITO: senza questa riga il telefono aspetta di sapere se e' un doppio tocco
       (zoom) e il comando risponde in ritardo. `manipulation` toglie l'attesa e lascia il pizzico. */
    touch-action: manipulation;
}
/* PUBBLICA fermo in fondo: non si deve cercare scorrendo. */

/* SCHERMO GRANDE: la storia a sinistra, i comandi a destra. In colonna, su un monitor, il compositore
   non si vedeva per intero ("non si vedeva ne in mobile ne in desktop", titolare). */
@media (min-width: 900px) {
    #storyCreatorEl #scTry {
        position: relative;
        isolation: isolate;
    }

    #storyCreatorEl #scTryStage {
        position: relative;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;
        max-width: none;
        max-height: none;

        box-sizing: border-box;
        margin: 0;
        padding: 0 !important;

        overflow: hidden !important;
    }

    #storyCreatorEl #scText {
        visibility: visible;
        opacity: 1;
        min-width: 0;
        min-height: 1px;
        max-width: 84%;
        max-height: calc(100% - 24px);
        box-sizing: border-box;
    }
}

/* ==========================================================================
   IL TESTO STA SEMPRE DENTRO LA CORNICE (18/09/2026)
   --------------------------------------------------------------------------
   Il controllo del progetto misurava uno sforamento di 130px (schermo) e 153px (telefono): il riquadro
   del testo e' posizionato in modo assoluto e non aveva tetto, quindi un testo lungo cresceva oltre la
   storia e - con `overflow: hidden` sullo stage - SPARIVA: l'autore scriveva 500 caratteri e ne vedeva
   meno di meta' ("gli effetti .. sono sballati", titolare).
   Due regole per ogni template:
     1. il riquadro non puo' passare i bordi (tetto + `overflow: hidden`): mai piu' fuori;
     2. il carattere si ADATTA alla lunghezza (classi sul palco: `testo-breve` / `testo-medio` /
        `testo-lungo` / `testo-lunghissimo`, decise da `stories.js` contando i caratteri) - cosi' si
        legge tutto invece di tagliarlo.
   ========================================================================== */
.story-text { max-block-size: calc(100% - 20px); overflow: hidden; }
/* "Alto": il riquadro parte sotto l'intestazione della storia (72px: l'intestazione finisce a 62,6px,
   misurata), quindi il tetto tiene conto di quello spazio, altrimenti il testo lo coprirebbe. */
.stage-tpl-top .story-text { max-block-size: calc(100% - 92px); }
/* "Centrato" e "Citazione" stanno a meta' altezza: il tetto e' la parte che hanno sotto. */
.stage-tpl-center .story-text,
.stage-tpl-quote .story-text { max-block-size: 68%; }
/* "Grande" e "Fianco" partono dal fondo: crescono verso l'alto, quindi basta non passare il bordo. */
.stage-tpl-big .story-text { max-block-size: calc(100% - 20px); }
.stage-tpl-split .story-text { max-block-size: calc(100% - 20px); }

/* Quanto testo c'e': tutte le misure dei template leggono `--sc-testo`, quindi qui basta il numero.
   Le soglie (18/09/2026): fino a ~90 caratteri il carattere del template va bene per intero; sopra,
   si scende per gradi finche' il testo entra. `testo-breve` e' il caso normale (1 = come prima). */
.story-stage.testo-breve {--sc-testo: 1;}
.story-stage.testo-medio { --sc-testo: 0.9; }
.story-stage.testo-lungo { --sc-testo: 0.78; }
.story-stage.testo-lunghissimo { --sc-testo: 0.66; }

/* ---------- «CHI L'HA VISTA» E I COMANDI DELL'AUTORE (18/09/2026) ----------
   Quello che su Instagram si trova dentro la propria storia: l'occhio col numero delle
   visualizzazioni, l'elenco di chi l'ha guardata, e il comando per toglierla. L'occhio si vede
   SOLO sull'autore (il visore lo nasconde); qui c'e' solo il disegno.
   Il foglio e' `fixed` di proposito: la superficie della storia, dentro il visore, e' un
   contenitore che scorre (`overflow-y: auto`) e un foglio assoluto verrebbe trascinato via. */
.story-viste {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sp-c1, #6C5CE7) 62%, rgba(10, 10, 22, 0.35));
    color: #fff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.story-viste.hidden { display: none; }
.story-viste svg { inline-size: 18px; block-size: 18px; }
.story-viste:active { transform: scale(0.96); }

.story-foglio { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; }
.story-foglio.hidden { display: none; }
.story-foglio-velo { position: absolute; inset: 0; background: rgba(6, 6, 16, 0.55); }
.story-foglio-box {
    position: relative;
    inline-size: 100%;
    max-block-size: 72vh;
    display: flex;
    flex-direction: column;
    background: #14141f;
    color: #f2f2f7;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    padding-bottom: env(safe-area-inset-bottom);
    animation: storyFoglioSu 0.22s ease;
}
@keyframes storyFoglioSu {
    from { transform: translateY(14%); opacity: 0.6; }
    to   { transform: translateY(0);   opacity: 1; }
}
.story-foglio-testata { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.story-foglio-testata strong { font-size: 0.95rem; }
.story-foglio-chiudi {
    margin-left: auto;
    inline-size: 32px;
    block-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
}
.story-foglio-lista { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 6px 6px; }
.story-vista { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.story-vista-avatar {
    flex: 0 0 auto;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.story-vista-avatar img,
.story-vista-avatar video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.story-vista-chi { display: flex; flex-direction: column; min-inline-size: 0; }
.story-vista-chi strong { font-size: 0.88rem; }
.story-vista-chi small { opacity: 0.6; font-size: 0.75rem; }
.story-vista-quanto { margin-left: auto; font-size: 0.72rem; opacity: 0.65; white-space: nowrap; }
.story-foglio-piedi { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 12px 12px; }
.story-elimina {
    inline-size: 100%;
    min-block-size: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 71, 87, 0.14);
    color: #ff6b6b;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.story-foglio-attesa,
.story-foglio-vuoto { padding: 18px 14px; text-align: center; opacity: 0.7; font-size: 0.85rem; }

/* IL COMANDO DELL'AUDIO NEL LETTORE DELLE STORIE (20/09/2026): il video parte muto per forza
   (regola dei navigatori) e prima non c'era modo di sentirlo. Stesso vestito degli altri comandi
   della testata (Pausa, Condividi), cosi' non si nota che e' arrivato dopo. */
.story-sound {
    background: rgba(0, 0, 0, 0.4);
    border: 0;
    color: #fff;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 6px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.story-sound:hover { background: rgba(0, 0, 0, 0.6); }
.story-sound svg { pointer-events: none; }
.story-sound.hidden { display: none; }

/* LA RIGA DI STATO DEL CARICAMENTO DELLA STORIA (20/09/2026).
   Dice cosa sta succedendo mentre il file sale ("Attendi: sto caricando il file... 45%") e, se
   non riesce, il motivo - invece del silenzio che faceva ripremere il comando. */
.st-stato {
    margin: 8px auto 10px;
    max-width: 420px;
    font-size: 0.86rem;
    line-height: 1.35;
    text-align: center;
    color: var(--mood-text, #1a1a2e);
    background: var(--mood-bg-hover, rgba(108, 92, 231, 0.08));
    border-radius: 10px;
    padding: 8px 12px;
}
.st-stato.hidden { display: none; }
.story-publish.is-busy { cursor: progress; }

@media (max-width: 900px) {
    .st-fx-btn, .st-anim-btn,.st-tpl-btn, .story-font-sel {
        min-block-size: 29px;
        padding: 6px 10px;
    }
    
    .story-viste { height: 28px; padding: 0 8px; font-size: 0.75rem; }
    .story-viste svg { inline-size: 16px; block-size: 16px; }
    /* Sotto «Pubblica» c'e' la striscia del telefono (iPhone): il pulsante non deve finirci sotto. */
    #storyCreatorEl .story-publish {
        margin-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }
}

#storyCreatorEl .story-creator button,
#storyCreatorEl .story-creator label,
#storyCreatorEl .st-comando-storia,
#storyCreatorEl .story-close,
#storyCreatorEl .story-publish {
    touch-action: manipulation;
}

@media (max-height: 620px) {
    
    #storyCreatorEl .story-try {
        block-size: 34dvh;
        aspect-ratio: 3;
    }
    #storyCreatorEl .story-creator { 
        gap: 8px; padding: 8px 12px 6px; 
    }
    #storyCreatorEl .st-comando-storia span {
        display: none; 
    }
}

@media (max-width: 400px) {
    #storyCreatorEl .story-try { 
        block-size: 34dvh; 
    }
    #storyCreatorEl .story-creator { 
        gap: 8px; padding: 8px 12px 6px; 
    }
    #storyCreatorEl .st-comando-storia span {
        display: none; 
    }

    #storyCreatorEl .story-try {
        flex: 0 0 auto;
        block-size: 51dvh;
        min-block-size: 0;
        inline-size: auto;
        aspect-ratio: 4 / 4;
        max-inline-size: min(420px, 100%);
        margin: 0 auto;
    }
}