/* ============================================================
   OneDayStories — Story Player  (mobile-first, prefisso .ods-)
   ============================================================ */

/* ---- Reset base per la pagina storia ---- */
body.ods-story-page {
    /* Accento oro = azione (scelte, CTA); il viola resta atmosfera (sfondi, HUD). */
    --ods-gold:            #d9a441;
    --ods-gold-bright:     #e9c06a;
    --ods-gold-soft:       rgba(217, 164, 65, 0.5);
    --ods-gold-tint:       rgba(217, 164, 65, 0.08);
    --ods-gold-tint-2:     rgba(217, 164, 65, 0.20);
    --ods-gold-text:       #f2d9a0;
    --ods-gold-text-hi:    #fbedcf;
    --ods-gold-ink:        #2a1c02;

    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #1a1a2e;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    font-family: Georgia, 'Times New Roman', serif;
    color: #f0ebe0;
}

/* ---- Overlay scuro sull'immagine di sfondo ---- */
.ods-page-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 20, 0.55) 0%,
        rgba(10, 10, 20, 0.45) 60%,
        rgba(10, 10, 20, 0.65) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* ---- Header ---- */
.ods-site-header {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    background: rgba(10,10,20,0.45);
}
.ods-header-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.ods-site-logo {
    text-decoration: none;
}
.ods-logo-img {
    height: 36px;
    width: auto;
    display: block;
    border-radius: 8px;
}
.ods-logo-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f0ebe0;
    letter-spacing: 0.03em;
}
/* :link/:visited espliciti per battere il globale blu di kit.css `a:visited`
   (0,1,1) — vedi memoria css-gotchas. Bianco pieno = più visibile del blu. */
.ods-nav-link,
.ods-nav-link:link,
.ods-nav-link:visited {
    font-size: 0.85rem;
    color: #fff;
    text-decoration: none;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.ods-nav-link:hover,
.ods-nav-link:focus {
    color: #fff;
    text-decoration: underline;
}

/* ---- Main ---- */
.ods-story-main {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}

/* ---- Card storia ---- */
.ods-story-card {
    width: 100%;
    max-width: 680px;
    background: rgba(15, 12, 25, 0.78);
    -webkit-backdrop-filter: blur(10px); /* iOS < 18 non conosce la proprieta senza prefisso */
            backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* ---- HUD RPG ---- */
.ods-hud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}
.ods-hud-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 140px;
}
.ods-hud-label {
    font-size: 0.75rem;
    color: rgba(240,235,224,0.5);
    white-space: nowrap;
    min-width: 38px;
}
.ods-hud-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    overflow: hidden;
}
.ods-hud-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease, background 0.4s;
    background: #4ade80;
}
.ods-hud-aura-fill { background: #818cf8; }
.ods-hud-val {
    font-size: 0.72rem;
    color: rgba(240,235,224,0.45);
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
}
.ods-hud-inv {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}
.ods-hud-inventory {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.ods-inv-item {
    padding: 0.18rem 0.55rem;
    background: rgba(167,139,250,0.2);
    border: 1px solid rgba(167,139,250,0.35);
    border-radius: 999px;
    font-size: 0.72rem;
    color: #c4b5fd;
}
.ods-inv-empty { font-size: 0.75rem; color: rgba(240,235,224,0.25); }

/* ---- Scheda personaggio (modalità statistiche) ---- */
.ods-stats-hud {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}
.ods-stats-row {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
}
.ods-stats-row--inv { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.5rem; }
.ods-stats-profile {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ods-gold-text);
    padding: 0.18rem 0.6rem;
    border: 1px solid var(--ods-gold-soft);
    border-radius: 999px;
    white-space: nowrap;
}
.ods-stats-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ods-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
}
.ods-stat__label { font-size: 0.72rem; color: rgba(240,235,224,0.55); }
.ods-stat__val   { font-size: 0.85rem; font-weight: 700; color: var(--ods-gold-text-hi); }
.ods-stats-label { font-size: 0.8rem; }
.ods-stats-inventory { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* ---- Prova con dado (modale) ----
   Il tiro ferma la storia: overlay a tutto schermo, così il dado è sempre
   davanti agli occhi qualunque sia lo scroll, e il risultato non scade a
   tempo — resta finché il lettore non preme "Continua". */
.ods-dice {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(8, 8, 18, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: ods-dice-fade 0.2s ease-out;
}
/* `display:flex` batterebbe l'attributo hidden: va ridichiarato. */
.ods-dice[hidden] { display: none; }
@keyframes ods-dice-fade { from { opacity: 0; } to { opacity: 1; } }

.ods-dice__panel {
    width: min(360px, 100%);
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(40,32,62,0.98), rgba(20,16,34,0.98));
    border: 1px solid var(--ods-gold-soft);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    font-family: system-ui, sans-serif;
}

.ods-dice__title {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ods-gold-text);
}
.ods-dice__meta {
    font-size: 0.85rem;
    color: rgba(240,235,224,0.6);
}

/* ---- Il dado ---- */
.ods-dice__cube {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--ods-gold-bright), var(--ods-gold));
    box-shadow: inset 0 -6px 0 rgba(0,0,0,0.16), 0 12px 26px rgba(0,0,0,0.45);
}
.ods-dice__face {
    width: 78px;
    height: 78px;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    gap: 4px;
    place-items: center;
}
.ods-dice__pip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ods-gold-ink);
}
/* Dadi con più di sei facce: niente puntini, si scrive il numero. */
.ods-dice__num {
    grid-area: 1 / 1 / 4 / 4;
    align-self: center;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--ods-gold-ink);
}

/* Il dado rotola finché il tiro non è deciso. */
.ods-dice--rolling .ods-dice__cube { animation: ods-dice-tumble 0.55s cubic-bezier(0.36,0.07,0.19,0.97) infinite; }
@keyframes ods-dice-tumble {
    0%   { transform: rotate(  0deg) translateY(  0)     scale(1);    }
    25%  { transform: rotate(-16deg) translateY(-12px)   scale(1.05); }
    50%  { transform: rotate(  8deg) translateY(  0)     scale(0.97); }
    75%  { transform: rotate( 16deg) translateY( -7px)   scale(1.04); }
    100% { transform: rotate(  0deg) translateY(  0)     scale(1);    }
}
/* All'atterraggio il dado "sbatte": è quello che fa leggere il momento. */
.ods-dice--landed .ods-dice__cube { animation: ods-dice-land 0.4s cubic-bezier(0.22,1.4,0.4,1); }
@keyframes ods-dice-land {
    0%   { transform: scale(1.22) rotate(-6deg); }
    100% { transform: scale(1)    rotate(  0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ods-dice,
    .ods-dice--rolling .ods-dice__cube,
    .ods-dice--landed  .ods-dice__cube { animation: none; }
}

/* ---- Esito ---- */
.ods-dice__outcome {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 3.1rem;      /* riservato: senza, il pannello salta al risultato */
    justify-content: center;
}
.ods-dice__result { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.ods-dice__detail { font-size: 0.85rem; color: var(--ods-gold-text); }

.ods-dice--success .ods-dice__panel { border-color: rgba(74,222,128,0.6); }
.ods-dice--failure .ods-dice__panel { border-color: rgba(248,113,113,0.6); }
.ods-dice--success .ods-dice__cube  { background: linear-gradient(150deg, #6ee79b, #4ade80); }
.ods-dice--failure .ods-dice__cube  { background: linear-gradient(150deg, #fb9393, #f87171); }
.ods-dice--success .ods-dice__result { color: #4ade80; }
.ods-dice--failure .ods-dice__result { color: #f87171; }

.ods-dice__action { width: 100%; }
.ods-dice__action[disabled] { opacity: 0.5; cursor: default; }

/* Con la modale aperta la pagina sotto non deve scorrere. */
body.ods-dice-open { overflow: hidden; }

/* Scelta che apre una prova: la seconda riga annuncia statistica e difficoltà,
   e senza pre-line finirebbe attaccata all'etichetta. */
.ods-choice-btn--check {
    white-space: pre-line;
    line-height: 1.5;
}

/* Scelta bloccata */
.ods-choice-btn--locked,
.ods-choice-btn:disabled {
    opacity: 0.45;
    border-style: dashed;
    cursor: not-allowed;
    white-space: pre-line;
    font-size: 0.9rem;
    line-height: 1.5;
}
.ods-choice-btn--locked:hover,
.ods-choice-btn:disabled:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    transform: none;
}

/* Game over */
.ods-gameover-text {
    text-align: center;
    font-size: 1.2rem;
    color: #f87171;
    padding: 1rem 0;
}

/* ---- Titolo storia ---- */
.ods-story-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #f0ebe0;
    margin: 0 0 1.5rem;
    text-align: center;
    letter-spacing: 0.02em;
}

/* ---- Sinossi ---- */
/* Contesto prima di iniziare, e l'unico testo indicizzabile della pagina.
   Volutamente più spento del testo dei nodi: introduce, non compete col player. */
.ods-story-intro {
    margin: 0 0 1.75rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid rgba(240, 235, 224, 0.12);
    color: rgba(240, 235, 224, 0.72);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Il rimando alla versione a capitoli. Il <p> è di servizio: il pulsante
   dentro è già vestito da `.ods-btn .ods-btn-secondary`, qui serve solo
   centrarlo e dargli respiro fra la sinossi — che chiude con un bordo — e la
   riga del contatore letture.
   Secondario di proposito: da questa pagina l'azione principale è giocare, e
   questo è il ramo per chi preferisce leggere. */
.ods-story-altversione {
    margin: 0 0 1.5rem;
    text-align: center;
}
.ods-story-intro p {
    margin: 0 0 0.9rem;
}
.ods-story-intro p:last-child {
    margin-bottom: 0;
}

/* ---- Tag caratteristiche (illustrata / audio / RPG) ---- */
/* Neutri di proposito: l'oro resta riservato alle azioni, il viola all'atmosfera. */
.ods-story-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 0 1.5rem;
}
/* Le tre etichette spiegate in una riga: fissa le aspettative prima che il
   lettore cominci, ed è testo statico che i crawler vedono (la storia no). */
.ods-story-labels-hint {
    max-width: 46rem;
    margin: -1rem auto 1.75rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(240,235,224,0.55);
}
.ods-story-labels-hint strong {
    color: rgba(240,235,224,0.8);
    font-weight: 600;
}

/* ---- Copertina della storia ---- */
/* Sta fra le spiegazioni qui sopra e la sinossi.
   La larghezza la decide .ods-story-card (max-width: 680px): niente max-width
   proprio, o si scavalcherebbero a vicenda.
   ⚠️ NIENTE `aspect-ratio: 16/9` + `object-fit: cover` come .ods-node-image:
   le illustrazioni dei nodi le inietta il JS senza width/height e vanno messe
   in un riquadro fisso, ma le copertine no. Sette sono ~16:9 (1376x768), due
   sono molto più quadrate — Cappuccetto Rosso 800x600 e Milo 800x584 — e un
   riquadro 16:9 ne taglierebbe via un quarto dell'altezza.
   `height: auto` tiene le proporzioni vere di ciascuna, e il riquadro resta
   comunque prenotato perché wp_get_attachment_image stampa width e height:
   il browser ne ricava l'aspect-ratio da solo, quindi il layout non salta. */
.ods-story-cover {
    margin: 0 0 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
}
.ods-story-cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* Difficoltà: un colore per livello, come in archivio. Il badge ha un'icona,
   quindi va allineato come i tag caratteristica e non come un badge di testo. */
.ods-story-page .ods-badge--difficulty {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
/* Difficoltà: un colore per livello, come in archivio. */
.ods-story-page .ods-badge--difficulty-semplice  { background: rgba(74,222,128,0.15);  color: #86efac; border: 1px solid rgba(74,222,128,0.25); }
.ods-story-page .ods-badge--difficulty-media     { background: rgba(250,204,21,0.15);  color: #fde047; border: 1px solid rgba(250,204,21,0.25); }
.ods-story-page .ods-badge--difficulty-difficile { background: rgba(248,113,113,0.15); color: #fca5a5; border: 1px solid rgba(248,113,113,0.25); }

/* Stringe il titolo quando i tag lo seguono (senza :has il gap resta solo un po' più largo). */
.ods-story-title:has( + .ods-story-features ) {
    margin-bottom: 0.85rem;
}
.ods-story-page .ods-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-family: system-ui, sans-serif;
    font-weight: 600;
}
.ods-story-page .ods-badge--feature {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(240, 235, 224, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.ods-story-page .ods-badge-icon {
    width: 0.85em;
    height: 0.85em;
    flex: none;
}

/* ---- Hidden elements ---- */
#ods-resume-banner[hidden],
#ods-player[hidden],
#ods-loader[hidden],
#ods-error[hidden],
#ods-guest-cta[hidden],
.ods-ending-actions[hidden],
.ods-node-image[hidden] {
    display: none !important;
}

/* ---- Loader ---- */
#ods-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 0;
    color: rgba(240,235,224,0.6);
    font-size: 0.9rem;
}
.ods-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: rgba(240,235,224,0.7);
    border-radius: 50%;
    animation: ods-spin 0.8s linear infinite;
}
@keyframes ods-spin { to { transform: rotate(360deg); } }

/* ---- Errore ---- */
#ods-error {
    color: #f87171;
    padding: 1rem;
    border: 1px solid rgba(248,113,113,0.3);
    border-radius: 8px;
    background: rgba(248,113,113,0.08);
}

/* ---- Resume banner ---- */
#ods-resume-banner {
    background: rgba(37, 99, 235, 0.2);
    border: 1px solid rgba(96,165,250,0.3);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ods-resume-text {
    font-size: 0.95rem;
    color: #bfdbfe;
}
.ods-resume-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ---- Transizioni player ---- */
/* `#ods-player` vive dentro `.ods-story-card`, che ha un `backdrop-filter`.
   Su WebKit un discendente che anima l'opacita dentro un contenitore con
   backdrop-filter finisce composto nella stessa tessera del backdrop, e quella
   tessera non viene sempre invalidata: al cambio nodo restava impressa la prima
   riga del nodo precedente sopra quello nuovo (visto su iPhone). Promuovere il
   player a layer proprio lo toglie da quella tessera.

   Si puo fare senza effetti collaterali perche dentro #ods-player non c'e
   nessun `position: fixed` — i tre che esistono (overlay, dado, linguetta del
   testo) stanno tutti fuori. Se un domani ne entrasse uno qui dentro, questo
   `transform` diventerebbe il suo blocco contenitore. */
#ods-player {
    transition: opacity 0.3s ease;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
#ods-player.ods-fade-out {
    opacity: 0;
    pointer-events: none;
}
#ods-player.ods-fade-in {
    opacity: 1;
}

/* ---- Immagine nodo ---- */
.ods-node-image {
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: rgba(255,255,255,0.05);
}
.ods-node-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Testo nodo ---- */
/* `--ods-tscale` lo scrive il JS dei comandi A− A A+ sulla radice (1 se
   manca). Scala il testo della storia, non l'interfaccia intorno. */
.ods-node-text {
    font-size: calc(1.18rem * var(--ods-tscale, 1));
    line-height: 1.8;
    color: #e8e0d0;
    margin-bottom: 2rem;
}
.ods-node-text p { margin: 0 0 1em; }
.ods-node-text p:last-child { margin-bottom: 0; }

/* ---- Tabelle dentro un nodo ----
   Tre cose insieme, e servono tutte e tre:
   1. il contenitore che scorre, perche' una tabella a quattro colonne non
      entra in 278 px e senza di lui a scorrere e' la PAGINA;
   2. lo scope `.ods-story-page` per battere il reset del tema
      (hello-elementor: `table{width:100%}`, `td{border:1px solid;padding:15px}`
      e le righe a zebra), che nessuno di noi ha mai chiesto;
   3. gli `!important`, perche' i convertitori hanno gia' pubblicato gli stili
      IN LINEA (font-size .95em, padding .8em) e quelli vincono su qualunque
      foglio. Il giorno che nessuna storia in produzione ha piu' stili in
      linea, gli !important si tolgono. */
.ods-story-page .ods-node-text .ods-tabella-wrap {
    overflow-x: auto;
    min-width: 0;
    margin: 0 0 1em;
    scrollbar-width: thin;
}
.ods-story-page .ods-node-text table {
    width: auto;
    min-width: 0;
    margin: 0 !important;
    border-collapse: collapse;
    font-size: .8em !important;
    line-height: 1.45;
}
.ods-story-page .ods-node-text th,
.ods-story-page .ods-node-text td {
    padding: .35em .5em .35em 0 !important;
    border: 0;
    border-bottom: 1px solid rgba( 255, 255, 255, .18 ) !important;
    vertical-align: top;
    background: none;
    text-align: left !important;
}
.ods-story-page .ods-node-text th:not(:first-child),
.ods-story-page .ods-node-text td:not(:first-child) {
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: .5em !important;
}
.ods-story-page .ods-node-text tbody tr:hover > td,
.ods-story-page .ods-node-text tbody tr:hover > th { background: none; }

/* Ultimo uso rimasto: un filo d'allarme, non un allarme. Il lettore deve
   accorgersene guardando lo zaino, non scoprirlo quando l'oggetto sparisce. */
.ods-inv-item--ultimo {
    border-color: rgba( 250, 204, 21, 0.55 );
    color: #facc15;
}

/* Oggetto che si è appena rotto: è prosa della storia, non un avviso di
   sistema, quindi resta in corsivo dentro il testo invece di diventare un
   riquadro. Il filetto a sinistra basta a dire che è successo adesso. */
.ods-node-text .ods-item-broken {
    font-style: italic;
    color: #d9c9a3;
    border-left: 2px solid rgba( 217, 201, 163, 0.45 );
    padding-left: 0.9rem;
    margin-top: 1.25em;
}

/* ---- Scelte ---- */
.ods-choices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
/* Scope .ods-story-page: specificità (0,2,0) per battere il leak
   `[type="button"]{color:#cc3366}` di reset.css (0,1,0, ma caricato dopo). */
.ods-story-page .ods-choice-btn {
    display: block;
    width: 100%;
    padding: 0.95rem 1.25rem;
    background: var(--ods-gold-tint);
    border: 1px solid var(--ods-gold-soft);
    border-radius: 10px;
    font-size: 1.06rem;
    font-family: inherit;
    color: var(--ods-gold-text);
    cursor: pointer;
    text-align: left;
    /* reset.css del tema padre impone `white-space: nowrap` a tutti i <button>:
       il testo lungo delle scelte restava su una riga e veniva tagliato.
       Qui lo riportiamo a capo (specificità (0,2,0) batte il reset). */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.45;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}
/* :focus incluso oltre a :hover/:focus-visible per battere anche
   `button:hover,button:focus{background:#cc3366}` di reset.css (0,2,0). */
.ods-story-page .ods-choice-btn:hover,
.ods-story-page .ods-choice-btn:focus,
.ods-story-page .ods-choice-btn:focus-visible {
    background: var(--ods-gold-tint-2);
    border-color: var(--ods-gold);
    color: var(--ods-gold-text-hi);
    transform: translateY(-1px);
    outline: none;
}
.ods-story-page .ods-choice-btn:active {
    transform: translateY(0);
}

/* ---- Fine storia ---- */
.ods-ending-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* ---- Guest CTA ---- */
#ods-guest-cta {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid rgba(250,204,21,0.25);
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.6;
    text-align: center;
    color: #fde68a;
}
#ods-guest-cta a {
    display: inline-block;
    margin-top: 0.4rem;
    color: #fcd34d;
    font-weight: 700;
    text-decoration: underline;
}

/* ---- Pulsanti ---- */
.ods-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ods-btn:active { transform: translateY(1px); }

/* Primario = azione forte → oro pieno. Secondario = neutro (mantiene la gerarchia).
   Entrambi scoped per battere il leak colore di reset.css su <button>/<a>. */
.ods-story-page .ods-btn-primary {
    background: var(--ods-gold);
    color: var(--ods-gold-ink);
    border-color: var(--ods-gold);
}
.ods-story-page .ods-btn-primary:hover,
.ods-story-page .ods-btn-primary:focus {
    background: var(--ods-gold-bright);
    border-color: var(--ods-gold-bright);
}
.ods-story-page .ods-btn-secondary {
    background: transparent;
    color: #e8e0d0;
    border-color: rgba(255,255,255,0.3);
}
.ods-story-page .ods-btn-secondary:hover,
.ods-story-page .ods-btn-secondary:focus {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.5);
    color: #f0ebe0;
}

/* ---- Footer ---- */
.ods-site-footer {
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(10,10,20,0.5);
    backdrop-filter: blur(6px);
}
.ods-footer-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
}
.ods-footer-copy {
    color: #fff;
}
/* :link/:visited espliciti: batte il globale blu di kit.css `a:visited` (0,1,1). */
.ods-footer-link,
.ods-footer-link:link,
.ods-footer-link:visited {
    color: #fff;
    text-decoration: none;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.ods-footer-link:hover,
.ods-footer-link:focus {
    color: #fff;
    text-decoration: underline;
}

/* ---- Barra di condivisione (adattata allo sfondo scuro) ---- */
.ods-share {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 1.5rem 1rem 0.5rem;
}
.ods-share__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: rgba(240,235,224,0.65);
}
.ods-share__btn,
.ods-share__btn:link,
.ods-share__btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.ods-share__btn svg {
    width: 20px;
    height: 20px;
    display: block;
}
.ods-share__btn:hover,
.ods-share__btn:focus {
    background: #fff;
    border-color: #fff;
    color: #14111f;
    transform: translateY(-2px);
}

/* ---- Desktop ---- */
@media ( min-width: 640px ) {
    .ods-story-card {
        padding: 2.5rem 2.5rem;
    }
    .ods-story-title {
        font-size: 2rem;
    }
    .ods-node-text {
        font-size: calc(1.24rem * var(--ods-tscale, 1));
    }
    .ods-ending-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .ods-resume-actions {
        flex-direction: row;
    }
}

/* ============================================================
   Login in testata, comandi di lettura, cuoricino e contatore
   (v1.14.0 — vedi ODS_Counters)
   ============================================================ */

/* ---- Login / utente in testata ---- */
/* La nav ora ha due gruppi (uscita a sinistra, account a destra): serviva
   spazio fra loro, prima c'era un solo link e bastava il flex del contenitore. */
.ods-header-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ods-nav-login,
.ods-nav-login:link,
.ods-nav-login:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    color: #fff;
}
.ods-nav-login:hover,
.ods-nav-login:focus {
    background: rgba(255,255,255,0.12);
    text-decoration: none;
}
.ods-nav-login__icon { flex: 0 0 auto; }
.ods-nav-user {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.ods-nav-user__sep { color: rgba(255,255,255,0.4); font-size: 0.8rem; }
.ods-nav-user__name { font-weight: 600; }
.ods-nav-user__logout { opacity: 0.75; }

@media (max-width: 480px) {
    /* Su telefono l'etichetta «Accedi» e «Torna alle storie» insieme mandano
       la testata a capo: resta l'icona, che con l'aria-label basta. */
    .ods-header-inner { gap: 0.5rem; }
    .ods-header-nav { gap: 0.6rem; }
    .ods-nav-login { padding: 0.35rem 0.55rem; }
    .ods-nav-login span { display: none; }
}

/* ---- Riga contatore + comandi testo ---- */
.ods-reading-tools {
    display: flex;
    justify-content: center;
    margin: 0 0 1.5rem;
}
.ods-views[hidden],
.ods-textsize[hidden] { display: none; }
.ods-views {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: 0.82rem;
    color: rgba(240,235,224,0.6);
}
.ods-views strong { color: rgba(240,235,224,0.9); font-weight: 600; }

/* ---- Dimensione del testo: linguetta fissa sul bordo destro ----
   Stampata da wp_footer e NON dentro .ods-story-card: quella card ha un
   backdrop-filter, che la renderebbe il blocco contenitore di questo
   position:fixed e lo ancorerebbe alla card invece che alla finestra. */
.ods-textsize[hidden],
.ods-textsize__panel[hidden] { display: none; }

.ods-textsize {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Sotto il modale del dado (z-index 200): quando la storia si ferma per un
       tiro, il tiro e l'unica cosa che deve stare davanti. */
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ods-textsize .ods-textsize__toggle {
    appearance: none;
    cursor: pointer;
    width: 44px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(20,20,34,0.92);
    color: #e8e0d0;
    border: 1px solid rgba(255,255,255,0.18);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    backdrop-filter: blur(6px);
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1;
    transition: background-color 0.15s;
}
/* ⚠️ reset.css del tema: `[type=button]:focus, button:focus { background:#c36 }` a
   (0,2,0), caricato DOPO il CSS del plugin. Dopo un clic col dito o col mouse il
   pulsante resta `:focus` ma NON `:focus-visible`, quindi una regola scritta solo
   su `:focus-visible` non lo copre e il fondo diventa magenta. Serve un `:focus`
   esplicito che rimetta l'aspetto BASE (0,3,0), messo PRIMA di hover/focus-visible:
   a parità di specificità vince chi viene dopo, e per la tastiera `:focus-visible`
   matcha entrambe le regole e si riprende l'aspetto attivo. */
.ods-textsize .ods-textsize__toggle:focus {
    background: rgba(20,20,34,0.92);
    color: #e8e0d0;
}
.ods-textsize .ods-textsize__toggle:hover,
.ods-textsize .ods-textsize__toggle:focus-visible { background: rgba(40,40,60,0.95); }
.ods-textsize__toggle-small { font-size: 0.72em; }

.ods-textsize__panel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: rgba(20,20,34,0.92);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.ods-textsize__label {
    font-family: system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240,235,224,0.5);
}
.ods-textsize__buttons {
    display: inline-flex;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    overflow: hidden;
}
.ods-textsize .ods-textsize__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #e8e0d0;
    cursor: pointer;
    line-height: 1;
    min-width: 44px;
    min-height: 40px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: system-ui, sans-serif;
    transition: background-color 0.15s;
}
.ods-textsize .ods-textsize__btn + .ods-textsize__btn { border-left: 1px solid rgba(255,255,255,0.2); }
.ods-textsize .ods-textsize__btn:focus { background: transparent; color: #e8e0d0; }
.ods-textsize .ods-textsize__btn:hover:not([disabled]),
.ods-textsize .ods-textsize__btn:focus-visible,
.ods-textsize .ods-textsize__btn[aria-pressed="true"] { background: rgba(255,255,255,0.14); }
.ods-textsize .ods-textsize__btn[disabled] { opacity: 0.3; cursor: default; }
.ods-textsize .ods-textsize__btn[data-ods-textsize-step="-1"] { font-size: 0.8rem; }
.ods-textsize .ods-textsize__btn[data-ods-textsize-step="0"]  { font-size: 0.95rem; }
.ods-textsize .ods-textsize__btn[data-ods-textsize-step="1"]  { font-size: 1.15rem; }
.ods-textsize__sign { font-size: 0.7em; }

@media (max-width: 600px) {
    .ods-textsize__label { display: none; }
    .ods-textsize__panel { padding: 0.4rem 0.5rem; }
    .ods-textsize .ods-textsize__toggle { width: 40px; height: 44px; }
}

/* ---- Cuoricino nel blocco del finale ---- */
/* Vive dentro .ods-ending-actions, che è flex-column su telefono e flex-row
   da tablet in su: il bottone si comporta come gli altri due. */
.ods-ending-actions .ods-like {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: #f0ebe0;
    font-family: system-ui, sans-serif;
    font-size: 0.95rem;
    transition: background-color 0.15s, border-color 0.15s;
}
.ods-ending-actions .ods-like:focus {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
    color: #f0ebe0;
}
.ods-ending-actions .ods-like:hover:not([disabled]),
.ods-ending-actions .ods-like:focus-visible {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4);
}
.ods-ending-actions .ods-like__heart { color: #e0456f; line-height: 1; }
.ods-ending-actions .ods-like__count { font-variant-numeric: tabular-nums; min-width: 0.8em; }
.ods-ending-actions .ods-like[disabled] { cursor: default; }
/* Classe composta (0,3,0) per battere gli stati di riposo qui sopra. */
.ods-ending-actions .ods-like.ods-like--liked,
.ods-ending-actions .ods-like.ods-like--liked:hover {
    background: #e0456f;
    border-color: #e0456f;
    color: #fff;
}
.ods-ending-actions .ods-like.ods-like--liked .ods-like__heart { color: #fff; }


/* ------------------------------------------------------------------
   Altre storie interattive (30/09/2026): 4 link in fondo alla pagina.
   ------------------------------------------------------------------ */
.ods-related {
    position: relative;
    z-index: 5;
    max-width: 880px;
    margin: 1.5rem auto 0;
    padding: 1rem 1rem 0.5rem;
}
.ods-related__title {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1.15rem;
    color: var(--ods-gold-text-hi);
}
.ods-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}
@media (max-width: 640px) {
    .ods-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ods-related__card,
.ods-related__card:link,
.ods-related__card:visited {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(20,17,31,0.72);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.ods-related__card:hover,
.ods-related__card:focus {
    border-color: var(--ods-gold);
    transform: translateY(-2px);
}
.ods-related__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--ods-gold-tint-2);
}
.ods-related__name {
    display: block;
    padding: 0.6rem 0.7rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 600;
}
.ods-related__all {
    margin: 1rem 0 0;
    text-align: center;
}
.ods-related__all a,
.ods-related__all a:link,
.ods-related__all a:visited {
    color: var(--ods-gold-text);
    text-decoration: underline;
}