/* Barbara Ross Books Club — foglio di stile di base.
   Impostato per essere riempito: qui ci sono i token (colori, scala
   tipografica, spazi) e i blocchi ricorrenti. Le pagine nuove non dovrebbero
   aver bisogno di CSS proprio, solo di usare queste classi. */

/* ---------------- font auto-ospitati ---------------- */
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-var.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-italic.woff2") format("woff2");
  font-weight: 500 700; font-style: italic; font-display: swap;
}
/* la & di Playfair e' un ghirigoro d'altri tempi che stona nei titoli:
   SOLO quel glifo passa a un serif classico di sistema, il resto resta
   Playfair (il trucco e' l'unicode-range su U+0026) */
@font-face {
  font-family: "Ecommerciale";
  src: local("Georgia"), local("Palatino Linotype"), local("Times New Roman");
  unicode-range: U+0026;
  font-display: swap;
}

/* ---------------- token · due temi ----------------
   SCURO di base, CHIARO su richiesta (interruttore nella testata, scelta
   ricordata). I nomi sono SEMANTICI — --btn-bg, non --beige — perche' fra i due
   temi i ruoli si INVERTONO: nel buio il pulsante e' beige con testo scuro, alla
   luce e' marrone con testo chiaro. Se i componenti nominassero i colori invece
   dei ruoli, ogni regola andrebbe scritta due volte. */
:root {
  color-scheme: dark;

  --bg:        #0E0C0A;
  --paper:     #0E0C0A;
  --paper-2:   #171310;
  --paper-3:   #1F1A15;
  --ink:       #F2E9DC;
  --ink-soft:  #C0B2A1;
  --ink-faint: #8E8073;
  --line:      #342C23;
  --line-2:    #4A3E31;

  --brown:      #A9714B;
  --brown-deep: #6E4529;
  --beige:      #E4CDA6;
  --beige-deep: #C9AE83;

  /* ruoli */
  --accent:      #A9714B;   /* etichette, bordi, stato attivo */
  --accent-ink:  #E4CDA6;   /* collegamenti e prezzi */
  --btn-bg:      #E4CDA6;   /* pulsante principale: beige... */
  --btn-bg-hover:#C9AE83;
  --btn-ink:     #17120D;   /* ...con testo scuro sopra */
  --badge-bg:    #6E4529;
  --badge-ink:   #E4CDA6;

  --err-bg:     #3B1714;
  --err-line:   #6E2A24;
  --err-ink:    #F3B4AB;
  --err-danger: #E8837A;

  --shadow: rgba(0, 0, 0, .5);
  --glow:   rgba(228, 205, 166, .45);

  /* coppia "Classic Elegant": serif di carattere per i titoli, corpo neutro.
     Playfair e' AUTO-OSPITATO (un solo file variabile 500-700): niente
     chiamate a Google, coerente col resto del server. */
  --display: "Ecommerciale", "Playfair Display", "Iowan Old Style", Palatino, Georgia, serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* tipografia sovradimensionata: il titolo E' il design */
  --t-hero: clamp(2.6rem, 1.4rem + 6vw, 5.5rem);
  --t-h2:   clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --t-body: clamp(1rem, .97rem + .18vw, 1.125rem);

  --sp:      clamp(1rem, .7rem + 1.4vw, 2rem);
  --sp-lg:   clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
  --wrap:    68rem;
  --measure: 38rem;
}

/* Tema chiaro. Il marrone e' piu' scuro che nel tema scuro (#885A34 contro
   #A9714B): calibrato sulla superficie PIU' SCURA su cui puo' finire, non sul
   fondo — altrimenti passa sulla pagina e fallisce dentro le schede. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #FBF7F0;
  --paper:     #FBF7F0;
  --paper-2:   #F3ECE0;
  --paper-3:   #EBE1D1;
  --ink:       #1E1712;
  --ink-soft:  #4C3D2F;
  --ink-faint: #786552;
  --line:      #DDD0BA;
  --line-2:    #C2AF92;

  --brown:      #885A34;
  --brown-deep: #6E4529;
  --beige:      #E4CDA6;
  --beige-deep: #C9AE83;

  --accent:      #885A34;
  --accent-ink:  #885A34;
  --btn-bg:      #885A34;   /* qui il pulsante e' marrone... */
  --btn-bg-hover:#6E4529;
  --btn-ink:     #FBF7F0;   /* ...con testo chiaro sopra */
  --badge-bg:    #6E4529;
  --badge-ink:   #FBF7F0;

  --err-bg:     #FDECE9;
  --err-line:   #EFB3AA;
  --err-ink:    #B3271A;
  --err-danger: #C0392B;

  --shadow: rgba(30, 23, 18, .18);
  --glow:   rgba(136, 90, 52, .3);
}


/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
/* l'attributo hidden deve vincere anche sulle nostre regole di display:
   senza questo, input[type=file]{display:block} lo resuscitava */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-underline-offset: .18em; }
a:hover { color: var(--accent); }

/* Il contorno di focus resta per chi naviga da TASTIERA (serve a vedere dove
   sei), ma sul touch non ha senso e appariva a ogni tocco come un finto hover:
   sui dispositivi a dito lo spegniamo, insieme al lampo grigio di iOS. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
@media (pointer: coarse) {
  :focus-visible, :focus { outline: none; }
}
html { -webkit-tap-highlight-color: transparent; }

/* il link di salto serve a chi naviga da tastiera o con screen reader */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--btn-bg); color: var(--btn-ink); padding: .7em 1.1em; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------------- impianto ---------------- */
.wrap { width: min(100% - 2 * var(--sp), var(--wrap)); margin-inline: auto; }
.measure { max-width: var(--measure); }
.section { padding-block: var(--sp-lg); }
.section + .section { border-top: 1px solid var(--line); }

/* ---------------- testata ---------------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp); min-height: 4.2rem;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  font-weight: 600; letter-spacing: .01em; text-decoration: none; color: var(--ink);
}
/* il marchio e' l'immagine intera del logo (libro + nome). Il PNG e'
   trasparente, quindi l'immagine puo' essere PIU' ALTA della barra: il
   suo contenitore resta alto quanto la barra (niente si sposta) e il
   logo sborda in silenzio sopra e sotto */
.brand { height:4.2rem; align-items:center; overflow:visible; }
.brand img { display:block; height:5.4rem; width:auto; border-radius:0; }
/* sul telefono il logo si ridimensiona: a 5.4rem mangiava due terzi della
   testata. Resta sbordante rispetto alla riga (il png e' trasparente),
   ma in proporzione allo schermo */
@media (max-width: 40rem) {
  .brand { height:2.9rem; }
  .brand img { height:3.4rem; }
}

.nav { display: flex; gap: clamp(.9rem, 2vw, 1.8rem); }
.nav a {
  font-family: var(--sans); font-size: .88rem; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }

.nav-toggle { display: none; }

@media (max-width: 40rem) {
  /* tre tratti che si trasformano in croce: nessuna parola, nessun riquadro.
     Quadrato fisso 40x40 centrato dal flex della testata: niente margini
     negativi, niente disallineamenti verticali. */
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none; align-self: center;
    background: none; border: 0; padding: 0;
    /* misurato sullo screenshot: il DISEGNO (26px) deve allinearsi al bordo
       del contenuto come il logo, quindi il quadrato da 40 sporge di 7px */
    margin: 0 -7px 0 0;
    color: var(--ink); cursor: pointer;
  }
  /* e scende di 1px: il centro ottico del marchio sta un filo piu' in basso */
  .nav-toggle svg { width: 26px; height: 26px; display: block; transform: translateY(1px); }
  .nav-toggle path {
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
    /* SENZA fill-box ogni tratto ruota attorno al centro dell'ICONA intera
       (il viewBox), non attorno al proprio: la X veniva storta e spostata.
       Con fill-box l'origine e' il centro del singolo tratto. */
    transform-box: fill-box;
    transform-origin: center;
  }
  /* aperto: la riga di mezzo svanisce, le altre due si incrociano */
  .nav-toggle[aria-expanded="true"] { color: var(--accent); }
  .nav-toggle[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .l2 { opacity: 0; transform: scaleX(.4); }
  .nav-toggle[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }
  /* il menu si apre scorrendo, non comparendo di colpo. Uso visibility e non
     display: display non e' animabile, e visibility:hidden toglie comunque le
     voci dal percorso di tabulazione. */
  .nav {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem var(--sp) 1rem;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility .22s;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; }
  /* una lista, non una griglia: nessun tratto fra le voci, le separa lo spazio */
  .nav { padding: .9rem var(--sp) 1.2rem; gap: .15rem; }
  .nav a {
    padding: .78rem .55rem; border: 0; border-radius: 10px;
    font-size: 1rem; letter-spacing: .06em;
    opacity: 0; transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease, background-color .15s ease;
  }
  .nav a:active { background: var(--paper-2); }
  /* le voci entrano una dopo l'altra, non tutte insieme */
  .nav.open a { opacity: 1; transform: none; }
  .nav.open a:nth-child(1) { transition-delay: .04s }
  .nav.open a:nth-child(2) { transition-delay: .08s }
  .nav.open a:nth-child(3) { transition-delay: .12s }
  .nav.open a:nth-child(4) { transition-delay: .16s }
  .nav.open a:nth-child(5) { transition-delay: .20s }
}

/* ---------------- titoli ---------------- */
.hero { padding-block: var(--sp-lg); }
.hero h1 {
  font-family: var(--display);
  font-size: var(--t-hero); line-height: 1.04; margin: 0 0 .45em;
  font-weight: 600; letter-spacing: -.02em; text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.lede { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: var(--ink-soft); margin: 0; }

h2 { font-family: var(--display); font-size: var(--t-h2); line-height: 1.15;
     margin: 0 0 .6em; font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: 1.15rem; margin: 0 0 .4em; font-weight: 600; }

.eyebrow {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1rem;
}

/* la briciola di risalita, ovunque serva tornare su di un livello */
.crumb { font-family:var(--sans); font-size:.8rem; letter-spacing:.05em;
         text-transform:uppercase; text-decoration:none; color:var(--ink-faint); }
@media (hover:hover) { .crumb:hover { color:var(--accent); } }
/* quando la briciola apre la pagina, sta su una riga sua sopra tutto */
.briciola-su { margin-bottom:1.1rem; }

/* la ZONA DI CONSEGNA del file in amministrazione: si vede dove va a finire */
.dropzone { display:flex; flex-direction:column; align-items:center; gap:.4rem;
            border:2px dashed var(--line-2); border-radius:14px;
            padding:1.7rem 1rem; text-align:center; cursor:pointer;
            background:var(--paper-2);
            transition:border-color .15s, background .15s; }
.dropzone:hover, .dropzone.dz-sopra { border-color:var(--accent);
                                      background:var(--paper-3); }
.dropzone b { font-family:var(--sans); font-size:.95rem; color:var(--ink); }
.dropzone span { font-family:var(--sans); font-size:.8rem; color:var(--ink-faint); }
.dropzone .dz-file { color:var(--accent-ink); font-weight:600; }

/* ---------------- blocchi ---------------- */
/* Telefono: SEMPRE 2 colonne, mai una copertina gigante sotto l'altra.
   Da 40rem in su si passa alle colonne fluide larghe. */
.grid { display: grid; gap: calc(var(--sp) * .65); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) {
  .grid { gap: var(--sp); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}

.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 12px; padding: calc(var(--sp) * .9);
}

.btn {
  display: inline-block; font-family: var(--sans); font-size: .92rem; font-weight: 600;
  padding: .85em 1.6em; border-radius: 999px; text-decoration: none;
  background: var(--btn-bg); color: var(--btn-ink); border: 1px solid transparent;
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-ink); }
/* variante marrone: sempre con testo scuro sopra, mai chiaro */
.btn.brown { background: var(--badge-bg); color: var(--badge-ink); }
.btn.brown:hover { filter: brightness(1.12); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* segnaposto: si vede a colpo d'occhio cosa manca ancora.
   Da togliere man mano che il contenuto arriva. */
.placeholder {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: var(--sp); color: var(--ink-faint);
  font-family: var(--sans); font-size: .9rem; text-align: center;
}

/* ---------------- piede ---------------- */

/* ================= negozio ================= */
.badge { background: var(--badge-bg); color:var(--badge-ink); border-radius:99px; padding:.05em .5em;
         font-size:.75em; font-family:var(--sans); }
.is-admin { color: var(--accent) !important; }
.adminbar { background:var(--paper-2); color:var(--ink-faint); text-align:center;
            font-family:var(--sans); font-size:.72rem; letter-spacing:.08em;
            text-transform:uppercase; padding:.3rem 1rem;
            border-bottom:1px solid var(--line); }
.adminbar b { color:var(--accent); font-weight:600; }
.inline { display:inline; }
.linkish { background:none; border:0; padding:0; font:inherit; font-family:var(--sans);
           font-size:.88rem; color:var(--ink-soft); cursor:pointer; text-transform:uppercase;
           letter-spacing:.04em; }
.linkish:hover { color: var(--accent); }
.linkish.danger:hover { color:var(--err-danger); }

.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
            margin-bottom:1.6rem; }
.sec-head h2 { margin:0; display:flex; align-items:baseline; gap:.75rem; }
.sec-head a { font-family:var(--sans); font-size:.85rem; text-decoration:none;
              letter-spacing:.06em; text-transform:uppercase; }
/* il numero della sezione: piccolo, marrone, da rivista */
.sec-num { font-family:var(--sans); font-size:.8rem; font-weight:600;
           color:var(--accent); letter-spacing:.1em; }
/* filo sotto l'intestazione, da impaginato editoriale */
.sec-head { border-bottom:1px solid var(--line); padding-bottom:1rem; }

/* schede di prodotto */
.pcard { display:flex; flex-direction:column; text-decoration:none; color:inherit;
         border:1px solid var(--line); border-radius:12px; overflow:hidden;
         background:var(--paper-2); transition:border-color .15s, transform .15s; }
a.pcard:hover { border-color:var(--accent); transform:translateY(-2px); }
.pcard-cover { aspect-ratio:2/3; background:var(--paper-3); display:grid; place-items:center;
               border-bottom:1px solid var(--line); overflow:hidden; }
.pcard-cover.is-film { aspect-ratio:16/9; }
.pcard-cover img { position:absolute; inset:0; width:100%; height:100%;
                   object-fit:fill; }
.pcard-empty { font-family:var(--sans); font-size:.8rem; letter-spacing:.14em;
               text-transform:uppercase; color:var(--ink-faint); }
/* il corpo occupa tutta l'altezza rimasta: autore e prezzo si ANCORANO al
   fondo della card, cosi' restano allineati fra card vicine anche quando un
   titolo va su due righe e l'altro su una */
.pcard-body { padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column;
              flex:1; }
.pcard-body .byline { margin-top:auto; padding-top:.55rem; }
.pcard-body h3 { font-family:var(--display); margin:0 0 .15em; font-size:1.12rem;
                 font-weight:600; line-height:1.25; }
.byline { margin:0; color:var(--ink-faint); font-size:.9rem; }
.byline.big { font-size:1.05rem; margin-bottom:.8rem; }
.price { margin:.5rem 0 0; font-family:var(--sans); font-weight:600; font-size:.95rem;
         color:var(--accent-ink); }
.price.big { font-size:1.5rem; margin:1.2rem 0; }
.owned { color:var(--accent); font-family:var(--sans); font-weight:600; }
.btn.small { padding:.55em 1.1em; font-size:.82rem; margin-top:.7rem; }

/* scheda prodotto */
.prod { display:grid; gap:var(--sp); grid-template-columns:minmax(0,1fr); }
@media (min-width:48rem) { .prod { grid-template-columns:20rem minmax(0,1fr); gap:calc(var(--sp)*1.6); } }
.prod-cover img { width:100%; border-radius:12px; border:1px solid var(--line); }
.prod-info h1 { font-family:var(--display); font-size:clamp(1.8rem,1.3rem+2.4vw,3rem);
                line-height:1.1; margin:.1em 0 .25em; }
.prose { margin-top:1.4rem; white-space:pre-line; max-width:var(--measure); }
.meta { display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.2rem; margin-top:1.6rem;
        font-family:var(--sans); font-size:.88rem; }
.meta dt { color:var(--ink-faint); } .meta dd { margin:0; }

/* carrello */
.cart { list-style:none; margin:1.5rem 0 0; padding:0; }
.cart li { display:flex; justify-content:space-between; align-items:center; gap:1rem;
           padding:.9rem 0; border-bottom:1px solid var(--line); }
.cart a { text-decoration:none; font-weight:600; }
.cart-right { display:flex; align-items:center; gap:1rem; white-space:nowrap; }
/* il totale: etichetta e cifra affiancate, a sinistra */
.cart-total { display:flex; align-items:baseline; gap:.9rem; padding:1.1rem 0 1.5rem;
              font-family:var(--sans); font-size:1.05rem; }
.cart-total b { font-size:1.3rem; }
/* titolo sopra, categoria in piccolo sotto */
.cart-voce { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.cart-tipo { font-family:var(--sans); font-size:.72rem; letter-spacing:.08em;
             text-transform:uppercase; color:var(--ink-faint); }
/* prezzo e x sulla stessa linea, centrati fra loro */
.cart-right { align-items:center; }
.cart-right .price { margin:0; line-height:1; }
/* la x per togliere: NUDA, niente contorno; si accende e ruota al passaggio */
.cart-x { display:inline-flex; align-items:center; justify-content:center;
          width:1.7rem; height:1.7rem; padding:0; border:0; background:none;
          color:var(--ink-faint); cursor:pointer; line-height:1;
          transition:color .2s ease, transform .25s ease; }
.cart-x svg { width:.9rem; height:.9rem; display:block; }
@media (hover:hover) {
  .cart-x:hover { color:var(--err-danger); transform:rotate(90deg); }
}
.cart-x:active { transform:scale(.85); }
/* i comandi in fondo: procedi a sinistra, svuota a destra */
.cart-azioni { display:flex; justify-content:space-between; align-items:center;
               gap:.7rem; flex-wrap:wrap; }
.cart-azioni .svuota { margin-bottom:0; }

/* moduli */
.form-narrow { max-width:24rem; }
label { display:block; margin:0 0 1rem; font-family:var(--sans); font-size:.88rem;
        color:var(--ink-soft); }
label small { display:block; margin-top:.35rem; color:var(--ink-faint); font-size:.8rem; }
input[type=text], input[type=email], input[type=password], select, textarea {
  display:block; width:100%; margin-top:.35rem; padding:.7em .8em; font:inherit;
  /* MAI sotto i 16px: iOS fa zoom automatico sui campi piu' piccoli
     e poi la pagina resta ingrandita */
  font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:9px; }
input[type=file] { display:block; margin-top:.4rem; font-family:var(--sans); font-size:.85rem;
                   color:var(--ink-soft); max-width:100%; }
textarea { resize:vertical; }
label.check { display:flex; align-items:center; gap:.5rem; }
label.check input { width:auto; margin:0; }
.err { background:var(--err-bg); color:var(--err-ink); border:1px solid var(--err-line); padding:.7em 1em; border-radius:9px;
       font-family:var(--sans); font-size:.88rem; }
.note { color:var(--ink-faint); font-family:var(--sans); font-size:.86rem; }

/* amministrazione */
/* il modulo respira sotto: la griglia delle card non gli monta addosso */
.adminform { max-width:38rem; margin-bottom:2.4rem; }
.frow { display:grid; gap:0 1rem; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); }
.tablewrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-family:var(--sans); font-size:.88rem; }
.tbl th, .tbl td { text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line);
                   white-space:nowrap; }
.tbl th { color:var(--ink-faint); font-weight:600; font-size:.78rem;
          text-transform:uppercase; letter-spacing:.08em; }
.tbl .actions { display:flex; gap:1rem; }
/* il CATALOGO: una tabella per mondo, ma le colonne dei DATI stanno su
   misure FISSE uguali per tutte: tipo, prezzo, stato e azioni si
   allineano in verticale da un mondo all'altro, qualunque sia la
   lunghezza dei titoli (che si prendono solo lo spazio che avanza) */
.tbl-cat { table-layout:fixed; min-width:50rem; }
.tbl-cat th:nth-child(2) { width:7rem; }
.tbl-cat th:nth-child(3) { width:7rem; }
.tbl-cat th:nth-child(4) { width:7rem; }
/* le azioni ci devono STARE: "modifica pubblica elimina" coi suoi
   respiri, sennò sbordano oltre la tabella e spunta la barra */
.tbl-cat th:nth-child(5) { width:18.5rem; }
.tbl-cat td:first-child { white-space:normal; }
/* il catalogo del cinema ad albero: la serie intesta, le puntate rientrano */
.riga-serie td { background:var(--paper-2); font-family:var(--display);
                 font-weight:600; font-size:1.02rem; color:var(--ink);
                 padding:.6rem .8rem; }
.riga-serie.fuori td { font-family:var(--sans); font-size:.8rem; font-weight:600;
                       letter-spacing:.1em; text-transform:uppercase;
                       color:var(--ink-faint); }
.tbl td.cella-puntata { padding-left:2.4rem; }
.pt-num { display:inline-block; min-width:1.5em; font-family:var(--display);
          font-weight:600; color:var(--accent); }
.warn-inline { color:var(--err-danger); font-size:.75rem; margin-left:.5rem; }
/* lo stato dell'ordine, nella tabella: pagato in accento, rimborsato o
   non riuscito nel rosso delle azioni distruttive, in attesa tenue */
.stato-ordine { font-family:var(--sans); font-size:.72rem; font-weight:600;
                letter-spacing:.07em; text-transform:uppercase; }
.stato-ordine.paid { color:var(--accent); }
.stato-ordine.refunded, .stato-ordine.failed { color:var(--err-danger); }
.stato-ordine.pending { color:var(--ink-faint); }

/* ================= animazioni =================
   Regole che mi sono dato:
   - si animano solo opacity e transform, le uniche due proprieta' che il
     browser puo' comporre sulla scheda video senza ricalcolare l'impaginazione
   - niente si nasconde se il JavaScript non parte: le classi che nascondono
     valgono SOLO sotto html.js, che e' il JavaScript stesso ad aggiungere
   - chi ha chiesto meno animazioni al sistema operativo non ne vede nessuna
     (la regola prefers-reduced-motion piu' in alto azzera tutte le durate) */

/* --- transizione fra le pagine (browser che la supportano) --- */
@view-transition { navigation: auto; }

/* --- entrata della pagina --- */
@keyframes rise { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes fade { from { opacity:0 } to { opacity:1 } }

.hero h1 { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
.hero .lede { animation: rise .55s cubic-bezier(.2,.8,.2,1) .08s both; }
.hero .btn, .hero .eyebrow { animation: rise .55s cubic-bezier(.2,.8,.2,1) .14s both; }

/* --- comparsa allo scorrimento ---
   .reveal la mette il JavaScript: senza JavaScript nulla e' nascosto. */
html.js .reveal { opacity: 0; transform: translateY(12px);
                  transition: opacity .35s ease-out, transform .35s ease-out; }
html.js .reveal.seen { opacity: 1; transform: none; }

/* --- schede di prodotto --- */
.pcard { transition: border-color .2s ease, transform .28s cubic-bezier(.2,.8,.2,1),
                     box-shadow .28s ease; }
a.pcard:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -12px var(--shadow); }
a.pcard:active { transform: translateY(-1px); transition-duration: .08s; }

a.pcard:hover .pcard-cover img { transform: scale(1.045); }
.pcard-body h3 { transition: color .2s ease; }
a.pcard:hover .pcard-body h3 { color: var(--accent); }

/* --- pulsanti --- */
.btn { transition: background-color .2s ease, color .2s ease, transform .12s ease,
                   box-shadow .25s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px var(--glow); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; }

/* --- voci di navigazione: la sottolineatura cresce dal centro --- */
@media (min-width: 40.0625rem) {
  .nav a { position: relative; }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.35em; height: 1px;
    background: var(--accent); transform: scaleX(0); transform-origin: center;
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .nav a:hover::after { transform: scaleX(1); }
}

/* --- il numero nel carrello pulsa quando cambia --- */
@keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
.badge { display:inline-block; animation: pop .38s cubic-bezier(.2,.8,.2,1); }

/* --- messaggi di errore: entrano con uno scatto, non di soppiatto --- */
@keyframes shake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(3px)}
                   50%{transform:translateX(-1px)} 0%,100%{transform:none} }
.err { animation: fade .25s ease both, shake .4s ease .05s both; }

/* --- righe delle tabelle in amministrazione --- */
.tbl tbody tr { transition: background-color .18s ease; }
.tbl tbody tr:hover { background: var(--paper-2); }

/* --- il pannello si stacca leggermente quando si scorre --- */
.site-head { transition: box-shadow .25s ease, border-color .25s ease; }
.site-head.stuck { box-shadow: 0 8px 26px -18px var(--shadow); }

/* --- segnaposto: respira piano, per dire "qui manca qualcosa" --- */
@keyframes breathe { 0%,100%{opacity:.75} 50%{opacity:1} }
.placeholder { animation: breathe 4.5s ease-in-out infinite; }

/* --- il menu del telefono: il pulsante ruota mentre apre --- */
.nav-toggle { transition: color .2s ease; }

/* --- banda invertita: beige pieno con testo scuro, da rivista ---
   Funziona in ENTRAMBI i temi con gli stessi due token della palette. */
.band { background:var(--beige); color:#17120D; }
.band .wrap { padding-block:var(--sp-lg); }
.band h2 { color:#17120D; }
.band .eyebrow { color:#6E4529; }
.band p { color:#6E4529; max-width:var(--measure); font-size:1.05rem; line-height:1.7; }
.band .btn { background:#17120D; color:var(--beige); }
.band .btn:hover { background:#6E4529; color:#FBF7F0; }
:root[data-theme="light"] .band .btn:hover { color:#FBF7F0; }

/* --- interruttore del tema --- */
.head-actions { display:flex; align-items:center; gap:.15rem; flex:none; }
.themebtn { background:none; border:0; padding:0; width:40px; height:40px;
            color:var(--ink-soft); cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition:color .2s, transform .18s; }
.themebtn:hover { color:var(--accent); }
.themebtn:active { transform:scale(.9); }
.themebtn svg { width:20px; height:20px; display:block;
                transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.themebtn:active svg { transform:rotate(40deg); }
.themebtn .sun { display:none; }
:root[data-theme="light"] .themebtn .sun { display:block; }
:root[data-theme="light"] .themebtn .moon { display:none; }

/* ================= animazioni II: il pacchetto "figo" =================
   Stesse regole di sempre: solo opacity/transform/clip-path, tutto dietro
   html.js, zero movimento per chi ha chiesto quiete al sistema. */

/* --- filo di avanzamento lettura, in cima --- */
.progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
            background:var(--accent); transform:scaleX(0); transform-origin:left;
            pointer-events:none; }

/* --- inclinazione 3D delle schede (solo puntatori precisi) --- */
@media (hover:hover) and (pointer:fine) {
  html.js .grid { perspective: 900px; }
  html.js a.pcard {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transition: transform .25s ease-out, border-color .2s ease, box-shadow .28s ease;
    will-change: transform;
  }
  html.js a.pcard:hover { --lift: -4px; }
  /* riflesso che segue il puntatore */
  html.js a.pcard::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),
                var(--glow), transparent 55%);
    opacity:0; transition:opacity .3s ease;
  }
  html.js a.pcard:hover::after { opacity:.5; }
  a.pcard { position:relative; }
}

/* --- svelamento delle copertine: si aprono dal basso mentre appaiono --- */
html.js .reveal .pcard-cover img { clip-path: inset(100% 0 0 0); }
html.js .reveal.seen .pcard-cover img {
  clip-path: inset(0 0 0 0);
  transition: clip-path .6s cubic-bezier(.2,.8,.2,1) .1s,
              transform .5s cubic-bezier(.2,.8,.2,1);
}

/* --- film: pulsante play che affiora sulla copertina --- */
.play { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.play span {
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--line-2); opacity:.85;
  transform:scale(.82); transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.play svg { width:18px; height:18px; margin-left:3px; }
a.pcard:hover .play span { transform:scale(1); opacity:1; }
.pcard-cover { position:relative; }
/* durata del film sull'angolo */
.dur { position:absolute; right:8px; bottom:8px; font-family:var(--sans);
       font-size:.7rem; font-weight:600; letter-spacing:.04em; padding:.2em .55em;
       border-radius:99px; background:var(--bg); color:var(--ink-soft);
       border:1px solid var(--line); }

/* --- marquee editoriale nella banda beige: testo in contorno che scorre --- */
.marquee { overflow:hidden; white-space:nowrap; padding:1.1rem 0 0;
           mask-image:linear-gradient(90deg,transparent,#17120D 8%,#17120D 92%,transparent); }
.marquee-inner { display:inline-block; animation:marq 36s linear infinite; }
.marquee span {
  font-family:var(--display); font-size:clamp(2.2rem,6vw,4.5rem); font-weight:700;
  color:transparent; -webkit-text-stroke:1px #6E4529; letter-spacing:.02em;
  padding-right:.6em;
}
@keyframes marq { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .marquee-inner { animation:none } }

/* --- schede compatte sugli schermi stretti --- */
@media (max-width: 40rem) {
  .pcard-body { padding: .6rem .65rem .75rem; }
  .pcard-body h3 { font-size: .92rem; line-height: 1.25; }
  .byline { font-size: .76rem; }
  .price { font-size: .84rem; margin-top: .3rem; }
  .play span { width: 42px; height: 42px; }
  .play svg { width: 14px; height: 14px; }
  .dur { font-size: .62rem; right: 6px; bottom: 6px; }
}

/* --- la freccia dei "vedi tutti" scatta avanti --- */
.sec-head a .arr { display:inline-block; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.sec-head a:hover .arr { transform:translateX(4px); }

/* ================= i 4 habitat =================
   Ogni sezione ha 4 variabili: --ha (accento su scuro), --hd (accento su
   chiaro), --hs (superficie scura), --hl (superficie chiara). Tutte misurate:
   accenti >= 4.5 sui loro fondi, in entrambi i temi.
   L'Extra usa la palette madre del club: e' la casa, le saghe sono le stanze. */
/* accenti PASTELLO (niente neon) + campi di colore pieni, due toni ciascuno */
.s-espada    { --ha:#9FB4E0; --hd:#3A5580; --hf1:#26355E; --hf2:#1B2747;
               --hg1:#CDD9F1; --hg2:#E0E8F8; --hs:#26355E; --hl:#CDD9F1; }
.s-puntadoro { --ha:#E4C88E; --hd:#6E4F1D; --hf1:#6E5222; --hf2:#4C380F;
               --hg1:#EDDCB2; --hg2:#F5EBD0; --hs:#6E5222; --hl:#EDDCB2; }
.s-rockstar  { --ha:#DFB6D8; --hd:#7C3A6A; --hf1:#56395F; --hf2:#3A2542;
               --hg1:#E9D2E6; --hg2:#F5E7F2; --hs:#56395F; --hl:#E9D2E6; }
.s-extra     { --ha:var(--beige); --hd:var(--brown-deep); --hf1:#5C3B22; --hf2:#3E2715;
               --hg1:#EBE1D1; --hg2:#F3ECE0; --hs:#5C3B22; --hl:#EBE1D1; }
/* il palcoscenico: velluto bordeaux, col rosa del sipario come accento */
.s-drama     { --ha:#E7A9B4; --hd:#7A2537; --hf1:#5A1D2A; --hf2:#3D121C;
               --hg1:#EBD0D5; --hg2:#F5E6E9; --hs:#5A1D2A; --hl:#EBD0D5; }
/* l'accento "attivo" del tema corrente */
.s-espada, .s-puntadoro, .s-rockstar, .s-extra, .s-drama { --hx: var(--ha); }
:root[data-theme="light"] .s-espada, :root[data-theme="light"] .s-puntadoro,
:root[data-theme="light"] .s-rockstar, :root[data-theme="light"] .s-extra,
:root[data-theme="light"] .s-drama { --hx: var(--hd); }

/* --- le 4 carte della home --- */
.hero-compact { padding-block: calc(var(--sp-lg) * .6) calc(var(--sp-lg) * .15); }
/* la sezione dei mondi attacca subito sotto il filo di copertine */
#mondi.section { padding-top: calc(var(--sp-lg) * .4); }
.saga-grid { display:grid; grid-template-columns:1fr; gap: calc(var(--sp) * .8); }
@media (min-width: 48rem) { .saga-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap: var(--sp); } }

.scard {
  display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem;
  min-height: 13rem; padding: 1.3rem 1.25rem 1.15rem; border-radius:18px;
  text-decoration:none; color:var(--ink); position:relative; overflow:hidden;
  background: #0E0C0A; border:1px solid var(--line);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .25s ease,
              box-shadow .3s ease;
}
@media (min-width: 48rem) { .scard { min-height: 19rem; padding: 1.9rem; } }
:root[data-theme="light"] .scard { background: var(--hl); }
.scard:hover { transform: translateY(-4px); border-color: var(--hx);
               box-shadow: 0 14px 38px -18px var(--shadow); }
.scard-count { font-family:var(--sans); font-size:.68rem; font-weight:600;
               letter-spacing:.07em; text-transform:uppercase; color:var(--ink);
               border:1px solid color-mix(in srgb, var(--ink) 45%, transparent);
               border-radius:99px; padding:.28em .7em; opacity:.85; }
.scard-name { font-family:var(--display); font-size:clamp(1.6rem, 5.2vw, 2.5rem);
              line-height:1.1; margin:0 0 .3em; letter-spacing:-.01em; }
.scard-tag { margin:0; font-size:.88rem; line-height:1.5; color:var(--ink-soft);
             font-family:var(--sans); max-width:26rem; }
@media (min-width:48rem) { .scard-tag { font-size:.95rem; } }
.scard-go { font-family:var(--sans); font-size:.78rem; font-weight:600;
            letter-spacing:.08em; text-transform:uppercase; color:var(--ink); opacity:.85; }


/* --- pagina di saga: l'habitat completo --- */
.hab { --accent: var(--hx); --accent-ink: var(--hx); }
.hab .eyebrow, .hab .price, .hab .sec-num { color: var(--hx); }
.saga-hero { background: #0E0C0A; border-bottom:1px solid var(--line);
             padding-block: calc(var(--sp-lg) * .55); }
.saga-hero h1, .saga-hero .note { color:#F2E9DC; }
.saga-hero .crumb { font-family:var(--sans); font-size:.8rem; letter-spacing:.05em;
                    text-transform:uppercase; text-decoration:none; color:var(--ink-faint); }
.saga-hero .crumb:hover { color:var(--hx); }

.saga-hero h1 { font-family:var(--display); font-size:clamp(1.9rem, 5.5vw, 3.4rem);
                line-height:1.05; margin:.05em 0 .15em; letter-spacing:-.015em; }
.saga-manifesto { margin-top:1.1rem; color:var(--ink-soft); line-height:1.7; }


/* ================= stile disegno: i mondi =================
   Niente neon, niente griglie. Sfondi MORBIDI e pieni di colore: macchie
   tonde sfumate nei due colori del mondo, come acquerello. Sopra, piccoli
   scarabocchi a tratto tondo che galleggiano piano. Il titolo e' uguale per
   tutti: Playfair, nessun travestimento per mondo.
   Ogni mondo ha un colore compagno (--hc) solo decorativo: mai testo. */
.s-espada    { --hc:#8FA8E8; }
.s-puntadoro { --hc:#CE8A66; }
.s-rockstar  { --hc:#B08FE8; }
.s-extra     { --hc:var(--brown); }
.s-drama     { --hc:#C99A4E; }  /* l'oro del sipario */



/* tutto il contenuto in ALTO: contatore, titolo, invito */
.scard { justify-content:flex-start; gap:.55rem; }
.scard-count { align-self:flex-start; position:relative; z-index:1; }
.scard-name { position:relative; max-width:78%; margin:0; z-index:1; }
.scard-go { position:relative; z-index:1; margin-top:.1rem; }
/* senza immagine: nero, e lo si dice chiaramente */
.noimg { position:absolute; inset:auto 1.25rem 1.1rem auto; z-index:1;
         font-family:var(--sans); font-size:.72rem; letter-spacing:.12em;
         text-transform:uppercase; color:var(--ink-faint);
         border:1px dashed var(--line-2); border-radius:8px; padding:.45em .8em; }

/* l'apertura di mondo: stessa materia, piu' respiro */
.saga-hero { position:relative; overflow:hidden; }
.saga-hero .doodles .dd { opacity:.5; }
.saga-hero h1 { position:relative; }
.saga-hero .note, .saga-hero .crumb { position:relative; }

/* ================= mondi con immagine =================
   Quando un mondo ha la sua immagine di sfondo, i disegni si tolgono di mezzo
   e il testo si difende con un VELO: una sfumatura scura che sale dal basso e
   scava lo spazio del titolo dentro la foto. Il velo usa i toni del campo del
   mondo, cosi' l'innesto con l'immagine resta caldo e non grigio. */

.scard-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
             transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.scard.has-img:hover .scard-img { transform: scale(1.045); }

/* il velo scende dall'alto: scava lo spazio del titolo dentro la foto */
.scard.has-img::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom,
      color-mix(in srgb, #0E0C0A 88%, transparent) 0%,
      color-mix(in srgb, #0E0C0A 55%, transparent) 34%,
      color-mix(in srgb, #0E0C0A 15%, transparent) 55%,
      transparent 72%);
}
/* il testo sta sopra il velo, sempre in crema: sotto c'e' una foto, non il tema */
.scard.has-img .scard-name, .scard.has-img .scard-go { z-index:1; color:#F2E9DC; }
.scard.has-img .scard-go { opacity:.92; }
.scard.has-img .scard-count { z-index:1; color:#F2E9DC;
  border-color: color-mix(in srgb, #F2E9DC 55%, transparent); opacity:.95; }

/* stessa cosa sull'apertura del mondo */
.saga-hero.has-img { position:relative; }
.saga-hero.has-img .scard-img { z-index:0; }
.saga-hero.has-img::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom,
      color-mix(in srgb, #0E0C0A 90%, transparent) 0%,
      color-mix(in srgb, #0E0C0A 45%, transparent) 55%, transparent);
}
.saga-hero.has-img .wrap { position:relative; z-index:1; }
.saga-hero.has-img h1, .saga-hero.has-img .note { color:#F2E9DC; }
.saga-hero.has-img .crumb { color: color-mix(in srgb, #F2E9DC 75%, transparent); }

/* ================= home: i mondi separati e vivi ================= */
/* i numeri del club: un mini cruscotto da rivista. Numero grande in Playfair
   color accento, etichetta minuscola sotto, barrette verticali a dividere. */
.hero-stats { margin-top:1.6rem; display:flex; align-items:stretch; gap:1.2rem;
              animation: rise .55s cubic-bezier(.2,.8,.2,1) .1s both; }
.hs { display:flex; flex-direction:column; gap:.35rem; }
.hs + .hs { border-left:1px solid var(--line-2); padding-left:1.2rem; }
.hs b { font-family:var(--display); font-weight:600; font-size:2rem;
        line-height:1; color:var(--accent); }
.hs span { font-family:var(--sans); font-size:.66rem; font-weight:600;
           letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }


/* un mondo per riga, ben staccati: carta + descrizione tua */
.worlds { display:flex; flex-direction:column; gap: calc(var(--sp-lg) * .55); }
.world-block + .world-block { border-top:1px solid var(--line);
                              padding-top: calc(var(--sp-lg) * .5); }
.worlds .scard { min-height: 14rem; }
@media (min-width: 48rem) { .worlds .scard { min-height: 21rem; } }
.world-desc { margin:.9rem .2rem 0; max-width:var(--measure);
              color:var(--ink-soft); line-height:1.65; }
.world-desc.is-placeholder { color:var(--ink-faint); font-style:italic;
                             font-family:var(--sans); font-size:.88rem; }

/* le carte FLUTTUANO: un dondolio lento, ognuna col suo tempo e la sua fase.
   Uso translate/rotate (proprieta' separate), cosi' il transform dell'hover
   non litiga con l'animazione. */
@keyframes veleggia {
  0%, 100% { translate: 0 0;    rotate: 0deg; }
  33%      { translate: 0 -8px; rotate: .3deg; }
  66%      { translate: 0 -3px; rotate: -.25deg; }
}
.worlds .scard { animation: veleggia 9s ease-in-out infinite;
                 box-shadow: 0 10px 30px -18px var(--shadow); }
.world-block:nth-child(2) .scard { animation-duration: 11s; animation-delay: -4s; }
.world-block:nth-child(3) .scard { animation-duration: 10s; animation-delay: -7s; }
.world-block:nth-child(4) .scard { animation-duration: 12s; animation-delay: -2s; }
.worlds .scard:hover { box-shadow: 0 22px 48px -20px var(--shadow); }

/* ================= admin: i mondi, in ordine ================= */
.wgrid { grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width: 48rem) { .wgrid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.wcard { display:flex; flex-direction:column; gap:.55rem; }
/* i titoli hanno lunghezze diverse: riservo due righe, cosi' le card si allineano */
.wcard h3 { font-size:1rem; line-height:1.3; min-height:2.6em; margin:0; }
.wstatus { margin:0; font-family:var(--sans); font-size:.7rem; font-weight:600;
           letter-spacing:.07em; text-transform:uppercase; }
.wstatus.ok { color:var(--accent); }
.wstatus.no { color:var(--err-danger); }
.wprev { margin:0; font-family:var(--sans); font-size:.82rem; color:var(--ink-faint);
         line-height:1.5; min-height:3.75em;
         display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.wactions { margin-top:auto; display:flex; flex-direction:column; gap:.45rem; }
.wactions .btn { text-align:center; }
.wactions form { display:block; width:100%; margin:0; }
.filebtn { cursor:pointer; display:block; width:100%; }

/* il modale della descrizione */
dialog#descdlg { background:var(--paper-2); color:var(--ink); border:1px solid var(--line-2);
  border-radius:16px; padding:1.4rem; width:min(92vw, 34rem); }
dialog#descdlg::backdrop { background:rgba(0,0,0,.6); backdrop-filter:blur(3px); }
dialog#descdlg h3 { margin:0 0 .9rem; font-size:1.05rem; }
dialog#descdlg textarea { width:100%; font-size:1rem; line-height:1.6; }
.dlgrow { display:flex; gap:.7rem; margin-top:1rem; }
.dlgrow .btn { flex:1; }

/* Safari: dentro un riquadro ad aspect-ratio le percentuali d'altezza a volte
   non si risolvono e l'immagine cala verso il basso (il "notch"). L'ancoraggio
   assoluto e' identico su tutti i motori. Lo zoom resta. */
.pcard-cover img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }

/* catalogo admin diviso per mondi */
.cat-mondo { display:flex; align-items:center; gap:.6rem; margin:1.6rem 0 .6rem;
             font-size:1rem; color:var(--accent); }
.cat-mondo:first-of-type { margin-top:.4rem; }
.cat-n { font-family:var(--sans); font-size:.7rem; font-weight:600; color:var(--ink-faint);
         border:1px solid var(--line-2); border-radius:99px; padding:.15em .6em; }

/* offerta "tutta la saga" */
.bundle { margin-top:1.1rem; position:relative; z-index:1; }
.bundle-admin { display:flex; flex-direction:column; gap:.45rem; margin-top:.6rem;
                padding-top:.7rem; border-top:1px dashed var(--line-2); }
.bundle-admin label { margin:0; }

/* ================= touch: niente hover incollati, tocco reattivo ========= */
/* dice al browser che i tocchi sono tocchi: niente attese euristiche */
a, button, label, .btn, .linkish { touch-action: manipulation; }

/* Su iOS l'hover si "incolla" al dito e resta acceso: sui dispositivi senza
   mouse gli effetti hover non devono esistere proprio. */
@media (hover: none) {
  a.pcard:hover { transform: none; box-shadow: none; border-color: var(--line); }
  a.pcard:hover .pcard-cover img { transform: none; }
  a.pcard:hover .pcard-body h3 { color: inherit; }
  .scard:hover { transform: translateY(0);
                 border-color: color-mix(in srgb, var(--ink) 14%, transparent); }
  .worlds .scard:hover { box-shadow: 0 10px 30px -18px var(--shadow); }
  .scard.has-img:hover .scard-img { transform: none; }
  .btn:hover { transform: none; box-shadow: none; background: var(--btn-bg); }
  .linkish:hover { color: var(--ink-soft); }
  .sec-head a:hover .arr { transform: none; }
  a.pcard:hover .play span { transform: scale(.82); opacity: .85; }
}

/* la fluttuazione delle card perde la rotazione: sui telefoni la rotazione di
   texture grandi costringe a ridisegnare di continuo */
@keyframes veleggia {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* ================= profilo nella testata ================= */
.profilo { position:relative; }
/* il pallino dice "sei dentro" senza aggiungere parole */
.themebtn.is-in { color:var(--accent); }
.prof-dot { position:absolute; top:8px; right:8px; width:7px; height:7px;
            border-radius:50%; background:var(--accent);
            border:2px solid var(--paper); }

.prof-menu { position:absolute; top:calc(100% + .5rem); right:0; z-index:40;
             min-width:15rem; padding:.4rem; border-radius:14px;
             background:var(--paper-2); border:1px solid var(--line-2);
             box-shadow:0 18px 44px -20px var(--shadow);
             display:flex; flex-direction:column;
             opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
             transform-origin:top right;
             transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1),
                        visibility .18s; }
.prof-menu.open { opacity:1; visibility:visible; transform:none; }

.prof-head { padding:.7rem .8rem .75rem; border-bottom:1px solid var(--line);
             margin-bottom:.35rem; display:flex; flex-direction:column; gap:.15rem; }
.prof-head b { font-size:.92rem; }
.prof-head span { font-family:var(--sans); font-size:.76rem; color:var(--ink-faint);
                  overflow:hidden; text-overflow:ellipsis; }
.prof-warn { font-family:var(--sans); font-size:.74rem; font-weight:600; margin-top:.3rem;
             color:var(--err-danger); text-decoration:none; }

/* le voci: link e pulsante Esci indistinguibili fra loro */
.prof-menu a, .prof-menu button {
  display:block; width:100%; text-align:left; padding:.62rem .8rem; border-radius:9px;
  font-family:var(--sans); font-size:.88rem; color:var(--ink); text-decoration:none;
  background:none; border:0; cursor:pointer; transition:background-color .15s ease; }
.prof-menu form { margin:0; }
.prof-menu a.is-admin { color:var(--accent); }
/* "Esci" in rossino: e' l'unica voce che chiude qualcosa */
.prof-menu form button { color:var(--err-danger); }
@media (hover:hover) {
  .prof-menu a:hover, .prof-menu button:hover { background:var(--paper-3); }
}
.prof-menu a:active, .prof-menu button:active { background:var(--paper-3); }


/* ---------------- transizione del tema: calma e distesa ----------------
   Il cambio tema attraversa TUTTO: fondali, testi, bordi, superfici. Con un
   colore che scatta e l'altro no sembra rotto, quindi la transizione si mette
   su tutto insieme e solo mentre si cambia (la classe la toglie il JS), cosi'
   non rallenta nulla nell'uso normale. */
/* Il COLORE DEL TESTO resta fuori dalla transizione: far scorrere il colore di
   migliaia di glifi obbliga il browser a ridisegnarli a ogni fotogramma, e il
   testo "sgrana" durante il passaggio. Sfondi, bordi e superfici scorrono; le
   lettere cambiano di scatto, e non si nota perche' il fondo si muove sotto. */
/* Testo e superfici cambiano insieme, senza intervalli a basso contrasto. */
/* luna e sole si scambiano ruotando, senza scatti */
.themebtn svg { transition: transform .9s cubic-bezier(.34,1.2,.4,1), opacity .5s ease; }
.themebtn:active svg { transform: rotate(28deg); }

/* ================= recensioni ================= */
:root { --star:#E4C88E; }                      /* oro (accento di Punta D'oro) */
:root[data-theme="light"] { --star:#6E4F1D; }  /* oro fondo, o sulla carta sparisce */
.stars { display:inline-flex; align-items:center; gap:.12rem; vertical-align:middle; }
.stars svg { width:16px; height:16px; flex:none;
             fill:color-mix(in srgb, var(--ink) 22%, transparent); }
.stars svg.on { fill:var(--star); }
/* mezza stella: sfumatura netta a meta', senza doppio disegno */
.stars svg.half { fill:var(--star);
                  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
                  background:none; }
.stars b { font-family:var(--sans); font-size:.82rem; font-weight:700;
           margin-left:.4rem; color:var(--ink); }
.stars i { font-family:var(--sans); font-size:.78rem; font-style:normal;
           margin-left:.25rem; color:var(--ink-faint); }
.stars.mini svg { width:12px; height:12px; }
.stars.mini b, .stars.mini i { font-size:.72rem; margin-left:.3rem; }

.rev-link { display:inline-block; margin:.1rem 0 .8rem; text-decoration:none; }
.price-rev { margin-left:.5rem; }

.rev-head { display:flex; align-items:center; justify-content:space-between;
            gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.rev-head h2 { margin:0; }

/* la striscia trascinabile: due strati per stella, l'oro si riempie in percentuale */
.starslide { display:flex; align-items:center; gap:.8rem; margin:.3rem 0 .9rem;
             touch-action:none; user-select:none; -webkit-user-select:none; }
.starslide:focus-visible { outline:2px solid var(--accent); outline-offset:4px;
                           border-radius:6px; }
.ssrow { display:inline-flex; gap:.2rem; cursor:pointer; }
.ss { position:relative; width:34px; height:34px; }
.ss svg { position:absolute; inset:0; width:100%; height:100%; }
.ss .base { fill:color-mix(in srgb, var(--ink) 22%, transparent); }
.ss .oro { fill:var(--star); clip-path:inset(0 100% 0 0); }
.ssval { font-family:var(--sans); font-size:1.05rem; font-weight:700;
         color:var(--star); min-width:2.2em; }

.rev-form { max-width:var(--measure); margin-bottom:1.6rem; }
.rev-label { font-family:var(--sans); font-size:.86rem; color:var(--ink-soft); margin:0; }
.rev-form textarea { margin-bottom:.7rem; }

.rev-list { list-style:none; margin:0; padding:0; max-width:var(--measure); }
.rev-list li { padding:1rem 0; border-top:1px solid var(--line); }
.rev-list p { margin:0; color:var(--ink-soft); line-height:1.6; }

/* voto in primo piano sulla card, sotto il titolo */
.card-stars { display:block; margin:.3rem 0 .1rem; }
.card-stars .stars svg { width:15px; height:15px; }
@media (max-width:40rem) { .card-stars .stars svg { width:13px; height:13px; } }
/* e sulla card del mondo: in ALTO A DESTRA, in crema perche' sotto c'e' la foto */
.scard-stars { position:absolute; top:1.15rem; right:1.2rem; z-index:1; }
@media (min-width:48rem) { .scard-stars { top:1.6rem; right:1.7rem; } }
.scard-stars .stars svg { fill:color-mix(in srgb, #F2E9DC 40%, transparent); }
.scard-stars .stars svg.on, .scard-stars .stars svg.half { fill:#F2E9DC; }
.scard-stars .stars b, .scard-stars .stars i { color:#F2E9DC; }

/* mini notifica: una pillola che sale dal fondo e se ne va da sola */
.toast { position:fixed; left:50%; bottom:max(1.4rem, env(safe-area-inset-bottom));
         translate:-50% 16px; z-index:80; opacity:0;
         /* una riga sola, sempre: la pillola si allarga, il testo non si spezza */
         white-space:nowrap; max-width:calc(100vw - 1.6rem);
         overflow:hidden; text-overflow:ellipsis;
         background:var(--paper-2); color:var(--ink); border:1px solid var(--accent);
         border-radius:99px; padding:.65em 1.3em;
         font-family:var(--sans); font-size:.88rem; font-weight:600;
         box-shadow:0 12px 34px -14px var(--shadow); pointer-events:none;
         transition:opacity .3s ease, translate .35s cubic-bezier(.2,.8,.2,1); }
.toast.in { opacity:1; translate:-50% 0; }

/* il bottone del carrello: la spunta di approvazione */
#cartbtn { position:relative; }
#cartbtn .ck { display:inline-block; width:0; height:17px; vertical-align:-3px;
               margin-right:0; opacity:0; transition:width .25s cubic-bezier(.2,.8,.2,1),
               opacity .2s ease, margin .25s ease; }
#cartbtn.ok .ck { width:17px; opacity:1; margin-right:.45em;
                  animation: ckpop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes ckpop { 0% { scale:.3; rotate:-20deg } 60% { scale:1.25 } 100% { scale:1; rotate:0deg } }
#cartbtn.ok { background:var(--btn-bg); }
#cartbtn:disabled { opacity:.92; cursor:default; }
/* il cambio di mestiere del bottone e' un passaggio, non uno scatto */
#cartbtn { transition: background-color .55s cubic-bezier(.4,0,.2,1),
                       color .55s cubic-bezier(.4,0,.2,1),
                       border-color .55s cubic-bezier(.4,0,.2,1),
                       transform .12s ease, box-shadow .25s ease; }
#cartlbl { display:inline-block; transition: opacity .3s ease; }
#cartbtn.morph .ck { width:0; opacity:0; margin-right:0; }

/* la conferma del sito: velo scuro + pannellino che sale dal fondo */
.conf-back { position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end;
             justify-content:center; padding:1.2rem;
             padding-bottom:max(1.6rem, env(safe-area-inset-bottom));
             background:rgba(0,0,0,.55); opacity:0; transition:opacity .12s ease; }
.conf-back.in { opacity:1; }
.conf { width:min(100%, 24rem); background:var(--paper-2); color:var(--ink);
        border:1px solid var(--line-2); border-radius:18px; padding:1.3rem;
        box-shadow:0 24px 60px -24px var(--shadow);
        translate:0 24px; scale:.97;
        transition:translate .32s cubic-bezier(.2,.8,.2,1), scale .32s cubic-bezier(.2,.8,.2,1); }
.conf-back.in .conf { translate:0 0; scale:1; }
.conf p { margin:0 0 1.1rem; font-size:1.02rem; line-height:1.5; }
.conf-row { display:flex; gap:.7rem; }
.conf-row .btn { flex:1; }
@media (min-width:48rem) { .conf-back { align-items:center; } }

/* il carrello in testata: simbolo a grandezza piena, numerino APPESO
   all'angolo, fuori dal disegno: il carrello non si stringe per fargli posto */
#cart-head { position:relative; text-decoration:none; }
#cart-head svg { width:23px; height:23px; }
.cart-n { position:absolute; top:2px; right:-2px; min-width:14px; height:14px;
          display:flex; align-items:center; justify-content:center;
          font-size:.58rem; font-weight:700; line-height:1; padding:0 3px;
          border:1.5px solid var(--paper); }

/* svuota carrello: presente ma non protagonista */
.svuota { margin-bottom:1rem; }
.svuota:hover { border-color:var(--err-danger); color:var(--err-danger); }

/* lo stato "Lo possiedi": la spunta al posto del prezzo */
.owned-flag { display:inline-flex; align-items:center; gap:.4rem; color:var(--accent); }
.owned-flag svg { width:15px; height:15px; flex:none; }
/* sulla scheda: la spunta occupa la SUA riga, il bottone va a capo sotto.
   Prima erano inline e finivano affiancati storti. */
.price.big.owned-flag { display:flex; gap:.55rem; margin:1.2rem 0 1rem; }
.owned-flag.big svg, .price.big.owned-flag svg { width:22px; height:22px; }

/* ================= desktop =================
   Tutto dentro min-width: il telefono NON viene toccato.
   Il problema in foto: i mondi a piena larghezza su schermo grande diventano
   nastri 3:1 e le foto vengono decapitate. In griglia 2x2 le card tornano a
   proporzioni da fotografia. */
@media (min-width: 64rem) {
  .worlds { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
            gap:2.4rem 2.2rem; }
  .world-block { display:flex; flex-direction:column; }
  /* i fili separatori servivano in colonna singola: in griglia separa il vuoto */
  .world-block + .world-block { border-top:0; padding-top:0; }
  .worlds .scard { min-height:23rem; }
  .world-desc { font-size:.95rem; }
  .hero-compact { padding-block: calc(var(--sp-lg) * .75) calc(var(--sp-lg) * .5); }
  .hero-meta { margin-top:2.4rem; }
}

/* Schermi larghi: NIENTE cornice vuota, si INGRANDISCE tutto.
   Il sito e' costruito in rem: alzando la misura di base scala ogni cosa
   in proporzione (titoli, card, spazi). Le soglie dei media query si
   calcolano sempre a 16px, quindi nessun corto circuito. */
@media (min-width: 1700px) {
  html { font-size: 18px; }
  :root { --wrap: 76rem; }
  .worlds .scard { min-height:24rem; }
}
@media (min-width: 2200px) {
  html { font-size: 20px; }
  /* scala moderata e binario piu' stretto: i lati RESPIRANO, non si riempiono */
  :root { --wrap: 88rem; }
  .worlds .scard { min-height:26rem; }
  .grid { grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); }
  /* le icone della testata sono in px: le riallineo alla nuova scala */
  .themebtn svg { width:1.35rem; height:1.35rem; }
  #cart-head svg { width:1.45rem; height:1.45rem; }
  .themebtn { width:2.5rem; height:2.5rem; }
  .brand { height:3.6rem; }
  .brand img { height:4.2rem; width:auto; }
}

/* ============ colonna destra del hero: nuove uscite + autrice ============
   Solo desktop: il vuoto a destra del titolo diventa contenuto vero. */
.hero-lato { display:none; }
/* le righe "copertina piccola + titolo + sotto": servono alla colonna
   destra (nuove uscite, riprendi) e al riprendi del telefono. Globali. */
.nuove { list-style:none; margin:0; padding:0; display:flex;
         flex-direction:column; gap:.7rem; }
.nuove a { display:flex; gap:.85rem; align-items:center; text-decoration:none;
           color:var(--ink); padding:.55rem .7rem; border:1px solid var(--line);
           border-radius:10px; background:var(--paper-2);
           transition:border-color .15s, translate .25s cubic-bezier(.2,.8,.2,1); }
.nuove a:hover { border-color:var(--accent); translate:4px 0; }
.nuove img { width:2.6rem; aspect-ratio:2/3; object-fit:cover; border-radius:5px;
             border:1px solid var(--line-2); flex:none; }
.nu-txt { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.nu-txt b { font-family:var(--display); font-weight:600; font-size:.98rem;
            line-height:1.25; }
.nu-sotto { font-family:var(--sans); font-size:.75rem; color:var(--ink-faint); }
/* il RIPRENDI del telefono: sotto le copertine, al posto della colonna
   destra che li' non c'e'. Al massimo tre voci, per non spingere giu' i
   mondi. Su desktop non esiste: c'e' la colonna. */
.ripresa-mob { display:none; align-self:stretch; margin-top:.5rem; }
.ripresa-mob .ass-label { margin-bottom:.7rem; }
.ripresa-mob .nuove li:nth-child(n+4) { display:none; }
@media (max-width: 63.99rem) {
  .ripresa-mob:not([hidden]) { display:block; }
}
@media (min-width: 64rem) {
  .hero-due { display:grid; grid-template-columns:minmax(0,1fr) auto;
              align-items:start; gap:3rem; }
  /* i due occhielli ("Barbara Ross Books Club" e "Riprendi da dove eri")
     stanno sulla STESSA riga: le colonne partono entrambe dall'alto, e il
     titolo scende un po' sotto il suo occhiello */
  .home .hero-due > div:first-child > .eyebrow { margin-bottom:2.6rem; }
  .hero-lato { display:flex; flex-direction:column; gap:2rem;
               width:22rem; justify-self:end;
               margin-right:clamp(0rem, 3vw, 4rem); }
  /* con la BIOGRAFIA la colonna si centra in altezza sul titolo; col
     "Riprendi" resta in cima, con l'occhiello in riga con quello a sinistra */
  .hero-lato:not(.senza-bio) { align-self:center; }
  .hero-lato .eyebrow { margin:0 0 .7rem; }

  /* biografia: tutta, senza "Leggi tutto" e senza scorrere */
  .bio p { margin:0 0 .85em; font-size:.92rem; line-height:1.7; color:var(--ink-soft); }
  .bio p:last-child { margin-bottom:0; }

  /* col fianco pieno, il fondo del blocco respira meno */
  .hero-compact { padding-block: calc(var(--sp-lg) * .75) calc(var(--sp-lg) * .15); }
}

/* ================= il filo di copertine sotto il titolo =================
   Riempie lo spazio con CONTENUTO: le copertine gia' in catalogo, a ventaglio
   come libri appoggiati. Vale su telefono e desktop. */
.assaggio { margin-top:2rem; display:flex; flex-direction:column;
            align-items:flex-start; gap:1.1rem; }
/* la targhetta dice COSA sono: i titoli meglio recensiti */
.ass-label { font-family:var(--sans); font-size:.72rem; font-weight:600;
             letter-spacing:.14em; text-transform:uppercase;
             color:var(--ink-faint); margin:0 0 -.45rem; }
.ass-row { display:flex; }
/* box a proporzione fissa: senza, la riga flex stira ogni card all'altezza
   della piu' alta e le copertine orizzontali (i film) lasciano il vuoto sotto */
.ass { display:block; width:4.6rem; aspect-ratio:2/3; position:relative;
       flex:none; border-radius:6px; overflow:hidden;
       border:1px solid var(--line-2); box-shadow:0 10px 24px -14px var(--shadow);
       margin-left:-1.5rem; rotate:calc(-3deg + var(--i) * 1.1deg);
       transform-origin:bottom center;
       /* NIENTE animazione d'ingresso: con "both" le copertine restano
          invisibili finche' non parte, e il contenuto non deve mai dipendere
          da un'animazione per esistere. Si muovono solo al passaggio. */
       transition:rotate .35s cubic-bezier(.2,.8,.2,1),
                  translate .35s cubic-bezier(.2,.8,.2,1); }
.ass:first-child { margin-left:0; }
.ass img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (hover:hover) {
  .ass-row { perspective: 700px; }
  .ass:hover { rotate:0deg; translate:0 -12px; scale:1.14;
               position:relative; z-index:2;
               /* il libro si stacca dal piano: si inclina verso di te e
                  proietta un'ombra profonda a due strati */
               transform: rotateX(7deg) rotateY(-7deg);
               box-shadow: 0 26px 44px -14px rgba(0,0,0,.85),
                           0 10px 16px -8px rgba(0,0,0,.6); }
  .ass { transition:rotate .35s cubic-bezier(.2,.8,.2,1),
                    translate .35s cubic-bezier(.2,.8,.2,1),
                    scale .35s cubic-bezier(.2,.8,.2,1),
                    transform .35s cubic-bezier(.2,.8,.2,1),
                    box-shadow .35s ease; }
}
@media (min-width: 64rem) { .ass { width:5.4rem; margin-left:-1.7rem; } }

.ass-giu { display:inline-flex; align-items:center; gap:.4rem;
           font-family:var(--sans); font-size:.78rem; font-weight:600;
           letter-spacing:.1em; text-transform:uppercase;
           color:var(--ink-faint); text-decoration:none; margin-top:.2rem; }
.ass-giu:hover { color:var(--accent); }
.ass-giu svg { width:16px; height:16px;
               animation: giuGiu 2.4s ease-in-out infinite; }
@keyframes giuGiu { 0%,100% { translate:0 0 } 50% { translate:0 4px } }

/* ================= il palcoscenico (Drama) =================
   Il quinto mondo non entra nella griglia: e' una fascia larga come una
   scena, col sipario di velluto aperto ai lati, la mantovana bordata d'oro
   in alto e una luce di scena che cade al centro, proprio sul titolo. In
   fondo a questo file apposta: vince sulle altezze della griglia dei mondi. */
.worlds .spalco { min-height:0; aspect-ratio:16/8; align-items:center; justify-content:center;
  text-align:center; padding:2.6rem 16% 1.6rem;
  background: radial-gradient(ellipse 44% 100% at 50% 0%,
      color-mix(in srgb, #E4CDA6 16%, transparent), transparent 74%), #0E0C0A; }
@media (min-width: 64rem) {
  .world-palco { grid-column: 1 / -1; }
  .worlds .spalco { aspect-ratio:21/8; min-height:0; }
}
/* la mantovana: una fascia di velluto e sotto le onde, ognuna col suo
   filo d'oro. Sta davanti alle quinte, come in un teatro vero */
.spalco::before {
  content:""; position:absolute; left:0; right:0; top:0; height:1.95rem; z-index:3;
  pointer-events:none;
  background:
    radial-gradient(circle 1.35rem at 50% 0, var(--hf1) 0 1.05rem, var(--hc) 1.05rem 1.2rem,
                    transparent 1.22rem) 0 .5rem / 2.7rem 1.45rem repeat-x,
    linear-gradient(var(--hf2), var(--hf2)) 0 0 / 100% .6rem no-repeat;
}
/* le quinte: due drappi con le pieghe, raccolti a meta' altezza da un
   cordone d'oro. Il profilo curvo e' un clip-path in percentuale, cosi'
   segue la fascia a ogni larghezza */
.spalco .sipario { position:absolute; top:0; bottom:0; width:15%; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, #0E0C0A 8%, transparent),
                    color-mix(in srgb, #0E0C0A 48%, transparent)),
    repeating-linear-gradient(90deg, var(--hf2) 0, var(--hf1) .55rem, var(--hf2) 1.1rem); }
.spalco .sipario.sx { left:0;
  clip-path: polygon(0 0, 100% 0, 96% 14%, 84% 32%, 62% 50%, 38% 60%, 46% 70%, 60% 86%, 70% 100%, 0 100%); }
.spalco .sipario.dx { right:0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 40% 86%, 54% 70%, 62% 60%, 38% 50%, 16% 32%, 4% 14%); }
.spalco .sipario::after { content:""; position:absolute; top:57%; width:62%; height:.3rem;
  border-radius:99px; background:var(--hc); }
.spalco .sipario.sx::after { left:2%; rotate:-14deg; }
.spalco .sipario.dx::after { right:2%; rotate:14deg; }
/* il titolo sta al centro della scena, sopra quinte e mantovana */
.spalco .scard-count, .spalco .scard-name, .spalco .scard-go,
.spalco .scard-stars { position:relative; z-index:4; }
.spalco .scard-count { align-self:center; }
.spalco .scard-name { max-width:none; }
.spalco .noimg { inset:auto auto 1rem 50%; translate:-50% 0; z-index:4; }
/* con la foto il velo non scende dall'alto: scurisce il centro, dove sta il
   titolo, e lascia respirare i bordi */
.spalco.has-img::after { background: radial-gradient(ellipse 60% 72% at 50% 52%,
    color-mix(in srgb, #0E0C0A 64%, transparent), color-mix(in srgb, #0E0C0A 22%, transparent) 82%); }
/* la quinta carta veleggia col suo tempo, come le altre */
.world-block:nth-child(5) .scard { animation-duration: 13s; animation-delay: -5s; }
/* la stessa mantovana in cima alla testata del mondo e delle sue serie */
.saga-hero.s-drama::before {
  content:""; position:absolute; left:0; right:0; top:0; height:1.95rem; z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle 1.35rem at 50% 0, var(--hf1) 0 1.05rem, var(--hc) 1.05rem 1.2rem,
                    transparent 1.22rem) 0 .5rem / 2.7rem 1.45rem repeat-x,
    linear-gradient(var(--hf2), var(--hf2)) 0 0 / 100% .6rem no-repeat;
}
.saga-hero.s-drama { padding-top: calc(var(--sp-lg) * .55 + 1.2rem); }

/* ================= la lettura: un LIBRO VERO =================
   Carta chiara anche col tema scuro (un libro e' carta), doppia pagina
   aperta su desktop, pagina singola sul telefono. Niente scorrimento:
   si SFOGLIA, e la pagina gira in tre dimensioni attorno al dorso.
   Il testo non si seleziona e non si stampa; lo screenshot lo scoraggia
   il timbro col nome dell'acquirente. */
/* il deposito sborda apposta oltre il libro: la sezione lo taglia al bordo
   dello schermo senza creare scorrimento orizzontale */
.lettura.section { padding-block: .9rem .9rem; overflow-x:clip; position:relative; }

/* "vai a pagina": bottone in testata e pannellino sospeso */
.lcap-zona { display:flex; align-items:center; gap:.7rem; justify-content:flex-end; }
.lbtns { display:flex; align-items:center; gap:.55rem; }
/* da pc i comandi sono SIMBOLI, come al telefono: quattro quadratini in
   riga, stesso ordine del 2x2 mobile (zoom, notte, pagina, segnalibri) */
.lbtns .vaipag { width:2.3rem; height:2.3rem; padding:0; display:flex;
  align-items:center; justify-content:center; border-radius:12px; }
.lbtns .vaipag .btxt { display:none; }
.lbtns .vaipag .ico { display:block; width:1.15rem; height:1.15rem; }
.lbtns #zoombtn { order:1; }
.lbtns #nottebtn { order:2; }
.lbtns #vaipag { order:3; }
.lbtns #segnabtn { order:4; }
/* margine stretto da pc (modalita' MINI): i quattro bottoni del telefono,
   in verticale nel poco margine destro, a mezza altezza; i pannelli si
   aprono come MODALI veri sopra il velo, identici al telefono */
.pannelli-mini .lbtns { position:fixed; right:.6rem; top:50%;
  translate:0 -50%; display:flex; flex-direction:column; gap:.55rem; z-index:30; }
.pannelli-mini .lbtns .vaipag { width:2.5rem; height:2.5rem; padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:12px; }
.pannelli-mini .lbtns .vaipag .ico { display:block; width:1.2rem; height:1.2rem; }
.pannelli-mini .lbtns .vaipag .btxt { display:none; }
/* il modal della modalita' mini: SOPRA il velo (z 40), come al telefono */
.pannelli-mini .vaipanel { position:fixed; left:50%; top:18%; translate:-50% 0;
  z-index:41; width:min(86vw, 22rem); max-width:none;
  padding:1.25rem 1.2rem; border-radius:18px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  animation: modale-su .32s cubic-bezier(.2,.9,.3,1.12); }
.vaipag { font-family:var(--sans); font-size:.66rem; font-weight:600;
          letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
          background:none; border:1px solid var(--line-2); border-radius:999px;
          padding:.35em .8em; cursor:pointer; white-space:nowrap; }
.vaipag .ico { display:none; }
@media (hover:hover) { .vaipag:hover { color:var(--accent); border-color:var(--accent); } }
/* z-index 41: SEMPRE sopra il velo (z 40), a qualunque larghezza */
.vaipanel { position:absolute; left:50%; translate:-50% 0; top:2.7rem; z-index:41;
            display:flex; flex-direction:column; align-items:stretch; gap:.7rem;
            width:max-content; max-width:calc(100vw - 1.5rem);
            background:var(--paper-2); border:1px solid var(--line-2);
            border-radius:16px; padding:.9rem 1rem;
            box-shadow:0 18px 44px -20px var(--shadow); }
/* il salto: numero GRANDE al centro, il totale accanto in piccolo */
.vaigrande { display:flex; align-items:baseline; justify-content:center; gap:.45rem; }
.vaigrande input { width:4.8rem; font-size:1.45rem; }
.vaigrande .vaitot { font-size:.9rem; }
.vaipanel input { width:3.4rem; font-size:1rem; padding:.4em .3em; text-align:center;
                  background:var(--paper); color:var(--ink); font-family:var(--sans);
                  border:1px solid var(--line-2); border-radius:9px;
                  appearance:textfield; -moz-appearance:textfield; }
.vaipanel input::-webkit-outer-spin-button,
.vaipanel input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.vaipanel .btn.small { padding:.5em 1.1em; }
.vaitot { font-family:var(--sans); font-size:.8rem; color:var(--ink-faint);
          white-space:nowrap; }

/* il titoletto dei pannelli */
.paneltit { margin:0; font-family:var(--sans); font-size:.66rem; font-weight:600;
            letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }

/* schermi larghi: i pannelli ABITANO i margini, sempre aperti e CENTRATI
   sull'altezza del libro. SEGNALIBRI a sinistra in colonna, VAI A PAGINA
   e ZOOM a destra. Niente bottoni. In coppia col copione (1700px). */
@media (min-width: 1700px) {
  .pannelli-fissi .lbtns { display:none; }
  .pannelli-fissi .vaipanel { translate:0; max-width:none; width:14rem;
    left:auto; right:1.6rem; padding:1rem 1.05rem; gap:.85rem;
    border-radius:0; box-shadow:none; }
  /* UN'UNICA COLONNA a destra: salto + zoom + notte + segnalibri,
     attaccati senza spazi. Il bordo di chi sta sopra fa da filetto:
     i successivi arrivano senza cima. Gli angoli tondi solo agli
     estremi, cosi' la pila legge come una carta sola. */
  .pannelli-fissi #vaipanel { border-radius:18px 18px 0 0; }
  .pannelli-fissi .zoompanel, .pannelli-fissi .nottepanel,
  .pannelli-fissi .segnapanel { border-top:0; }
  .pannelli-fissi .segnapanel { border-radius:0 0 18px 18px; }
  .pannelli-fissi .segnacol { min-width:0; }
  .pannelli-fissi .segnalista { max-height:48vh; }
  .pannelli-fissi .segnavai { white-space:normal; }
  .pannelli-fissi #segnametti, .pannelli-fissi #vaiok { width:100%; }
}
/* stato acceso dei comandi (la notte attiva) */
.vaipag.attivo, #nottetog.attivo { border-color:var(--accent); color:var(--accent); }
/* niente anello di fuoco che resta appiccicato dopo il TOCCO: l'evidenza
   di fuoco resta solo per chi naviga da tastiera (focus-visible) */
.lettura button, .lettura .lcrumb { -webkit-tap-highlight-color:transparent; }
.lettura button:focus:not(:focus-visible),
.lettura .lcrumb:focus:not(:focus-visible) { outline:none; }

/* ============ la NOTTE del libro: carta scura, inchiostro chiaro ==========
   Vale solo dentro il lettore. Gli EPUB cambiano inchiostro; le pagine PDF,
   che sono immagini, si invertono fotograficamente. */
/* il passaggio giorno/notte e' UNA dissolvenza sola: stessa durata e
   stessa curva per carta, inchiostro, folio, ombra e (nel PDF) immagini,
   cosi' nessun pezzo della pagina si fa notare da solo. La classe
   .transita sale solo per la durata del cambio: le girate non c'entrano */
.libro.transita .lpag, .libro.transita .deposito {
  transition: background-color .5s ease, border-color .5s ease; }
.libro.transita .pcont, .libro.transita .pcont h1, .libro.transita .pcont h2,
.libro.transita .pcont h3, .libro.transita .pcont h4, .libro.transita .pcont a,
.libro.transita .porn, .libro.transita .pfregio, .libro.transita .pfine {
  transition: color .5s ease; }
.libro.transita .ldorso::before, .libro.transita .ldorso::after {
  transition: opacity .5s ease; }
.libro.notte .lpag { background:#171310; border-color:#342C23; }
.libro.notte .pcont, .libro.notte .pcont h1, .libro.notte .pcont h2,
.libro.notte .pcont h3, .libro.notte .pcont h4 { color:#F2E9DC; }
.libro.notte .pcont a { color:#E4CDA6; }
.libro.notte .porn { color:#C0B2A1; }
.libro.notte .prima-sez .pcont > p:first-child::first-letter { color:#E4CDA6; }
.libro.notte .pfregio { color:#E4CDA6; }
.libro.notte .pfine { color:#C0B2A1; }
.libro.notte .deposito { background:#171310; border-color:#342C23; }
/* di notte si spegne la veste giorno e si accende quella notte: le due
   stanno gia' sovrapposte dentro .ldorso, il cambio e' solo opacita' */
.libro.notte .ldorso::before { opacity:0; }
.libro.notte .ldorso::after { opacity:1; }

.zoomrow { display:flex; align-items:center; gap:.45rem; }
.zoomrow .btn { flex:1; }
/* il fattore del PDF: tre MATTONELLE con icona e nome, niente sigle */
.fattorerow { display:flex; gap:.5rem; }
.fattorerow .fatt { flex:1; display:flex; flex-direction:column; align-items:center;
  gap:.4rem; padding:.65rem .2rem .55rem; cursor:pointer;
  background:var(--paper); border:1px solid var(--line-2); border-radius:12px;
  color:var(--ink-soft); font-family:var(--sans); font-size:.6rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease; }
.fattorerow .ico { width:1.5rem; height:1.5rem; display:block; }
.fattorerow .fatt.attivo { border-color:var(--accent); color:var(--accent);
  background:var(--paper-3); }
.fattorerow .fatt:disabled { opacity:.45; cursor:default; pointer-events:none; }
@media (hover:hover) {
  .fattorerow .fatt:hover:not(:disabled) { border-color:var(--accent); }
}
/* mentre il server compone la mappa, la mattonella premuta respira */
.fattorerow .fatt.attesa { animation: fatt-respiro .9s ease-in-out infinite; }
@keyframes fatt-respiro { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
/* la carta della NOTTE: un interruttore solo, con la sua luna */
.notte-tog { display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; padding:.7em .8em; cursor:pointer;
  background:var(--paper); border:1px solid var(--line-2); border-radius:12px;
  color:var(--ink-soft); font-family:var(--sans); font-size:.78rem; font-weight:600;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease; }
.notte-tog .ico { width:1.05rem; height:1.05rem; }
.notte-tog.attivo { background:var(--paper-3); }
@media (hover:hover) { .notte-tog:hover { border-color:var(--accent); } }
/* il PUNTINO del segnalibro: resta esattamente dove hai toccato, un
   bottoncino di stoffa cucito sulla carta (il colore lo mette il segno) */
.segnapunto { position:absolute; width:12px; height:12px; border-radius:50%;
  translate:-50% -50%; z-index:3; pointer-events:none;
  border:2px solid #FBF7F0; box-shadow:0 1px 5px var(--shadow); }
/* lo stato vuoto dei segnalibri, sottovoce */
.segnavuoto { font-family:var(--sans); font-size:.8rem; color:var(--ink-faint);
  font-style:italic; text-align:center; padding:.35rem 0 .15rem; }
/* col fattore in scena, le percentuali del PDF vanno a riposo: vale
   dappertutto, telefono compreso */
.zoompanel.con-fattore .zoomrow { display:none; }
.zoomval { flex:1; background:none; border:0; cursor:pointer;
           font-family:var(--sans); font-size:.85rem; font-weight:600;
           color:var(--ink-soft); text-align:center; padding:.3rem 0; }
@media (hover:hover) { .zoomval:hover { color:var(--accent); } }
/* sul libro chiuso lo zoom riposa */
.zoomrow .btn:disabled, .zoomval:disabled { opacity:.35; cursor:default; }
.zoomval:disabled:hover { color:var(--ink-soft); }

/* ---- i segnalibri: pannellino, nastro sulla pagina, modalita' tocco ---- */
.segnapanel { flex-direction:column; align-items:stretch; }
.segnacol { display:flex; flex-direction:column; gap:.6rem; min-width:15rem; }
.segnalista { list-style:none; margin:0; padding:0; display:flex;
              flex-direction:column; gap:.15rem; max-height:16rem; overflow-y:auto; }
.segnalista li { display:flex; align-items:center; gap:.3rem; }
.segnavuoto { font-family:var(--sans); font-size:.8rem; color:var(--ink-faint);
              padding:.2rem .2rem; }
.segnavai { flex:1; display:flex; gap:.55rem; align-items:flex-start;
            text-align:left; background:none; border:0; cursor:pointer;
            font-family:var(--sans); font-size:.8rem; color:var(--ink-soft);
            padding:.4rem .45rem; border-radius:8px; min-width:0;
            line-height:1.4; }
.segnavai b { font-weight:600; }
@media (hover:hover) { .segnavai:hover { background:var(--paper-3); } }
.segnadel { background:none; border:0; cursor:pointer; color:var(--ink-faint);
            font-size:1.05rem; line-height:1; padding:.3rem .45rem; border-radius:8px; }
@media (hover:hover) { .segnadel:hover { color:var(--err-danger); } }
/* il nastro di stoffa sul bordo alto della pagina segnata: il colore lo
   mette il copione, uno diverso per ogni segno. La piega in basso e' ombra. */
.segnaribbon { position:absolute; top:-3px; width:19px; height:46px;
               clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
               box-shadow:inset 0 -14px 12px -8px rgba(0,0,0,.28);
               z-index:3; pointer-events:none; }
/* il nastrino in miniatura accanto alla voce in lista */
.segnachip { flex:none; width:11px; height:19px; margin-top:.15rem;
             clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
.segnatesto { min-width:0; }
/* mentre scegli il punto: la carta invita a toccare */
.libro.modo-segna { cursor:crosshair; }
.segnahint { position:fixed; left:50%; translate:-50% 0; bottom:4.6rem; z-index:9;
             margin:0; font-family:var(--sans); font-size:.8rem; font-weight:600;
             background:var(--badge-bg); color:var(--badge-ink);
             border-radius:999px; padding:.55em 1.1em;
             box-shadow:0 12px 30px -12px var(--shadow); }

/* la sfogliata del "vai a pagina": fogli in volo insieme, curva morbida.
   Le durate le mette il copione (rotazione e dissolvenza), diverse per foglio. */
.girante.fruscio { transition-property:transform, opacity;
                   transition-timing-function:cubic-bezier(.5,.04,.3,.96), ease-out; }

/* il proiettore: il player di Bunny dentro la scheda della puntata */
.player-box { margin:1.2rem 0 .4rem; aspect-ratio:16/9; border-radius:12px;
              overflow:hidden; border:1px solid var(--line-2); background:#0E0C0A;
              position:relative; }
/* ============ la scheda EPISODIO: una sala, non un volantino ============ */
.cinema-scheda { max-width:62rem; margin:0 auto; display:flex;
                 flex-direction:column; gap:1.05rem; }
.cinema-scheda .player-box { margin:0; }
.cin-testa h1 { margin:.12em 0 0; }
.cin-testa .eyebrow a { color:inherit; }
.cin-riga { display:flex; flex-wrap:wrap; align-items:center;
            gap:.4rem 1.2rem; margin:.4rem 0 0; font-family:var(--serif);
            font-size:1.02rem; color:var(--ink-soft); }
.cin-possiedi { display:inline-flex; align-items:center; gap:.4rem;
                font-family:var(--sans); font-size:.7rem; font-weight:600;
                letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.cin-possiedi svg { width:.95rem; height:.95rem; }
/* il POSTER e' il proiettore: la copertina sotto, una velatura sopra
   perche' il pulsante Guarda ci si legga */
.player-box.con-poster { background-size:cover; background-position:center; }
.player-box.con-poster::before { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.6)); }
.player-avvio { position:relative; z-index:1; }
.player-box.con-poster .pa-testo { color:#F2E9DC; }
.cin-nota { position:relative; z-index:1; display:flex; align-items:center;
  justify-content:center; height:100%; margin:0; font-family:var(--sans);
  font-size:.9rem; color:#F2E9DC; }
/* l'etichetta FUMETTO: bollino d'oro come uno sconto, ma da collezione.
   L'oro e' quello di palette (#E4C88E), inchiostro scuro sopra. */
.tag-fumetto { position:absolute; top:.7rem; left:0; z-index:2;
  padding:.34em .85em .32em .7em; background:#E4C88E; color:#17120D;
  font-family:var(--sans); font-size:.64rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  border-radius:0 6px 6px 0; border-left:3px solid #6E4F1D;
  box-shadow:0 3px 10px -3px rgba(0,0,0,.45); }
/* la BARRA DI VISIONE della puntata (stile sala): quanto ne hai visto */
.pu-track { display:block; height:4px; max-width:26rem; margin-top:.5rem;
            border-radius:99px; background:var(--line-2); overflow:hidden; }
.pu-track i { display:block; height:100%; border-radius:99px;
              background:var(--accent); }
/* il PLAY al posto della scritta: la riga e' gia' tutta un link */
.pu-play { display:flex; align-items:center; justify-content:center;
           width:2.7rem; height:2.7rem; padding:0; border-radius:50%;
           border:1px solid var(--line-2); background:var(--paper-2);
           color:var(--accent); }
.pu-play svg { width:1.05rem; height:1.05rem; margin-left:.1rem; }
@media (hover:hover) {
  .puntata:hover .pu-play { border-color:var(--accent);
    background:var(--paper-3); }
}
/* il cartello di FINE PUNTATA: cala sul proiettore quando il video
   finisce e propone la prossima (o di sbloccarla) */
.cin-proiettore { position:relative; }
.cin-next { position:absolute; inset:0; z-index:2; display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:1rem; text-align:center; border-radius:12px;
  background:rgba(0,0,0,.6); }
.cn-occhiello { margin:0; font-family:var(--sans); font-size:.68rem;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#C0B2A1; }
.cn-titolo { margin:0; font-family:var(--display); font-size:1.35rem;
  color:#F2E9DC; }
.cin-next .btn { margin-top:.35rem; }
.cn-chiudi { position:absolute; top:.45rem; right:.75rem; background:none;
  border:0; color:#F2E9DC; font-size:1.5rem; line-height:1; cursor:pointer;
  padding:.2rem; }
.cin-compra { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }
.cin-compra .price { margin:0; }
.cinema-scheda .lede { margin:0; }
.cinema-scheda .prose { max-width:48rem; }
.player-box iframe { width:100%; height:100%; border:0; display:block; }
/* il pulsante Guarda: la sala buia prima che parta il proiettore */
.player-avvio { width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.75rem; cursor:pointer;
  background:transparent; border:0; color:var(--ink); }
.pa-cerchio { width:4.2rem; height:4.2rem; border-radius:50%; display:flex;
  align-items:center; justify-content:center; border:1px solid var(--line-2);
  background:var(--paper-2); color:var(--accent);
  transition:transform .18s ease, border-color .18s ease; }
.pa-cerchio svg { width:1.9rem; height:1.9rem; }
.pa-testo { font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
@media (hover:hover) {
  .player-avvio:hover .pa-cerchio { transform:scale(1.08); border-color:var(--accent); }
}

/* ================= le serie: i mini mondi del cinema ================= */
/* nella scheda della puntata: il filo che risale alla serie */
.serie-riga { margin:.1rem 0 .6rem; font-family:var(--sans); font-size:.85rem;
              color:var(--ink-faint); }
.serie-riga a { color:var(--accent-ink); text-decoration:none; }
.serie-riga a:hover { text-decoration:underline; }
/* le puntate: una scaletta numerata, righe larghe */
.puntate { list-style:none; margin:1.6rem 0 0; padding:0; display:flex;
           flex-direction:column; gap:.7rem; }
.puntata { display:flex; align-items:center; gap:1rem; padding:.7rem .9rem;
           border:1px solid var(--line); border-radius:12px;
           background:var(--paper-2); text-decoration:none; color:var(--ink);
           transition:border-color .15s, translate .25s cubic-bezier(.2,.8,.2,1); }
.puntata:hover { border-color:var(--hx, var(--accent)); translate:4px 0; }
.pu-num { font-family:var(--display); font-size:1.5rem; font-weight:600;
          color:var(--hx, var(--accent)); min-width:2rem; text-align:center;
          flex:none; }
.pu-cover { width:6.4rem; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
            background:var(--paper-3); flex:none; position:relative; }
.pu-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pu-info { display:flex; flex-direction:column; gap:.25rem; min-width:0; flex:1; }
.pu-info b { font-family:var(--display); font-size:1.05rem; line-height:1.3;
             font-weight:600; }
.pu-stato { font-family:var(--sans); font-size:.85rem; color:var(--accent-ink);
            white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem;
            flex:none; }
.pu-stato.ok svg { width:16px; height:16px; }
@media (max-width: 40rem) {
  .pu-cover { width:4.6rem; }
  .puntata { gap:.7rem; padding:.6rem .7rem; }
}
.lettura-testa { display:grid; grid-template-columns:1fr auto 1fr;
                 align-items:baseline; gap:1rem; margin:0 auto .9rem;
                 max-width:64rem; padding:0 1rem .6rem;
                 border-bottom:1px solid var(--line); }
/* l'uscita e' SOLO la freccia, ovunque: la parola sta nell'aria-label */
.lcrumb { font-family:var(--sans); font-size:1.2rem; line-height:1;
          text-decoration:none; color:var(--ink-faint); }
.lcrumb-t { display:none; }
@media (hover:hover) { .lcrumb:hover { color:var(--accent); } }
.ltit { text-align:center; font-family:var(--display); font-size:1.02rem;
        font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden;
        text-overflow:ellipsis; min-width:0; }
.lcap { font-family:var(--sans); font-size:.72rem; font-weight:600;
        letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
        text-align:right; }

/* la scena della lettura */
.libro-scena { display:flex; justify-content:center;
               user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
/* il punto di fuga sta sul libro stesso: vale per i fogli che girano, senza
   tenere aperto un contesto 3D permanente (che sporca il compositor) */
/* NIENTE filtro d'ombra sul libro: un filtro sull'antenato si ricalcola a
   OGNI fotogramma della girata, ed era il lag. L'ombra la portano le
   pagine stesse, che costa zero. */
.libro { position:relative; perspective:2400px; cursor:pointer;
         /* quando il libro si apre dalla copertina, scivola di mezza pagina:
            stessa curva e stessa durata della girata, un solo movimento */
         transition: transform .95s cubic-bezier(.36,.1,.26,1); }
/* QUARTO su doppia: i due fogli portano la STESSA meta' di pagina,
   affiancata, e le righe scavalcano il centro: li' la piega non esiste.
   Libro SPIANATO: niente gola d'ombra a sporcare le parole. */
.libro.spianato .ldorso { display:none; }
.lpag { box-shadow: 0 24px 32px -16px rgba(0,0,0,.45); }
:root[data-theme="light"] .lpag { box-shadow: 0 20px 28px -16px rgba(30,23,18,.28); }
/* il foglio che gira viene promosso a strato prima di partire */
.girante { will-change: transform; }
/* la pagina PDF: l'immagine E' la pagina, a filo carta */
.pcont .ppag { position:absolute; inset:0; width:100%; height:100%;
               object-fit:contain; display:block; user-select:none;
               -webkit-user-drag:none; }

/* la copertina: solo l'immagine del libro, a tutta carta */
.lcop { background:#171310; }
.lcop img { position:absolute; inset:0; width:100%; height:100%;
            object-fit:cover; display:block; }

/* la carta: chiara SEMPRE, coi colori del tema chiaro della palette */
.lpag { position:absolute; top:0; left:0; background:#FBF7F0; color:#1E1712;
        border:1px solid #DDD0BA; overflow:hidden; }
.lpag.sx   { border-radius:8px 0 0 8px; border-right:0; }
.lpag.dx   { border-radius:0 8px 8px 0; border-left:0; }
.lpag.sola { border-radius:8px; }
.misura-nascosta { visibility:hidden; pointer-events:none; }

/* il dorso: l'ombra della piega tra le due pagine. Sta SOPRA i fogli,
   anche quelli che girano: nella realta' la piega e' sulle pagine, e cosi'
   durante la girata non sparisce e non lampeggia. Piu' larga e morbida,
   con la riga di piega netta al centro e un velo di luce ai lati, come
   la curvatura della carta vera. */
.ldorso { position:absolute; top:0; bottom:0; left:50%; width:110px;
          transform:translateX(-50%); pointer-events:none; z-index:25; }
/* la piega ha DUE VESTI sovrapposte: giorno sotto, notte sopra (spenta).
   Al cambio si dissolvono l'una nell'altra insieme a tutto il resto,
   invece di scambiarsi di colpo. Di notte: solo ombra, niente luci di
   curvatura, che sulla carta scura sembrano un neon. */
.ldorso::before, .ldorso::after { content:""; position:absolute; inset:0; }
.ldorso::before { background:
            linear-gradient(90deg, rgba(228,205,166,0) 30%,
              rgba(228,205,166,.16) 42%, rgba(228,205,166,0) 47%),
            linear-gradient(90deg, rgba(228,205,166,0) 53%,
              rgba(228,205,166,.16) 58%, rgba(228,205,166,0) 70%),
            linear-gradient(90deg,
              rgba(30,23,18,0) 0%, rgba(30,23,18,.07) 28%,
              rgba(30,23,18,.2) 46%, rgba(30,23,18,.32) 50%,
              rgba(30,23,18,.2) 54%, rgba(30,23,18,.07) 72%,
              rgba(30,23,18,0) 100%); }
.ldorso::after { opacity:0; background:
            linear-gradient(90deg,
              rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 28%,
              rgba(0,0,0,.42) 46%, rgba(0,0,0,.6) 50%,
              rgba(0,0,0,.42) 54%, rgba(0,0,0,.16) 72%,
              rgba(0,0,0,0) 100%); }
/* la MEZZA piega della pagina singola: la giunta sta sul bordo sinistro,
   a cavallo tra il deposito e la pagina. Nasce TRASPARENTE a sinistra e
   sfuma da entrambe le parti: niente spigoli da overlay. */
.ldorso-solo { left:-44px; width:104px; transform:none; }
.ldorso-solo::before { background:
    linear-gradient(90deg, rgba(228,205,166,0) 52%,
      rgba(228,205,166,.14) 62%, rgba(228,205,166,0) 74%),
    linear-gradient(90deg,
      rgba(30,23,18,0) 0%, rgba(30,23,18,.1) 22%,
      rgba(30,23,18,.28) 42%, rgba(30,23,18,.14) 58%,
      rgba(30,23,18,.05) 78%, rgba(30,23,18,0) 100%); }
.ldorso-solo::after { background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 22%,
      rgba(0,0,0,.5) 42%, rgba(0,0,0,.26) 58%,
      rgba(0,0,0,.1) 78%, rgba(0,0,0,0) 100%); }

/* il folio: il numero di pagina in basso al centro, come in stampa */
.porn { position:absolute; bottom:.4rem; left:50%; transform:translateX(-50%);
        font-family:var(--serif); font-size:.74rem; color:#786552; opacity:.9; }

/* il testo in pagina: romanzo stampato. Giustificato, sillabato, rientri
   di prima riga e NIENTE aria tra i paragrafi. */
.pcont { font-family:var(--serif); font-size:calc(1.02rem * var(--lfs, 1)); line-height:1.62;
         color:#1E1712; text-align:justify; hyphens:auto; -webkit-hyphens:auto;
         overflow-wrap:break-word; orphans:2; widows:2; }
.pcont p { margin:0; text-indent:1.5em; }
.pcont p:first-child, .pcont h1 + p, .pcont h2 + p,
.pcont h3 + p, .pcont h4 + p { text-indent:0; }
.pcont h1, .pcont h2, .pcont h3, .pcont h4 { font-family:var(--display);
        color:#1E1712; line-height:1.25; text-align:center;
        margin:1.6em 0 .9em; text-indent:0; }
.pcont img { max-width:100%; height:auto; }
.pcont a { color:#885A34; }
/* il capolettera dove il libro comincia davvero */
.prima-sez .pcont > p:first-child::first-letter {
  font-family:var(--display); font-weight:600; color:#885A34;
  font-size:3em; float:left; line-height:.8; padding:.06em .12em 0 0; }
.pfregio { text-align:center; color:#885A34; font-size:1.15rem;
           margin:2.2em 0 0; text-indent:0 !important; }
.pfine { text-align:center; font-family:var(--sans); font-size:.75rem;
         font-weight:600; letter-spacing:.34em; text-transform:uppercase;
         color:#786552; margin:.8em 0 0; text-indent:0 !important; }

/* -------- il VOLTAPAGINA: il foglio che gira attorno al dorso -------- */
.girante { position:absolute; top:0; z-index:5; transform-style:preserve-3d;
           transform-origin:left center;
           transition:transform .95s cubic-bezier(.36,.1,.26,1); }
.faccia { position:absolute; top:0; backface-visibility:hidden;
          -webkit-backface-visibility:hidden; }
.faccia.retro { transform:rotateY(180deg); }
/* NIENTE ombra di piega sui singoli fogli: la mette il dorso, che sta sopra
   a tutto. Se l'avessero anche i fogli, si sommerebbe alla sua quando il
   foglio e' disteso e la giunta cambierebbe tono a inizio e fine girata. */
.girante.da-sinistra { transform:rotateY(-180deg); }
.girante.gira  { transform:rotateY(-180deg); }
.girante.torna { transform:rotateY(0deg); }

.ltimbro { position:fixed; right:.9rem; bottom:.6rem; z-index:5; margin:0;
           font-family:var(--sans); font-size:.66rem; letter-spacing:.04em;
           color:var(--ink-faint); opacity:.7; pointer-events:none; }

.lpag { z-index:1; }
/* IL DEPOSITO: il foglio sfogliato, rimasto dove l'animazione lo lascia.
   Identico al retro del foglio che gira: stessa carta, stesso bordo, stessa
   ombra sulla piega. La parte che non ci sta nello schermo viene tagliata
   dalla sezione, e va bene cosi': quel che si vede E' la spalla. */
.deposito { position:absolute; top:0; z-index:2; background:#FBF7F0;
  border:1px solid #DDD0BA; border-radius:8px; }
/* le frecce sotto il libro: il comando principale sul telefono */
.lfrecce { display:none; }
.fbtn { width:46px; height:46px; border-radius:999px; font-size:1.15rem;
        background:var(--paper-2); color:var(--ink); border:1px solid var(--line-2);
        cursor:pointer; }
.fbtn:disabled { opacity:.3; cursor:default; }

/* telefono (sotto la soglia della doppia pagina, in coppia col copione):
   via la testata del sito, il fondo e il timbro. Restano SOLO l'uscita,
   l'avanzamento e il libro: ogni pixel va alla carta. */
/* in LETTURA il sito si fa da parte: niente fondo ne' barra admin. La
   testata resta su PC (lo spazio c'e') e sparisce sul telefono. */
.modo-lettura .site-foot, .modo-lettura .adminbar { display:none; }
@media (max-width: 999px) {
  .modo-lettura .site-head { display:none; }
}
/* e NIENTE scorrimento: il libro e' tagliato sullo schermo, e il foglio che
   gira in prospettiva sporge per un attimo: senza questa regola il browser
   fa lampeggiare la barra di scorrimento e l'impaginato salta */
body.modo-lettura { overflow:hidden; }
.modo-lettura .lettura.section { padding-block:.6rem .6rem; }

@media (max-width: 999px) {
  .modo-lettura .ltimbro { display:none; }
  .modo-lettura .lettura.section { padding-block:.4rem .5rem; }
  /* la barra sopra, da telefono: freccia sola a sinistra, titolo in
     Playfair (maiuscole e minuscole SUE) centrato col numero di pagina
     piccolo sotto, e a destra i due bottoni solo-icona impilati */
  /* colonna sinistra LARGA quanto il riquadro 2x2 di destra (2.3+2.3+.4):
     cosi' titolo e pagina stanno nel VERO centro dello schermo */
  .modo-lettura .lettura-testa { display:grid;
    grid-template-columns:5rem minmax(0,1fr) 2.3rem 2.3rem;
    align-items:center; gap:.4rem; margin-bottom:.6rem;
    padding:.4rem .7rem .55rem; max-width:none;
    border-bottom:1px solid var(--line); }
  .modo-lettura .lettura-testa .lcrumb { grid-row:1 / span 2; font-size:1.4rem;
    line-height:1; padding:.15em .1em; justify-self:start; }
  .modo-lettura .ltit { display:block; font-size:1.08rem; }
  .modo-lettura .lcap-zona { display:contents; }
  .modo-lettura .lbtns { display:contents; }
  .modo-lettura .lcap { grid-column:2; grid-row:2; text-align:center;
    white-space:nowrap; font-size:.62rem; }
  /* il riquadro 2x2 dei comandi: [zoom][notte] / [pagina][segnalibri] */
  .modo-lettura #zoombtn { grid-column:3; grid-row:1; }
  .modo-lettura #nottebtn { grid-column:4; grid-row:1; }
  .modo-lettura #vaipag { grid-column:3; grid-row:2; }
  .modo-lettura #segnabtn { grid-column:4; grid-row:2; }
  .modo-lettura .vaipag { width:2.3rem; height:2.3rem; padding:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:12px; justify-self:stretch; }
  .modo-lettura .vaipag .ico { display:block; width:1.15rem; height:1.15rem; }
  .modo-lettura .vaipag .btxt { display:none; }
  /* sul telefono la notte ha gia' il SUO bottone (la luna): la riga nel
     modal dello zoom sarebbe un doppione */
  .modo-lettura #nottetog { display:none; }
  /* NIENTE frecce sotto: si sfoglia col tocco (70/30) e con lo swipe */
  .modo-lettura .lfrecce { display:none; }
  /* sul telefono i pannelli sono MODALI VERI: velo su tutto e scheda che
     sboccia nel TERZO ALTO dello schermo. In alto apposta: il campo resta
     gia' sopra la tastiera e iOS non ha niente da panare: zero shift. */
  /* la carta della notte non esiste sul telefono: c'e' gia' la luna */
  #nottepanel { display:none; }
  .vaipanel { position:fixed; left:50%; top:16%; translate:-50% 0;
              z-index:41; width:min(86vw, 21rem); max-width:none;
              padding:1.25rem 1.2rem; border-radius:18px;
              box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
              animation: modale-su .32s cubic-bezier(.2,.9,.3,1.12); }
  .segnalista { max-height:38vh; }
}
.velo { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.55);
        opacity:0; transition:opacity .12s ease; }
.velo.su { opacity:1; }
@keyframes modale-su {
  from { opacity:0; translate:-50% 5%; scale:.92; }
}
@media print { .lettura { display:none; } }

/* ================= l'ANTEPRIMA di Punta d'Oro: la mappa della saga =====
   Un filo d'oro verticale che si disegna mentre scorri; le tappe della
   cronologia entrano una a una; poi il piano dei libri, a carte numerate
   con lo stato. I colori sono quelli dell'habitat (--hx e i suoi campi). */
.antep-wrap { max-width:46rem; margin:0 auto; }
.anteprima-btn { display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.1rem; position:relative; z-index:1; margin-right:.6rem; }
.anteprima-btn svg { width:1.05rem; height:1.05rem; }
.saga-hero .anteprima-btn { color:#F2E9DC; border-color:#4A3E31; }
.saga-hero .anteprima-btn:hover { border-color:var(--hx); color:var(--hx);
  background:transparent; }

.rm-capo { text-align:center; margin:0 0 1.4rem; }
.rm-capo h2 { margin:.1em 0 0; font-size:clamp(1.6rem, 4vw, 2.3rem); }
.rm-capo-2 { margin-top:4rem; }
.rm-bandiera { margin:0 auto 2.2rem; max-width:22rem; border-radius:14px;
  overflow:hidden; border:1px solid var(--line-2);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.6); }
.rm-bandiera img { display:block; width:100%; height:auto; }

/* --- la cronologia: filo, punti, anni --- */
.rm-linea { list-style:none; margin:0; padding:.4rem 0; position:relative;
  --colonna:7.2rem; }
.rm-linea::before { content:""; position:absolute; top:0; bottom:0;
  left:var(--colonna); width:2px; background:var(--line-2); }
.rm-prog { position:absolute; top:0; left:var(--colonna); width:2px; height:0;
  background:var(--hx); box-shadow:0 0 12px var(--hx); }
.rm-tappa { position:relative; display:grid;
  grid-template-columns:var(--colonna) 1fr; gap:0 1.3rem; padding:.55rem 0;
  opacity:0; translate:0 .8rem; transition:opacity .55s ease, translate .55s ease; }
.rm-tappa.vivo { opacity:1; translate:0 0; }
.rm-anno { text-align:right; padding-right:1.3rem; font-family:var(--sans);
  font-size:.78rem; font-weight:700; letter-spacing:.1em; color:var(--hx);
  line-height:1.7; white-space:nowrap; }
.rm-punto { position:absolute; left:var(--colonna); top:.95rem; width:12px; height:12px;
  translate:-5px 0; border-radius:50%; background:var(--paper);
  border:2px solid var(--hx); scale:0; transition:scale .45s cubic-bezier(.3,1.6,.5,1) .15s; }
.rm-tappa.vivo .rm-punto { scale:1; }
.rm-testo { margin:0; font-size:1.02rem; line-height:1.7; color:var(--ink); }
.rm-testo i { color:var(--ink-soft); }
.rm-stacco { height:1.6rem; }
.rm-titolo .rm-testo { font-family:var(--display); font-style:italic;
  font-size:1.2rem; color:var(--hx); }
.rm-titolo .rm-punto { background:var(--hx); }

/* --- il piano di lavoro: le carte dei libri --- */
.rm-piano { list-style:none; margin:0; padding:0; position:relative;
  display:flex; flex-direction:column; gap:1.6rem; }
.rm-piano::before { content:""; position:absolute; top:1rem; bottom:1rem;
  left:1.15rem; width:2px; background:var(--line-2); }
.rm-libro { position:relative; display:grid; grid-template-columns:7.5rem 1fr;
  gap:1.3rem; padding:1.2rem 1.3rem 1.2rem 3.2rem;
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:16px;
  opacity:0; translate:-1.2rem 0; transition:opacity .6s ease, translate .6s ease; }
.rm-libro.vivo { opacity:1; translate:0 0; }
.rm-num { position:absolute; left:.25rem; top:1.15rem; width:1.8rem; height:1.8rem;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--hx); color:#17120D; font-family:var(--sans); font-size:.72rem;
  font-weight:700; box-shadow:0 0 0 4px var(--paper); }
.rm-cover { align-self:start; }
.rm-cover img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover;
  border-radius:8px; border:1px solid var(--line-2);
  transition:transform .4s ease; }
.rm-libro.vivo .rm-cover img:hover { transform:rotate(-2deg) scale(1.03); }
.rm-cover-vuota { display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.35rem; aspect-ratio:2/3; border-radius:8px;
  border:1px dashed var(--line-2); background:var(--paper-3); text-align:center; }
.rm-cover-vuota b { font-family:var(--display); font-size:2.2rem; color:var(--hx); }
.rm-cover-vuota i { font-family:var(--sans); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); font-style:normal; }
.rm-corpo h3 { margin:0 0 .35rem; font-size:1.35rem; }
.rm-corpo h3 a { color:inherit; text-decoration:none; }
.rm-corpo h3 a:hover { color:var(--hx); }
.rm-corpo p { margin:.6em 0 0; line-height:1.68; color:var(--ink-soft); }
.rm-nota { font-style:italic; font-size:.92rem; }
.rm-stato { display:inline-block; padding:.28em .8em; border-radius:99px;
  font-family:var(--sans); font-size:.64rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; }
.rm-libro[data-stato="carta"] .rm-stato { background:var(--hx); color:#17120D; }
.rm-libro[data-stato="pronto"] .rm-stato { border:1.5px solid var(--hx); color:var(--hx); }
.rm-libro[data-stato="cantiere"] .rm-stato { border:1.5px dashed var(--line-2);
  color:var(--ink-faint); }

.rm-chiusa { text-align:center; margin-top:3.5rem; opacity:0; translate:0 .8rem;
  transition:opacity .7s ease, translate .7s ease; }
.rm-chiusa.vivo { opacity:1; translate:0 0; }
.rm-grazie { margin:0; font-family:var(--display); font-size:1.4rem; line-height:1.4; }
.rm-grazie i { color:var(--hx); }
.rm-fine { margin:1.2rem 0 0; font-family:var(--sans); font-size:.68rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); }
.rm-fine::before, .rm-fine::after { content:"·"; margin:0 .6em; color:var(--hx); }

@media (max-width: 40rem) {
  .rm-linea { --colonna:5.2rem; }
  .rm-anno { font-size:.68rem; padding-right:1rem; }
  .rm-tappa { gap:0 1rem; }
  .rm-libro { grid-template-columns:1fr; padding-left:2.6rem; }
  .rm-cover { max-width:8rem; }
  .rm-piano::before { left:.95rem; }
}

/* col "Riprendi da dove eri" pieno, la biografia lascia il posto */
.hero-lato.senza-bio .bio { display:none; }

/* il CATALOGO dell'amministrazione sul TELEFONO: la tabella a colonne
   fisse non ci sta (il titolo finiva in una colonna strettissima e si
   spezzava male), quindi ogni riga diventa una scheda impilata: titolo
   in alto, sotto tipo · prezzo · stato, e in fondo i comandi. */
@media (max-width: 40rem) {
  .tablewrap:has(.tbl-cat) { overflow-x:visible; }
  .tbl-cat { table-layout:auto; min-width:0; display:block; }
  .tbl-cat thead { display:none; }
  .tbl-cat tbody, .tbl-cat tr, .tbl-cat td { display:block; width:auto; }
  .tbl-cat tr { padding:.75rem .1rem .8rem; border-bottom:1px solid var(--line); }
  .tbl-cat td { border:0; padding:.1rem .2rem; white-space:normal; }
  /* il titolo: numero e testo affiancati, il capoverso rientra sotto il
     TESTO e non sotto il numero */
  .tbl-cat td:first-child { display:flex; gap:.5rem; align-items:baseline;
    font-size:.95rem; line-height:1.4; }
  .tbl-cat td.cella-puntata { padding-left:1.1rem; }
  .tbl-cat .pt-num { min-width:auto; flex:0 0 auto; }
  /* i tre dati in una riga sola, separati da un punto */
  .tbl-cat td:nth-child(2), .tbl-cat td:nth-child(3), .tbl-cat td:nth-child(4) {
    display:inline; font-size:.8rem; color:var(--ink-faint); }
  .tbl-cat td:nth-child(2)::after, .tbl-cat td:nth-child(3)::after {
    content:" · "; color:var(--line-2); }
  .tbl-cat td.actions { display:flex; flex-wrap:wrap; gap:1.1rem;
    margin-top:.5rem; }
  /* l'intestazione di serie resta una fascia piena */
  .tbl-cat .riga-serie td { display:block; padding:.55rem .6rem; }
}

/* ================= il FONDALE della home: luce, polvere, carta =========
   Tre aloni caldi che derivano lentissimi (la luce di una lampada da
   lettura), la polvere disegnata su tela dal copione (niente trame
   ripetute: la griglia si vedeva) e una grana di carta ferma sopra. */
.home .fondale { position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; --fx:0px; --fy:0px; }
.home main > section, .home footer { position:relative; z-index:1; }
.fondale .fo { position:absolute; display:block; border-radius:50%;
  filter:blur(34px); will-change:transform;
  translate:var(--fx) var(--fy); }
.fondale .fo-1 { width:54vmax; height:54vmax; top:-16vmax; left:-12vmax;
  background:radial-gradient(circle, rgba(228,205,166,.045), rgba(228,205,166,0) 72%);
  animation:fo-deriva-1 43s ease-in-out infinite alternate; }
.fondale .fo-2 { width:46vmax; height:46vmax; bottom:-18vmax; right:-10vmax;
  background:radial-gradient(circle, rgba(136,90,52,.075), rgba(136,90,52,0) 72%);
  animation:fo-deriva-2 57s ease-in-out infinite alternate; }
.fondale .fo-3 { width:34vmax; height:34vmax; top:36%; left:52%;
  background:radial-gradient(circle, rgba(228,205,166,.028), rgba(228,205,166,0) 70%);
  animation:fo-deriva-3 71s ease-in-out infinite alternate; }
@keyframes fo-deriva-1 {
  from { transform:translate(0, 0) scale(1); }
  to   { transform:translate(10vmax, 7vmax) scale(1.14); }
}
@keyframes fo-deriva-2 {
  from { transform:translate(0, 0) scale(1.08); }
  to   { transform:translate(-8vmax, -6vmax) scale(1); }
}
@keyframes fo-deriva-3 {
  from { transform:translate(-4vmax, 3vmax) scale(.9); }
  to   { transform:translate(6vmax, -5vmax) scale(1.18); }
}
/* la polvere: una tela, la disegna il copione particella per particella */
.fondale .fo-canvas { position:absolute; inset:0; width:100%; height:100%;
  display:block; }
/* la grana della carta: ferma, appena percettibile, uccide il "piatto" */
.fondale .fo-grana { position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) {
  .fondale .fo { animation:none; }
  .fondale .fo-canvas { display:none; }
}

/* Incisioni dei cinque mondi, libere sul fondale della home. */
.fo-symbols { position:absolute; inset:0; pointer-events:none; }
.fo-symbol {
  position:absolute; left:var(--sx); top:var(--sy);
  width:var(--size); aspect-ratio:1;
  margin-left:calc(var(--size) / -2); margin-top:calc(var(--size) / -2);
  color:#C49A6C; opacity:.24;
  transform:rotate(var(--angle));
  animation:fo-symbol-drift var(--duration) ease-in-out var(--delay) infinite alternate;
}
.fo-symbol svg { display:block; width:100%; height:100%; }
:root[data-theme="light"] .fo-symbol { color:#885A34; opacity:.17; }
.fondale.fo-paused .fo, .fondale.fo-paused .fo-symbol { animation-play-state:paused; }
@keyframes fo-symbol-drift {
  from { transform:translate(0, 0) rotate(var(--angle)); }
  to { transform:translate(var(--dx), var(--dy)) rotate(calc(var(--angle) + var(--turn))); }
}
@media (max-width: 47.99rem) {
  /* Le copertine inclinate restano dentro lo schermo anche sui telefoni. */
  .home .ass-row { max-width:calc(100% - 1rem); }
  .home .ass { flex-shrink:1; min-width:0; }
  .fo-symbol { left:var(--mx); top:var(--my); width:calc(var(--size) * .65);
    margin-left:calc(var(--size) * -.325); margin-top:calc(var(--size) * -.325);
    opacity:.20; }
  .fo-symbol:nth-child(n+6) { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-symbol { animation:none; }
}


/* Fondali dei cataloghi: sotto il contenuto, mai sopra le copertine. */
.world-page .fondale {position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.world-page .hab,.world-page footer {position:relative;z-index:1;}
.fo-scene {position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--fo-ink,#C49A6C);}
.fo-field {animation:fo-field-float 19s ease-in-out infinite alternate;}
.fo-mark {opacity:.24;}
.fo-glyph {transform-box:fill-box;transform-origin:center;animation:fo-glyph-turn var(--duration) ease-in-out var(--delay) infinite alternate;}
.fo-path {stroke:currentColor;stroke-width:.8;stroke-dasharray:3 7;opacity:.19;}
.fo-light {fill:currentColor;opacity:.58;}
.fo-paused .fo-field,.fo-paused .fo-glyph {animation-play-state:paused;}
.world-espada {--fo-ink:#B39980;}
.world-puntadoro {--fo-ink:#C9AB68;}
.world-rockstar {--fo-ink:#B69BB9;}
.world-extra {--fo-ink:#B3AB8F;}
:root[data-theme="light"] .fo-scene {color:var(--fo-day,#885A34);}
:root[data-theme="light"] .fo-mark {opacity:.17;}
.world-espada {--fo-day:#775A48;}
.world-puntadoro {--fo-day:#836324;}
.world-rockstar {--fo-day:#775178;}
.world-extra {--fo-day:#63644A;}
@keyframes fo-field-float {from{transform:translate(-12px,-9px);}to{transform:translate(12px,9px);}}
@keyframes fo-glyph-turn {from{transform:rotate(-7deg);}to{transform:rotate(7deg);}}
@media(max-width:47.99rem){.fo-mark{opacity:.20;}.fo-path{opacity:.15;}.fo-field{animation-name:fo-field-mobile;}}
@keyframes fo-field-mobile {from{transform:translate(-5px,-7px);}to{transform:translate(5px,7px);}}
@media(prefers-reduced-motion:reduce){.fo-field,.fo-glyph{animation:none;}.fo-light{display:none;}}

/* Drama: incisioni rosa antico, come il velluto sotto la luce. */
.world-drama {--fo-ink:#C79AA3;--fo-day:#7A4652;}

/* ================= il FINALE del sito: fascia piena, crediti classici ====
   Stacca dal resto con un colore scuro omogeneo (la "scheda" della
   palette), tre colonne sopra e la riga dei crediti sotto. */
.site-foot { border-top:1px solid var(--line); padding:0; background:var(--paper-2);
             margin-top:calc(var(--sp-lg) * .8); color:var(--ink-soft); }
.foot-griglia { display:grid; grid-template-columns:minmax(0,1.6fr) 1fr 1fr;
                gap:2.2rem 3rem; padding-block:calc(var(--sp) * 1.6) calc(var(--sp) * 1.2); }
.foot-logo { display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); }
.foot-logo img { display:block; height:4.6rem; width:auto; }
.foot-nome { font-family:var(--display); font-weight:600; font-size:1.25rem; line-height:1.1; }
.foot-nome b { display:block; font-weight:600; color:var(--ink-soft); font-size:.85em;
               letter-spacing:.04em; }
.foot-motto { margin:.9rem 0 0; max-width:26rem; font-size:.95rem; line-height:1.6;
              color:var(--ink-faint); }
.foot-col { display:flex; flex-direction:column; gap:.55rem; }
.foot-tit { margin:0 0 .35rem; font-family:var(--sans); font-size:.68rem; font-weight:700;
            letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.foot-col a { font-family:var(--sans); font-size:.9rem; color:var(--ink-soft);
              text-decoration:none; transition:color .15s ease; }
.foot-col a:hover { color:var(--ink); }
.foot-fondo { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
              gap:.6rem 1.5rem; padding-block:1rem 1.2rem; border-top:1px solid var(--line);
              font-family:var(--sans); font-size:.8rem; color:var(--ink-faint); }
/* il link si COPIA con un click: bottone nudo, icona, e il "Copiato" che
   compare al posto dell'icona per un attimo */
.copialink { display:inline-flex; align-items:center; gap:.5rem; padding:.35em .6em;
             margin:-.35em -.6em; border:0; background:none; cursor:pointer;
             font:inherit; color:var(--ink-faint); border-radius:8px; position:relative;
             transition:color .15s ease, background-color .15s ease; }
.copialink:hover { color:var(--ink); background:var(--paper-3); }
.copialink .cl-ico, .copialink .cl-ok { width:1rem; height:1rem; flex:none; }
.copialink .cl-ok { display:none; color:var(--accent); }
.copialink.fatto .cl-ico { display:none; }
.copialink.fatto .cl-ok { display:block; }
/* "Copiato" e' una nuvoletta che spunta SOPRA il link, mai sopra il testo */
.copialink .cl-fatto { position:absolute; left:50%; bottom:calc(100% + .45rem);
                       translate:-50% .3rem; padding:.3em .7em; border-radius:99px;
                       font-size:.64rem; font-weight:700; letter-spacing:.14em;
                       text-transform:uppercase; color:var(--accent);
                       background:var(--paper-3); border:1px solid var(--line-2);
                       white-space:nowrap; opacity:0; pointer-events:none;
                       transition:opacity .2s ease, translate .2s ease; }
.copialink.fatto .cl-fatto { opacity:1; translate:-50% 0; }
@media (max-width: 48rem) {
  .foot-griglia { grid-template-columns:1fr 1fr; }
  .foot-marchio { grid-column:1 / -1; }
}
@media (max-width: 30rem) {
  .foot-griglia { grid-template-columns:1fr; gap:1.6rem; }
}

/* ================= le RECENSIONI in vetro liquido =======================
   Il blocco diventa una lastra di vetro smerigliato: cio' che sta dietro
   (il fondale coi disegni) filtra sfocato, il bordo prende la luce in
   alto, e un riflesso morbido scivola sul vetro. Tutto in rgba di
   palette (beige e nero), niente tinte nuove. */
#recensioni .wrap {
  position:relative; padding:2rem 2.2rem 2.2rem; border-radius:26px;
  background:linear-gradient(160deg, rgba(228,205,166,.075), rgba(228,205,166,.02) 45%, rgba(0,0,0,.14));
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(228,205,166,.14);
  box-shadow:inset 0 1px 0 rgba(228,205,166,.22),
             inset 0 -1px 0 rgba(0,0,0,.35),
             0 40px 80px -50px rgba(0,0,0,.8);
  overflow:hidden; isolation:isolate;
}
/* il riflesso: una lama di luce che attraversa piano il vetro */
#recensioni .wrap::before {
  content:""; position:absolute; inset:-40% -10%; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, rgba(228,205,166,0) 42%, rgba(228,205,166,.032) 50%, rgba(228,205,166,0) 58%);
  animation:vetro-riflesso 11s ease-in-out infinite alternate;
}
/* niente filetto sopra la lastra: il vetro si stacca da solo */
#recensioni { border-top:0; }
@keyframes vetro-riflesso {
  0%   { transform:translateX(-30%); }
  100% { transform:translateX(30%); }
}
/* l'alone in alto a sinistra: dove il vetro e' piu' spesso prende luce */
#recensioni .wrap::after {
  content:""; position:absolute; top:-12rem; left:-10rem; width:26rem; height:26rem;
  z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(228,205,166,.10), rgba(228,205,166,0) 65%);
}
/* i campi dentro: vetro piu' sottile, stesso bordo di luce */
#recensioni .rev-form textarea {
  width:100%; padding:.95rem 1.05rem; border-radius:16px; line-height:1.55;
  background:rgba(0,0,0,.22); border:1px solid rgba(228,205,166,.18);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(228,205,166,.04);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s ease, box-shadow .2s ease;
}
#recensioni .rev-form textarea:focus { outline:none; border-color:rgba(228,205,166,.5);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.4), 0 0 0 4px rgba(228,205,166,.10); }
#recensioni .rev-form textarea::placeholder { color:var(--ink-faint); }
/* due meta': a sinistra si scrive, a destra si legge */
#recensioni .rev-due { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2rem 3rem; align-items:stretch; }
#recensioni .rev-head { margin-bottom:1.1rem; }
/* la textarea non si ridimensiona: la misura la decide la lastra */
#recensioni .rev-form textarea { resize:none; }
/* il contatore: piccolo, a destra, si scalda verso il limite */
#recensioni .rev-conta { margin:-.2rem 0 .8rem; text-align:right; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.06em; color:var(--ink-faint); }
#recensioni .rev-conta.quasi { color:var(--accent); }
#recensioni .rev-conta.pieno { color:var(--err-danger); }
#recensioni .rev-form, #recensioni .rev-list { max-width:none; margin-bottom:0; }
#recensioni .rev-dx { border-left:1px solid rgba(228,205,166,.12); padding-left:3rem;
  min-height:100%; }
#recensioni .rev-list li:first-child { border-top:0; padding-top:0; }
/* "ancora nessuna recensione": solo testo, niente riquadro, al centro
   esatto della meta' destra (la colonna si stira all'altezza del modulo) */
#recensioni .rev-dx:has(.rev-vuoto) { display:flex; flex-direction:column; }
#recensioni .rev-vuoto { flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.6rem; min-height:12rem; padding:1.5rem; text-align:center;
  color:var(--ink-faint); }
#recensioni .rev-vuoto svg { width:1.7rem; height:1.7rem; color:var(--accent); opacity:.7; }
#recensioni .rev-vuoto p { margin:0; font-family:var(--sans); font-size:.9rem; line-height:1.6; }
#recensioni .rev-vuoto span { font-size:.8rem; }
@media (max-width: 48rem) {
  #recensioni .rev-due { grid-template-columns:1fr; gap:1.6rem; }
  #recensioni .rev-dx { border-left:0; padding-left:0; border-top:1px solid rgba(228,205,166,.12);
    padding-top:1.4rem; }
}
#recensioni .rev-list li { border-top-color:rgba(228,205,166,.12); }
/* il vetro chiaro: piu' latte, meno buio */
:root[data-theme="light"] #recensioni .wrap {
  background:linear-gradient(160deg, rgba(228,205,166,.22), rgba(228,205,166,.08) 45%, rgba(136,90,52,.06));
  border-color:rgba(136,90,52,.16);
  box-shadow:inset 0 1px 0 rgba(228,205,166,.6), 0 30px 60px -40px rgba(30,23,18,.35);
}
:root[data-theme="light"] #recensioni .rev-form textarea {
  background:rgba(228,205,166,.14); border-color:rgba(136,90,52,.2);
}
@media (max-width: 40rem) {
  #recensioni .wrap { padding:1.4rem 1.1rem 1.5rem; border-radius:20px; }
}
@media (prefers-reduced-motion: reduce) {
  #recensioni .wrap::before { animation:none; }
}

/* ================= la FRECCIA unica del sito: il chevron =================
   Un solo segno per tutte le direzioni, disegnato (non un carattere), un
   po' piu' grande del testo accanto e col tratto tondo. Scivola nella sua
   direzione quando ci passi sopra. */
.chev { display:inline-block; width:1.35em; height:1.35em; vertical-align:-.36em;
        flex:none; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.crumb .chev { margin:0 .05em 0 -.25em; }
@media (hover:hover) {
  .crumb:hover .chev-sx { transform:translateX(-3px); }
  .scard:hover .arr .chev-dx, .sec-head a:hover .chev-dx { transform:translateX(4px); }
}
/* "Entra" e il suo chevron: centrati fra loro in flex, niente baseline */
.scard-go { display:inline-flex; align-items:center; gap:.3em; }
.scard-go .arr { display:inline-flex; align-items:center; margin:0; }
.scard-go .chev { width:1.45em; height:1.45em; vertical-align:0; }
/* nel lettore: l'uscita e le frecce sotto il libro */
.lcrumb .chev { width:1.5rem; height:1.5rem; vertical-align:-.35rem; }
.fbtn .chev { width:1.4rem; height:1.4rem; vertical-align:middle; }

/* ================= GUARDA ANCHE: la scheda gemella =======================
   Solo dove c'e' un legame vero (romanzo <-> edizione a fumetto) il fianco
   della scheda, che sugli schermi larghi resterebbe vuoto, ospita il
   rimando. Niente riquadro: occhiello in cima allineato con "Libro",
   copertina, poi le righe. Sugli schermi larghi la colonna e' alta quanto
   la copertina grande: la copertina piccola prende l'altezza che avanza
   (la larghezza viene dalla sua proporzione, --ar), e l'ultima riga di
   testo finisce sul filo di sotto. Sotto i 1500px scende sotto il testo,
   con la copertina a misura fissa. */
.prod-lato { display:flex; flex-direction:column; }
.guarda-anche { flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  gap:.2rem; text-decoration:none; color:var(--ink); }
.ga-cover { position:relative; flex:none; align-self:flex-start; height:16rem;
  max-width:100%; aspect-ratio:var(--ar, 2/3); border-radius:12px; overflow:hidden;
  border:1px solid var(--line); margin-bottom:.9rem;
  transition:border-color .15s, translate .25s cubic-bezier(.2,.8,.2,1); }
.guarda-anche:hover .ga-cover { border-color:var(--accent); translate:0 -3px; }
.ga-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ga-cover .tag-fumetto { top:.8rem; }
.ga-nota { font-family:var(--sans); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); }
.ga-titolo { font-family:var(--display); font-weight:600; font-size:1.2rem; line-height:1.2; }
.ga-sotto { color:var(--ink-soft); font-size:.92rem; }
@media (min-width:48rem) {
  .prod-lato { grid-column:2; margin-top:.4rem; }
}
@media (min-width:1500px) {
  .prod:has(.prod-lato) { grid-template-columns:20rem minmax(0,1fr) 19rem; }
  .prod-lato { grid-column:3; grid-row:1; margin-top:0; }
  .ga-cover { height:auto; flex:1 1 0; min-height:0; max-height:28.5rem; }
}

/* le RECENSIONI stanno piu' vicine a cio' che recensiscono: la sezione
   prima stringe il fondo, e il vetro non aggiunge il suo cielo */
.section:has(+ #recensioni) { padding-bottom:calc(var(--sp-lg) * .6); }
#recensioni { padding-top:0; }

/* Tema carta: superfici sabbia, inchiostro scuro e controlli ben definiti. */
:root[data-theme="light"] {
  --bg:#D8C8AF; --paper:#D8C8AF; --paper-2:#E7DAC5; --paper-3:#C9B79A;
  --ink:#241B14; --ink-soft:#49382A; --ink-faint:#594431;
  --line:#AF9676; --line-2:#7D654A;
  --brown:#704326; --brown-deep:#54301C;
  --accent:#704326; --accent-ink:#653A20;
  --btn-bg:#704326; --btn-bg-hover:#54301C; --btn-ink:#FFF3DF;
  --badge-bg:#654127; --badge-ink:#FFF3DF;
  --err-bg:#E9C7BA; --err-line:#A25844; --err-ink:#812B1E; --err-danger:#8E2E21;
  --shadow:rgba(55,35,18,.22); --glow:rgba(112,67,38,.14);
}
:root[data-theme="light"] .site-head {background:#CEBA9D;border-bottom-color:#A68C6B;}
:root[data-theme="light"] .site-foot {background:#C6B195;--ink-faint:#4B3928;--accent:#5B351F;}
:root[data-theme="light"] .brand img,
:root[data-theme="light"] .foot-logo img {filter:brightness(.65) saturate(.85);}
:root[data-theme="light"] .pcard {box-shadow:0 5px 18px -12px var(--shadow);}
:root[data-theme="light"] .hab {--hx:#704326;}
:root[data-theme="light"] .hab-espada {--hx:#3E4C70;}
:root[data-theme="light"] .hab-puntadoro {--hx:#674719;}
:root[data-theme="light"] .hab-rockstar {--hx:#673F68;}
:root[data-theme="light"] .hab-extra {--hx:#62472F;}
:root[data-theme="light"] .hab-drama {--hx:#7A2537;}
/* Le testate fotografiche restano scure in entrambi i temi. */
:root[data-theme="light"] .saga-hero {--hx:var(--ha);--accent:var(--ha);--accent-ink:var(--ha);
  --btn-bg:#E4CDA6;--btn-bg-hover:#F0DEBD;--btn-ink:#241B14;}
:root[data-theme="light"] .saga-hero .crumb {color:#F2E9DC;}
:root[data-theme="light"] .saga-hero .anteprima-btn {color:#F2E9DC;border-color:#B9A48A;background:rgba(14,12,10,.45);}
:root[data-theme="light"] .saga-hero .anteprima-btn:hover {color:#FFF3DF;border-color:#E4CDA6;background:rgba(14,12,10,.7);}
:root[data-theme="light"] .rm-num,
:root[data-theme="light"] .rm-libro[data-stato="carta"] .rm-stato {color:#FFF3DF;}
/* Recensioni e moduli hanno una superficie propria e bordi leggibili. */
:root[data-theme="light"] #recensioni .wrap {background:var(--paper-2);border-color:var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 12px 32px -24px var(--shadow);}
:root[data-theme="light"] #recensioni .wrap::before,
:root[data-theme="light"] #recensioni .wrap::after {display:none;}
:root[data-theme="light"] #recensioni .rev-form textarea {color:var(--ink);background:#EDE1CD;
  border-color:var(--line-2);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
:root[data-theme="light"] #recensioni .rev-dx,
:root[data-theme="light"] #recensioni .rev-list li {border-color:var(--line);}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {color:var(--ink-faint);opacity:1;}
:root[data-theme="light"] input:focus-visible,
:root[data-theme="light"] select:focus-visible,
:root[data-theme="light"] textarea:focus-visible,
:root[data-theme="light"] #recensioni .rev-form textarea:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
:root[data-theme="light"] .fo-mark {opacity:.23;}
:root[data-theme="light"] .fo-path {opacity:.24;}
:root[data-theme="light"] .fo-grana {opacity:.025;}

/* ============ l'ANTEPRIMA al passaggio del mouse sulle serie ==============
   Fermo il mouse sulla carta di una serie, parte muto per trenta secondi
   l'episodio che ti manca, sopra la locandina, e poi torna la locandina.
   Solo con un mouse vero: sul telefono il passaggio non esiste. */
.pcard-cover video.anteprima { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .55s ease; pointer-events:none;
  transform:scale(1.045); }
.pcard-cover video.anteprima.viva { opacity:1; }
.ant-chip { position:absolute; left:.75rem; bottom:.75rem; z-index:2; display:inline-flex;
  align-items:center; padding:.34em .75em .32em; border-radius:99px;
  background:rgba(0,0,0,.55); color:var(--beige); font-family:var(--sans); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:0; transition:opacity .55s ease;
  pointer-events:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.ant-chip.viva { opacity:1; }

/* ============ il SIPARIO del proiettore ==================================
   Dal click su "Guarda" a quando il filmato scorre davvero: schermo nero
   e un anello che gira. Niente locandina, niente primo fotogramma fermo.
   Lascia passare i click, per chi ha l'autoplay bloccato e deve premere
   play nel player che sta sotto. */
.player-attesa { position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background:rgba(0,0,0,1); pointer-events:none; opacity:1; transition:opacity .45s ease; }
.player-attesa.via { opacity:0; }
.pa-anello { width:3rem; height:3rem; border-radius:50%;
  border:3px solid rgba(228,205,166,.18); border-top-color:var(--beige);
  animation:pa-gira .9s linear infinite; }
@keyframes pa-gira { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pa-anello { animation-duration:2s; } }

/* ============ la SUB-REGIONE degli Extra: Saga Espada a fumetti ===========
   Dentro Extra, un angolo per le due edizioni a fumetto della saga: a
   sinistra i due libri, a destra l'anteprima video (ID Bunny dalla
   scrivania; finche' manca, un riquadro in attesa). Gli altri extra
   seguono sotto, nella griglia di sempre. */
.sub-espada .sub-testa { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.3rem; }
.sub-espada h2 { font-family:var(--display); font-weight:600; margin:0;
  font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.sub-espada .sub-testa .note { margin:0; color:var(--ink-faint); }
.sub-corpo { display:grid; gap:var(--sp); grid-template-columns:minmax(0,1fr); }
.sub-fumetti { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:calc(var(--sp) * .65); }
.sub-video { display:flex; flex-direction:column; justify-content:center; }
.sub-video .player-box { margin:0; }
.sub-video-vuoto { aspect-ratio:16/9; border-radius:12px; border:1px dashed var(--line-2);
  background:var(--paper-2); display:grid; place-items:center; color:var(--ink-faint);
  font-family:var(--sans); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; }
@media (min-width: 64rem) {
  .sub-corpo { grid-template-columns:minmax(0, 34rem) minmax(0, 1fr);
               gap:calc(var(--sp) * 1.6); align-items:center; }
}

/* la RIGA che stacca la sub-regione dagli altri extra: un filo di vetro,
   appena piu' spesso del solito, che prende luce al centro, sfuma ai lati
   e ha un riflesso che scivola piano. Beige e nero in rgba, come il vetro
   delle recensioni. */
.section + .sub-espada { border-top:0; position:relative; }
.sub-espada::before, .sub-espada::after { content:""; position:absolute; left:0; right:0;
  top:0; height:3px; pointer-events:none; }
.sub-espada::before {
  background:linear-gradient(90deg, rgba(228,205,166,0) 0%, rgba(228,205,166,.16) 14%,
             rgba(228,205,166,.42) 50%, rgba(228,205,166,.16) 86%, rgba(228,205,166,0) 100%);
  box-shadow:0 0 16px rgba(228,205,166,.16), 0 1px 0 rgba(0,0,0,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.sub-espada::after {
  background:linear-gradient(90deg, rgba(228,205,166,0) 40%, rgba(228,205,166,.55) 50%,
             rgba(228,205,166,0) 60%);
  animation:vetro-riga 9s ease-in-out infinite alternate; }
@keyframes vetro-riga { from { transform:translateX(-34%); } to { transform:translateX(34%); } }
:root[data-theme="light"] .sub-espada::before {
  background:linear-gradient(90deg, rgba(136,90,52,0) 0%, rgba(136,90,52,.18) 14%,
             rgba(136,90,52,.45) 50%, rgba(136,90,52,.18) 86%, rgba(136,90,52,0) 100%);
  box-shadow:0 0 14px rgba(136,90,52,.14), 0 1px 0 rgba(228,205,166,.6); }
:root[data-theme="light"] .sub-espada::after {
  background:linear-gradient(90deg, rgba(136,90,52,0) 40%, rgba(136,90,52,.5) 50%,
             rgba(136,90,52,0) 60%); }
@media (prefers-reduced-motion: reduce) { .sub-espada::after { animation:none; } }

/* ============ le RECENSIONI in lista: una voce per persona ==============
   Un tondo con l'iniziale, il nome, quando, le stelle a destra; sotto le
   parole, se ce ne sono. La colonna si centra in altezza accanto al modulo
   e cresce da sola quando le voci sono tante. */
#recensioni .rev-dx { display:flex; flex-direction:column; justify-content:center; }
#recensioni .rev-list { display:flex; flex-direction:column; }
#recensioni .rev-list li { display:grid; grid-template-columns:2.4rem minmax(0,1fr);
  column-gap:.9rem; row-gap:.4rem; align-items:center; padding:1rem 0;
  border-top:1px solid rgba(228,205,166,.12); }
#recensioni .rev-list li:first-child { border-top:0; padding-top:0; }
#recensioni .rev-list li:last-child { padding-bottom:0; }
#recensioni .rev-avatar { width:2.4rem; height:2.4rem; border-radius:50%; align-self:start;
  display:grid; place-items:center; font-family:var(--display); font-weight:600;
  font-size:1.05rem; color:var(--beige);
  background:linear-gradient(160deg, rgba(228,205,166,.22), rgba(228,205,166,.06));
  border:1px solid rgba(228,205,166,.25); box-shadow:inset 0 1px 0 rgba(228,205,166,.3); }
#recensioni .rev-list li:has(.rev-corpo) .rev-avatar { grid-row:1 / span 2; }
#recensioni .rev-riga { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; min-width:0; }
#recensioni .rev-nome { font-family:var(--sans); font-size:.9rem; font-weight:700; color:var(--ink); }
#recensioni .rev-quando { font-family:var(--sans); font-size:.74rem; color:var(--ink-faint); }
#recensioni .rev-stelle { margin-left:auto; display:inline-flex; }
#recensioni .rev-corpo { grid-column:2; margin:0; color:var(--ink-soft); line-height:1.65;
  font-size:.98rem; }
:root[data-theme="light"] #recensioni .rev-avatar { color:var(--brown-deep);
  background:rgba(136,90,52,.12); border-color:rgba(136,90,52,.28); box-shadow:none; }

/* ============ la pagina del GRAZIE: un momento, non un avviso ============
   Due aloni caldi che respirano sul fondo, il sigillo che si disegna da
   solo, il titolo che sale, le copertine appena comprate che arrivano una
   dopo l'altra e si aprono a ventaglio. Tutto centrato, tutto in palette. */
.grazie { position:relative; overflow:hidden; min-height:calc(100vh - 12rem);
  display:grid; place-items:center; padding-block:var(--sp-lg); }
.gz-alone { position:absolute; border-radius:50%; pointer-events:none; filter:blur(70px); }
.gz-a1 { width:44rem; height:44rem; left:-14rem; top:-16rem;
  background:radial-gradient(circle, rgba(228,205,166,.16), rgba(228,205,166,0) 70%);
  animation:gz-respira 7s ease-in-out infinite alternate; }
.gz-a2 { width:38rem; height:38rem; right:-12rem; bottom:-14rem;
  background:radial-gradient(circle, rgba(136,90,52,.30), rgba(136,90,52,0) 70%);
  animation:gz-respira 9s ease-in-out infinite alternate-reverse; }
@keyframes gz-respira { from { transform:scale(.9); opacity:.5; } to { transform:scale(1.08); opacity:.85; } }
.gz-scena { position:relative; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:1rem; }
.gz-sigillo { width:5.6rem; height:5.6rem; animation:rise .7s ease both; }
.gz-sigillo svg { width:100%; height:100%; fill:none; stroke:var(--beige);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.gz-anello { stroke-dasharray:210; stroke-dashoffset:210; opacity:.85;
  animation:gz-traccia 1.1s cubic-bezier(.4,0,.2,1) .2s forwards; }
.gz-spunta { stroke-dasharray:44; stroke-dashoffset:44; stroke-width:3;
  animation:gz-traccia .5s ease-out 1.05s forwards; }
@keyframes gz-traccia { to { stroke-dashoffset:0; } }
.gz-occhiello { margin:0; animation:rise .6s ease .5s both; }
.gz-titolo { font-family:var(--display); font-weight:600; margin:0; line-height:1.05;
  font-size:clamp(2.6rem, 2rem + 3vw, 4.8rem); animation:rise .7s ease .65s both; }
.gz-titolo em { font-style:italic; color:var(--accent); }
.gz-lede { max-width:36rem; animation:rise .7s ease .85s both; }
.gz-fila { display:flex; justify-content:center; align-items:flex-end; margin-top:1rem;
  perspective:800px; }
.gz-cov { display:block; position:relative; width:6.4rem; aspect-ratio:2/3; border-radius:8px;
  overflow:hidden; border:1px solid var(--line-2); margin-left:-1.7rem;
  rotate:calc(-5deg + var(--i) * 2.5deg); transform-origin:bottom center;
  box-shadow:0 22px 34px -18px rgba(0,0,0,.85);
  animation:gz-arriva .75s cubic-bezier(.2,.8,.2,1) calc(1.05s + var(--i) * .13s) both;
  transition:rotate .35s cubic-bezier(.2,.8,.2,1), translate .35s cubic-bezier(.2,.8,.2,1),
             scale .35s cubic-bezier(.2,.8,.2,1); }
.gz-cov:first-child { margin-left:0; }
.gz-cov.film { aspect-ratio:16/9; width:9.6rem; }
.gz-cov img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gz-cov:hover { rotate:0deg; translate:0 -12px; scale:1.12; z-index:2; }
@keyframes gz-arriva { from { opacity:0; translate:0 44px; } }
.gz-azioni { display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-top:1.2rem;
  animation:rise .7s ease 1.6s both; }
.gz-nota { margin:0; color:var(--ink-faint); animation:fade .9s ease 2s both; }
/* l'attesa: il pagamento c'e', la conferma della banca arriva tra un attimo */
.gz-attesa { width:3.2rem; height:3.2rem; border-radius:50%;
  border:3px solid rgba(228,205,166,.18); border-top-color:var(--beige);
  animation:pa-gira .9s linear infinite; }
@media (max-width: 40rem) {
  .gz-cov { width:4.8rem; margin-left:-1.3rem; }
  .gz-cov.film { width:7.4rem; }
  .grazie { min-height:calc(100vh - 10rem); }
}
@media (prefers-reduced-motion: reduce) {
  .grazie *, .grazie *::before { animation-duration:.01s !important; animation-delay:0s !important; }
}

/* ============ i miei acquisti: un mondo per volta ========================
   Titolo del mondo, conteggio, e una riga semplice a separare. Nel cinema
   un occhiello per ogni serie, con le sue puntate in ordine. */
.lib-mondo { margin-top:calc(var(--sp) * 1.4); }
.lib-mondo + .lib-mondo { margin-top:calc(var(--sp) * 2.2); padding-top:calc(var(--sp) * 1.5);
  border-top:1px solid var(--line); }
.lib-testa { display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; margin:0 0 1.1rem; }
.lib-testa h2 { margin:0; font-family:var(--display); font-weight:600;
  font-size:clamp(1.45rem, 1.1rem + 1.3vw, 2rem); }
.lib-testa .note { margin:0; color:var(--ink-faint); }
.lib-serie { margin:1.5rem 0 .8rem; }
.lib-testa + .lib-serie { margin-top:0; }
.lib-nota { margin-top:calc(var(--sp) * 1.6); }

/* ============ la pagina ACCOUNT: nome, statistiche, zona pericolosa =====
   Due riquadri affiancati (il nome, i numeri) e sotto la zona pericolosa
   col bordo rosso: password ed eliminazione, che si sblocca solo scrivendo
   il nome esatto. */
.acc { max-width:56rem; }
.acc-griglia { display:grid; gap:var(--sp); grid-template-columns:minmax(0,1fr); margin-top:1.4rem; }
.acc-blocco { border:1px solid var(--line); border-radius:14px; background:var(--paper-2);
  padding:1.3rem 1.4rem 1.5rem; }
.acc-blocco h2 { margin:0 0 .3rem; font-family:var(--display); font-weight:600; font-size:1.25rem; }
.acc-blocco > .note { margin:0 0 1rem; }
.acc-blocco form label { margin-top:.6rem; }
.acc-stat { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.8rem; }
.acc-stat div { border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem;
  background:var(--paper); }
.acc-stat b { display:block; font-family:var(--display); font-size:2.1rem; line-height:1;
  color:var(--accent-ink); margin-bottom:.3rem; }
.acc-stat span { font-family:var(--sans); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); }
.acc-ok { color:var(--accent); font-family:var(--sans); font-size:.9rem; }
.zona-pericolo { margin-top:var(--sp); border-color:var(--err-line); }
.zona-pericolo h2 { color:var(--err-ink); margin-bottom:1rem; }
.zp-due { display:grid; gap:var(--sp); grid-template-columns:minmax(0,1fr); }
.zp-due h3 { margin:0 0 .4rem; font-family:var(--display); font-weight:600; font-size:1.05rem; }
.zp-due .note { margin:0 0 .4rem; }
.btn.pericolo { background:var(--err-danger); color:var(--btn-ink); border-color:transparent; }
.btn.pericolo:hover { background:var(--err-danger); color:var(--btn-ink); filter:brightness(1.08); }
.btn.pericolo[disabled] { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none;
  filter:none; }
@media (min-width: 48rem) {
  .acc-griglia, .zp-due { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* ============ le carte delle SERIE: nastro 18+ e segno audio =============
   Il nastro diagonale sull'angolo in alto a destra dice che la serie e'
   per adulti; il segno in basso a destra dice com'e' fatta: sottotitoli
   (riquadro con le righe) o parlata (persona che parla). */
.nastro-18 { position:absolute; top:0; right:0; width:5.8rem; height:5.8rem; overflow:hidden;
  pointer-events:none; z-index:2; }
.nastro-18 b { position:absolute; top:1.1rem; right:-1.85rem; width:7.8rem; rotate:45deg;
  text-align:center; font-family:var(--sans); font-size:.68rem; font-weight:800;
  letter-spacing:.16em; padding:.3em 0; background:var(--err-danger); color:var(--btn-ink);
  box-shadow:0 3px 10px -3px rgba(0,0,0,.55); }
.segno-audio { position:absolute; right:.6rem; bottom:.6rem; z-index:2; width:2rem; height:2rem;
  border-radius:7px; display:grid; place-items:center; background:rgba(0,0,0,.6);
  color:var(--beige); border:1px solid rgba(228,205,166,.25); pointer-events:none;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.segno-audio svg { width:1.2rem; height:1.2rem; }
/* parlato E sottotitoli: i due segni nello stesso riquadro */
.segno-audio.entrambi { width:auto; padding:0 .45rem; grid-auto-flow:column; gap:.35rem; }
.serie-tag .st-ico.entrambi { grid-auto-flow:column; gap:.25rem; }
/* nell'intestazione della serie: etichette accanto al numero di puntate */
.serie-note { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.serie-tag { display:inline-flex; align-items:center; gap:.4em; padding:.22em .6em;
  border-radius:6px; border:1px solid var(--line-2); font-family:var(--sans); font-size:.7rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.serie-tag.adulti { background:var(--err-danger); color:var(--btn-ink); border-color:transparent; }
.serie-tag .st-ico { display:inline-grid; place-items:center; }
.serie-tag .st-ico svg { width:1.05rem; height:1.05rem; }

/* ============ il GENERE delle serie: una targhetta colorata =============
   Nel corpo della carta, accanto al numero di puntate, mai sulla copertina.
   Tre vesti di palette: romantico in beige, giallo in marrone, erotico nel
   rosso scuro. */
.serie-riga2 { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.genere { display:inline-flex; align-items:center; padding:.22em .6em .2em; border-radius:6px;
  font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.2; border:1px solid transparent; }
.genere.romantico { background:var(--beige); color:var(--btn-ink); }
.genere.giallo { background:var(--badge-bg); color:var(--badge-ink); }
.genere.erotico { background:var(--err-bg); color:var(--err-ink); border-color:var(--err-line); }

/* ============ "Guarda anche" fuori dalla scheda: nella pagina della serie,
   e la serie come gemella di un libro (copertina larga, 16:9) ============ */
.serie-gemello { margin-top:calc(var(--sp) * 1.6); padding-top:calc(var(--sp) * 1.2);
  border-top:1px solid var(--line); }
.serie-gemello .guarda-anche { max-width:15rem; }
.serie-gemello .ga-cover { height:16rem; flex:none; }
.ga-cover.largo { flex:none; height:auto; width:100%; max-height:none; }

/* ============ il CANCELLO d'eta' delle serie 18+ =============
   Un'autodichiarazione, non una verifica. Finche' non si risponde, la
   locandina resta VELATA (un filtro di sfocatura; l'immagine e' ingrandita
   un poco perche' i bordi sfumati non scoprano il fondo) e al posto delle
   puntate e del proiettore c'e' la domanda. Il velo e' solo CSS: per questo
   il server non manda proprio le puntate, invece di nasconderle. */
/* le LOCANDINE restano nitide anche prima della conferma: non c'e' nulla da
   coprire in una copertina. Il cancello vale per puntate, player e anteprima
   al passaggio del mouse, non per l'immagine. */
.player-box.velata .velo-img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; }
/* il riquadro sta al CENTRO, come un cartello davanti alla porta */
.cancello-18 { max-width:34rem; margin:2.2rem auto 1rem; padding:1.6rem 1.7rem 1.7rem;
  border:1px solid var(--line-2); border-radius:14px; background:var(--paper-2);
  text-align:center; }
.cancello-18 .eyebrow { margin:0 0 .5rem; }
.c18-testo { margin:0; color:var(--ink-soft); line-height:1.65; }
.c18-tasti { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:1.2rem; }
.c18-tasti form { margin:0; }
.cinema-scheda .cancello-18 { margin-top:1.2rem; }
/* nell'account: la riga del si' dato, col tasto per ritirarlo */
.acc-adulti { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.6rem 1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
  font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); }
.acc-adulti .btn.small { margin-top:0; }

/* ---------------- legale: consenso e pagine Privacy / Termini ----------------
   La casella del consenso porta una frase intera, non un'etichetta: si
   allinea in alto e va a capo senza schiacciare il quadratino. */
label.check.consenso { align-items:flex-start; gap:.6rem; margin:1.1rem 0 .3rem;
  line-height:1.45; color:var(--ink-soft); }
label.check.consenso input { flex:none; margin-top:.2em; accent-color:var(--accent); }
label.check.consenso a { color:var(--accent-ink); }
.cart-azioni form.inline label.check.consenso { margin-top:.4rem; }
/* le pagine legali: titolo in font display come le altre pagine, testo a
   misura di lettura, capitoli staccati */
.legale h1 { font-family:var(--display); font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.08; margin:0 0 .45em; }
.legale h2 { font-size:clamp(1.25rem, 1.1rem + .6vw, 1.55rem); margin:2.2rem 0 .5em; }
.legale p { margin:0 0 1em; color:var(--ink-soft); }
.legale p.lede { color:var(--ink-soft); }
.legale p b { color:var(--ink); font-weight:600; }
.legale ul { margin:0 0 1em; padding-left:1.2rem; color:var(--ink-soft); }
.legale li { margin-bottom:.45em; }
.legale li b { color:var(--ink); font-weight:600; }
.legale-data { margin:.6rem 0 0; }

/* ================= il LAYOUT A RIQUADRI (ottobre 2026) =================
   La testata col menu, la home a due colonne (i libri a sinistra, il
   riquadro delle novita' a destra), le pagine del menu e il piede su una
   riga sola. Stessi colori di sempre: tutto passa dai token, nei due temi. */

/* --- la testata: marchio, menu, quattro tasti --- */
.site-head .testata { gap:clamp(.6rem, 2vw, 2.2rem); justify-content:flex-start; }
.site-head .testata .nav { display:none; }
.site-head .testata .head-actions { margin-left:auto; }
@media (min-width: 40.0625rem) {
  .site-head .testata .brand img { height:4.4rem; }
}
@media (min-width: 56rem) {
  .site-head .testata .nav { display:flex; align-items:center; margin-left:auto;
                             gap:clamp(1rem, 1.9vw, 1.9rem); }
  .site-head .testata .nav a { font-family:var(--sans); font-size:.9rem; font-weight:600;
                               letter-spacing:.01em; text-transform:none; color:var(--ink);
                               text-decoration:none; padding:.35rem 0; }
  .site-head .testata .nav a:hover { color:var(--accent); }
  .site-head .testata .nav a[aria-current="page"] { color:var(--accent); }
  .site-head .testata .nav a[aria-current="page"]::after { transform:scaleX(1); }
  .site-head .testata .head-actions { margin-left:.6rem; }
}
/* il telefono stretto: quattro tasti e il marchio devono stare in una riga */
@media (max-width: 26rem) {
  .site-head .testata { gap:.4rem; }
  .site-head .testata .brand img { height:3rem; }
  .site-head .testata .themebtn { width:36px; height:36px; }
}

/* il pannello del tasto a tre tratti: le voci del menu (solo dove la testata
   non le mostra), i mondi uno per uno e l'interruttore del tema */
.menu-pannello { min-width:16.5rem; max-height:calc(100vh - 6rem); overflow-y:auto; }
.mp-voci { display:flex; flex-direction:column; padding-bottom:.35rem; margin-bottom:.35rem;
           border-bottom:1px solid var(--line); }
@media (min-width: 56rem) { .mp-voci { display:none; } }
.menu-pannello .mp-voci a[aria-current="page"] { color:var(--accent); font-weight:600; }
.mp-tit { margin:.4rem .8rem .2rem; font-family:var(--sans); font-size:.66rem; font-weight:700;
          letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.menu-pannello .mp-tema { display:flex; align-items:center; gap:.6rem; margin-top:.35rem;
                          border-top:1px solid var(--line); border-radius:0 0 9px 9px;
                          padding-top:.75rem; }
.mp-tema svg { width:1.05rem; height:1.05rem; flex:none; }
.mp-tema .sun, .mp-tema .t-scuro { display:none; }
:root[data-theme="light"] .mp-tema .sun { display:block; }
:root[data-theme="light"] .mp-tema .t-scuro { display:inline; }
:root[data-theme="light"] .mp-tema .moon, :root[data-theme="light"] .mp-tema .t-chiaro { display:none; }

/* la barra della ricerca: scende sotto la testata, a tutta larghezza */
.cerca-barra { border-top:1px solid var(--line); padding-block:.8rem; }
.cerca-barra .wrap, .cerca-grande { display:flex; gap:.6rem; align-items:center; }
.cerca-barra input, .cerca-grande input {
  flex:1; min-width:0; margin:0; font-family:var(--sans); font-size:1rem; padding:.72rem 1.1rem;
  border-radius:999px; border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink); }
.cerca-barra input:focus, .cerca-grande input:focus { border-color:var(--accent); outline:none; }
.cerca-barra .btn.small, .cerca-grande .btn { margin-top:0; flex:none; }
.cerca-grande { max-width:40rem; margin:1.3rem 0 1.2rem; }

/* --- i titoli delle pagine del menu --- */
.pg-titolo { font-family:var(--display); font-weight:600; letter-spacing:-.015em;
             font-size:clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); line-height:1.08; margin:0; }
.pg-sotto { margin:.45rem 0 0; font-family:var(--sans); font-size:.9rem; color:var(--ink-faint); }

/* --- la home a due colonne --- */
.casa-due { padding-top:calc(var(--sp-lg) * .55); }
.cd-griglia { display:grid; gap:calc(var(--sp-lg) * .7); }
@media (min-width: 64rem) {
  .cd-griglia { grid-template-columns:minmax(0, 1.7fr) minmax(19rem, 1fr); align-items:start;
                gap:clamp(2rem, 3.5vw, 3.4rem); }
  .cd-lato { position:sticky; top:5.4rem; }
}
.cd-mondo { margin-top:calc(var(--sp) * 1.5); }
.cd-mondo + .cd-mondo { margin-top:calc(var(--sp) * 1.8); }
.cd-testa { display:flex; align-items:baseline; justify-content:space-between; gap:.4rem 1rem;
            flex-wrap:wrap; margin-bottom:.85rem; }
.cd-testa h2 { margin:0; font-size:clamp(1.3rem, 1.05rem + 1vw, 1.75rem); }
.cd-testa h2 a { color:inherit; text-decoration:none; }
.cd-testa h2 a:hover { color:var(--accent); }
.cd-conta { font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.14em;
            text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }

/* le TESSERE: la copertina e il titolo, quattro per fila */
.tessere { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.7rem; }
@media (min-width: 34rem) { .tessere { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.85rem; } }
@media (min-width: 64rem) { .tessere-larghe { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.tessera { display:flex; flex-direction:column; gap:.5rem; padding:.5rem .5rem .65rem;
           border:1px solid var(--line); border-radius:12px; background:var(--paper-2);
           color:var(--ink); text-decoration:none;
           transition:border-color .18s ease, translate .22s cubic-bezier(.2,.8,.2,1),
                      box-shadow .22s ease; }
.tessera:hover { border-color:var(--accent); translate:0 -2px;
                 box-shadow:0 12px 26px -18px var(--shadow); color:var(--ink); }
/* la copertina INTERA e tutte della stessa misura: la casella e' 2:3 per
   tutti, cosi' le file restano allineate, e l'immagine si STIRA fino a
   riempirla (come nelle schede delle saghe, scelta dell'utente) invece di
   essere ritagliata: con object-fit:cover le copertine piu' alte perdevano
   testa e piedi. Il titolo ha sempre il posto di due righe */
.ts-cover { position:relative; aspect-ratio:2/3; border-radius:8px; overflow:hidden;
            background:var(--paper-3); }
.ts-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.ts-cover.vuota { display:grid; place-items:center; }
.ts-cover .tag-fumetto { top:.45rem; font-size:.54rem; }
.ts-titolo { font-family:var(--sans); font-size:.74rem; font-weight:600; line-height:1.3;
             min-height:2.6em; text-align:center; display:-webkit-box; -webkit-line-clamp:2;
             line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* la casella "Vedi tutti": tratteggiata, alta come le altre della fila */
.tessera-tutti { align-items:center; justify-content:center; border-style:dashed;
                 background:transparent; }
.tessera-tutti .pill { display:inline-flex; align-items:center; gap:.3rem; padding:.45em .9em;
                       border-radius:999px; background:var(--paper-3); color:var(--accent-ink);
                       font-family:var(--sans); font-size:.76rem; font-weight:600; }
.tessera-tutti .chev { width:.95em; height:.95em; }

/* il RIQUADRO delle novita': titolo, sezioni con l'occhiello, un filo in mezzo */
.pannello { border:1px solid var(--line); border-radius:16px; background:var(--paper-2);
            padding:clamp(1.2rem, 1rem + 1vw, 1.7rem); }
.pn-titolo { margin:0; font-size:clamp(1.45rem, 1.2rem + 1vw, 2rem); }
.pn-sez { margin:1.35rem 0 .75rem; font-family:var(--sans); font-size:.68rem; font-weight:700;
          letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.pn-vuoto { margin:0; font-family:var(--sans); font-size:.86rem; color:var(--ink-faint); }
.pn-filo { border:0; border-top:1px solid var(--line); margin:1.45rem 0 0; }
.pn-link { display:inline-flex; align-items:center; gap:.3rem; margin-top:.85rem;
           font-family:var(--sans); font-size:.82rem; font-weight:600; text-decoration:none;
           color:var(--accent-ink); }
.pn-link .chev, .pn-tutte .chev { width:1em; height:1em; }
.pn-tutte { display:flex; align-items:center; justify-content:center; gap:.35rem;
            width:100%; margin-top:1.5rem; }

/* una puntata: miniatura 16:9 col play, testo accanto */
.pn-video { display:flex; flex-direction:column; gap:.85rem; }
.pv { display:grid; grid-template-columns:minmax(6.5rem, 42%) minmax(0, 1fr); gap:.9rem;
      align-items:start; text-decoration:none; color:var(--ink); }
.pv-img { position:relative; aspect-ratio:16/9; border-radius:9px; overflow:hidden;
          background:var(--paper-3); display:grid; place-items:center; border:1px solid var(--line); }
.pv-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
              transition:scale .4s cubic-bezier(.2,.8,.2,1); }
.pv:hover .pv-img img { scale:1.05; }
.pv-play { position:relative; z-index:1; width:2.2rem; height:2.2rem; border-radius:50%;
           display:grid; place-items:center; color:#F2E9DC;
           background:color-mix(in srgb, #0E0C0A 55%, transparent);
           border:1px solid color-mix(in srgb, #F2E9DC 35%, transparent); }
.pv-play svg { width:.95rem; height:.95rem; margin-left:.1rem; }
.pv-testo { display:flex; flex-direction:column; gap:.2rem; min-width:0; padding-top:.1rem; }
.pv-testo b { font-family:var(--sans); font-size:.9rem; line-height:1.3; }
.pv:hover .pv-testo b { color:var(--accent-ink); }
.pv-sotto { font-family:var(--sans); font-size:.78rem; color:var(--ink-faint); line-height:1.4; }
.pv-tag { align-self:flex-start; margin-top:.3rem; padding:.18em .6em .16em; border-radius:6px;
          font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.04em; }
.pv-tag.nuovo { background:#E7A9B4; color:#17120D; }
.pv-tag.popolare { background:var(--beige); color:#17120D; }

/* il "Riprendi" dentro il riquadro: copertina piccola e dove eri */
.pn-ripresa { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.pn-ripresa a { display:grid; grid-template-columns:2.5rem minmax(0, 1fr); gap:.7rem;
                align-items:center; text-decoration:none; color:var(--ink); }
.pn-ripresa img { width:2.5rem; height:auto; aspect-ratio:2/3; object-fit:fill; border-radius:4px; }
.pn-ripresa b { display:block; font-family:var(--sans); font-size:.86rem; line-height:1.3; }
.pn-ripresa small { font-family:var(--sans); font-size:.76rem; color:var(--ink-faint); }

/* le NEWS: il calendario, il titolo, la data e due righe */
.pn-news { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.05rem; }
.pnews { display:grid; grid-template-columns:1.25rem minmax(0, 1fr); gap:.75rem; }
.pn-cal { width:1.2rem; height:1.2rem; margin-top:.12rem; color:var(--ink-soft); }
.pnews b { display:block; font-family:var(--sans); font-size:.9rem; line-height:1.35; }
.pnews b a { color:inherit; text-decoration:none; }
.pnews b a:hover { color:var(--accent-ink); text-decoration:underline; }
.pn-data { display:block; margin-top:.1rem; font-family:var(--sans); font-size:.74rem; color:var(--accent); }
.pnews p { margin:.3rem 0 0; font-family:var(--sans); font-size:.82rem; line-height:1.55;
           color:var(--ink-soft); }

/* --- le pagine del menu --- */
.nv-griglia { display:grid; gap:calc(var(--sp-lg) * .6); }
@media (min-width: 64rem) {
  .nv-griglia { grid-template-columns:minmax(0, 1.7fr) minmax(19rem, 1fr); align-items:start; }
  .nv-griglia > .pannello { position:sticky; top:5.4rem; margin-top:calc(var(--sp) * 1.5); }
}
.nv-news { gap:1.4rem; }
.bio-pagina .pg-titolo { margin-bottom:1.3rem; }
.bio-pagina p { line-height:1.75; }
.bio-azioni { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.contatti .lede { margin-top:1.1rem; }
.ct-social { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.ct-social a { display:inline-block; padding:.5em 1.05em; border-radius:999px;
               border:1px solid var(--line-2); font-family:var(--sans); font-size:.86rem;
               font-weight:600; text-decoration:none; color:var(--ink); }
.ct-social a:hover { border-color:var(--accent); color:var(--accent); }
.ct-chi { margin-top:1.9rem; }
.cr-serie { list-style:none; margin:0; padding:0; display:grid; gap:.6rem;
            grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); }
.cr-serie a { display:flex; flex-direction:column; gap:.15rem; padding:.85rem 1rem;
              border:1px solid var(--line); border-radius:12px; background:var(--paper-2);
              text-decoration:none; color:var(--ink); }
.cr-serie a:hover { border-color:var(--accent); }
.cr-serie span { font-family:var(--sans); font-size:.78rem; color:var(--ink-faint); }
.cr-video { max-width:40rem; }
/* Saghe: la vecchia vetrina dei mondi, sotto il suo titolo */
.saghe-testa { padding-bottom:0; }
.section.saghe-testa + .section { border-top:0; padding-top:calc(var(--sp-lg) * .5); }

/* --- il piede: una riga, i punti a separare --- */
.site-foot .foot-riga { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
                        gap:.45rem 0; padding-block:1.35rem; font-family:var(--sans);
                        font-size:.8rem; color:var(--ink-faint); text-align:center; }
.foot-riga > * + *::before { content:"·"; margin:0 .65rem; color:var(--line-2); }
.foot-riga a { color:var(--ink-soft); text-decoration:none; }
.foot-riga a:hover { color:var(--accent); }

/* --- amministrazione: le news, una scheda modificabile per notizia --- */
.ad-news { grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); margin-top:1.4rem; }
.ad-news textarea { min-height:5rem; }

/* ================= CARTA E INCHIOSTRO: lo sfondo di tutto il sito =========
   Dietro ogni pagina, leggerissimo, un motivo a tratto (libri, piuma,
   calamaio, rametti, lettere, stelline: public/assets/img/motivo.svg, una
   piastrella che si ripete senza cuciture) e in alto una luce calda, come
   una lampada da lettura. Il disegno fa da MASCHERA: il colore lo mette il
   tema (beige sul buio, marrone sulla carta), un solo file per tutti e due.
   Niente movimento, niente copione: un livello fisso e basta. Fuori dal
   lettore e dalle pagine che hanno gia' il loro fondale (mondi e Saghe). */
body { background:
  radial-gradient(ellipse 70% 45% at 12% -8%, rgba(228,205,166,.075), transparent 70%),
  radial-gradient(ellipse 55% 40% at 96% 6%, rgba(136,90,52,.09), transparent 70%),
  var(--paper);
  background-attachment:fixed; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:#E4CDA6; opacity:.07;
  -webkit-mask-image:url("/assets/img/motivo.svg?v=1"); mask-image:url("/assets/img/motivo.svg?v=1");
  -webkit-mask-size:600px 600px; mask-size:600px 600px;
  -webkit-mask-repeat:repeat; mask-repeat:repeat; }
:root[data-theme="light"] body::before { background-color:#6E4529; opacity:.11; }
/* la FOTO dietro a tutto: una natura morta (libri, candela, calamaio, rose)
   con gli oggetti ai bordi e il centro vuoto, cosi' il testo si legge. Sta
   su body::after, fissa e sotto il motivo (-2 contro -1), perche' iPhone
   ignora background-attachment:fixed. Ripete le due luci calde del body,
   che la foto altrimenti coprirebbe. Quattro file: scuro e chiaro, e sugli
   schermi piu' alti che larghi (telefoni) le verticali con gli oggetti in
   basso. */
:root { --foto:url("/assets/img/sfondo-scuro.webp?v=1"); }
:root[data-theme="light"] { --foto:url("/assets/img/sfondo-chiaro.webp?v=1"); }
@media (orientation: portrait) {
  :root { --foto:url("/assets/img/sfondo-scuro-verticale.webp?v=1"); }
  :root[data-theme="light"] { --foto:url("/assets/img/sfondo-chiaro-verticale.webp?v=1"); }
}
body::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 45% at 12% -8%, rgba(228,205,166,.075), transparent 70%),
    radial-gradient(ellipse 55% 40% at 96% 6%, rgba(136,90,52,.09), transparent 70%),
    var(--foto) center bottom / cover no-repeat; }
body.modo-lettura::before, body.world-page::before, body.home::before,
body.modo-lettura::after, body.world-page::after { display:none; }
body.modo-lettura { background:var(--paper); }

/* il FREGIO sotto il titolo delle pagine: un filo, due riccioli e un rombo */
.pg-titolo::after { content:""; display:block; width:10.5rem; max-width:60%; height:1.25rem;
  margin-top:.55rem; background-color:var(--accent);
  -webkit-mask:url("/assets/img/fregio.svg?v=1") left center / contain no-repeat;
  mask:url("/assets/img/fregio.svg?v=1") left center / contain no-repeat; }

/* l'EMBLEMA di ogni mondo, accanto al suo nome, nel colore del mondo */
.emblema { display:inline-block; width:1.2em; height:1.2em; vertical-align:-.2em;
           margin-right:.42em; color:var(--hx, var(--accent)); flex:none; }
.emblema svg { display:block; width:100%; height:100%; overflow:visible; }
.emblema svg * { vector-effect:non-scaling-stroke; }
.menu-pannello .emblema { width:1.05em; height:1.05em; vertical-align:-.18em; margin-right:.55em; }

/* Bio e Contatti: il testo e, accanto, un disegno a tratto */
.pagina-disegno { display:grid; gap:calc(var(--sp) * 1.2); max-width:58rem; }
.pd-testo { max-width:var(--measure); }
.pd-figura { color:var(--accent); max-width:17rem; opacity:.9; }
.pd-figura .disegno { width:100%; height:auto; }
@media (min-width: 56rem) {
  .pagina-disegno { grid-template-columns:minmax(0, 1fr) minmax(14rem, 20rem); align-items:center;
                    gap:clamp(2rem, 5vw, 4.5rem); }
  .pd-figura { grid-column:2; grid-row:1; max-width:none; }
  .pd-testo { grid-column:1; grid-row:1; }
}

/* ================= LASTRA DI VETRO: la copertina delle tessere ===========
   La copertina e' una lastra di vetro spesso, come il liquid glass di
   Apple: lungo i lati la stessa copertina, ingrandita e sfocata, fa da
   lente (la variabile --cover la mette _tessere.html), un filo di luce
   beige segna lo spessore in alto, il bordo basso e' piu' scuro.
   Niente riflessi dentro (tolti su richiesta dell'utente). Niente filtri SVG: Safari non applica la
   rifrazione (ottobre 2026), cosi' su iPhone si vede uguale. L'immagine
   resta STIRATA, mai ritagliata. Alla pressione la lastra cede appena. */
.tessera { border-radius:18px; }
.ts-cover { border-radius:11px; isolation:isolate;
            box-shadow:0 14px 22px -16px rgba(0,0,0,.8), 0 2px 5px -2px rgba(0,0,0,.45);
            transition:transform .16s cubic-bezier(.23,1,.32,1); }
:root[data-theme="light"] .ts-cover {
            box-shadow:0 14px 22px -16px rgba(30,23,18,.55), 0 2px 5px -2px rgba(30,23,18,.3); }
.tessera:active .ts-cover { transform:scale(.97); }
/* la lente: copertina al 112%, sfocata e un filo piu' luminosa, visibile
   solo in una fascia lungo i quattro lati */
.ts-cover::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background:var(--cover) center / 112% 112% no-repeat;
  filter:blur(3px) saturate(1.3) brightness(1.12);
  -webkit-mask:linear-gradient(90deg, #000, transparent 13%, transparent 87%, #000),
               linear-gradient(180deg, #000, transparent 9%, transparent 91%, #000);
  mask:linear-gradient(90deg, #000, transparent 13%, transparent 87%, #000),
       linear-gradient(180deg, #000, transparent 9%, transparent 91%, #000); }
/* lo spessore: luce sul bordo alto e a sinistra, ombra sul basso e a
   destra. Il riflesso in diagonale e l'alone interno li ha tolti l'utente */
.ts-cover::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(0deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 24%);
  box-shadow:
    inset 0 1px 0 rgba(228,205,166,.6),
    inset 1px 0 0 rgba(228,205,166,.3),
    inset 0 -1px 0 rgba(0,0,0,.5),
    inset -1px 0 0 rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(228,205,166,.12); }
.ts-cover .tag-fumetto { z-index:3; }

/* ================= RIQUADRO DI VETRO: la tessera intorno alla lastra ======
   Il riquadro diventa vetro smerigliato: lascia passare la foto di sfondo,
   sfocata e un po' piu' satura, con un velo del colore della carta perche'
   il titolo si legga sempre. Il filo di luce in alto e' lo spessore del
   vetro. I colori stanno nelle variabili, cosi' il :hover di sopra (bordo
   accento) continua a vincere anche sul tema chiaro. La casella "Vedi
   tutti" resta un posto vuoto tratteggiato, senza vetro. */
:root { --vetro-velo:color-mix(in srgb, var(--paper-2) 52%, transparent);
        --vetro-filo:rgba(228,205,166,.16); --vetro-luce:rgba(228,205,166,.18);
        --vetro-ombra:rgba(0,0,0,.8); }
:root[data-theme="light"] { --vetro-velo:color-mix(in srgb, var(--paper) 50%, transparent);
        --vetro-filo:rgba(136,90,52,.2); --vetro-luce:color-mix(in srgb, var(--paper) 90%, transparent);
        --vetro-ombra:rgba(30,23,18,.45); }
.tessera { background:var(--vetro-velo); border-color:var(--vetro-filo);
           -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
           box-shadow:inset 0 1px 0 var(--vetro-luce), 0 18px 30px -22px var(--vetro-ombra); }
.tessera:hover { box-shadow:inset 0 1px 0 var(--vetro-luce), 0 22px 34px -20px var(--vetro-ombra); }
.tessera-tutti { background:transparent; box-shadow:none;
                 -webkit-backdrop-filter:none; backdrop-filter:none; }
.tessera-tutti:hover { box-shadow:none; }
@media (prefers-reduced-transparency: reduce) {
  .tessera:not(.tessera-tutti) { background:var(--paper-2);
                                 -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ================= PAGINE DI VETRO: sfondi propri e riquadri di vetro ======
   Libri, Saghe, Novita', Bio e Contatti hanno ognuna la sua foto di sfondo,
   nature morte generate come quella della home: scaffali e scala (Libri),
   mappamondo e bussola (Saghe), pacchi di libri e bobina (Novita'),
   scrittoio con la lavanda (Bio), buste con la ceralacca (Contatti). Quattro
   file per pagina: scuro e chiaro, orizzontale e verticale. La classe
   pg-<pagina> sta nel bodyclass del template e cambia solo --foto: il resto
   lo fa body::after di CARTA E INCHIOSTRO. Su Saghe la foto sta sotto il
   fondale coi simboli dei mondi. */
.pg-libri { --foto:url("/assets/img/sfondo-libri-scuro.webp?v=1"); }
:root[data-theme="light"] .pg-libri { --foto:url("/assets/img/sfondo-libri-chiaro.webp?v=1"); }
.pg-saghe { --foto:url("/assets/img/sfondo-saghe-scuro.webp?v=1"); }
:root[data-theme="light"] .pg-saghe { --foto:url("/assets/img/sfondo-saghe-chiaro.webp?v=1"); }
.pg-novita { --foto:url("/assets/img/sfondo-novita-scuro.webp?v=1"); }
:root[data-theme="light"] .pg-novita { --foto:url("/assets/img/sfondo-novita-chiaro.webp?v=1"); }
.pg-bio { --foto:url("/assets/img/sfondo-bio-scuro.webp?v=1"); }
:root[data-theme="light"] .pg-bio { --foto:url("/assets/img/sfondo-bio-chiaro.webp?v=1"); }
.pg-contatti { --foto:url("/assets/img/sfondo-contatti-scuro.webp?v=1"); }
:root[data-theme="light"] .pg-contatti { --foto:url("/assets/img/sfondo-contatti-chiaro.webp?v=1"); }
@media (orientation: portrait) {
  .pg-libri { --foto:url("/assets/img/sfondo-libri-scuro-verticale.webp?v=1"); }
  :root[data-theme="light"] .pg-libri { --foto:url("/assets/img/sfondo-libri-chiaro-verticale.webp?v=1"); }
  .pg-saghe { --foto:url("/assets/img/sfondo-saghe-scuro-verticale.webp?v=1"); }
  :root[data-theme="light"] .pg-saghe { --foto:url("/assets/img/sfondo-saghe-chiaro-verticale.webp?v=1"); }
  .pg-novita { --foto:url("/assets/img/sfondo-novita-scuro-verticale.webp?v=1"); }
  :root[data-theme="light"] .pg-novita { --foto:url("/assets/img/sfondo-novita-chiaro-verticale.webp?v=1"); }
  .pg-bio { --foto:url("/assets/img/sfondo-bio-scuro-verticale.webp?v=1"); }
  :root[data-theme="light"] .pg-bio { --foto:url("/assets/img/sfondo-bio-chiaro-verticale.webp?v=1"); }
  .pg-contatti { --foto:url("/assets/img/sfondo-contatti-scuro-verticale.webp?v=1"); }
  :root[data-theme="light"] .pg-contatti { --foto:url("/assets/img/sfondo-contatti-chiaro-verticale.webp?v=1"); }
}
/* i RIQUADRI delle pagine sono dello stesso vetro delle tessere (variabili
   --vetro-* di RIQUADRO DI VETRO), senza riflessi dentro: il riquadro
   Novita' (anche in home), il testo di Bio e Contatti, le descrizioni dei
   mondi in Saghe, le news, i messaggi "vuoto" di Novita' e i social */
.pannello, .pd-testo, .world-desc, .nv-news, .nv-griglia .pn-vuoto, .pd-figura {
  background:var(--vetro-velo); border:1px solid var(--vetro-filo);
  -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--vetro-luce), 0 22px 40px -28px var(--vetro-ombra); }
.pd-testo, .world-desc, .nv-news, .nv-griglia .pn-vuoto { border-radius:18px; }
.pd-testo { padding:clamp(1.3rem, 1rem + 1.5vw, 2.2rem); }
.world-desc { margin:.9rem 0 0; padding:.95rem 1.15rem; }
.nv-news { padding:clamp(1.1rem, .9rem + 1vw, 1.5rem); }
.nv-griglia .pn-vuoto { padding:1rem 1.15rem; }
.ct-social a { background:var(--vetro-velo); border-color:var(--vetro-filo);
  -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4); }
/* l'illustrazione di Bio e Contatti: una foto generata dentro una cornice
   di vetro, come la copertina dentro la tessera (prima era un disegno SVG,
   i file restano in _disegni/) */
.pd-figura { opacity:1; padding:.55rem; border-radius:22px; align-self:start; }
.pd-figura img { display:block; width:100%; height:auto; aspect-ratio:2/3; border-radius:15px;
  box-shadow:0 12px 22px -14px rgba(0,0,0,.7); }
:root[data-theme="light"] .pd-figura img { box-shadow:0 12px 22px -14px rgba(30,23,18,.45); }

/* i MODALI di vetro: menu e profilo, la conferma del sito, il modale della
   descrizione in Amministrazione e i pannelli del lettore. Vetro piu'
   spesso dei riquadri (velo piu' pieno e sfocatura doppia), perche' stanno
   sopra al testo e devono leggersi al primo colpo. Il velo dietro ai
   modali sfoca anche la pagina. */
:root { --vetro-velo-forte:color-mix(in srgb, var(--paper-2) 76%, transparent);
        --vetro-dietro:rgba(0,0,0,.42); }
:root[data-theme="light"] { --vetro-velo-forte:color-mix(in srgb, var(--paper) 74%, transparent);
        --vetro-dietro:rgba(30,23,18,.28); }
.prof-menu, .conf, dialog#descdlg, .vaipanel {
  background:var(--vetro-velo-forte); border-color:var(--vetro-filo);
  -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:inset 0 1px 0 var(--vetro-luce), 0 26px 60px -24px var(--vetro-ombra); }
@media (hover:hover) {
  .prof-menu a:hover, .prof-menu button:hover { background:color-mix(in srgb, var(--paper-3) 70%, transparent); }
}
.prof-menu a:active, .prof-menu button:active { background:color-mix(in srgb, var(--paper-3) 70%, transparent); }
.conf-back, .velo { background:var(--vetro-dietro);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* la testata sfoca col suo ::before invece che da se': un backdrop-filter
   sulla testata farebbe da radice e il menu che ne scende non vedrebbe la
   pagina sotto di se' */
.site-head { -webkit-backdrop-filter:none; backdrop-filter:none; }
.site-head::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); }
@media (prefers-reduced-transparency: reduce) {
  .pannello, .pd-testo, .world-desc, .nv-news, .nv-griglia .pn-vuoto, .pd-figura,
  .ct-social a, .prof-menu, .conf, dialog#descdlg, .vaipanel {
    background:var(--paper-2); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
/* dentro il riquadro Drama di Novita' il messaggio "vuoto" resta testo
   semplice: niente vetro sopra al vetro */
.nv-griglia .pannello .pn-vuoto { background:none; border:0; box-shadow:none; padding:0;
  border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; }

/* ================= INGRESSO DELLA HOME: l'insegna del club ================
   La prima schermata della home dice subito dove sei. La foto della home
   ha gli oggetti ai lati (libri, candela e piuma a sinistra, carte e rose a
   destra) e il centro vuoto: l'insegna sta li', al centro, come il titolo
   su un frontespizio. Il marchio grande, sotto "Libri e serie Drama", le
   PORTE dei mondi (piccole lastre di vetro su una fila, coi libri contati
   dal catalogo) e una sola azione. Niente riquadro intorno: la foto resta
   libera. Le porte crescono per riempire la fila, cosi' non restano buchi
   (sul telefono 2 + 2 + 1, l'ultima al centro). Sotto, la home di sempre. */
.ingresso { padding-block:clamp(1.6rem, 5vh, 4rem) clamp(.8rem, 3vh, 2rem); }
.ingresso + .section { border-top:0; }
.ing-griglia { display:flex; align-items:center; justify-content:center;
  min-height:clamp(24rem, 70svh, 46rem); }
.ing-insegna { display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1.25rem; width:100%; max-width:60rem; }
.ing-marchio { margin:0; line-height:0; }
.ing-marchio img { width:min(100%, 36rem); height:auto;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.55)); }
:root[data-theme="light"] .ing-marchio img { filter:drop-shadow(0 2px 18px rgba(228,205,166,.9)); }
.ing-sotto { margin:-.4rem 0 .2rem; font-family:var(--sans);
  font-size:clamp(1rem, .92rem + .35vw, 1.2rem); color:var(--ink-soft); }
/* le PORTE dei mondi: emblema nel colore del mondo, nome e quanti libri */
.ing-porte { display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem; width:100%; }
.porta { flex:1 1 9rem; max-width:11.5rem; display:flex; flex-direction:column; align-items:center;
  gap:.15rem; padding:.85rem .7rem .8rem; border-radius:18px;
  background:var(--vetro-velo); border:1px solid var(--vetro-filo);
  -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--vetro-luce), 0 18px 30px -22px var(--vetro-ombra);
  color:var(--ink); text-decoration:none;
  transition:border-color .18s ease, translate .22s cubic-bezier(.23,1,.32,1); }
.porta .emblema { display:block; width:1.5em; height:1.5em; margin:0 0 .35rem; }
.porta b { font-family:var(--sans); font-size:.86rem; font-weight:700; line-height:1.25; }
.porta small { font-family:var(--sans); font-size:.72rem; color:var(--ink-faint); }
@media (hover: hover) and (pointer: fine) {
  .porta:hover { border-color:var(--hx, var(--accent)); translate:0 -2px; color:var(--ink); }
}
.porta:active { scale:.98; }
.ing-azione { margin-top:.2rem; }
/* i titoli che stanno direttamente sulla foto, fuori dal vetro, hanno un
   alone: cosi' si leggono anche quando passano sopra le carte chiare */
:root { --testo-su-foto:0 1px 2px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.6); }
:root[data-theme="light"] { --testo-su-foto:0 1px 2px color-mix(in srgb, var(--paper) 90%, transparent),
  0 0 18px color-mix(in srgb, var(--paper) 75%, transparent); }
.pg-titolo, .pg-sotto, .cd-testa h2, .cd-conta, .ing-sotto { text-shadow:var(--testo-su-foto); }
@media (prefers-reduced-transparency: reduce) {
  .porta { background:var(--paper-2); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ================= AMMINISTRAZIONE PULITA =================================
   In Amministrazione (admin.html e admin_edit.html, bodyclass pannello-admin)
   niente sfondi: ne' la foto, ne' il motivo a tratto, ne' le luci calde.
   Solo la carta piena del tema, e menu e finestre pieni, senza vetro: e' un
   pannello di lavoro (scelta dell'utente, 29 ott 2026) */
body.pannello-admin { background:var(--paper); }
body.pannello-admin::before, body.pannello-admin::after { display:none; }
body.pannello-admin .prof-menu, body.pannello-admin .conf, body.pannello-admin dialog#descdlg {
  background:var(--paper-2); border-color:var(--line-2);
  -webkit-backdrop-filter:none; backdrop-filter:none; }
body.pannello-admin .conf-back { -webkit-backdrop-filter:none; backdrop-filter:none; }

/* ================= PIEDE IN FONDO: anche sulle pagine corte ================
   Sulle pagine con poco contenuto il piede restava a meta' schermo e sotto
   si vedeva la foto fissa di body::after. Il body diventa una colonna alta
   almeno quanto la finestra e il main cresce a riempire il posto: il piede
   tocca sempre il fondo, e quando il contenuto e' lungo scorre come prima.
   dvh segue la barra di Safari che compare e sparisce (vh fa da riserva).
   La testata sticky e la .adminbar restano elementi della colonna, come
   prima. Il lettore resta fuori: ha la sua impaginazione a tutta altezza e
   il piede nascosto. */
body:not(.modo-lettura) { display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh; }
body:not(.modo-lettura) > main { flex:1 0 auto; }
body:not(.modo-lettura) > .site-foot { flex-shrink:0; }