:root {
  --bg: #f4eee1;        /* carta vergata, calda */
  --fg: #221c14;        /* inchiostro */
  --muted: #6f6659;
  --line: #d8cfbc;
  --card: #fbf7ee;
  --accent: #7a2f2f;    /* oxblood */
  /* il testo sopra l'accento: bianco sull'oxblood, scuro sul salmone del tema
     scuro, dove il bianco dava 2,65:1 (26/09/2026) */
  --on-accent: #fff;
  --gold: #8f6229;      /* ocra: fregi, filetti — un filo più scura il 26/09/2026: le etichette in oro erano a 4,06:1 sulla carta */
  --warn-bg: #f6ead3;
  --warn-line: #d8ac68;
  /* Il castello di Elsinore (castello.js): all'ALBA nel tema chiaro. Le stelle
     hanno opacità loro perché di giorno si spengono del tutto. */
  --cs-sky-a: #cdd8e2;
  --cs-sky-b: #f0e6cf;
  --cs-stars: 0;
  --cs-moon: #f7ecca;
  --cs-hill: #cdc5ad;
  --cs-stone-a: #b9ae97;
  --cs-stone-b: #94896f;
  --cs-mortar: rgba(84, 71, 51, .22);
  --cs-slit: #6b604a;
  --cs-merli: #8d8168;
  --cs-flag: #7a2f2f;
  --cs-gate: #57503e;
  --cs-ground: #c9bfa2;
  --cs-road: #b7ab8c;
  --cs-win: rgba(255, 248, 230, .78);
  --cs-win-line: rgba(122, 96, 52, .55);
  --cs-win-fg: #4a3c22;
  --cs-win-glow: rgba(255, 214, 130, .35);
  --max: 66rem;        /* guscio pagina: sfrutta lo schermo su desktop */
  --reading: 48rem;    /* misura di lettura per il testo lungo */
  /* Le pile dei caratteri finiscono coi font di SISTEMA per arabo e cinese: la
     CSP (default-src 'self') vieta i font esterni, quindi si usa quello che c'è
     sulla macchina. La sostituzione è per singolo glifo: Georgia serve il
     latino, e appena arriva un carattere che Georgia non ha il browser scende
     nella pila fino al primo font che lo possiede. Senza questa coda un lettore
     arabo o cinese vedrebbe il font di riserva del browser, con metriche e peso
     diversi dal resto della pagina. */
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman',
    'Geeza Pro', 'Al Bayan', 'Noto Naskh Arabic', 'Traditional Arabic', 'Amiri',
    'Songti SC', 'Songti TC', 'STSong', 'Noto Serif CJK SC', 'Source Han Serif SC', SimSun, PMingLiU,
    serif;
  --sans: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
    'Geeza Pro', 'Noto Sans Arabic',
    'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
  /* Card vetro nella scena del bosco (chiaro = alba) */
  --scene-card-bg: rgba(255, 251, 240, .58);
  --scene-card-line: rgba(255, 255, 255, .7);
  --scene-card-fg: #2c2113;
  --scene-card-muted: #6d5b3f;
  --scene-card-shadow: rgba(46, 28, 6, .3);
  /* Elevazione condivisa (stesso linguaggio del bosco: vetro e profondità) */
  --shadow-1: 0 1px 2px rgba(42, 28, 6, .05), 0 10px 26px -14px rgba(42, 28, 6, .28);
  --shadow-2: 0 2px 4px rgba(42, 28, 6, .07), 0 20px 48px -18px rgba(42, 28, 6, .38);
  --glass: color-mix(in srgb, var(--bg) 78%, transparent);
}

/* Scuro: automatico da sistema, ma solo se l'utente non ha forzato "chiaro". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #15140f;
    --fg: #ece6d9;
    --muted: #a59b89;
    --line: #332f27;
    --card: #1d1b15;
    --accent: #d98b7a;
  --on-accent: #1d140d;
    --gold: #c99a55;
    --warn-bg: #2a2115;
    --warn-line: #7a5a2c;
    --cs-sky-a: #0e1424;
    --cs-sky-b: #232a40;
    --cs-stars: .9;
    --cs-moon: #e8d9a4;
    --cs-hill: #10151d;
    --cs-stone-a: #423d33;
    --cs-stone-b: #27231c;
    --cs-mortar: rgba(0, 0, 0, .3);
    --cs-slit: #0f0c08;
    --cs-merli: #4a4436;
    --cs-flag: #a04b43;
    --cs-gate: #0e0b07;
    --cs-ground: #171a14;
    --cs-road: #241f18;
    --cs-win: rgba(46, 34, 16, .88);
    --cs-win-line: rgba(233, 185, 108, .5);
    --cs-win-fg: #f3dfae;
    --cs-win-glow: rgba(255, 190, 90, .28);
    --scene-card-bg: rgba(14, 18, 30, .55);
    --scene-card-line: rgba(255, 255, 255, .22);
    --scene-card-fg: #f0e6cc;
    --scene-card-muted: #b3a582;
    --scene-card-shadow: rgba(0, 0, 12, .6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -12px rgba(0, 0, 0, .55);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 20px 48px -16px rgba(0, 0, 0, .7);
  }
}
/* Scuro forzato dal toggle (vince sul sistema). */
:root[data-theme='dark'] {
  --bg: #15140f;
  --fg: #ece6d9;
  --muted: #a59b89;
  --line: #332f27;
  --card: #1d1b15;
  --accent: #d98b7a;
  --on-accent: #1d140d;
  --gold: #c99a55;
  --warn-bg: #2a2115;
  --warn-line: #7a5a2c;
  --cs-sky-a: #0e1424;
  --cs-sky-b: #232a40;
  --cs-stars: .9;
  --cs-moon: #e8d9a4;
  --cs-hill: #10151d;
  --cs-stone-a: #423d33;
  --cs-stone-b: #27231c;
  --cs-mortar: rgba(0, 0, 0, .3);
  --cs-slit: #0f0c08;
  --cs-merli: #4a4436;
  --cs-flag: #a04b43;
  --cs-gate: #0e0b07;
  --cs-ground: #171a14;
  --cs-road: #241f18;
  --cs-win: rgba(46, 34, 16, .88);
  --cs-win-line: rgba(233, 185, 108, .5);
  --cs-win-fg: #f3dfae;
  --cs-win-glow: rgba(255, 190, 90, .28);
  --scene-card-bg: rgba(14, 18, 30, .55);
  --scene-card-line: rgba(255, 255, 255, .22);
  --scene-card-fg: #f0e6cc;
  --scene-card-muted: #b3a582;
  --scene-card-shadow: rgba(0, 0, 12, .6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -12px rgba(0, 0, 0, .55);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 20px 48px -16px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }
/* l'attributo hidden deve sempre vincere sui display di classe (.consent, .examples…) */
[hidden] { display: none !important; }

/* --- topbar: sticky, in vetro, il contenuto scorre sotto --- */
/*
 * LA TACCA E I BORDI CURVI DEL TELEFONO.
 *
 * Nel guscio nativo la pagina occupa TUTTO lo schermo (viewport-fit=cover), che
 * è quello che vogliamo — un'app con due fasce nere sopra e sotto si vede
 * subito che è un sito impacchettato. Ma allora la barra in alto finisce sotto
 * l'orologio e la tacca, e il piede sotto la riga del gesto: `env(safe-area-inset-*)`
 * è quanto il sistema dice di stare alla larga, e sui bordi si SOMMA a quello che
 * c'era già. Nel browser quei valori sono zero, quindi il sito resta identico:
 * la somma con zero è il motivo per cui questa non è una regola in due versioni.
 *
 * ANDROID (25/09/2026, visto su un Samsung coi tre tasti): da Android 15 la
 * pagina è disegnata ANCHE sotto la barra di navigazione, ma la WebView non
 * sempre riempie `env()`. Capacitor 8 allora inietta lo stesso valore come
 * `--safe-area-inset-*` sull'elemento radice. Le due variabili qui sotto
 * prendono il MAGGIORE dei due, così vale su iOS (env), su Android (la
 * variabile) e nel browser (zero). Il ritratto di Jaques finiva sopra il tasto
 * «indietro» perché non ne teneva conto affatto.
 */
:root {
  --sat: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
}
.topbar {
  position: sticky; top: calc(.6rem + var(--sat)); z-index: 40;
  max-width: var(--max);
  margin: 0 auto 2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem .7rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--shadow-1);
}
.topbar .controls { padding-top: .15rem; }
.topbar .brand { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.brandmark { width: 2.3rem; height: 2.3rem; flex: 0 0 auto; display: block; border-radius: 26%; object-fit: cover; }
.brandtext {
  font-family: var(--serif);
  font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; line-height: 1;
}
.brandtext::after {
  content: 'what you will';
  display: block;
  font-family: var(--sans);
  font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-top: .32rem;
}
.topbar .controls { display: flex; align-items: center; gap: .9rem; }
.topbar #account { display: inline-flex; align-items: center; gap: .6rem; }
.topbar .who { color: var(--muted); font-size: .85rem; }
.badge {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}

/* pulsante icona (logout) — pillola tonda, coerente col dropdown lingua */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.iconbtn:hover { color: var(--accent); border-color: var(--accent); }
.iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- selettore lingua con bandierine --- */
.langpick { position: relative; }
.langbtn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .9rem;
  padding: .35rem .7rem .35rem .6rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--fg); cursor: pointer;
  transition: border-color .12s;
}
.langbtn:hover { border-color: var(--accent); }
.langbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.langbtn .chev { color: var(--muted); transition: transform .15s; }
.langbtn[aria-expanded='true'] .chev { transform: rotate(180deg); }
.flag { font-size: 1.1rem; line-height: 1; }

.langmenu {
  position: absolute; top: calc(100% + .4rem); inset-inline-end: 0; z-index: 20;
  min-width: 12rem; margin: 0; padding: .35rem;
  list-style: none;
  /* Undici lingue non stanno in uno schermo basso: il menu scorre invece di
     uscire dalla finestra. Il tetto è calcolato sullo spazio che resta sotto
     l'header, non a occhio. */
  max-height: min(70vh, 26rem); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
}
.langmenu li {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .6rem; border-radius: 8px;
  font-size: .92rem; color: var(--fg); cursor: pointer;
}
.langmenu li:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.langmenu li[aria-selected='true'] { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }

/* --- accesso / registrazione --- */
/*
 * LA MASCHERA D'ACCESSO STA AL CENTRO. Su uno schermo largo era appoggiata a
 * sinistra e lasciava mezza pagina vuota a destra: in una schermata che contiene
 * UNA SOLA COSA, l'allineamento a sinistra non regge — non c'è nient'altro con
 * cui allinearsi. Si centra la colonna (invito + riquadro), non il contenuto del
 * riquadro: i campi restano allineati a sinistra, perché un modulo si compila
 * dall'alto in basso lungo un bordo.
 */
#view-auth { display: flex; flex-direction: column; align-items: center; }
#view-auth .lead { text-align: center; }
.lead { max-width: 40rem; margin: .5rem 0 2rem; }
.authcard {
  max-width: 26rem;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 1.4rem 1.5rem 1.6rem;
  box-shadow: var(--shadow-2);
  animation: rise-in .5s ease-out both;
}
.authtabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.3rem; }
.authtabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--sans); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: .3rem 0 .65rem; cursor: pointer;
}
.authtabs button.is-active { color: var(--accent); border-bottom-color: var(--accent); }
#authform { display: flex; flex-direction: column; gap: .75rem; }
/*
 * OGNI CAMPO DEL MODULO, NON DUE TIPI ELENCATI.
 *
 * Prima qui c'era `input[type='email'], input[type='password']`, e il nome in
 * classifica — che è `type=text` — non era nell'elenco: restava col riquadro di
 * SISTEMA del browser, bianco e alto ventidue pixel invece di cinquantadue, in
 * mezzo a due campi scuri. Un elenco di tipi lascia fuori qualunque campo si
 * aggiunga dopo; `:not([type='checkbox'])` li prende tutti e esclude la sola
 * cosa che un riquadro non la vuole, il consenso.
 */
#authform input:not([type='checkbox']) {
  width: 100%; padding: .7rem .8rem; font: inherit;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px;
}
#authform input:not([type='checkbox']):focus-visible {
  outline: none; border-color: var(--accent);
}
.consent { display: flex; gap: .6rem; align-items: flex-start; margin-top: .35rem; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.consent input { margin-top: .2rem; }
#authgo {
  font: inherit; font-weight: 600; margin-top: .3rem;
  padding: .65rem 1rem; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
}
#authgo[disabled] { opacity: .55; cursor: default; }
.autherr { color: var(--accent); font-size: .88rem; margin: .2rem 0 0; min-height: 1em; }
.fineprint { color: var(--muted); font-size: .78rem; line-height: 1.5; margin: 1.1rem 0 0; }

/* Numero di versione: in fondo alla pagina, a destra. Non è più fisso: si
   sovrapponeva al testo e all'angolo occupato dal Cucullato. */
/* Il badge sta in fondo alla pagina: sul telefono la riga del gesto passa
   proprio lì, e senza questo margine il numero di versione ci finisce sotto. */
.version {
  display: block; margin: 1rem 0 calc(var(--sab)); text-align: end;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .04em;
  color: var(--muted); opacity: .6;
  user-select: none;
}

body {
  margin: 0;
  /*
   * La fascia in fondo è del Cucullato. In cima si SOMMA la zona sicura: nel
   * guscio la pagina comincia sotto l'orologio e la tacca, e senza questa somma
   * la prima riga del testo finisce dietro la barra — visto nel Simulator, non
   * dedotto. Nel browser `env()` vale zero e il sito resta identico.
   */
  padding: calc(2.25rem + var(--sat)) 1.25rem 8rem;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
}
/*
 * LA MISURA DI BASE STA SULLA RADICE, non sul corpo — e questa è la ragione
 * per cui il testo era piccolo sul telefono nonostante il corpo dicesse 16px:
 * tutto il resto del foglio misura in `rem`, e `rem` guarda l'ELEMENTO RADICE,
 * che restava ai 16px del browser. Il corpo cresceva su desktop e le sue
 * didascalie no.
 *
 * Ora la scala è una sola: si alza la radice e cresce tutto insieme —
 * caratteri, respiro, margini — senza toccare una sola proporzione. Da 16 a
 * 17.5 sul telefono (chiesto da Mauro il 27/08/2026: «i testi sono un po'
 * piccoli»), e il corpo la segue con `1rem` invece di una misura sua.
 */
html { font-size: 17.5px; }
/* Su schermi grandi cresce ancora: più leggibile e meno spazio vuoto. */
@media (min-width: 900px) { html { font-size: 18.5px; } }
@media (min-width: 1300px) { html { font-size: 19.5px; } }
@media (min-width: 1700px) { html { font-size: 20.5px; } }

header, main, footer { max-width: var(--max); margin: 0 auto; }

/* Il testo lungo resta su una misura di lettura comoda anche col guscio largo. */
.lead, .sub, .sendnote, .fineprint, #disclaimer, #meta, #out .reading { max-width: var(--reading); }

h1 {
  font-size: 1.9rem;
  margin: 0 0 .4rem;
  letter-spacing: -.02em;
}

.sub { color: var(--muted); margin: 0 0 1.25rem; }

nav { display: flex; gap: .5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; }

.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .8rem; letter-spacing: .11em; text-transform: uppercase;
  padding: .5rem .1rem .7rem;
  margin-inline-end: 1rem;
  cursor: pointer;
  transition: color .12s;
}
.tab:hover { color: var(--fg); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

textarea, input[type='search'] {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  resize: vertical;
  box-shadow: var(--shadow-1);
  transition: border-color .2s, box-shadow .2s;
}

textarea:focus, input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--shadow-1), 0 0 0 3px color-mix(in srgb, var(--gold) 26%, transparent);
}

.row { display: flex; align-items: center; gap: 1rem; margin-top: .85rem; }

button[type='submit'] {
  font: inherit;
  padding: .6rem 1.3rem;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
button[type='submit']:hover:not([disabled]) { transform: translateY(-1px); box-shadow: var(--shadow-2); filter: brightness(1.05); }
button[type='submit']:active:not([disabled]) { transform: translateY(0); box-shadow: var(--shadow-1); }
button[type='submit'][disabled] { opacity: .5; cursor: default; }

.ghost {
  font: inherit;
  padding: .6rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: transform .16s, border-color .16s, color .16s, box-shadow .16s;
}
.ghost:hover { color: var(--fg); border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-1); }

.mic { display: inline-flex; align-items: center; gap: .4rem; }
.mic.is-rec { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.mic.is-rec svg { animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mic.is-rec svg { animation: none; } }

/* Ingresso morbido condiviso: stesso respiro delle card nel bosco. */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.exchange { margin-top: 2rem; animation: rise-in .5s ease-out both; }
.exchange + .exchange { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.turn-user {
  font-weight: bold;
  margin: 0 0 1.1rem;
  padding: .8rem 1.05rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  max-width: var(--reading);
}
.turn-body > .reading { margin-top: 0; }

.status { color: var(--muted); font-size: .9rem; font-style: italic; }

.examples {
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  font-size: .88rem;
  color: var(--muted);
}
.examples-label {
  font-family: var(--sans);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
  margin-inline-end: .3rem;
}
.examples button {
  font: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .28rem .8rem;
  color: var(--muted);
  cursor: pointer;
  transition: transform .16s, border-color .16s, color .16s, box-shadow .16s;
}
.examples button:hover { color: var(--fg); border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-1); }

#out { margin-top: 2rem; }

.reading {
  white-space: pre-wrap;
  border-inline-start: 3px solid var(--accent);
  padding: .1rem 0 .1rem 1.1rem;
  margin-bottom: 2rem;
}

.readmap {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.readmap code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05rem .35rem;
}
.readmap-tag {
  display: inline-block;
  font-size: .9em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .08rem .6rem;
  margin: .12rem .3rem 0 0;
  color: var(--fg);
}

.work {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.3rem 1.45rem 1.45rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-1);
  animation: rise-in .5s ease-out both;
}
/* Le tre letture del coach entrano in sequenza, come le card nel bosco. */
.turn-body .work:nth-of-type(1) { animation-delay: .05s; }
.turn-body .work:nth-of-type(2) { animation-delay: .15s; }
.turn-body .work:nth-of-type(3) { animation-delay: .25s; }
.work h3 {
  margin: 0 0 .6rem; padding-bottom: .5rem;
  font-size: 1.2rem; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.work .date { display: block; margin-top: .15rem; color: var(--muted); font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; font-weight: normal; }
.work .why { font-size: .82rem; color: var(--muted); margin: .4rem 0 .8rem; }
.work h4 {
  margin: 1.2rem 0 .35rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.work ol, .work ul { margin: .3rem 0; padding-inline-start: 1.3rem; }
.work li { margin-bottom: .3rem; }

.work .synopsis { font-size: 1.02rem; line-height: 1.7; margin: .1rem 0 .2rem; }
.emo-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .2rem; }
.emo-tag {
  display: inline-flex; align-items: baseline; gap: .35rem;
  font-family: var(--sans); font-size: .8rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .22rem .65rem;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.emo-tag-fam { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

blockquote {
  margin: .7rem 0;
  padding: .15rem 0 .15rem 1rem;
  border-inline-start: 2px solid var(--gold);
  font-style: italic;
  font-size: 1.02rem;
}
blockquote .gloss { display: block; font-style: normal; font-size: .85rem; color: var(--muted); margin-top: .15rem; }

.warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 6px;
  padding: .6rem .8rem;
  font-size: .87rem;
  margin: .6rem 0;
}

.crisis {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  font-size: 1.02rem;
}

.sendnote {
  margin: .8rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}

.caution-note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 6px;
  padding: .6rem .85rem;
  font-size: .88rem;
  margin-bottom: 1rem;
}

/* --- scheda emozione (prima della lettura) --- */
.emotion {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--gold);
  border-radius: 16px;
  background: var(--card);
  padding: 1.15rem 1.35rem 1.3rem;
  margin: 0 0 1.75rem;
  box-shadow: var(--shadow-1);
  animation: rise-in .5s ease-out both;
}
.emotion-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.emotion-label {
  margin: .35rem 0 0; font-size: 1.35rem; font-weight: 700;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.emotion-family {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .5rem;
}
.emotion-example { margin: .55rem 0 0; color: var(--muted); font-style: italic; }
.emotion-facts { margin: 1.1rem 0 0; display: grid; gap: .85rem; }
.emotion-facts > div { display: grid; gap: .2rem; }
.emotion-facts dt {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.emotion-facts dd { margin: 0; line-height: 1.55; }

.canon { display: grid; gap: .55rem; margin: 1.25rem 0; }
.canon button {
  font: inherit;
  text-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .75rem 1rem;
  color: var(--fg);
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.canon button:hover, .canon button:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  outline: none;
}
.canon .t { font-weight: bold; }
.canon .g { color: var(--muted); font-size: .82rem; }
.canon .o { display: block; color: var(--muted); font-size: .88rem; margin-top: .2rem; }
.canon-group {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; border-radius: 10px; text-align: start; cursor: pointer;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
  margin: 1.5rem 0 .15rem; padding: .4rem .55rem;
  transition: background .15s, color .15s;
}
.canon-group:first-child { margin-top: .25rem; }
.canon-group:hover { color: var(--accent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.canon-group .chev { font-size: .8em; transition: transform .2s; }
.canon-group.is-collapsed .chev { transform: rotate(-90deg); }
.canon-group-n { color: var(--muted); font-weight: 400; }
/* Griglia invece di una colonna infinita: si scorre molto meno. */
.canon-group-items { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* --- schede interne alla scheda opera (casi / metodo / citazioni) --- */
.wtabs { margin-top: 1.15rem; }
.wtabs-bar { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: .95rem; }
.wtab {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .35rem .5rem .5rem; cursor: pointer; transition: color .15s;
}
.wtab:hover { color: var(--fg); }
.wtab.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.case-list { display: grid; gap: .8rem; }
.case { border-inline-start: 2px solid var(--line); padding-inline-start: .9rem; }
.case-h { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.case-role { font-family: var(--sans); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.case-p { margin: .25rem 0 0; }
.case-lesson {
  margin: .4rem 0 0; font-style: italic;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-radius: 10px; padding: .45rem .7rem;
}
/* --- I CASI COME SCELTA -----------------------------------------------------
   La riga dei personaggi dice quanti sono e fa scegliere; del caso aperto si vede
   una risposta alla volta. `.case-list` e `.case` restano: li usa il dossier, che
   continua a mostrare tutto in un clic. */
.case-pick { display: grid; gap: .8rem; }
/*
 * LA PRESENTAZIONE DEL PERSONAGGIO: prima parla lui, con un verso suo. Il blocco
 * ha il filetto d'oro dei versi dell'app e un ingresso morbido — è un'entrata in
 * scena, non un campo dati.
 */
.case-intro {
  border-inline-start: 2px solid var(--gold);
  padding-inline-start: .85rem;
  margin: .2rem 0 .9rem;
  animation: case-in .35s ease-out both;
}
@media (prefers-reduced-motion: reduce) { .case-intro { animation: none; } }
@keyframes case-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.case-intro-verse { margin: 0; font: italic 1.08rem/1.5 var(--serif); color: var(--fg); unicode-bidi: plaintext; }
.case-intro-gloss { margin: .15rem 0 0; font: .9rem/1.5 var(--sans); color: var(--muted); }
.case-intro-src { display: block; margin-top: .3rem; font: .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.case-hint { margin: .4rem 0 0; font: italic .92rem/1.5 var(--serif); color: var(--muted); }

.case-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.case-tab {
  display: grid; gap: .1rem; justify-items: start; text-align: start;
  background: none; border: 1px solid var(--line); border-radius: 12px;
  padding: .45rem .7rem; cursor: pointer; color: var(--muted);
  font: inherit; max-width: 15rem;
}
.case-tab strong { color: var(--fg); font-size: .98rem; }
/* Il ruolo è la frase-riassunto che serve a scegliere, ma su un telefono va a
   capo tre volte e i tre cartelli diventano un muro: due righe e poi i puntini. */
.case-tab .case-role {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.case-tab:hover { border-color: var(--gold); }
.case-tab.is-active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.case-tab.is-active strong { color: var(--gold); }
.case-open { border-inline-start: 2px solid var(--line); padding-inline-start: .9rem; }
.case-qs { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .1rem; }
.case-q {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .75rem; cursor: pointer; color: var(--muted);
  font: .82rem var(--sans);
}
.case-q:hover { color: var(--fg); border-color: var(--gold); }
.case-q.is-active { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.case-a { margin: .55rem 0 0; }
.case-ask {
  margin-top: .7rem; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: .85rem var(--sans); text-decoration: underline;
  text-underline-offset: 3px;
}
/* «la storia»: la sinossi c'è ma chiusa, così l'apertura non cresce di una parola. */
.story-btn {
  margin: .2rem 0 0; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: .85rem var(--sans); text-decoration: underline;
  text-underline-offset: 3px;
}
.story-btn[aria-expanded='true'] { color: var(--muted); }
/* La porta per il dossier: un invito, non un bottone principale. */
.dossier-btn {
  margin-top: .9rem; align-self: start;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .85rem; cursor: pointer; color: var(--muted); font: .82rem var(--sans);
}
.dossier-btn:hover { color: var(--fg); border-color: var(--gold); }

.method { display: grid; gap: 1.15rem; }
.framework h5 { margin: 0 0 .1rem; font-size: 1.02rem; }
.framework ol { margin: .45rem 0 0; padding-inline-start: 1.3rem; }
.framework li { margin-bottom: .35rem; }
.quote-list { display: grid; gap: .1rem; }

/* --- chip di filtro (famiglie emozioni) --- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.25rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--sans); font-size: .74rem; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .8rem; cursor: pointer;
  transition: transform .16s, border-color .16s, color .16s, box-shadow .16s;
}
.chip:hover:not([disabled]) { color: var(--fg); border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.chip.is-active { color: var(--fg); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); font-weight: 600; }
.chip[disabled] { opacity: .4; cursor: default; }
.chip-n { font-size: .68em; font-variant-numeric: tabular-nums; opacity: .75; }

/* --- griglia del dizionario emozioni --- */
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.emo-card {
  display: flex; flex-direction: column; gap: .12rem; text-align: start;
  font: inherit; color: var(--fg); cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .78rem .95rem;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.emo-card:hover, .emo-card:focus-visible { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-1); outline: none; }
.ec-t { font-weight: 700; font-size: 1.02rem; }
.ec-fam { font-family: var(--sans); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ec-ex {
  font-family: var(--sans); font-size: .76rem; line-height: 1.45; color: var(--muted); margin-top: .22rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.empty-note { color: var(--muted); font-style: italic; }

/* --- opere consigliate dentro la scheda emozione --- */
/* È una frase, non un'etichetta: niente maiuscoletto spaziato. */
.read-now-h {
  display: block; margin: 1.3rem 0 .55rem;
  font-family: var(--serif); font-size: .95rem; font-style: italic; color: var(--muted);
}
.read-now { display: flex; flex-wrap: wrap; gap: .45rem; }
.read-chip {
  display: inline-flex; align-items: center; gap: .45rem; font: inherit; color: var(--fg); cursor: pointer;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: .32rem .85rem;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.read-chip:hover, .read-chip:focus-visible { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-1); outline: none; }
.rc-title { font-size: .95rem; }
.rc-arrow { color: var(--gold); transition: transform .16s; }
.read-chip:hover .rc-arrow { transform: translateX(3px); }

/* Il nome del personaggio sopra la sua domanda. I pannelli sono tutti uguali —
   vetro, bordo sottile — sia quelli con la ricerca sia quelli di sola voce:
   prima questi ultimi erano balloon da fumetto con una coda triangolare che
   risultava un cuneo nero sulla scena. */
.scene-who {
  display: block; margin-bottom: .3rem;
  font-family: var(--sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .22em; color: var(--gold);
}
/* --- risposta del coach come percorso a tappe --- */
.turn-head { margin-bottom: .2rem; }
.steps { display: grid; gap: 1.6rem; }
.step { display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; position: relative; }
.step::before {
  content: ''; position: absolute; inset-inline-start: 1rem; top: 2.3rem; bottom: -1.6rem;
  width: 1px; background: var(--line);
}
.step:last-child::before { display: none; }
.step-n {
  width: 2rem; height: 2rem; border-radius: 999px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .82rem; font-weight: 700; color: var(--gold);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.step-main { min-width: 0; }
.step-label {
  display: block; padding-top: .42rem; margin-bottom: .55rem;
  font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.step-body > .emotion:last-child, .step-body > .work:last-child { margin-bottom: 0; }
.step-body .reading { margin-bottom: 0; }

/* attesa: scheletro al posto dello spinner */
.skel { display: grid; gap: .55rem; margin-top: .5rem; max-width: var(--reading); }
.skel span {
  height: .8rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--line) 0%, var(--card) 40%, var(--line) 80%);
  background-size: 200% 100%; animation: skel-slide 1.3s linear infinite;
}
.skel span:nth-child(1) { width: 92%; }
.skel span:nth-child(2) { width: 76%; }
.skel span:nth-child(3) { width: 54%; }
@keyframes skel-slide { to { background-position: -200% 0; } }

/* --- dashboard admin --- */
.admin-filter { display: flex; gap: .4rem; margin: 0 0 1.5rem; flex-wrap: wrap; }
.admin-filter button {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .04em;
  padding: .35rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
}
.admin-filter button:hover { border-color: var(--accent); color: var(--fg); }
.admin-filter button.is-active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* sotto-tab admin (Cockpit / Controllo utenti) */
.subtabs { display: flex; gap: 1.4rem; margin: 0 0 1.6rem; border-bottom: 1px solid var(--line); }
.subtabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: .25rem 0 .6rem; cursor: pointer;
}
.subtabs button:hover { color: var(--fg); }
.subtabs button.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* menu "filtra per utente" nel cockpit */
.admin-user-filter {
  font-family: var(--sans); font-size: .72rem;
  padding: .35rem .7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  max-width: 15rem;
}
.admin-user-filter:hover { border-color: var(--accent); }

.admin-dash { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; margin-bottom: 1.75rem; }
.admin-gauge { flex: 0 0 190px; max-width: 190px; }
.gauge-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gauge-track { stroke: var(--line); stroke-width: 13; }
/* L'arco è ORO come le stelle: da quando dice il voto medio e non i token, il colore
   è quello del voto — altrimenti la stessa cosa ha due colori a due centimetri di
   distanza, e chi guarda cerca una differenza che non c'è. */
.gauge-value { stroke: var(--gold); stroke-width: 13; }
.gauge-num { fill: var(--fg); font-family: var(--sans); font-size: 26px; font-weight: 700; }
.gauge-cap { fill: var(--gold); font-family: var(--sans); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }

.admin-scorecards { display: flex; flex-wrap: wrap; gap: .75rem; flex: 1 1 20rem; }
.admin-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: .8rem 1rem; min-width: 7rem; box-shadow: var(--shadow-1); }
.admin-card-big { border-inline-start: 3px solid var(--gold); }
.admin-card-v { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.admin-card-big .admin-card-v { color: var(--accent); }
.admin-card-k { font-family: var(--sans); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }
.admin-pricing { flex-basis: 100%; margin: .1rem 0 0; font-family: var(--sans); font-size: .68rem; color: var(--muted); }

.admin-export { margin-inline-start: auto; }

.admin-chart { margin: 0 0 1.5rem; }
.admin-chart-label { font-family: var(--sans); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: .45rem; }
.chart-svg { width: 100%; height: 88px; display: block; }
.chart-svg rect { fill: var(--accent); transition: fill .12s; }
.chart-svg rect:hover { fill: var(--gold); }
.admin-chart-axis { display: flex; justify-content: space-between; font-family: var(--sans); font-size: .62rem; color: var(--muted); margin-top: .3rem; }
.cell-lang { font-family: var(--sans); font-size: .7rem; letter-spacing: .05em; color: var(--muted); }

.admin-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); }
.admin-table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.admin-table th, .admin-table td { text-align: start; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table th {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; background: var(--card);
}
.admin-table th.num, .admin-table td.num { text-align: end; font-variant-numeric: tabular-nums; }
.admin-row { cursor: pointer; }
.admin-row:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.admin-row.is-open td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cell-time { color: var(--muted); }
.cell-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; color: var(--muted); }
.cell-user { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
.cell-request { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; }
.cell-empty { color: var(--muted); }
/*
 * LA CONVERSAZIONE APERTA SI LEGGE SENZA SCORRERE IN ORIZZONTALE.
 *
 * La riga di dettaglio è una cella con colSpan 11 dentro una tabella che è PIÙ
 * LARGA DELLO SCHERMO (le colonne sono nowrap e il guscio scorre). Il testo si
 * disponeva quindi sulla larghezza della TABELLA, non su quella della finestra:
 * ogni riga proseguiva oltre il bordo destro e per leggerla bisognava trascinare
 * la tabella avanti e indietro, riga per riga. Sembrava testo tagliato, ed era
 * testo fuori quadro.
 *
 * Due mosse: la cella si ancora al bordo sinistro dello scorrevole (sticky), così
 * resta sempre in vista; e il testo si incolonna sulla parte VISIBILE — il minore
 * fra il guscio della pagina e la finestra — invece che sulla tabella.
 */
.admin-row-detail td { white-space: normal; background: var(--bg); }
/*
 * L'ANCORAGGIO VA SUL BLOCCO, NON SULLA CELLA: con `border-collapse: collapse`
 * i browser NON applicano position:sticky alle celle di tabella (lo calcolano,
 * `getComputedStyle` dice «sticky», e non incolla niente — misurato: scorrendo
 * di 600px il testo se ne andava di 600px). Sul <div> dentro la cella funziona,
 * perché il blocco di contenimento è la cella e lo scorrevole è il guscio.
 */
.admin-row-detail .admin-detail-msg {
  max-width: min(calc(var(--max) - 3rem), calc(100vw - 3rem));
  position: sticky;
  left: 0;
}
.admin-detail-msg + .admin-detail-msg { margin-top: .9rem; }
/* Le righe lunghe del modello (un id, un URL, una formula) non allargano la
   colonna: si spezzano dove capita, che è meglio che sbordare. */
.admin-msg-body { overflow-wrap: anywhere; }

.access-hist-h { font-family: var(--sans); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.access-row { display: flex; gap: 1.25rem; padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.access-row:last-child { border-bottom: 0; }
.access-when { font-variant-numeric: tabular-nums; }
.access-path {
  color: var(--fg);
  font-size: .85rem;
  overflow-wrap: anywhere;
}
.access-ip { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }

.ac-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.ac-btn {
  font-family: var(--sans); font-size: .74rem;
  padding: .42rem .85rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
}
.ac-btn:hover { border-color: var(--accent); }
.ac-btn[disabled] { opacity: .5; cursor: default; }
.ac-btn-danger { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.ac-btn-danger:hover { filter: brightness(1.08); }

.admin-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .35rem; white-space: nowrap; }
.admin-chip-work { color: var(--accent); border-color: var(--accent); }
.admin-table td .badge { margin-inline-start: .4rem; vertical-align: middle; }
.admin-empty { color: var(--muted); font-style: italic; padding: 1rem .2rem; }
.admin-msg-who { display: block; font-family: var(--sans); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: .15rem; }
.admin-msg-body { white-space: pre-wrap; }

footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}
#meta {
  font-family: var(--sans);
  font-size: .72rem; letter-spacing: .04em;
  margin: 0 auto .7rem;
}
/* Attacco in tondo e in grassetto, il resto in corsivo. */
.disclaimer-lead {
  margin: 0 auto .35rem; max-width: var(--reading);
  font-weight: 700; font-style: normal; color: var(--fg); font-size: .92rem;
}
.disclaimer { margin: 0 auto; max-width: var(--reading); line-height: 1.6; font-style: italic; }
.legal-link { margin: 1rem 0 0; }
.legal-link a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.legal-link a:hover { color: var(--accent); }

/* --- pagina privacy --- */
/*
 * LE PAGINE FUORI DALL'APP (privacy, recensioni, ripristino) respirano col
 * monitor: la colonna da 42rem su uno schermo da 27 pollici era un francobollo
 * al centro del buio — Mauro l'ha visto in due foto. La misura di lettura resta
 * una misura (il testo a tutta larghezza non si legge), ma cresce a scatti con
 * lo schermo insieme ai titoli; sul telefono comanda il margine del body.
 */
.legal { max-width: 46rem; margin: 0 auto; padding: 1rem 0 4rem; }
/* La data in cima a un documento legale: piccola, ma è la prima cosa che
   cerca chi vuole sapere se sta leggendo la versione di oggi. */
.legal-date { font: .82rem var(--sans); color: var(--muted); margin: -.2rem 0 1.4rem; }

/* L'EPIGRAFE sulla soglia: una frase, la sua resa, la firma.
   Il cirillico vuole `plaintext` come i versi inglesi: in arabo il punto finale
   scapperebbe dall'altra parte, ed è il difetto che abbiamo già visto sui versi. */
.epigrafe { max-width: 34rem; margin: 2.2rem auto 0; text-align: center; }
.epi-frase { margin: 0 0 .4rem; font: italic 1.05rem/1.5 var(--serif); color: var(--fg); unicode-bidi: plaintext; }
.epi-chi { margin: 0; font: .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* LA STRISCIA DEI CREDITI nella barra: piccola e quieta finché le letture
   bastano, in accento quando sono finite. Non è un avviso rosso: chi ha finito
   una prova non ha sbagliato niente, ha solo finito. */
.crediti {
  font: .78rem var(--sans); letter-spacing: .02em;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .6rem; cursor: pointer; white-space: nowrap;
}
.crediti:hover { color: var(--fg); border-color: var(--gold); }
.crediti.is-finite { color: var(--accent); border-color: var(--accent); font-weight: 600; }
/* Sul telefono la barra è stretta: la striscia resta, il resto si stringe. */
@media (max-width: 560px) { .crediti { padding: .15rem .45rem; font-size: .72rem; } }
.legal h1 { font-size: 2rem; }
@media (min-width: 1000px) {
  .legal { max-width: 58rem; }
  .legal h1 { font-size: 2.5rem; }
  .legal h2 { font-size: .95rem; }
  .legal p, .legal li { font-size: 1.06em; line-height: 1.7; }
}
@media (min-width: 1600px) {
  .legal { max-width: 68rem; }
  .legal h1 { font-size: 3rem; }
}
.legal h2 { font-family: var(--sans); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin: 2rem 0 .4rem; }
.legal p, .legal li { line-height: 1.65; }
/* `.draft` e `.todo` sono rimaste senza padrone quando l'informativa ha chiuso i suoi
   segnaposto: le tengo perché al prossimo testo legale da abbozzare servono, e sono
   due righe — ma se nessuno le usa entro il prossimo giro, si buttano. */
.legal .draft { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; padding: .8rem 1rem; font-size: .9rem; }
.legal .todo { color: var(--accent); font-weight: 600; }
.legal a { color: var(--accent); }
.legal .back { font-family: var(--sans); font-size: .8rem; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
/* Il selettore della lingua: in alto a destra, dove l'app tiene il suo, e prima
   del titolo — chi arriva in una lingua che non legge deve trovarlo subito. */
/* --- CHI PARLA DENTRO UNA FINESTRA ----------------------------------------
   La finestra non annuncia, PARLA: la testa è la stessa composizione delle schede
   dei personaggi (ritratto, chi parla, il verso, la resa, la fonte), così chi
   arriva qui riconosce il linguaggio dell'app invece di leggere un avviso. Il
   filetto d'accento a sinistra è la citazione; il fondo è la carta della scheda.

   Le classi erano `shy-*` quando l'unico a parlare era Shylock al muro della
   prova. Da quando Othello chiede alla porta sono `say-*`: il nome di una classe
   che descrive CHI la usa invece di COSA FA è il modo più rapido per ritrovarsi
   due copie della stessa composizione. */
.say-head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1rem; }
.say-face { flex: 0 0 auto; width: 76px; height: 76px; }
.say-said { border-inline-start: 3px solid var(--accent); padding-inline-start: .9rem; }
.say-who { display: block; font: .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }
/* Il verso è inglese anche in una pagina araba: `plaintext` prende la direzione
   dal contenuto (e quindi tiene virgolette e punto al loro posto) ma lascia
   l'allineamento al blocco, che in arabo resta a destra. */
.say-verse { margin: 0 0 .2rem; font: italic 1.12rem/1.45 var(--serif); color: var(--fg); unicode-bidi: plaintext; }
.say-gloss { margin: 0 0 .25rem; font: .92rem/1.5 var(--sans); color: var(--muted); }
.say-src { display: block; font: .68rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* --- la pagina pubblica delle recensioni (fuori dall'app, come l'informativa) --- */
.rec-note { color: var(--muted); font-size: .92rem; }
/* Le recensioni: una colonna sul telefono, una GRIGLIA che riempie la pagina sui
   monitor larghi — sono carte brevi, e in fila indiana lasciavano il deserto. */
.rec-list { display: grid; gap: 1.6rem; margin-top: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); }
.rec-media { grid-column: 1 / -1; }
.rec { border-inline-start: 3px solid var(--accent); padding-inline-start: 1rem; align-self: start; }
/* Le parole di chi ha scritto: in tondo e in evidenza. La resa sotto è servizio. */
.rec-testo { margin: 0; font: 1.06rem/1.6 var(--serif); color: var(--fg); }
.rec-resa { margin: .4rem 0 0; font: .95rem/1.55 var(--sans); color: var(--muted); }
.rec-auto { display: block; font: .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.rec-firma { margin: .5rem 0 0; font: .78rem var(--sans); letter-spacing: .04em; color: var(--muted); }

/* --- ORAZIO: il consenso, e le recensioni da moderare ----------------------- */
/*
 * LE CINQUE STELLE. Il colore acceso è l'oro dei fregi — lo stesso filetto che dice
 * «in attesa» nel cockpit — e quello spento è il testo attenuato: la differenza si
 * vede in entrambi i temi senza cambiare glifo, perché una stella vuota disegnata
 * con un carattere diverso salta di misura fra un tema e l'altro.
 */
.ora-stelle { display: flex; gap: .15rem; margin: 0 0 .2rem; }
.ora-stella {
  background: none; border: 0; cursor: pointer; padding: .1rem .12rem;
  font-size: 1.7rem; line-height: 1;
  /* Le spente: un tono SECONDARIO, non il filetto. Col colore delle linee, sulla
     carta crema del tema chiaro, sparivano — e cinque stelle di cui due invisibili
     non dicono che la scala arriva a cinque. */
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}
/* NIENTE TRANSIZIONE sul colore. Una stella deve accendersi nell'istante del clic —
   centoventi millesimi su un gesto così piccolo non si leggono come morbidezza — e
   una transizione in corso TIENE il colore al valore di partenza: in una scheda che
   non sta disegnando (una prova automatica, una finestra in secondo piano) le stelle
   restavano grigie pur essendo scelte. Visto misurando, non immaginato. */
.ora-stella.is-on { color: var(--gold); }
.ora-stella:hover { color: var(--gold); }
.ora-stella:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
/* Le stelle da LEGGERE (profilo, cockpit, pagina pubblica): stesso oro, misura del
   testo intorno, e il numero lo dice l'aria-label per chi non vede il glifo. */
.rec-stelle { color: var(--gold); letter-spacing: .06em; font-size: 1.05em; }
/* Il piede ha due link (Privacy e le recensioni) e il puntino di mezzo appartiene al
   secondo: così quando le recensioni sono spente non resta un separatore orfano. */
/* IL PUNTINO CHIUDE LA VOCE, non apre la successiva (26/09/2026): andando a
   capo, un «·» in testa alla riga nuova sembrava un refuso. Ce l'ha ogni voce
   visibile che ha dopo di sé un'altra voce visibile, così le recensioni spente
   o i prezzi tolti nel guscio non lasciano puntini orfani. inline-block perché
   la sottolineatura del link non passi sotto il puntino. */
.legal-link a:not([hidden]):has(~ a:not([hidden]))::after { content: '·'; display: inline-block; margin: 0 .45rem; color: var(--muted); text-decoration: none; }
/* nessuna voce si spezza a metà: sul telefono «You», «account» e «reviews»
   restavano soli a capo (26/09/2026). Va a capo la voce intera.
   INLINE-BLOCK, NON SOLO NOWRAP: nell'HTML le voci sono attaccate (</a><a>),
   quindi fra l'una e l'altra non c'è uno spazio dove andare a capo; col solo
   nowrap la riga usciva dallo schermo (3.31). Fra due blocchi in riga, invece,
   si va a capo. :not([hidden]) perché un display dell'autore vincerebbe
   sull'attributo hidden delle recensioni spente. */
.legal-link a:not([hidden]) { display: inline-block; white-space: nowrap;
  /* 24px d'altezza erano pochi per un dito: il margine di tocco cresce, il testo no */
  padding-block: .4rem; }
.legal-link { line-height: 1.3; }
/* IL VOTO MEDIO. Le stelle arrotondate e accanto il numero per esteso: ★★★★☆ dice
   «quattro», la media dice 3,8, e la differenza fra i due è l'informazione. */
.adm-media { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .9rem; font: .95rem var(--sans); color: var(--fg); }
.adm-media-n { color: var(--muted); font-size: .88rem; }
/* Il «tre giorni fa» è un'informazione di servizio accanto alla data: si legge dopo. */
.rec-fa { opacity: .72; }
.rec-media { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.rec-media .rec-stelle { font-size: 1.5rem; }
.rec-media-v { font: 1.15rem var(--sans); color: var(--fg); }
.rec-media-n { font: .88rem var(--sans); color: var(--muted); }
.ora-consenso { display: flex; gap: .5rem; align-items: flex-start; margin-top: .9rem; font: .92rem/1.45 var(--sans); color: var(--fg); cursor: pointer; }
.ora-consenso input { margin-top: .2rem; }
.admin-reviews { margin: 1.6rem 0; }
.adm-rev { border-inline-start: 2px solid var(--line); padding-inline-start: .8rem; }
/* Il colore del filetto dice lo stato senza una parola in più: in attesa è oro,
   pubblicata è verde-oliva, non pubblicata è spenta. */
.adm-rev.is-attesa { border-inline-start-color: var(--gold); }
.adm-rev.is-pubblicata { border-inline-start-color: #6b8f5e; }
.adm-rev.is-rifiutata { border-inline-start-color: var(--line); opacity: .65; }
.adm-rev-orig { margin: .2rem 0 0; font: .95rem/1.55 var(--serif); color: var(--fg); }
.adm-rev-it { margin: .2rem 0 0; font: .9rem/1.5 var(--sans); color: var(--muted); }
.adm-rev-do { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }

/* --- IL CORO: la finestra che chiede, e il suo posto nel cockpit -------------
   La carta è quella dei dialoghi, perché un questionario che sembra un'altra app è
   un questionario a cui non si risponde. Le opzioni sono pillole cliccabili: si
   contano, e si vede subito quante sono. */
.dlg-coro { max-width: min(34rem, calc(100vw - 1.5rem)); }
.coro-q { margin-top: 1rem; }
.coro-ask { margin: 0 0 .4rem; font: .95rem/1.5 var(--sans); color: var(--fg); }
.coro-opts { display: flex; gap: .4rem; flex-wrap: wrap; }
.coro-opt {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .75rem; cursor: pointer; color: var(--muted); font: .82rem var(--sans);
}
.coro-opt:hover { color: var(--fg); border-color: var(--gold); }
.coro-opt.is-active { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.coro-testo {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: .95rem/1.5 var(--sans); color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem;
}
.coro-esito { margin: .8rem 0 0; font: .9rem var(--sans); color: var(--accent); }

/* --- il feedback nel cockpit, accanto ai costi --- */
.admin-feedback { margin: 1.6rem 0; }
.adm-fb-sum { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0 1rem; }
.adm-fb-group { display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; }
.adm-fb-gh { font: .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adm-fb-tag {
  font: .78rem var(--sans); color: var(--fg);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: 999px; padding: .15rem .6rem;
}
.adm-fb-list { display: grid; gap: .8rem; }
.adm-fb { border-inline-start: 2px solid var(--line); padding-inline-start: .8rem; }
.adm-fb-meta { margin: 0; font: .7rem var(--sans); letter-spacing: .04em; color: var(--muted); }
.adm-fb-tags { margin: .15rem 0 0; font: .8rem var(--sans); color: var(--gold); }
.adm-fb-testo { margin: .25rem 0 0; font: .95rem/1.55 var(--serif); color: var(--fg); }

/* --- POLONIO NEL CASTELLO --------------------------------------------------
   Un pannello che si apre, non una finestra: sta dentro la sezione e non copre
   niente. La testa è un pulsante largo (il ritratto ne fa parte) perché su un
   telefono il bersaglio deve essere grande; il corpo è un elenco numerato, che è
   la forma di una spiegazione in tre punti. */


/* --- LA COMPAGNIA DELL'OPERA: tutti i personaggi parlanti ------------------- */
.cast-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .7rem; }
.cast-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .3rem .3rem .75rem; cursor: pointer; color: var(--fg); font: .88rem var(--sans);
}
.cast-chip:hover { border-color: var(--gold); }
.cast-chip.is-active { border-color: var(--gold); color: var(--gold); }
.cast-n {
  font: .7rem var(--sans); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem;
}
.cast-chip.is-active .cast-n { border-color: var(--gold); color: var(--gold); }
.cast-stats { margin: .2rem 0 0; font: .8rem var(--sans); color: var(--muted); }
.cast-auto { display: inline-block; margin-inline-start: .5rem; font: .62rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* --- LA SALA D'ASCOLTO DEI PROVINI (provino.html, non collegata) ------------- */
.pv { max-width: 52rem; margin: 0 auto; padding: 2rem 1.2rem 4rem; }
.pv h1 { font: 700 2rem var(--serif); margin: 0 0 .4rem; }
.pv-nota { font: .95rem/1.6 var(--sans); color: var(--muted); margin: 0 0 1.6rem; }
.pv-ruolo { margin: 0 0 1.8rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.pv-ruolo h2 { font: 700 1.2rem var(--serif); margin: 0 0 .25rem; }
.pv-direzione { font: italic .92rem/1.5 var(--serif); color: var(--muted); margin: 0 0 .8rem; }
.pv-fila { display: flex; gap: .7rem; flex-wrap: wrap; }
.pv-carta {
  display: flex; flex-direction: column; gap: .4rem; min-width: 10rem;
  padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px;
}
.pv-carta.is-scelta { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent); }
.pv-carta strong { font: 700 1rem var(--serif); }
.pv-play {
  font: .88rem var(--sans); padding: .4rem .7rem; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--fg); text-align: start;
}
.pv-play:hover { border-color: var(--gold); }
.pv-play.is-on { border-color: var(--gold); color: var(--gold); }
.pv-scegli {
  font: .82rem var(--sans); padding: .35rem .6rem; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--muted);
}
.is-scelta .pv-scegli { border-color: var(--gold); color: var(--gold); }
.pv-coppia .pv-fila { gap: .5rem; }
/* la compagnia in carica: carte più quiete dei provini — sono il metro, non i candidati */
.pv-carica .pv-carta { opacity: .88; }
.pv-cambio { margin: .4rem 0 0; font: italic .78rem var(--sans); color: var(--accent); }
.pv-verdetto { font: 600 1rem/1.6 var(--sans); color: var(--fg); border-inline-start: 2px solid var(--gold); padding-inline-start: .8rem; }

/* --- IL CASTELLO DI ELSINORE: la facciata, le porte, Polonio ----------------- */
/*
 * La scena è un rettangolo 1000×600 con l'SVG di fondo; le stanze sono BOTTONI
 * HTML posizionati sopra il disegno in percentuale, a forma di finestra ad arco.
 * Sotto una certa larghezza la facciata resta come insegna e le porte scendono in
 * una griglia: sette porte su uno schermo stretto sarebbero francobolli.
 */
.castle-scene {
  position: relative;
  aspect-ratio: 1000 / 600;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 0.2rem;
  background: var(--cs-sky-b);
}
.cs-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* il disegno prende i colori dai gettoni: la notte nello scuro, l'alba nel chiaro */
.cs-g-sky stop:first-child { stop-color: var(--cs-sky-a); }
.cs-g-sky stop:last-child { stop-color: var(--cs-sky-b); }
.cs-g-stone stop:first-child { stop-color: var(--cs-stone-a); }
.cs-g-stone stop:last-child { stop-color: var(--cs-stone-b); }
/* tre piani di pietra: il mastio avanza, le cortine arretrano */
.cs-keep { filter: brightness(1.12); }
.cs-wall { filter: brightness(0.82); }
.cs-stars { fill: #e8dfc0; opacity: var(--cs-stars); }
.cs-moon { fill: var(--cs-moon); }
.cs-sky2 { fill: var(--cs-sky-a); }
.cs-hill { fill: var(--cs-hill); }
.cs-merli { fill: var(--cs-merli); }
.cs-mortar { stroke: var(--cs-mortar); stroke-width: 1.4; fill: none; }
.cs-slit { stroke: var(--cs-slit); stroke-width: 5; stroke-linecap: round; fill: none; }
.cs-pole { stroke: var(--cs-merli); stroke-width: 4; }
.cs-flag { fill: var(--cs-flag); }
.cs-gatearch { fill: var(--cs-gate); }
.cs-gateline { fill: none; stroke: var(--cs-merli); stroke-width: 3; }
.cs-ground { fill: var(--cs-ground); }
.cs-road { fill: var(--cs-road); }

/* --- LE APERTURE DEL CASTELLO ----------------------------------------------------
   Prima erano sette cartellini chiari col nome dentro, uguali fra loro e
   appiccicati sulla pietra: non somigliavano a niente di un castello. Ora sono
   VANI nel muro — buio dentro, cornice di pietra, e la LUCE ACCESA dove hai
   lasciato qualcosa (.has-luce, messa da setConta). Il nome sta su una targa
   incisa sotto: una finestra con una scritta dentro non è una finestra.

   Tre forme, che sono tre funzioni: portone al piano terra (arco a tutto centro
   che poggia a terra), finestra ai piani (bifora col montante e la traversa),
   lanterna in cima al mastio. */
.cs-room {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  width: 9%; min-width: 62px;
  padding: 0; border: 0; background: none; cursor: pointer;
}

/* IL VANO: il buco nel muro. Scuro per natura — è l'interno di una stanza senza
   nessuno — con la strombatura di pietra intorno e l'ombra che il muro getta
   sul davanzale. */
.cs-vano {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 3 / 4;
  background: radial-gradient(120% 90% at 50% 78%, color-mix(in srgb, var(--cs-slit) 55%, #0b0803) 0%, #0b0803 72%);
  border: 2px solid var(--cs-merli);
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, .55), 0 1px 0 color-mix(in srgb, var(--cs-stone-a) 70%, transparent);
  transition: box-shadow .18s ease, border-color .18s ease, background .25s ease;
}
.cs-vano .ct-ico {
  width: 46%; height: 46%; color: color-mix(in srgb, var(--cs-slit) 60%, #000);
  transition: color .25s ease;
  position: relative; z-index: 2;
}

/* la forma di ogni tipo */
.cs-room.is-finestra .cs-vano { border-radius: 50% 50% 6% 6% / 34% 34% 6% 6%; }
/* la crociera della bifora: montante e traversa, in pietra */
.cs-room.is-finestra .cs-vano::before,
.cs-room.is-finestra .cs-vano::after {
  content: ''; position: absolute; background: var(--cs-merli); opacity: .85; z-index: 3;
}
.cs-room.is-finestra .cs-vano::before { left: 50%; top: 8%; bottom: 0; width: 2px; transform: translateX(-50%); }
.cs-room.is-finestra .cs-vano::after { left: 6%; right: 6%; top: 46%; height: 2px; }

.cs-room.is-portone .cs-vano {
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 3% 3% / 42% 42% 3% 3%;
  border-bottom-width: 0;                 /* poggia a terra: non ha davanzale */
}
/* i battenti: due ante e il chiodo centrale */
.cs-room.is-portone .cs-vano::before {
  content: ''; position: absolute; left: 50%; top: 12%; bottom: 0; width: 2px;
  background: var(--cs-merli); opacity: .7; transform: translateX(-50%); z-index: 3;
}

.cs-room.is-lanterna { width: 6.5%; min-width: 46px; }
.cs-room.is-lanterna .cs-vano { aspect-ratio: 1 / 1; border-radius: 46%; }

/* LA LUCE: la stanza dove hai lasciato qualcosa è abitata. Il caldo viene da
   dentro e si spande un poco sulla pietra intorno, come una finestra vera di
   notte; l'emblema resta la sagoma scura contro la luce. */
.cs-room.has-luce .cs-vano {
  background: radial-gradient(120% 90% at 50% 72%, var(--cs-win) 0%, color-mix(in srgb, var(--cs-win) 55%, #241703) 46%, #150d02 100%);
  border-color: color-mix(in srgb, var(--gold) 60%, var(--cs-merli));
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, .35), 0 0 18px 2px var(--cs-win-glow);
}
.cs-room.has-luce .cs-vano .ct-ico { color: color-mix(in srgb, var(--cs-win-fg) 85%, #000); }

/* LA TARGA: una LASTRA incisa murata sotto l'apertura.
   Prima era testo nudo sulla pietra, col colore preso da un token per tema: nel
   tema chiaro finiva grigio su grigio e i nomi non si leggevano. Una lastra
   scura col testo chiaro si legge su QUALUNQUE muro — di giorno e di notte,
   senza dipendere da quale variabile ha vinto la cascata — ed è anche la cosa
   che nei castelli c'è davvero sotto una porta. */
.cs-targa {
  font: .55rem var(--sans); letter-spacing: .07em; text-transform: uppercase;
  text-align: center; line-height: 1.2;
  padding: .12rem .3rem; border-radius: 3px;
  background: rgba(18, 13, 4, .72);
  color: #e8dfc6;
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  transition: color .18s ease, background .18s ease;
}
.cs-room:hover .cs-targa, .cs-room.is-active .cs-targa, .cs-room:focus-visible .cs-targa {
  color: #f2d69a; background: rgba(18, 13, 4, .85);
}

.cs-n {
  position: absolute; top: -.4rem; right: -.5rem;
  min-width: 1.2rem; padding: .06rem .28rem; border-radius: 999px;
  background: var(--gold); color: var(--bg); font: 700 .66rem var(--sans); text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* toccata, aperta, o mostrata da Polonio: la luce si alza, non cambia il vestito */
.cs-room:hover .cs-vano, .cs-room:focus-visible .cs-vano {
  border-color: var(--gold);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, .3), 0 0 22px 3px var(--cs-win-glow);
}
.cs-room:focus-visible { outline: none; }
.cs-room:focus-visible .cs-vano { outline: 2px solid var(--gold); outline-offset: 3px; }
.cs-room.is-active .cs-vano {
  border-color: var(--gold);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, .3), 0 0 26px 5px color-mix(in srgb, var(--gold) 55%, transparent);
}
.cs-room.is-lit .cs-vano { border-color: var(--gold); animation: cs-lit 1.6s ease-in-out infinite; }
@keyframes cs-lit {
  0%, 100% { box-shadow: inset 0 4px 12px rgba(0,0,0,.3), 0 0 12px 2px var(--cs-win-glow); }
  50% { box-shadow: inset 0 4px 12px rgba(0,0,0,.3), 0 0 30px 8px color-mix(in srgb, var(--gold) 75%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-room.is-lit .cs-vano {
    animation: none;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, .3), 0 0 26px 6px color-mix(in srgb, var(--gold) 70%, transparent);
  }
}

/* dove sta ogni apertura sulla facciata (centri, in percentuale del 1000×600).
   Le finestre stanno sui corsi di pietra, i portoni a terra: le posizioni
   seguono l'architettura del disegno, non una griglia. */
/* Ogni apertura sta DENTRO la sua pietra: le torri laterali sono larghe 130 su
   1000 (13%), quindi una finestra del 9% le sbordava — misurato guardando, si
   vedeva il vano uscire dai fianchi della torre. Le larghezze qui sotto sono
   quelle che stanno nel muro che le contiene. */
.cs-r-profilo { left: 50%; top: 17.5%; width: 5.5%; }
.cs-r-ask { left: 39.5%; top: 43%; width: 8%; }
.cs-r-writing { left: 60.5%; top: 43%; width: 8%; }
.cs-r-canon { left: 14%; top: 57%; width: 7%; }
.cs-r-emotions { left: 86%; top: 57%; width: 7%; }
.cs-r-play { left: 35.5%; top: 79%; width: 8%; }
.cs-r-verses { left: 50%; top: 78.5%; width: 9.5%; }
/* la targa della torre di guardia cade sul tetto del mastio: sta su una riga
   sola, più stretta della pietra, invece di appoggiarsi a cavallo del bordo */
.cs-r-profilo .cs-targa { font-size: .5rem; letter-spacing: .04em; }

/* POLONIO SULLA PORTA: il ciambellano riceve chi entra, e rioffre il giro. */
.cs-polonio {
  position: absolute;
  left: 64%;
  top: 77%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: none;
  border: 0;
  padding: 0.2rem;
  cursor: pointer;
  color: var(--cs-win-fg);
}
.cs-polonio .pol-face { width: 52px; height: 52px; filter: drop-shadow(0 3px 8px rgba(0, 0, 6, 0.35)); transition: transform 0.15s ease; }
.cs-polonio:hover .pol-face,
.cs-polonio:focus-visible .pol-face { transform: translateY(-2px) scale(1.05); }
.cs-polonio:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 12px; }
.cs-pol-name { font: 0.55rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }

/* la carta del giro: la stessa carta della guida, ancorata in basso alla scena */
/* nel CIELO: è l'unica zona della facciata senza porte. La carta non deve MAI
   coprire la stanza che sta indicando, quindi quando il giro accende una stanza
   della metà sinistra la carta passa a destra (classe is-right, messa dal giro). */
.cs-card {
  position: absolute;
  left: 2.5%;
  top: 4.5%;
  width: min(25rem, 56%);
  z-index: 6;
}
.cs-card.is-right { left: auto; right: 2.5%; }
.cs-card-face { width: 46px; height: 46px; flex: 0 0 auto; }

/* LA CORNICE DELLA STANZA: la testata ad arco, e il contenuto incassato sotto. */
.ct-room-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.1rem;
  margin: 1.1rem 0 0;
  padding: 0.9rem 1rem 0.7rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 260px 260px 0 0 / 74px 74px 0 0;
  background: linear-gradient(color-mix(in srgb, var(--gold) 7%, var(--card)), var(--card));
}
.ct-room-head strong { font: 700 1.15rem var(--serif); color: var(--fg); }
.ct-room-head span { font: 0.78rem var(--sans); color: var(--muted); }
#castle-room {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding: 1rem 1rem 1.1rem;
  background: var(--card);
}
#castle-room:empty { display: none; }
.ct-go { margin-top: 0.6rem; }

/* SOTTO 680px: la facciata resta come insegna, le porte scendono in griglia. */
@media (max-width: 680px) {
  .castle-scene {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 122px 0.6rem 0.6rem;
  }
  .cs-svg { height: 112px; width: 100%; inset: auto 0 auto 0; top: 0; }
  /*
   * SULLO SCHERMO STRETTO le aperture si sganciano dal disegno e diventano righe:
   * sette vani da sessanta pixel su un telefono sono francobolli, e il nome non
   * si leggerebbe. Il vano resta — piccolo, a sinistra, come la miniatura della
   * finestra — e tiene la sua luce: anche in riga si vede dove sei stato.
   */
  .cs-room {
    position: static;
    transform: none;
    width: auto;
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--cs-win-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--cs-stone-a) 22%, transparent);
  }
  .cs-room .cs-vano { width: 30px; flex: none; aspect-ratio: 3 / 4; }
  .cs-room.is-lanterna .cs-vano, .cs-room.is-portone .cs-vano { aspect-ratio: 3 / 4; }
  .cs-room .cs-vano .ct-ico { width: 60%; height: 60%; }
  /* in riga la lastra non serve: il fondo ce l'ha già la riga, e tre lastre
     scure di altezza diversa facevano un mosaico pesante */
  .cs-targa {
    text-align: start; font-size: 0.64rem; letter-spacing: .04em;
    background: none; color: var(--fg); border-top: 0; padding: 0; text-shadow: none;
  }
  .cs-room:hover .cs-targa, .cs-room.is-active .cs-targa { background: none; color: var(--gold); }
  .cs-n { position: static; margin-inline-start: auto; }
  .cs-r-verses { width: auto; grid-column: 1 / -1; }
  /* la lanterna del profilo ha una larghezza sua sulla facciata (6,5%): nella
     griglia la schiacciava in una colonna sottile, e strizzava la vicina */
  .cs-room.is-lanterna, .cs-r-profilo { width: auto; min-width: 0; }
  .cs-r-profilo .cs-targa { font-size: .64rem; } /* la targa piccola è per la torre disegnata */
  .cs-polonio { position: absolute; top: 56px; left: auto; right: 4%; transform: none; }
  .cs-polonio .pol-face { width: 44px; height: 44px; }
  /* sullo schermo stretto la carta galleggia in basso, larga quasi quanto lo
     schermo: la larghezza del desktop (56%) qui la strizzava a un francobollo */
  .cs-card { position: fixed; bottom: 1rem; left: 4%; right: 4%; width: auto; z-index: 40; }
  .cs-card.is-right { left: 4%; right: 4%; }
}
/* SUL TELEFONO UNA COLONNA SOLA (28/09/2026): coi nomi nuovi («Il giardino di
   Amleto», «Lo scrittoio di Rosalind») due colonne da 150 px spezzavano le targhe
   parola per parola. Una riga per stanza: il nome intero, il numero a destra. */
@media (max-width: 480px) {
  .castle-scene { grid-template-columns: 1fr; gap: .45rem; }
  .cs-r-verses { grid-column: auto; }
  .cs-room { padding: .55rem .8rem; }
  .cs-targa, .cs-r-profilo .cs-targa { font-size: .7rem; }
}

/* Il viso di Polonio: sta sulla porta grande del castello (castello.js). */
.pol-face { flex: 0 0 auto; width: 40px; height: 40px; }

.legal-lang { margin: 0 0 .2rem; text-align: end; }
.legal-lang select {
  font: inherit; font-size: .85rem; color: var(--fg);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: .35rem .5rem; cursor: pointer;
}
.legal-lang select:hover { border-color: var(--gold); }

/* --- ENTRATA: il bivio nel bosco ------------------------------------------ */
#view-home { animation: home-rise .6s ease-out both; }
@keyframes home-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.journey-head { text-align: center; margin: .5rem 0 1.1rem; }
.journey-head h1 { font-size: clamp(1.55rem, 3.4vw, 2.4rem); margin: 0 0 .3rem; letter-spacing: -.02em; }
.journey-head .sub { max-width: none; margin: 0; }

/* La scena è disegnata da journey.js (canvas a strati con parallasse).
   Chiaro = alba, scuro = notte: il toggle tema cambia l'ora del giorno. */
.journey {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 74vh;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
/* Teatro e oceano: stessa tela del bosco (16/9), altrimenti il "cover" ritaglia
   la composizione sopra e sotto (prua della barca, ribalta del palco).
   I canvas vivono in .scene-canvas: il pannello del personaggio può così
   sovrapporsi su desktop e scendere SOTTO la scena su schermi stretti. */
.scene-stage { position: relative; width: 100%; margin-bottom: 1.6rem; animation: rise-in .5s ease-out both; }
.scene-canvas {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 74vh;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.journey .jlayer, .scene-canvas .jlayer { position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; will-change: transform; }
.journey .jlabels { position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; pointer-events: none; z-index: 4; }

/* Illustrazione di scena (se presente in img/): copre il riquadro; di notte
   si abbassa la luce con un filtro, senza bisogno di una seconda immagine. */
.scene-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* ritratto: figura intera ancorata a sinistra, il resto lo riempie il colore campionato */
.scene-photo.scene-portrait { object-fit: contain; object-position: 12% bottom; }
.scene-photo.is-night { filter: brightness(.5) saturate(.72) contrast(1.05); }

/* --- pannello del personaggio (attore in maschera, pirata) --- */
.scene-ask {
  position: absolute; z-index: 5; width: min(24rem, 42%);
  background: var(--scene-card-bg); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--scene-card-line); border-radius: 16px; padding: .85rem 1rem .9rem;
  box-shadow: 0 14px 34px var(--scene-card-shadow);
  /* NON riusare card-in: quei keyframes traslano di -50%/-100% (servono alle
     card del bosco, ancorate alla punta del sentiero) e sposterebbero il pannello. */
  animation: rise-in .6s .25s ease-out both;
}
.scene-q { margin: 0 0 .55rem; font-family: var(--serif); font-size: 1.08rem; font-weight: 700; color: var(--scene-card-fg); }
.scene-form { display: flex; gap: .4rem; }
.scene-input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: .92rem;
  padding: .45rem .7rem; border-radius: 10px;
  border: 1px solid var(--scene-card-line); background: var(--card); color: var(--fg);
  box-shadow: none;
}
.scene-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 26%, transparent); }
.scene-go {
  flex: 0 0 auto; font: inherit; font-size: .86rem; cursor: pointer;
  padding: .45rem .9rem; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  transition: filter .16s, transform .16s;
}
.scene-go:hover:not([disabled]) { filter: brightness(1.07); transform: translateY(-1px); }
.scene-go[disabled] { opacity: .6; cursor: progress; }
.scene-go.is-busy { animation: mic-pulse 1s ease-in-out infinite; }
.scene-hits:not(:empty) { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.scene-hit {
  display: inline-flex; align-items: baseline; gap: .4rem; font: inherit; cursor: pointer;
  max-width: 100%; text-align: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .28rem .75rem;
  color: var(--fg); transition: transform .16s, border-color .16s, box-shadow .16s;
}
.scene-hit:hover, .scene-hit:focus-visible { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-1); outline: none; }
.sh-t { font-size: .9rem; font-weight: 600; }
.sh-s { font-family: var(--sans); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.scene-none { margin: .6rem 0 0; font-size: .84rem; font-style: italic; color: var(--scene-card-muted); }
.scene-alt { margin: .55rem 0 0; font-family: var(--sans); font-size: .68rem; color: var(--scene-card-muted); }
.jcard {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer;
  font: inherit; text-align: center; width: max-content; max-width: 230px;
  background: var(--scene-card-bg); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--scene-card-line); border-radius: 15px; padding: .62rem .95rem .55rem;
  box-shadow: 0 12px 30px var(--scene-card-shadow);
  transition: transform .28s cubic-bezier(.2, .9, .25, 1.2), box-shadow .28s;
  animation: card-in .8s cubic-bezier(.2, .9, .3, 1) both;
}
.jcard { max-width: 200px; }
.jcard:nth-child(1) { animation-delay: .3s; } .jcard:nth-child(2) { animation-delay: .45s; }
.jcard:nth-child(3) { animation-delay: .6s; } .jcard:nth-child(4) { animation-delay: .75s; }
@keyframes card-in { from { opacity: 0; transform: translate(-50%, -88%); } to { opacity: 1; transform: translate(-50%, -100%); } }
.jcard:hover, .jcard:focus-visible {
  transform: translate(-50%, -106%) scale(1.05); outline: none;
  box-shadow: 0 20px 44px var(--scene-card-shadow), 0 0 0 2px var(--gold);
}
.jcard h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.01em; color: var(--scene-card-fg); font-family: var(--serif); }
.jcard p { margin: .16rem 0 0; font: .74rem/1.4 var(--sans); color: var(--scene-card-muted); }

/* mobile: la scena diventa decorativa, i sentieri si scelgono dalle card */
.road-list { display: none; }
.road-card {
  display: flex; flex-direction: column; gap: .1rem; text-align: start;
  background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--trail-edge);
  border-radius: 10px; padding: .8rem 1rem; cursor: pointer; font: inherit; color: var(--fg);
}
.road-card:hover, .road-card:focus-visible { border-color: var(--gold); border-left-color: var(--gold); outline: none; }
.road-card .rc-t { font-size: 1.05rem; font-weight: 700; }
.road-card .rc-d { font-size: .85rem; color: var(--muted); }

/* freccia "torna al bosco" nella nav */
.backbtn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-family: var(--sans); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem .1rem .7rem; margin-inline-end: 1.4rem;
}
.backbtn:hover { color: var(--accent); }

/* scheda di dettaglio (opera/emozione): pulsante di chiusura */
.detail-wrap { position: relative; animation: rise-in .45s ease-out both; }
.detail-close {
  position: absolute; top: .6rem; inset-inline-end: .6rem; z-index: 3;
  width: 2.1rem; height: 2.1rem; border-radius: 999px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; font-size: .95rem; line-height: 1;
  box-shadow: var(--shadow-1);
  transition: transform .18s, color .18s, border-color .18s;
}
.detail-close:hover { color: var(--fg); border-color: var(--gold); transform: rotate(90deg); }

/* Cambio sezione: ogni vista entra con lo stesso respiro del bosco.
   Il toggle di [hidden] fa ripartire l'animazione a ogni ingresso. */
#view-ask, #view-canon, #view-emotions, #view-admin { animation: rise-in .35s ease-out both; }




/* --- icone a linea (app/public/icons.js) --- */
.icn {
  width: 1.05em; height: 1.05em; flex: 0 0 auto;
  vertical-align: -.12em; color: var(--gold); opacity: .9;
}
.icn-lg { width: 1.25em; height: 1.25em; }
.canon button .icn { margin-inline-end: .35rem; }
.work h3 .icn { margin-inline-end: .45rem; }
.emotion-label .icn { color: var(--gold); }
.read-chip .icn { color: var(--gold); }
.ec-h { display: flex; align-items: center; gap: .4rem; }

/* --- il Cucullato: figura fissa in basso a destra, si apre come una chat --- */
.cucw {
  position: fixed; inset-inline-end: 1.1rem; bottom: calc(1.1rem + var(--sab)); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
}
.cucw-launch {
  width: 5.2rem; height: 5.2rem; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow-2);
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.2), box-shadow .22s, border-color .22s;
  animation: cucw-in .7s .6s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes cucw-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.cucw-launch:hover, .cucw-launch:focus-visible { transform: translateY(-3px) scale(1.04); border-color: var(--gold); outline: none; }
.cucw-launch.is-open { border-color: var(--gold); }
.cucw-figure { width: 100%; height: 100%; display: block; border-radius: 999px; }

/* la battuta di presentazione, la prima volta */
.cucw-nudge {
  max-width: 15rem; font-size: .85rem; line-height: 1.45;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px 14px 4px 14px; padding: .55rem .8rem;
  box-shadow: var(--shadow-1); animation: rise-in .45s ease-out both;
}

.cucw-panel {
  position: absolute; inset-inline-end: 0; bottom: 6rem;
  width: min(23rem, calc(100vw - 2.2rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-2); animation: rise-in .3s ease-out both;
}
.cucw-head {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.cucw-head-figure { width: 2.3rem; height: 2.3rem; flex: 0 0 auto; }
.cucw-title { flex: 1 1 auto; font-weight: 700; font-size: .95rem; }
.cucw-close {
  width: 1.8rem; height: 1.8rem; flex: 0 0 auto; padding: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  font-size: .8rem; transition: color .16s, border-color .16s, transform .16s;
}
.cucw-close:hover { color: var(--fg); border-color: var(--gold); transform: rotate(90deg); }

.cucw-thread { display: grid; gap: .6rem; padding: .8rem; max-height: 46vh; overflow-y: auto; }
/* SUGLI SCHERMI BASSI (26/09/2026): un telefono girato (844×390) apriva il
   pannello 52px sopra il bordo, testa e ✕ compresi, e dal dito non si chiudeva
   più. Il pannello non è mai più alto dello spazio sopra il pulsante; e se lo
   schermo è basso si mette ACCANTO al pulsante, dove ha quasi tutta l'altezza. */
.cucw-panel { max-height: calc(100dvh - 8rem); }
.cucw-panel .cucw-thread { flex: 1 1 auto; min-height: 0; }
@media (max-height: 520px) and (min-width: 641px) {
  .cucw-panel { bottom: 0; inset-inline-end: 5.2rem; max-height: calc(100dvh - 1.6rem); }
}
.cucw-q {
  margin: 0; justify-self: end; max-width: 88%;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px 14px 4px 14px; padding: .48rem .75rem; font-size: .9rem;
}
.cucw-a {
  margin: 0; display: flex; align-items: flex-start; gap: .5rem; max-width: 95%;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: .55rem .8rem; font-size: .92rem; line-height: 1.6;
}
.cucw-mini { width: 1.7rem; height: 1.7rem; flex: 0 0 auto; margin-top: .05rem; }
.cucw-a.is-waiting span { color: var(--muted); font-style: italic; }
.cucw-verse { display: block; font-style: italic; color: var(--muted); margin-bottom: .35rem; }
.cucw-gloss { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .45rem; }
.cucw-head .gd-voice { position: static; flex: 0 0 auto; }
.cucw-a.cucw-crisis { background: var(--warn-bg); border-color: var(--warn-line); }

.cucw-form { display: flex; gap: .4rem; padding: .65rem; border-top: 1px solid var(--line); }
.cucw-input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: .9rem;
  padding: .5rem .7rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
}
.cucw-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent); }
.cucw-send {
  flex: 0 0 auto; font: inherit; font-size: .86rem; cursor: pointer;
  padding: .5rem .9rem; border-radius: 12px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  transition: filter .16s, transform .16s;
}
.cucw-send:hover:not([disabled]) { filter: brightness(1.07); transform: translateY(-1px); }
.cucw-send[disabled] { opacity: .6; cursor: progress; }

/* --- lettura: leggibilità della prosa --- */
.reading { font-size: 1.03rem; line-height: 1.72; }
.reading strong { font-weight: 700; }

/* --- responsività --- */

/* ==================== Scrittura personale ================================ */

/* Attività giorno per giorno: una colonna per giorno, quattro serie impilate. */
.tr-chart {
  display: flex; align-items: flex-end; justify-content: flex-start; gap: .3rem;
  height: 160px; margin-top: 1rem; overflow-x: auto; padding-bottom: .2rem;
}
/* Le colonne si distribuiscono, ma con un tetto: con un solo giorno la barra
   resterebbe sperduta in mezzo alla larghezza. */
.tr-col {
  flex: 1 1 22px; max-width: 44px;
  display: flex; flex-direction: column; align-items: center; height: 100%;
}
.tr-col-n { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-stack {
  flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 1px;
}
.tr-seg { display: block; width: 100%; border-radius: 2px; min-height: 2px; }
.tr-col-d { font-size: .66rem; color: var(--muted); margin-top: .3rem; white-space: nowrap; }
.tr-emotions { background: #4e7f5a; }
.tr-works { background: #3f6f7a; }
.tr-coach { background: #a4463f; }
.tr-games { background: #7a5c9e; }
.tr-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; font-size: .8rem; color: var(--muted); }
.tr-leg { display: inline-flex; align-items: center; gap: .35rem; }
.tr-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Emozioni, opere e punteggi: pastiglie cliccabili. */
.tr-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.tr-chip {
  display: inline-flex; align-items: baseline; gap: .45rem; cursor: pointer;
  padding: .38rem .7rem; border-radius: 99px;
  background: var(--card); border: 1px solid var(--line); color: var(--fg); font-size: .9rem;
}
.tr-chip:hover { border-color: var(--gold); }
.tr-chip-n {
  font-size: .74rem; color: var(--gold); font-variant-numeric: tabular-nums;
  border-inline-start: 1px solid var(--line); padding-inline-start: .45rem;
}
.tr-score {
  display: inline-flex; flex-direction: column; gap: .1rem;
  padding: .5rem .8rem; border-radius: .5rem;
  background: var(--card); border: 1px solid var(--line);
}
.tr-score-g { font-family: var(--serif); font-size: .95rem; }
.tr-score-n { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.tr-score-p { font-size: .74rem; color: var(--muted); }
.tr-recent { display: flex; flex-direction: column; gap: .2rem; margin-top: .7rem; }
.tr-rec { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Le situazioni portate al saggio. */
.tr-list { display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.tr-item {
  padding: .7rem .9rem; border-radius: .5rem;
  background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent);
}
.tr-when { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tr-q { margin: .25rem 0 .4rem; line-height: 1.45; }
.tr-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tr-tag {
  font-size: .78rem; padding: .18rem .55rem; border-radius: 99px;
  border: 1px solid var(--line); background: none; color: var(--muted);
}
.tr-tag-emo { color: var(--gold); border-color: var(--gold); }
.tr-tag-work { cursor: pointer; color: var(--fg); }
.tr-tag-work:hover { border-color: var(--gold); color: var(--gold); }

/* Il diario. */
.d-bar { margin: .9rem 0; }
.d-editorbox:not(:empty) { margin-bottom: 1.2rem; }
.d-editor { display: flex; flex-direction: column; gap: .6rem; }
.d-input, .d-textarea {
  width: 100%; padding: .7rem .9rem; border-radius: .6rem;
  background: var(--card); border: 1px solid var(--line); color: var(--fg); font: inherit;
}
.d-input { font-family: var(--serif); font-size: 1.1rem; }
.d-textarea { font-family: var(--serif); line-height: 1.6; resize: vertical; }
.d-editor-row { display: flex; align-items: center; gap: .7rem; }
.d-count { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.d-list { display: flex; flex-direction: column; gap: .9rem; }
.d-entry {
  padding: 1rem 1.1rem; border-radius: .6rem;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.d-entry-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.d-when { font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.d-edited { font-size: .72rem; font-style: italic; color: var(--gold); }
.d-actions { margin-inline-start: auto; display: flex; gap: .4rem; }
.d-act {
  font-size: .78rem; padding: .2rem .6rem; border-radius: 99px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--muted);
}
.d-act:hover { border-color: var(--gold); color: var(--gold); }
.d-del:hover { border-color: var(--accent); color: var(--accent); }
.d-title { font-family: var(--serif); font-size: 1.15rem; margin: .5rem 0 .3rem; }
.d-body { font-family: var(--serif); line-height: 1.65; white-space: pre-wrap; margin: .3rem 0 0; }

/* La lettura di una voce: l'emozione riconosciuta, come si attraversa, l'opera
   che ne parla e la domanda. Staccata dal testo scritto, che resta il centro. */
.d-reading {
  margin-top: .9rem; padding: .85rem 1rem;
  background: color-mix(in srgb, var(--gold) 7%, var(--bg));
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  border-radius: .5rem;
}
.d-reading-h {
  display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem;
}
.d-reading-emo { margin-bottom: .5rem; }
.d-reading-manage { font-size: .92rem; line-height: 1.55; margin: .2rem 0 .6rem; }
.d-reading-work { font-size: .9rem; margin: .2rem 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.d-reading-one { font-size: .88rem; font-style: italic; color: var(--muted); margin: .1rem 0 .6rem; line-height: 1.5; }
.d-reading-q {
  margin-top: .6rem; padding: .6rem .8rem; border-radius: .4rem;
  background: var(--card); border: 1px solid var(--line);
}
.d-reading-qh {
  display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .25rem;
}
.d-reading-q p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.45; margin: 0; }

/* L'ancoraggio: il verso da cui nasce la domanda. */
.d-reading-anchor { margin: .6rem 0 .2rem; padding-inline-start: .8rem; border-inline-start: 2px solid var(--line); }
.d-reading-verse { font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; margin: 0 0 .2rem; }
.d-reading-vgloss { font-size: .88rem; font-style: italic; color: var(--muted); margin: 0 0 .25rem; }
.d-reading-vsrc {
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}

/* La porta segreta nel bosco: area di click trasparente sopra l'uscio
   disegnato. Non si vede, ma esiste per la tastiera e per il puntatore. */
.jdoor {
  position: absolute; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: 6px;
  /* Il contenitore .jlabels ha pointer-events: none (i canvas sotto devono
     ricevere il movimento del mouse per la parallasse): come le .jcard, la
     porta deve riabilitarli su di sé, altrimenti il click non arriva. */
  pointer-events: auto;
}
.jdoor:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Su schermi stretti la porta diventa una riga discreta sotto i sentieri:
   nessun titolo, nessuna descrizione — si nota solo se la si cerca. */
.road-door {
  display: block; margin: .2rem auto 0; padding: .4rem .9rem;
  background: none; border: 1px dashed var(--line); border-radius: 99px;
  color: var(--muted); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
}
.road-door:hover { color: var(--gold); border-color: var(--gold); }

/* Accessi: il totale grande, sotto la ripartizione login/visite. */
.ac-split { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap; font-variant-numeric: normal; }
.access-kind {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--line); border-radius: 99px; padding: .05rem .45rem;
}

/* =================== Dove vanno le persone (cockpit) ===================== */

.admin-flow { margin-top: 1.6rem; }
.flow-head { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.flow-stat { display: flex; flex-direction: column; }
.flow-stat-n {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.flow-stat-l { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.flow-h {
  font-family: var(--serif); font-size: 1.1rem; margin: 1.4rem 0 .2rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.flow-note { color: var(--muted); font-size: .88rem; line-height: 1.45; margin: .5rem 0 .9rem; }

/* Uso delle sezioni: barre proporzionali, il colore è quello della sezione. */
.flow-bars { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; }
.flow-bar { display: grid; grid-template-columns: 11rem 1fr auto; gap: .7rem; align-items: center; }
.flow-bar-l { font-size: .92rem; }
.flow-bar-track { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
/* La tinta predefinita serve alle barre senza colore proprio (imbuto, fasce):
   quelle delle sezioni se la assegnano da sé, per personaggio. */
.flow-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
/* Comportamento: due colonne affiancate, e gli istogrammi a colonnine. */
.flow-h2 {
  margin: 1.4rem 0 .5rem;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--sans);
}
.flow-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.8rem; }
.flow-half { min-width: 0; }
.flow-cols {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 5.5rem;
  padding-top: .3rem;
}
.flow-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.flow-col-bar {
  display: block;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
  min-height: 1px;
}
.flow-col-l {
  font-size: .6rem;
  color: var(--muted);
  text-align: center;
  padding-top: .2rem;
  font-family: var(--sans);
  white-space: nowrap;
  overflow: hidden;
}
/* Sul telefono le due colonne si impilano: affiancate sarebbero illeggibili. */
@media (max-width: 46rem) {
  .flow-pair { grid-template-columns: 1fr; }
}

.flow-bar-n { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Il Sankey: scorre in orizzontale se serve, la pagina non si allarga mai. */
.flow-sankey { overflow-x: auto; margin-top: .6rem; }
.sankey { width: 100%; min-width: 640px; height: auto; display: block; }
.sankey-link { transition: fill-opacity .12s ease; }
.sankey-link:hover { fill-opacity: .62 !important; }
.sankey-t { font-family: var(--sans); font-size: 11.5px; pointer-events: none; }
.sankey-t-in { fill: #fff; font-weight: 600; }
.sankey-t-out { fill: var(--fg); }
.sankey-step {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--muted);
}

/* ============================ I giochi di Yorick ========================== */

.game-menu {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-top: 1.1rem;
}
.game-card {
  display: flex; flex-direction: column; gap: .45rem; text-align: start;
  padding: 1.1rem 1.2rem; border-radius: .7rem; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--fg);
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.game-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.gc-icona { width: 1.6rem; height: 1.6rem; color: var(--gold); margin-bottom: .15rem; }
.game-hero .gc-icona { width: 2rem; height: 2rem; }
.gc-t { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; }
.gc-d { color: var(--muted); font-size: .92rem; line-height: 1.35; }
.gc-best { color: var(--gold); font-size: .82rem; letter-spacing: .04em; }

/* La sfida mista, in evidenza sopra la griglia: pesca da tutti i tipi. */
.game-hero {
  width: 100%; margin-top: 1.1rem; border-color: var(--gold);
  background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--gold) 12%, var(--card)));
}
.game-hero .gc-t { font-size: 1.3rem; }

.game-round {
  margin-top: 1.1rem; padding: 1.2rem 1.3rem; border-radius: .7rem;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.game-head {
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  font-size: .85rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .9rem;
}
.gh-score { color: var(--accent); font-weight: 700; }
/* LA TESTATA DELLA PARTITA DEL GLOBE, SEMPRE IN VISTA (27/09/2026): a che domanda sei,
   quante ne mancano, la barra, i punti, quanto vale questa. Resta attaccata
   sotto la testata dell'app (--gh-top lo misura games.js). */
.game-head.gh-partita {
  position: sticky; top: var(--gh-top, 5.2rem); z-index: 6;
  display: block; text-transform: none; letter-spacing: 0;
  margin: -.2rem 0 1rem; padding: .55rem .7rem .6rem;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-1);
}
.gh-riga { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.gh-dom { font: 600 .9rem var(--sans); color: var(--fg); white-space: nowrap; }
.gh-punti { font: .8rem var(--sans); color: var(--muted); white-space: nowrap; }
.gh-punti-n { font: 700 1.45rem/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.gh-barra { display: flex; gap: 3px; margin: .45rem 0 .4rem; }
.gh-seg { flex: 1 1 0; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--line) 80%, transparent); }
.gh-seg.is-giusta { background: #4f8a4b; }
.gh-seg.is-sbagliata { background: #b04a3a; }
.gh-seg.is-ora { background: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); }
.gh-sotto { font: .78rem var(--sans); color: var(--muted); align-items: center; flex-wrap: wrap; }
.gh-vale { font-weight: 700; color: var(--gold); margin-inline-start: auto; }
.gh-serie { font-size: .72rem; letter-spacing: .04em; }
.gh-vale:empty { display: none; }
.game-round.palco > .game-head.gh-partita::before { display: none; }
/* quanto ha dato la risposta, e quanto costa un aiuto */
.game-preso { margin: 0 0 .3rem; font: 700 1.05rem var(--serif); color: var(--muted); }
.game-preso.is-piu { color: #4f8a4b; }
.ai-costo { display: block; font: 700 .72rem var(--sans); color: var(--accent); margin-top: .1rem; }

.game-quote {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.4;
  margin: .3rem 0 .2rem; padding-inline-start: .9rem; border-inline-start: 3px solid var(--gold);
}
.game-gloss { color: var(--muted); font-style: italic; margin: 0 0 .9rem; }
/* Quando la parafrasi È la domanda (dalla parafrasi al verso) pesa di più. */
.game-gloss-lead {
  font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: var(--fg);
  padding-inline-start: .9rem; border-inline-start: 3px solid var(--gold); margin: .3rem 0 .9rem;
}
.game-stmt { font-family: var(--serif); font-size: 1.2rem; margin: .2rem 0 .8rem; }
.game-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .6rem; }
.game-opts-tf { grid-template-columns: repeat(2, minmax(0, 12rem)); }
/* Opzioni che sono versi interi: una per riga, altrimenti si spezzano male. */
.game-opts-long { grid-template-columns: 1fr; }

/* --- accoppia: la tavola a due colonne contro il tempo (04/09/2026) --------- */
.cp-riga { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 .6rem; }
.cp-tempo { flex: 1; height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); }
.cp-tempo-in { display: block; height: 100%; width: 100%; background: var(--gold); transition: width .25s linear; }
.cp-orologio { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; min-width: 2.6rem; text-align: end; }
.cp-tavola { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .5rem; }
.cp-col { display: flex; flex-direction: column; gap: .45rem; }
.cp-carta { min-height: 52px; padding: .55rem .65rem; border-radius: .55rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; text-align: start; font-size: .95rem; line-height: 1.3; touch-action: manipulation; transition: border-color .12s ease, transform .12s ease, opacity .2s ease; }
.cp-nome { font-family: var(--serif); font-weight: 700; }
.cp-carta.is-scelto { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(122, 47, 47, .25); }
.cp-carta.is-giusta { border-color: #4c7a45; background: rgba(96, 150, 86, .16); opacity: .7; }
.cp-carta.is-mancata { border-color: var(--gold); opacity: .8; }
.cp-carta:disabled { cursor: default; }
.cp-carta.is-scossa { animation: cp-scossa .3s ease; border-color: var(--accent); }
.cp-meta-t { display: block; font-family: var(--serif); font-style: italic; }
.cp-meta-g { display: block; color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.cp-tavola.is-versi .cp-carta { min-height: 64px; font-size: .9rem; }
.cp-lezione { margin: .5rem 0; padding-top: .4rem; border-top: 1px dashed var(--line); }
.cp-lezione-t { margin: 0 0 .25rem; font-weight: 600; }
.game-card-nuovo { border-color: var(--gold); }
/* I fili fra le coppie giuste, sopra la tavola. */
.cp-tavola { position: relative; }
.cp-fili { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cp-filo { fill: none; stroke: #4c7a45; stroke-width: 2.5px; stroke-linecap: round; opacity: .85; }
.cp-filo.is-mancato { stroke: var(--gold); stroke-dasharray: 5 6; opacity: .7; }

/* --- ordina il verso (04/09/2026) ---------------------------------------- */
.od-fila { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 3rem; padding: .55rem; border-radius: .6rem; border: 1px dashed var(--gold); margin: .3rem 0 .7rem; align-items: center; }
.od-vuota { color: var(--muted); font-size: .85rem; font-style: italic; }
.od-mazzo { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.od-parola { min-height: 40px; padding: .4rem .75rem; border-radius: .55rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-family: var(--serif); font-size: 1.02rem; cursor: pointer; touch-action: manipulation; transition: transform .1s ease; }
.od-parola:active { transform: scale(.96); }
.od-fila .od-parola { border-color: var(--gold); }
.od-parola.is-right { border-color: #4c7a45; background: rgba(96, 150, 86, .16); }
.od-parola.is-wrong { border-color: var(--accent); background: rgba(122, 47, 47, .12); }
.mp-carta.is-verso .mp-carta-forma { font-style: italic; font-size: 1.15rem; }
.mp-scheda-azioni { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }
.mp-scheda-azioni .yk-ascolta { margin: 0; }

/* --- IL PALCO (04/09/2026: «un teatro come contenitore delle domande») -------
   Il round sta su un palcoscenico: due quinte rosse ai lati, un arco in
   cima, una fila di luci di ribalta in basso. Tutto con i due pseudo-elementi
   del contenitore e un bordo: nessuna immagine da caricare, e sui telefoni
   stretti le quinte si restringono. */
.game-round.palco { position: relative; overflow: hidden; overflow: clip; /* clip, non hidden: con hidden la testata «sticky» non resterebbe in vista (27/09/2026) */ border-color: #5a1d1d; border-width: 2px; border-radius: .9rem .9rem .6rem .6rem; padding-top: 1.6rem; padding-bottom: 1.5rem;
  background: radial-gradient(ellipse at 50% 0%, rgba(214, 170, 90, .10), transparent 55%), var(--card); }
.game-round.palco::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 14px; background: repeating-linear-gradient(90deg, #6b1f1f 0 4px, #4a1414 4px 7px); box-shadow: 4px 0 10px rgba(0,0,0,.35); pointer-events: none; }
.game-round.palco::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 14px; background: repeating-linear-gradient(90deg, #4a1414 0 3px, #6b1f1f 3px 7px); box-shadow: -4px 0 10px rgba(0,0,0,.35); pointer-events: none; }
.game-round.palco > .game-head { margin-inline: .4rem; }
/* position: relative sì per la riga dei giri (il sipario ::before le si appoggia), no per la testata del Globe, che deve restare in vista */
.game-round.palco > .game-head:not(.gh-partita) { position: relative; }
.game-round.palco > .game-head::before { content: ''; position: absolute; left: -1.1rem; right: -1.1rem; top: -1.6rem; height: 10px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#7a2626, #5a1d1d); }
.game-round.palco > .game-foot, .game-round.palco > :last-child { position: relative; }
.game-round.palco > :last-child::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1.5rem; height: 6px;
  background: radial-gradient(circle at 10% 50%, var(--gold) 0 2px, transparent 3px), radial-gradient(circle at 30% 50%, var(--gold) 0 2px, transparent 3px), radial-gradient(circle at 50% 50%, var(--gold) 0 2px, transparent 3px), radial-gradient(circle at 70% 50%, var(--gold) 0 2px, transparent 3px), radial-gradient(circle at 90% 50%, var(--gold) 0 2px, transparent 3px);
  opacity: .8; pointer-events: none; }
@media (max-width: 420px) { .game-round.palco::before, .game-round.palco::after { width: 9px; } }

/* --- le icone a tratto (icone.js) ------------------------------------------- */
.icn-t { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.mp-cerchio-i { width: 1.5em; height: 1.5em; }
.mp-pedina .icn-t { width: 1.6rem; height: 1.6rem; color: var(--gold); }
.gh-esci { display: inline-flex; align-items: center; gap: .3rem; }
.yk-ascolta-i { width: 1.05em; height: 1.05em; }
.stelle { display: inline-flex; gap: .12em; color: var(--gold); vertical-align: middle; }
.stelle-i { width: 1em; height: 1em; }
.fav-i { width: 1em; height: 1em; margin-inline-end: .35em; }
.lab-x .icn-t, .close .icn-t { width: 1.2em; height: 1.2em; }

/* --- il movimento nei momenti che contano (04/09/2026) ----------------------- */
/* La fiamma tremola: scala e piega, mai ferma. */
.mp-fiamma { animation: fiamma 1.1s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes fiamma { 0% { transform: scaleY(1) rotate(-2deg); opacity: .95; } 40% { transform: scaleY(1.12) rotate(2deg); } 100% { transform: scaleY(.94) rotate(-1deg); opacity: 1; } }
/* Il buio: le luci di ribalta si abbassano e il palco si scurisce un attimo. */
.game-round.palco { transition: filter .25s ease; }
.game-round.palco.is-buio { filter: brightness(.72); }
.game-round.palco.is-buio > :last-child::after { opacity: .15; transition: opacity .2s ease; }
/* La pedina che salta alla casella dopo: parte da sopra, in alto a sinistra,
   e atterra con due rimbalzi. */
.mp-pedina.is-salto { animation: pedina-salto 1.1s cubic-bezier(.3, 1.4, .5, 1) 1, mp-pedina 2.4s ease-in-out 1.1s infinite; }
@keyframes pedina-salto { 0% { transform: translate(-60px, -120px) scale(.6); opacity: 0; } 60% { transform: translate(0, -14px) scale(1.1); opacity: 1; } 80% { transform: translate(0, 2px) scale(.96); } 100% { transform: translate(0, 0) scale(1); } }
/* La polvere d'oro sul giro superato. */
.game-over { position: relative; overflow: hidden; }
.polvere { position: absolute; inset: 0; pointer-events: none; }
.polvere-g { position: absolute; top: -8px; left: var(--x); width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); opacity: 0; animation: polvere 2.4s ease-in var(--r) 1 forwards; }
@keyframes polvere { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--d), 110%) scale(1); opacity: 0; } }
/* Il sipario fra le sezioni: due quinte che si chiudono al centro e si riaprono. */
#sipario-sezioni { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none; }
#sipario-sezioni.is-vivo { display: block; }
.sipario-quinta { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, #6b1f1f 0 14px, #4a1414 14px 26px); box-shadow: 0 0 40px rgba(0,0,0,.5); }
.sipario-quinta.is-sx { left: 0; transform: translateX(-100%); }
.sipario-quinta.is-dx { right: 0; transform: translateX(100%); }
#sipario-sezioni.is-vivo .sipario-quinta.is-sx { animation: quinta-sx .55s ease-in-out 1; }
#sipario-sezioni.is-vivo .sipario-quinta.is-dx { animation: quinta-dx .55s ease-in-out 1; }
@keyframes quinta-sx { 0% { transform: translateX(-100%); } 45%, 55% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes quinta-dx { 0% { transform: translateX(100%); } 45%, 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .mp-fiamma, .mp-pedina.is-salto, .polvere-g { animation: none; }
  .game-round.palco.is-buio { filter: none; }
  #sipario-sezioni.is-vivo { display: none; }
}

/* --- il programma di sala: la scheda del verso (04/09/2026) ------------------ */
.game-lesson { position: relative; padding-top: 1.1rem; border-inline-start-width: 1px; border-color: transparent; background: color-mix(in srgb, var(--gold) 9%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent); }
.game-lesson::before { content: '❧'; position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); padding: 0 .5rem; color: var(--gold); background: var(--card); font-size: 1rem; line-height: 1; }
.game-lesson-h { text-align: center; letter-spacing: .16em; }
.game-lesson-q { font-size: 1.32rem; font-style: italic; text-align: center; line-height: 1.4; margin: .2rem 0 .55rem; border-inline-start: 0; padding-inline-start: 0; }
.game-lesson-src { text-align: center; font-variant: small-caps; letter-spacing: .06em; color: var(--muted); padding-bottom: .5rem; margin-bottom: .55rem; background: linear-gradient(var(--gold), var(--gold)) center bottom / 42px 1px no-repeat; }
.game-lesson-g { text-align: center; }
.mp-scheda-azioni { justify-content: center; }

/* --- strati al posto dei bordi (04/09/2026) ------------------------------------
   Quasi tutto aveva un bordo di un pixel. Le superfici che sembrano costose
   usano il TONO: una carta appena più chiara del fondo e un'ombra morbida, e
   il bordo solo dove dice uno stato (scelta, giusta, sbagliata, traguardo). */
:root { --strato: color-mix(in srgb, var(--fg) 4%, var(--card)); --strato-2: color-mix(in srgb, var(--fg) 8%, var(--card)); }
.game-opt, .mp-scelta, .cp-carta, .od-parola { border-color: transparent; background: var(--strato); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 14px -10px rgba(0,0,0,.35); }
.game-opt:hover:not(:disabled), .mp-scelta:hover:not(:disabled), .cp-carta:hover:not(:disabled) { background: var(--strato-2); border-color: transparent; }
.game-card { border-color: transparent; background: var(--strato); }
.mp-dettaglio, .mp-grado { border-color: transparent; }
.mp-cerchio { border-width: 1.5px; }
.mp-nodo.is-chiusa .mp-cerchio { border-color: transparent; background: var(--strato); }
.ai-tasto { background: transparent; }

/* --- STRATI IN TUTTA L'APP (04/09/2026, «continua con i miglioramenti grafici») --
   Lo stesso principio applicato ai contenitori di ogni sezione: i pannelli del
   profilo, le carte della home, le carte di casi, opere e emozioni, le voci
   delle tracce, il riquadro della serie. Un tono al posto del bordo, un'ombra
   morbida al posto della riga. Gli INPUT e i CHIP tengono il loro bordo: lì
   dice «qui si scrive», «qui si sceglie», ed è informazione. */
:root { --ombra-strato: 0 1px 2px rgba(0,0,0,.06), 0 12px 28px -18px rgba(0,0,0,.45); }
.pf-panel, .road-card, .pz-carta, .pv-carta, .pg-scheda, .vt-carta, .tr-item, .work, .mp-serie, .mp-oggi, .mp-tappa {
  border-color: transparent; background: var(--strato); box-shadow: var(--ombra-strato);
}
.pf-panel:hover, .road-card:hover, .work:hover { box-shadow: var(--ombra-strato), inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); }

/* La barra delle sezioni come l'indice di un programma di sala: la sezione
   aperta in oro con un filetto corto sotto, le altre in grigio caldo. */
.tab { border-bottom: 0; position: relative; padding-bottom: .8rem; }
.tab.is-active { color: var(--gold); border-bottom-color: transparent; }
.tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: .35rem; height: 2px; border-radius: 99px; background: var(--gold); }

/* Il pulsante che fa: un filo di rilievo e la spinta quando lo premi. */
.game-next {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent));
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px -10px color-mix(in srgb, var(--accent) 70%, black);
  transition: transform .1s ease, box-shadow .1s ease;
}
.game-next:active { transform: translateY(1px) scale(.99); box-shadow: 0 2px 8px -8px black; }
.game-other { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.game-other:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mp-vai { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent)); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--accent) 70%, black); transition: transform .1s ease; }
.mp-vai:active { transform: translateY(1px) scale(.99); }
@media (prefers-reduced-motion: reduce) { .game-next, .mp-vai { transition: none; } }

/* --- L'INTESTAZIONE E LA BARRA DELLE SEZIONI (04/09/2026, «più fighi») --------
   L'intestazione ha in cima un filo di tenda rossa, come il boccascena sopra
   il palco: dice «teatro» prima di ogni parola. La barra delle sezioni porta
   l'icona di ogni personaggio accanto al nome — la lettera di Amleto, il libro
   di Puck, l'onda di Prospero, le maschere di Yorick, la penna di Rosalind —
   e la sezione aperta è in oro con il suo filetto. Sul telefono la riga scorre
   e sfuma sul bordo destro, per dire che continua. */
/* NIENTE overflow: hidden qui: il menù delle lingue è un figlio assoluto della
   testata e sporge sotto; tagliato, si vedeva ma i tocchi finivano sulla pagina
   dietro (04/09/2026, Mauro: «non posso manco cambiare la lingua»). Il filo
   rosso si tiene dentro gli angoli tondi con border-radius: inherit. */
.topbar { position: sticky; border-color: transparent; background: color-mix(in srgb, var(--card) 94%, transparent); } /* quasi opaca: sotto la testata scorre il testo e non deve leggersi in trasparenza */
.topbar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: inherit; background: repeating-linear-gradient(90deg, #6b1f1f 0 10px, #8a2a2a 10px 18px); opacity: .9; pointer-events: none; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 6px; background: linear-gradient(rgba(0,0,0,.35), transparent); pointer-events: none; }
.brandtext::after { margin-top: .28rem; }
nav#app-nav { display: flex; align-items: flex-end; gap: 0; padding: 0 .2rem; margin-bottom: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
.tab { display: inline-flex; align-items: center; gap: .4rem; }
.tab .icn-t { width: 1.15em; height: 1.15em; opacity: .75; }
.tab.is-active .icn-t { opacity: 1; color: var(--gold); }
.backbtn .icn-t { width: 1.1em; height: 1.1em; }
/* LA BARRA SCORRE A OGNI LARGHEZZA (26/09/2026): sopra i 640px non scorreva e
   non andava a capo, e su un tablet (768px) le otto schede spingevano Elsinore
   fuori, allargando tutta la pagina a 960px. Ora scorre come sul telefono, e
   la dissolvenza a destra dice che c'è dell'altro finché lo schermo è stretto. */
nav#app-nav { overflow-x: auto; scrollbar-width: none; }
nav#app-nav::-webkit-scrollbar { display: none; }
nav#app-nav > * { flex: 0 0 auto; white-space: nowrap; }
/* NIENTE MEZZE PAROLE (26/09/2026, Mauro: «crea confusione?»): una scheda
   tagliata a metà («CK» a sinistra, il castello a destra) sembrava un errore.
   La barra si aggancia a una scheda INTERA dal lato dove comincia; dal lato
   dove nasconde altro (app.js mette .altro-sx / .altro-dx) sfuma, e ogni scheda
   rimasta a metà (.a-meta) diventa un'ombra: si capisce che c'è dell'altro
   senza leggere mezza parola. In arabo lo stesso, a specchio. */
nav#app-nav { scroll-snap-type: x mandatory; scroll-padding-inline: .2rem; }
nav#app-nav > * { scroll-snap-align: start; }
nav#app-nav > .a-meta { opacity: .28; transition: opacity .15s; }
nav#app-nav { --sf: 2.2rem; }
nav#app-nav.altro-dx { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--sf)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--sf)), transparent); }
nav#app-nav.altro-sx { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--sf)); mask-image: linear-gradient(90deg, transparent, #000 var(--sf)); }
nav#app-nav.altro-sx.altro-dx { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--sf), #000 calc(100% - var(--sf)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--sf), #000 calc(100% - var(--sf)), transparent); }
@media (max-width: 640px) {
  .tab { gap: .3rem; }
  .tab .icn-t { width: 1.25em; height: 1.25em; }
}

/* --- LA FORESTA A TUTTO SCHERMO (prova, 04/09/2026) ---------------------------
   Solo con body.scena-piena e su schermi stretti: la scena esce dal riquadro
   e prende tutta la pagina; titolo e sottotitolo in soprimpressione sul cielo,
   come su desktop; le carte dei sentieri spariscono, al loro posto le lanterne
   col solo nome in cima ai sentieri. Si spegne dal profilo. */
/* Anche su iPad in verticale (1.2, 21/09/2026): la scena piena e le lanterne
   valgono per ogni schermo più alto che largo fino a 1100px. In orizzontale
   l'iPad resta come il desktop. La stessa regola sta in ritrattoSe (app.js). */
@media (max-width: 640px), ((orientation: portrait) and (max-width: 1100px)) {
  body.scena-piena .hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); display: block; }
  body.scena-piena .hero .journey { aspect-ratio: auto; height: calc(100dvh - 7.6rem); max-height: none; border: 0; border-radius: 0; }
  /* anche durante il benvenuto: a 58vh Orlando finiva addosso al sottotitolo */
  body.scena-piena .hero .journey.is-welcome { height: calc(100dvh - 7.6rem); }
  /* Durante il benvenuto il titolo si ritira: Ariel e Orlando stanno a mezza
     scena e su un telefono basso (iPhone SE, 667px) gli finivano addosso.
     La scheda della guida dice già tutto; il titolo torna a benvenuto finito. */
  body.scena-piena .hero .journey-head { transition: opacity .4s; }
  body.scena-piena .hero:has(.journey.is-welcome) .journey-head { opacity: 0; }

  body.scena-piena .hero .journey-head { position: absolute; inset: .9rem 1.1rem auto; z-index: 5; margin: 0; pointer-events: none; order: 0; }
  /* L'ombra segue il tema, come su desktop: col cielo chiaro un'ombra scura
     sotto un testo scuro fa una sbavatura (04/09/2026, Mauro su iOS in tema
     chiaro: «le scritte sono strane»). Alone chiaro di giorno, scuro di notte. */
  body.scena-piena .hero .journey-head h1 { font-size: 1.55rem; text-shadow: 0 1px 2px rgba(255,251,240,.6), 0 0 18px rgba(255,251,240,.45); }
  body.scena-piena .hero .journey-head .sub { text-shadow: 0 1px 2px rgba(255,251,240,.55); }
  :root[data-theme='dark'] body.scena-piena .hero .journey-head h1,
  :root[data-theme='dark'] body.scena-piena .hero .journey-head .sub { text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 20px rgba(0,0,0,.5); }
  body.scena-piena .road-list { display: none; }
  body.scena-piena .journey .jmark { display: none; }
  /* Le lanterne in cima ai sentieri: il solo nome, in una pillola di vetro. */
  body.scena-piena .journey .jcard.is-lanterna { display: block; max-width: 8.6rem; padding: .36rem .7rem .4rem; border-radius: 14px; box-shadow: 0 0 0 1px rgba(201,154,85,.4), 0 8px 18px -12px rgba(0,0,0,.9), 0 0 18px rgba(255,216,138,.18); }
  body.scena-piena .journey .jcard.is-lanterna h3 { font-size: .74rem; line-height: 1.2; font-weight: 600; letter-spacing: .01em; white-space: normal; }
  /* LE STANZE (04/09/2026, «portala anche nelle altre stanze»): la scena del
     personaggio esce dal riquadro e prende l'altezza del telefono; la sua carta
     resta appoggiata in basso, sulla scena. Sotto, scorrendo, il lavoro della
     stanza come prima. */
  body.scena-piena .scene-stage { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 1rem; }
  body.scena-piena .scene-canvas { aspect-ratio: auto; height: min(56dvh, 31rem); max-height: none; border: 0; border-radius: 0; }
  body.scena-piena .scene-stage .gd-card { left: .8rem; right: .8rem; bottom: 1rem; }
  /* Il pannello del personaggio (Rosalind che parla, con verso e invito) torna
     SULLA scena, in basso, dove su desktop è sempre stato: a tutto schermo il
     terreno esteso è il suo posto naturale, e sotto la scena finiva fuori dallo
     schermo, lasciando la stanza muta. */
  /* `!important` perché la posizione la scrive placeCard() in linea, per il
     desktop (a destra, larga il 42%): qui la si sovrascrive di proposito. */
  /* Il pannello sta NEL FLUSSO, non assoluto: sale sulla scena con un margine
     negativo, e quel che segue (le due porte di Puck, il testo della stanza)
     viene dopo, mai sotto. Assoluto e ancorato al fondo, in Puck copriva le
     porte «La biblioteca» e «Il laboratorio» (04/09/2026, Mauro: «in Puck si
     accavallano i testi»). */
  body.scena-piena .scene-stage .scene-ask { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; width: auto !important; max-width: none !important; margin: -4.5rem .8rem 0 !important; z-index: 6; padding: .75rem .9rem .8rem; }
  body.scena-piena .scene-stage .mask-doors { position: relative; z-index: 6; margin: .7rem .8rem 0; }
  body.scena-piena .scene-stage:has(.mask-doors) .scene-ask { margin-top: .7rem !important; }
  body.scena-piena .scene-stage .scene-ask .scene-verse { font-size: 1rem; line-height: 1.35; }
  body.scena-piena .scene-stage .scene-ask .scene-q { font-size: 1rem; margin-bottom: .4rem; }
  body.scena-piena .scene-stage .scene-ask .scene-gloss { font-size: .82rem; }
}

/* La nuvoletta di Jaques, più piccola: una presentazione, non un manifesto.
   Si tocca per farla sparire. */
.cucw-nudge { max-width: 15.5rem; font-size: .86rem; line-height: 1.4; padding: .6rem .8rem; cursor: pointer; }

/* --- I TITOLI DI SEZIONE, un'intestazione sola (04/09/2026) ------------------
   Il castello di Elsinore, il tuo profilo, la home, il caso: un fregio sopra,
   il titolo centrato, un filetto d'oro sotto. Lo stesso segno del programma
   di sala e della scheda del verso, così ogni stanza si annuncia allo stesso
   modo. */
#view-favourites h1, #view-profile h1, #view-home h1, #view-ask h2 {
  position: relative; text-align: center; text-wrap: balance;
  padding: 1.1rem 0 .9rem; margin-bottom: .6rem;
  background: linear-gradient(var(--gold), var(--gold)) center bottom / 42px 1px no-repeat;
}
#view-favourites h1::before, #view-profile h1::before, #view-home h1::before, #view-ask h2::before {
  content: '❧'; display: block; font-size: .95rem; line-height: 1; color: var(--gold); margin-bottom: .45rem;
}
@keyframes cp-scossa { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .cp-carta.is-scossa { animation: none; } }
.game-opts-long .game-opt { font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; }
/* La data si scopre solo dopo la risposta (prima sarebbe la soluzione). */
.go-date {
  display: block; margin-top: .25rem; color: var(--gold);
  font-size: .82rem; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.game-opt {
  padding: .7rem .9rem; border-radius: .55rem; cursor: pointer; text-align: start;
  background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  font-size: .98rem; transition: border-color .12s ease, transform .12s ease;
}
.game-opt:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); }
.game-opt:disabled { cursor: default; opacity: .75; }
/* La scelta è partita verso il server e si aspetta la correzione: si vede. */
.game-opt.is-wait { border-color: var(--gold); opacity: 1; }
.game-opt.is-right { border-color: #4c7a45; background: rgba(96, 150, 86, .16); opacity: 1; font-weight: 700; }
.game-opt.is-wrong { border-color: var(--accent); background: rgba(122, 47, 47, .12); }
/* L'OPZIONE CHE È UN VERSO porta la sua resa sotto, in tondo e smorzata: il
   corsivo è del verso, e due righe corsive di fila si leggono come una sola
   citazione lunga. Serve dove si sceglie per provenienza (l'intruso), non dove
   il significato sarebbe la risposta. */
.game-opt-t { display: block; font-family: var(--serif); }
.game-opt-g { display: block; margin-top: .3rem; font-family: var(--sans); font-size: .85rem; color: var(--muted); line-height: 1.4; }
.game-clues { display: flex; flex-direction: column; gap: .45rem; margin: .4rem 0; }
/* La resa dell'indizio-citazione: rientrata come il testo dell'indizio, che ha
   la pastiglia della categoria a sinistra. */
.game-clue-g { margin: -.15rem 0 0; padding-inline-start: 4.6rem; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.game-clue { display: flex; gap: .6rem; align-items: baseline; margin: 0; }
.game-clue-k {
  flex: none; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--line); border-radius: 99px;
  padding: .1rem .55rem;
}
.game-cluerow { display: flex; align-items: center; gap: .8rem; margin: .5rem 0 .2rem; }
.game-clue-more {
  padding: .45rem .8rem; border-radius: .5rem; cursor: pointer;
  background: none; border: 1px dashed var(--gold); color: var(--gold); font-size: .88rem;
}
.game-clue-more:disabled { opacity: .4; cursor: default; }
.game-pts { color: var(--muted); font-size: .88rem; }
.game-foot { margin-top: .9rem; }
.game-jester {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; margin: .2rem 0;
}
.game-jester.is-right { color: #4c7a45; }
.game-jester.is-wrong { color: var(--accent); }
.game-note { color: var(--muted); margin: .2rem 0 .6rem; }

/* La scheda didattica: compare dopo ogni risposta, giusta o sbagliata. È la
   parte per cui il gioco esiste, quindi ha lo stacco di una citazione vera. */
.game-lesson {
  margin: .8rem 0 .2rem; padding: .9rem 1.1rem;
  background: color-mix(in srgb, var(--gold) 8%, var(--bg));
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  border-radius: .5rem;
}
.game-lesson-h {
  display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .45rem;
}
.game-lesson-q {
  font-family: var(--serif); font-size: 1.18rem; line-height: 1.45;
  margin: 0 0 .35rem;
}
.game-lesson-g { font-style: italic; color: var(--muted); margin: 0 0 .45rem; line-height: 1.45; }
/* «Ascolta Yorick»: un pulsante piccolo sotto il verso. Dorato se c'è
   l'incisione, neutro se parla la voce di sistema — così si vede la differenza
   senza dirla. */
.yk-ascolta { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; margin: 0 0 .5rem; padding: .25rem .7rem; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: .82rem; cursor: pointer; touch-action: manipulation; }
.yk-ascolta.is-inciso { border-color: var(--gold); color: var(--gold); }
.yk-ascolta-i { font-size: .95rem; line-height: 1; }
.game-lesson-w { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; margin: 0 0 .3rem; }
.game-lesson-src {
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg); margin: 0 0 .5rem;
}
.game-lesson-use { font-size: .92rem; line-height: 1.5; margin: .3rem 0 0; }
.game-lesson-order {
  margin: .2rem 0 .4rem; padding-inline-start: 1.3rem;
  font-size: .92rem; line-height: 1.6; font-variant-numeric: tabular-nums;
}
.game-next, .game-other {
  padding: .55rem 1.1rem; border-radius: .55rem; cursor: pointer; font-weight: 600;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  margin-top: .3rem;
}
.game-other { background: none; color: var(--accent); }
.game-over { text-align: center; }
.game-end-t { font-family: var(--serif); font-size: 1.5rem; margin: .2rem 0 .4rem; }
.game-end-score { font-size: 1.2rem; font-weight: 700; color: var(--accent); margin: 0 0 .4rem; }
.game-endrow { display: flex; gap: .7rem; justify-content: center; margin-top: .8rem; }
.game-loading { text-align: center; color: var(--muted); font-size: 1.4rem; margin: 2rem 0; }

/* Avviso di aggiornamento: compare quando la tab torna in primo piano e sul
   server c'è una versione più nuova. In basso a sinistra per non coprire il
   Cucullato, che presidia l'angolo destro. */
.upd-toast {
  position: fixed; inset-inline-start: 1rem; bottom: 1rem; z-index: 60;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; border-radius: .6rem;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font-size: .92rem;
}
.upd-reload {
  padding: .4rem .8rem; border-radius: .45rem; cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.upd-reload:hover { filter: brightness(1.1); }

/* =====================================================================
   RESPONSIVE E MOVIMENTO RIDOTTO — in fondo di proposito: queste regole
   devono poter sovrascrivere qualunque stile base definito sopra.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  #view-home, .jcard, .exchange, .work, .emotion, .detail-wrap, .authcard,
  #view-ask, #view-canon, #view-emotions, #view-admin, .scene-stage, .scene-ask,
  .cucw-launch, .cucw-panel, .cucw-nudge { animation: none; }
  .canon button, .examples button, .ghost, button[type='submit'], .detail-close,
  .emo-card, .chip, .read-chip, .rc-arrow, .scene-hit, .scene-go { transition: none; }
  .skel span { animation: none; }
}

/* Tablet e telefono: la scena resta illustrazione e la domanda del personaggio
   scende SOTTO, altrimenti il pannello copre l'attore o il pirata. */
@media (max-width: 860px) {
  .scene-canvas { aspect-ratio: 21 / 9; max-height: 34vh; }
  .scene-ask {
    position: static; width: auto; margin-top: .8rem;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--card); border-color: var(--line); box-shadow: var(--shadow-1);
  }
  /* col pannello statico l'altoparlante assoluto scapperebbe sull'angolo
     della scena: qui flotta in alto a destra, dentro il flusso */
  .scene-ask .gd-voice { position: static; float: inline-end; margin-inline-start: .5rem; }
  .scene-q { color: var(--fg); }
  .scene-alt, .scene-none { color: var(--muted); }
  /* I giochi: una colonna, opzioni impilate. */
  .game-menu { grid-template-columns: 1fr; }
  /* Classifica: la barra sotto il nome basta, i numeri restano a destra. */
  .lb-row { grid-template-columns: 1.4rem auto 1fr auto; gap: .45rem; padding: .4rem .3rem; }
  .lb-step-name { font-size: .82rem; }
  .pf-form-col { max-width: none; }
  .game-opts { grid-template-columns: 1fr; }
  .game-opts-tf { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* Scena decorativa: le schede nel canvas sarebbero minuscole e si usa
     l'elenco. Ma il livello RESTA: i medaglioni numerati, la porta segreta, il
     castello e il suo stendardo sono l'unico modo di capire la scena da qui. */
  .journey { aspect-ratio: auto; height: 34vh; }
  .journey .jcard { display: none; }
  .jflag { font-size: .62rem; padding: .22rem .45rem .34rem; }
  .road-list { display: grid; gap: .55rem; margin-top: 1.1rem; }
  /* il Cucullato: figura più piccola e pannello a tutta larghezza */
  .cucw-launch { width: 3.4rem; height: 3.4rem; }
  /* sopra la barra di sistema (i tre tasti di Android, la riga del gesto) */
  .cucw { inset-inline-end: .8rem; bottom: calc(.8rem + var(--sab)); }
  /* durante il benvenuto Jaques si ritira: copriva «Fammi strada». Solo sulla
     schermata del bivio (26/09/2026): il benvenuto resta nel documento anche
     nelle sezioni, e la regola nascondeva Jaques OVUNQUE a chi non l'aveva
     ancora chiuso — «Chiedi a Jaques» dal gioco apriva un pannello invisibile. */
  body:has(#view-home:not([hidden]) .journey.is-welcome) .cucw { display: none; }
  /*
   * APERTO, SUL TELEFONO (25/09/2026, video da un Samsung): il pannello stava
   * sospeso a 4,6rem dal fondo per lasciare posto al ritratto, quindi con la
   * tastiera aperta fra il pannello e i tasti restava una fascia di pagina col
   * ritratto dentro, e il filo alto al più il 40% di un viewport già dimezzato
   * troncava il verso a metà. Ora il ritratto si ritira (il pannello ha la sua
   * ×), il pannello scende fino al bordo, e il filo prende tutta l'altezza che
   * resta fra la testata e la tastiera: `dvh` è il viewport che si vede davvero,
   * quello che si restringe quando sale la tastiera.
   */
  .cucw.is-open .cucw-launch { display: none; }
  /* --cucw-kb e --cucw-vvh li scrive jaques.js dal viewport visibile: servono
     su iOS, dove la tastiera copre la pagina invece di restringerla */
  .cucw-panel {
    position: fixed; inset-inline: .7rem; bottom: calc(.7rem + max(var(--sab), var(--cucw-kb, 0px))); width: auto;
    max-height: calc(100vh - var(--sat) - var(--sab) - 5.6rem);
    /* con la tastiera su, il margine in basso è già sotto i tasti: non si toglie due volte */
    max-height: calc(min(100dvh, var(--cucw-vvh, 100dvh)) - var(--sat) - max(var(--sab) - var(--cucw-kb, 0px), 0px) - 5.6rem);
  }
  .cucw-thread { max-height: none; flex: 1 1 auto; min-height: 0; }
  /* La striscia «nuova versione» (web; per il guscio vedi .ota-striscia) sta a
     tutta larghezza SOPRA il ritratto di Jaques e, mentre il suo pannello è
     aperto, si ritira — il 23/09/2026 copriva la casella «Che cosa vuoi
     sapere?» e il tasto «Chiedi». Ricompare alla chiusura. */
  .upd-toast { inset-inline: .8rem; bottom: calc(5.4rem + var(--sab)); }
  body:has(.cucw.is-open) .upd-toast { display: none; }
  /* nav su una riga che scorre: andando a capo occupava due righe */
  nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  .tab, .backbtn { white-space: nowrap; flex: 0 0 auto; font-size: .68rem; letter-spacing: .06em; margin-inline-end: .7rem; }
  /* tappe più compatte: la colonna dei numeri rubava larghezza al testo */
  .step { grid-template-columns: 1.6rem 1fr; gap: .65rem; }
  .step::before { inset-inline-start: .8rem; top: 1.9rem; }
  .step-n { width: 1.6rem; height: 1.6rem; font-size: .72rem; }
  .step-label { padding-top: .25rem; }
}

@media (max-width: 560px) {
  /* La zona sicura va SOMMATA anche qui, e questa è la regola che conta davvero:
     è quella che vale sui telefoni, cioè dove la tacca esiste. Metterla solo
     sulla regola generale non serviva a niente — visto nel Simulator, dove la
     prima riga del testo finiva dietro la barra. */
  body { padding: calc(1.25rem + var(--sat)) .9rem calc(3rem + var(--sab)); }
  /* UNA RIGA SOLA sul telefono: a due righe la testata prendeva un quarto di un
     iPhone SE (04/09/2026). Via lo slogan e il distintivo admin, che sono
     ornamento; restano marchio, avatar e i tre comandi. */
  .topbar { margin-bottom: 1.25rem; flex-wrap: nowrap; align-items: center; gap: .4rem; padding: .5rem .7rem; }
  .topbar .brandtext::after { display: none; }
  .topbar .controls { padding-top: 0; }
  .topbar #adminbadge { display: none; }
  .topbar .brandtext { font-size: 1.15rem; }
  .topbar .brand { gap: .4rem; }
  .topbar .langbtn { padding-inline: .5rem; }
  .topbar .langbtn .chev { display: none; }
  .brandtext { font-size: 1.3rem; }
  .brandmark { width: 1.9rem; height: 1.9rem; }
  .topbar .controls { gap: .45rem; }
  /* Sull'iPhone SE (375px) marchio + faccia + quattro comandi non ci stanno e la
     testata sbordava a destra, con la bandiera tagliata (14/09/2026, foto di
     Mauro). Il castello è passato nella barra delle sezioni; qui si stringono
     gli spazi, e la scritta «YouWill» resta (Mauro la vuole). */
  .topbar { gap: .3rem; padding-inline: .55rem; }
  .topbar #account { gap: .35rem; }
  .topbar .controls { gap: .3rem; flex: 0 0 auto; }
  .topbar .brand { flex: 0 1 auto; min-width: 0; }
  .topbar .brandtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /*
   * SU MOBILE SPARIVA IL PROFILO, non solo l'email.
   *
   * Qui c'era `display: none` sul pulsante intero, col commento «resta il
   * badge»: ma il badge è quello di admin, e `.who` È L'UNICA PORTA del
   * profilo — nome, foto, mini-scheda, letture rimaste, cancellazione
   * dell'account. Quindi su ogni telefono, sito e app, i propri dati non si
   * potevano né vedere né cambiare. Trovato provando il guscio nel Simulator.
   *
   * Il problema vero era il testo che andava a capo, non la faccia: quindi via
   * il testo e resta l'avatar, che è tondo e si riconosce. Con l'area toccabile
   * portata a 44px — la misura minima che Apple pretende, e sotto la quale un
   * pulsante si manca e si riprova.
   */
  /* `:not(.av)` e non `span`: la faccia È uno span (`.av`), e nasconderli tutti
     lascia un pulsante vuoto di 44 pixel — cioè lo stesso guasto di prima,
     travestito. Via il NOME, resta la faccia. */
  .topbar .who > span:not(.av) { display: none; }
  .topbar .who { min-width: 44px; min-height: 44px; justify-content: center; }
  .langbtn .langname { display: none; }  /* solo bandiera per non affollare */
  .langbtn { padding: .35rem .5rem; }
  .work { padding: 1rem 1.05rem 1.1rem; }
  .work h3 { font-size: 1.1rem; }
  nav { gap: 0; margin-bottom: 1.25rem; }
  .tab { margin-inline-end: .5rem; font-size: .74rem; }
  .subtabs { gap: 1rem; }
  .admin-dash { gap: 1rem; }
  .admin-gauge { flex-basis: 100%; max-width: 220px; margin: 0 auto; }
  .admin-scorecards { flex-basis: 100%; }
  .authcard { max-width: 100%; }
}

/* ===================== Faccia, classifica, profilo ======================= */

.av {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex: none;
  border: 2px solid var(--line); background: var(--card);
  font-family: var(--sans); font-weight: 700; color: #fff; line-height: 1;
}
.av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-company { background: color-mix(in srgb, var(--gold) 22%, var(--card)); border-color: var(--gold); }

/* La classifica: podio per i primi tre, poi le barre. */
.lb { margin-top: 2rem; }
.lb-podium {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
  align-items: end; margin: 1.2rem 0 1.4rem;
}
.lb-step { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.lb-step-name { font-family: var(--serif); font-weight: 700; font-size: .95rem; line-height: 1.2; }
.lb-step-pts { font-size: .8rem; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-riser {
  width: 100%; margin-top: .35rem; border-radius: .4rem .4rem 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 34%, var(--card)), var(--card));
  border: 1px solid var(--line); border-bottom: 0;
  display: flex; align-items: flex-start; justify-content: center; padding-top: .3rem;
}
.lb-step-1 .lb-riser { height: 78px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 55%, var(--card)), var(--card)); }
.lb-step-2 .lb-riser { height: 54px; }
.lb-step-3 .lb-riser { height: 38px; }
.lb-riser-n { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.lb-step.is-me .lb-step-name { color: var(--accent); }

.lb-list { display: flex; flex-direction: column; gap: .3rem; }
.lb-row {
  display: grid; grid-template-columns: 1.6rem auto 1fr auto; gap: .6rem;
  align-items: center; padding: .45rem .6rem; border-radius: .5rem;
  border: 1px solid transparent;
}
.lb-row.is-me { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); border-color: var(--accent); }
.lb-rank {
  font-family: var(--serif); font-size: .95rem; color: var(--muted);
  text-align: end; font-variant-numeric: tabular-nums;
}
.lb-mid { min-width: 0; }
.lb-nameline { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.lb-name { font-size: .95rem; }
.lb-you {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent); border-radius: 99px; padding: .05rem .4rem;
}
.lb-track {
  display: block; height: 6px; margin-top: .28rem; border-radius: 99px;
  background: color-mix(in srgb, var(--line) 55%, transparent); overflow: hidden;
}
.lb-fill { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
.lb-row.is-me .lb-fill { background: var(--accent); }
.lb-num { text-align: end; }
.lb-pts { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-best { display: block; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-nudge { margin-top: .8rem; font-size: .88rem; color: var(--muted); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* Il profilo. */
.who { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
.who:hover { color: var(--accent); }
.pf-head { display: flex; align-items: center; gap: 1.1rem; margin: 1.2rem 0 1.6rem; flex-wrap: wrap; }
.pf-name { font-family: var(--serif); font-size: 1.5rem; margin: 0; }
.pf-mail { color: var(--muted); font-size: .9rem; margin: .1rem 0 0; }
.pf-panel {
  padding: 1.1rem 1.2rem; border-radius: .7rem; margin-bottom: 1rem;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.pf-h { font-family: var(--serif); font-size: 1.12rem; margin: 0 0 .3rem; }
.pf-note { color: var(--muted); font-size: .88rem; line-height: 1.5; margin: 0 0 .8rem; }
.pf-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pf-form-col { flex-direction: column; align-items: stretch; max-width: 22rem; }
/* In colonna il flex-grow degli input agisce sull'ALTEZZA e li allunga in
   caselle enormi: qui devono restare della loro altezza naturale. */
.pf-form-col .pf-input { flex: none; }
.pf-form-col .game-next { align-self: flex-start; }
.pf-input {
  padding: .6rem .8rem; border-radius: .5rem; min-width: 12rem; flex: 1 1 12rem;
  background: var(--bg); border: 1px solid var(--line); color: var(--fg); font: inherit;
}
.pf-file { display: none; }
.pf-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.pf-msgbox:not(:empty) { margin-top: .6rem; }
.pf-msg { font-size: .88rem; }
.pf-msg.is-ok { color: #4c7a45; }
.pf-msg.is-err { color: var(--accent); }
.pf-danger { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pf-kill {
  padding: .6rem 1.1rem; border-radius: .5rem; cursor: pointer; font-weight: 600;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.pf-kill:hover { filter: brightness(1.08); }

/* ================== La casetta: citazioni preferite ====================== */

/* Il pulsante-stella accanto a ogni verso incontrato nell'app. */
.fav-btn {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  margin-top: .5rem; padding: .25rem .65rem; border-radius: 99px;
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-size: .78rem; letter-spacing: .03em;
}
.fav-btn:hover { border-color: var(--gold); color: var(--gold); }
.fav-btn.is-on { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.fav-btn:disabled { opacity: .6; cursor: default; }
/* Nelle citazioni della scheda opera il pulsante va a capo, sotto la glossa. */
.quote-list blockquote .fav-btn { display: inline-flex; }
.quote-who {
  display: block; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold); margin-top: .3rem;
}

.fav-count { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: .2rem 0 1rem; }
.fav-list { display: flex; flex-direction: column; gap: 1rem; }
.fav-card {
  padding: 1.1rem 1.2rem; border-radius: .7rem;
  background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  box-shadow: var(--shadow-1);
}
.fav-verse { font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; margin: 0; }
.fav-lang {
  display: inline-block; margin-top: .35rem; font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 99px; padding: .05rem .5rem;
}
.fav-gloss { font-style: italic; color: var(--muted); line-height: 1.5; margin: .5rem 0 .4rem; }
.fav-src {
  font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg); margin: .4rem 0 0;
}
.fav-use { font-size: .92rem; line-height: 1.5; margin: .5rem 0 0; }
.fav-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.fav-when { font-size: .74rem; color: var(--muted); margin-inline-end: auto; }
.fav-remove {
  font-size: .78rem; padding: .2rem .6rem; border-radius: 99px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--muted);
}
.fav-remove:hover { border-color: var(--accent); color: var(--accent); }

/* Il contesto di scena: dove e quando quel verso viene detto. Sta fra la fonte
   e la nota d'uso, in tono più quieto: è racconto, non interpretazione. */
.game-lesson-ctx, .fav-ctx {
  font-size: .9rem; line-height: 1.55; margin: .5rem 0 0;
  padding-inline-start: .7rem; border-inline-start: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
.game-lesson-ctxh, .fav-ctxh {
  display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .15rem;
}
.quote-ctx {
  display: block; font-size: .88rem; line-height: 1.5; color: var(--fg);
  margin-top: .4rem; padding-inline-start: .7rem;
  border-inline-start: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

/* Lo stendardo del castello di Elsinore: un drappo appeso nel cielo sopra le
   torri. La punta è spostata a sinistra e indica il castello sotto di sé.
   Piccolo, ma il testo resta nitido. */
.jflag {
  position: absolute; pointer-events: auto; cursor: pointer;
  padding: .3rem .6rem .42rem; border: 0;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--serif); font-size: .74rem; letter-spacing: .04em; line-height: 1.1;
  white-space: nowrap;
  /* la coda: la punta cade verso il castello, che sta in basso a sinistra */
  clip-path: polygon(0 0, 100% 0, 100% 74%, 20% 100%, 0 74%);
  box-shadow: 0 2px 6px rgba(30, 20, 6, .35);
}
.jflag:hover, .jflag:focus-visible { background: color-mix(in srgb, var(--gold) 35%, var(--accent)); }
.jflag:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Il medaglione in cima al sentiero: numero uguale a quello della scheda
   nell'elenco. Su schermi larghi non serve — lì ci sono le schede — quindi
   compare solo dove le schede si nascondono. */
.jmark {
  position: absolute; transform: translate(-50%, -50%);
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  pointer-events: auto; cursor: pointer;
  background: var(--card); color: var(--accent);
  border: 2px solid var(--gold);
  font-family: var(--serif); font-size: .92rem; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(30, 20, 6, .4);
}
.jmark:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Il numero sulla scheda: lo stesso del medaglione sul sentiero. */
.rc-n {
  flex: none; display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 20%, var(--card));
  border: 1px solid var(--gold); color: var(--accent);
  font-family: var(--serif); font-size: .82rem; font-weight: 700;
}
@media (max-width: 640px) {
  /* Questo blocco sta in FONDO al foglio di proposito: le regole base di
     .jmark e .rc-n sono qui sopra, e una media query che le precede non
     riuscirebbe a sovrascriverle (stessa specificità, vince l'ultima). */
  .jmark { display: inline-flex; }
  .rc-n { display: inline-flex; }
  /* Su schermi bassi il ritaglio "cover" porta il castello (che sta a sinistra,
     sul crinale) fuori dal riquadro: restava visibile solo la coda del suo
     stendardo, che sembrava un errore. Qui si nascondono entrambi — il castello
     resta raggiungibile dalla sua voce nell'elenco, che ne porta il nome. */
  .jflag, .jhouse { display: none; }
  /* la scheda diventa una riga: numero a sinistra, testo a destra */
  .road-card { display: grid; grid-template-columns: 26px 1fr; gap: .1rem .6rem; align-items: center; }
  .road-card .rc-n { grid-row: span 2; }
  /*
   * LE SCHEDE SENZA NUMERO HANNO UNA COLONNA SOLA. La griglia qui sopra dà per
   * scontato il medaglione: il castello e l'admin non ce l'hanno (non partono
   * dal centro della radura), quindi il loro TITOLO finiva nella colonna da
   * 26px — «Il / castello / di / Elsinore», una parola per riga, con la
   * descrizione accanto. Il numero c'è o non c'è: la griglia deve saperlo.
   */
  .road-card:not(:has(.rc-n)) { grid-template-columns: 1fr; gap: .1rem; }
}

/* --- IL BIVIO A TUTTA PAGINA ------------------------------------------------
   Su schermi larghi la scena d'ingresso prende tutto lo spazio che c'è sotto
   l'header: esce dal guscio centrato (full-bleed) ed è alta quanto la finestra
   meno l'header, la cui altezza VERA arriva da app.js in --hero-top (cambia con
   la lingua, col tema e a ogni larghezza: misurarla è l'unico modo di non
   sbagliarla). Titolo e sottotitolo stanno in soprimpressione in alto, dove il
   cielo è vuoto.

   Su telefono NO: lì la scena a tutta altezza spingerebbe l'elenco dei sentieri
   fuori dallo schermo, e su telefono l'elenco È la navigazione. */
.hero { position: relative; }
/* Su schermi stretti la soprimpressione non c'è (la scena è bassa e decorativa):
   titolo e sottotitolo tornano SOPRA la scena, dove si leggono per primi. Nel
   DOM stanno dopo il canvas perché su desktop devono vincere senza z-index, e
   qui si rimettono in ordine con `order`, non spostando il markup. */
@media (max-width: 640px) {
  .hero { display: flex; flex-direction: column; }
  .hero .journey-head { order: -1; margin-bottom: .9rem; }
}

@media (min-width: 641px) {
  /* la scena attacca subito sotto l'header, non a due righe di distanza */
  body:has(#view-home:not([hidden])) .topbar { margin-bottom: .7rem; }

  .hero {
    width: 100vw;
    /* simmetrici di proposito: vuol dire "esci dal guscio da entrambi i lati",
       non è un lato di composizione — quindi fisici. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .hero .journey {
    aspect-ratio: auto;
    height: calc(100dvh - var(--hero-top, 7rem) - .7rem);
    /* Il tetto non è decorativo. La scena è disegnata 16/9 e il canvas la
       adatta in "cover": se il riquadro diventa più ALTO di 16/9 il ritaglio
       passa dai bordi sopra e sotto (dove non c'è nulla) ai FIANCHI, dove a
       sinistra c'è il castello di Elsinore. A 1/1.68 il ritaglio laterale resta
       sotto le 45 unità di scena e il castello sopravvive; su un 4:3 in
       orizzontale, senza tetto, sparirebbe. Sotto il riquadro si vede la
       pagina, ed è giusto così: c'è l'elenco dei sentieri. */
    max-height: calc(100vw / 1.68);
    border-radius: 0;
    border-inline-start: 0;
    border-inline-end: 0;
  }
  .hero .journey-head {
    position: absolute;
    inset: 1rem 1.25rem auto;
    z-index: 5;
    margin: 0;
    pointer-events: none;
  }
  /* Il testo sta sul cielo dipinto, non sulla carta: l'ombra è quello che lo
     tiene leggibile sia all'alba (cielo chiaro) sia di notte (cielo scuro). */
  .hero .journey-head h1 {
    margin: 0 0 .15rem;
    text-shadow: 0 1px 2px rgba(255, 251, 240, .6), 0 0 18px rgba(255, 251, 240, .45);
  }
  .hero .journey-head .sub {
    margin: 0 auto;
    text-shadow: 0 1px 2px rgba(255, 251, 240, .55);
  }
  :root[data-theme='dark'] .hero .journey-head h1,
  :root[data-theme='dark'] .hero .journey-head .sub {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 0 20px rgba(0, 0, 0, .5);
  }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body.scena-piena .hero .journey-head h1,
  :root:not([data-theme='light']) body.scena-piena .hero .journey-head .sub { text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 20px rgba(0,0,0,.5); }
}
@media (min-width: 641px) and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hero .journey-head h1,
  :root:not([data-theme='light']) .hero .journey-head .sub {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 0 20px rgba(0, 0, 0, .5);
  }
}

/* --- LA CARTA DELLE EMOZIONI ------------------------------------------------
   Un foglio di carta con la cornice graduata: la cornice non è decorazione, è
   quello che fa leggere il disegno come una CARTA e non come un grafico. Sta
   sopra la griglia perché è l'altro modo di cercare un'emozione — per posizione
   invece che per nome. */
.emap {
  margin: .2rem 0 1.4rem;
  padding: .9rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-1);
  animation: rise-in .5s ease-out both;
}
.emap-head { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin: 0 0 .35rem; }
.emap-h { margin: 0; font-size: 1.05rem; font-family: var(--serif); flex: 1 1 auto; }
.emap-h-win { font-weight: 400; color: var(--muted); font-size: .92rem; }
.emap-modes { margin: 0; }
.emap-note { margin: 0 0 .6rem; font: .78rem/1.5 var(--sans); color: var(--muted); max-width: var(--reading); }
.emap-stage { position: relative; }
.emap-svg { display: block; width: 100%; height: auto; }

/* Il riquadro al passaggio del mouse: sta in HTML sopra la carta, così il testo
   non si rimpicciolisce con il disegno. La posizione la mette emomap.js in
   percentuale delle coordinate della scena. */
.emap-tip {
  position: absolute; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; gap: .05rem;
  padding: .3rem .55rem .35rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45);
  font: .78rem/1.35 var(--sans);
  white-space: nowrap;
}
.emap-tip strong { font-family: var(--serif); font-size: .92rem; font-weight: 700; }
.emap-tip span { color: var(--muted); font-size: .72rem; }
.emap-tip .emap-tip-n { color: var(--accent); }

/* la finestra di tempo: un default e la possibilità di allargarla */
.emap-win { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.emap-win-b {
  font: .74rem var(--sans); padding: .26rem .55rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.emap-win-b:hover { border-color: var(--gold); color: var(--fg); }
.emap-win-b.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); color: var(--fg); }

/* i nomi scritti sulla carta */
.emap-label { font: 10.5px var(--sans); fill: var(--fg); opacity: .78; pointer-events: none; }
.emap-quad { font: 700 15px var(--serif); letter-spacing: .12em; text-transform: uppercase; }
.emap-axis { font: 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); }
.emap-dot { cursor: pointer; transition: stroke-width .12s ease; }
.emap-dot:hover, .emap-dot:focus-visible { stroke-width: 2.4; outline: none; }
.emap-dot.is-faded { opacity: .12; pointer-events: none; }

/* la riga sotto la carta: dice cosa hai toccato e apre la scheda */
.emap-pick {
  display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap;
  margin: .7rem 0 0; padding: .55rem .75rem;
  border-radius: 12px; border: 1px solid var(--line);
  border-inline-start: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  font: .86rem/1.5 var(--sans); min-height: 2.6rem;
}
.emap-pick strong { font-family: var(--serif); font-size: 1rem; }
.emap-pick-q { color: var(--muted); }
.emap-empty { margin: .7rem 0 0; font: .82rem/1.5 var(--sans); font-style: italic; color: var(--muted); }
.emap-legend { display: flex; gap: .45rem .9rem; flex-wrap: wrap; margin: .7rem 0 0; font: .74rem var(--sans); }
.emap-legend span { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); }
.emap-legend i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }

/* Le animazioni della carta: il MONDO si muove, i DATI stanno fermi. Le onde
   scorrono (le durate e le ampiezze le mette emomap.js riga per riga: svelte in
   burrasca, placide in bonaccia), il veliero beccheggia, il serpente s'immerge,
   i luccichii respirano. L'ingresso dei punti è un keyframe SOLO "from": alla
   fine ogni elemento torna al proprio stile naturale, così un punto sbiadito
   resta sbiadito e un'etichetta resta alla sua opacità. */
@keyframes emap-drift { from { transform: translateX(calc(var(--amp, 8px) * -1)); } to { transform: translateX(var(--amp, 8px)); } }
.emap-wave { animation: emap-drift var(--dur, 7s) ease-in-out infinite alternate; }
@keyframes emap-bob {
  0%, 100% { transform: translateY(0) rotate(-2.4deg); }
  50% { transform: translateY(4.5px) rotate(2.6deg); }
}
.emap-ship { transform-box: fill-box; transform-origin: center; animation: emap-bob 5.5s ease-in-out infinite; }
@keyframes emap-serp {
  0%, 55% { transform: translateY(0); opacity: 1; }
  63%, 80% { transform: translateY(12px); opacity: 0; }
  88%, 100% { transform: translateY(0); opacity: 1; }
}
.emap-serp { animation: emap-serp 17s ease-in-out infinite; }
@keyframes emap-glint { 0%, 100% { opacity: 0; } 50% { opacity: .35; } }
.emap-glint { opacity: 0; animation: emap-glint var(--dur, 6s) ease-in-out infinite; }
@keyframes emap-pop { from { opacity: 0; transform: scale(.2); } }
.emap-pt { transform-box: fill-box; transform-origin: center; animation: emap-pop .5s ease-out backwards; }

/* il cartiglio e il motto del portolano */
.emap-cart-t { font-family: var(--serif); font-size: 16px; font-weight: 700; }
.emap-cart-s { font-family: var(--sans); font-size: 8.5px; letter-spacing: .24em; opacity: .7; }
.emap-motto { font-family: var(--serif); font-style: italic; font-size: 10px; fill: var(--fg); opacity: .5; }

/* chi chiede meno movimento ha la carta ferma, tutta insieme */
@media (prefers-reduced-motion: reduce) {
  .emap-wave, .emap-ship, .emap-serp, .emap-glint, .emap-pt { animation: none; }
}

/* --- il dialogo di Prospero --------------------------------------------------
   L'area di racconto (una textarea, non una riga: l'invito è raccontare), la
   domanda che lui fa, la lettura con cui rispecchia, il messaggio di crisi. */
.scene-input-multi {
  height: auto; min-height: 4.4rem; resize: none;
  line-height: 1.45; padding: .55rem .75rem;
  font: inherit;
}
.scene-form:has(.scene-input-multi) { align-items: stretch; flex-direction: column; }
.scene-form:has(.scene-input-multi) .scene-go { align-self: flex-end; }
/* Il filo della conversazione: bolle come in una chat, ma con la carta e
   l'inchiostro dell'app — le sue a sinistra su carta, le tue a destra col
   colore dell'app. Cresce fino a un tetto e poi scorre. */
.scene-thread {
  display: flex; flex-direction: column; gap: .45rem;
  margin: .55rem 0 .15rem; padding-inline-end: .25rem;
  /* il tetto tiene il pannello dentro la scena anche a filo pieno:
     oltre, si scorre dentro il filo */
  max-height: min(10.5rem, 26vh); overflow-y: auto;
}
.scene-msg {
  max-width: 88%; padding: .45rem .65rem;
  border-radius: 12px; font-size: .92rem; line-height: 1.5;
}
.scene-msg.is-me {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-bottom-right-radius: 4px;
}
.scene-msg.is-p {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.scene-msg.is-wait { color: var(--muted); letter-spacing: .2em; }
.scene-msg-q { font-family: var(--serif); font-style: italic; }
.scene-msg-q::before { content: '« '; }
.scene-msg-q::after { content: ' »'; }
.scene-msg-read { margin: 0 0 .1rem; font: italic .92rem/1.55 var(--serif); }
.scene-msg-hits { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.scene-msg-acts { display: flex; gap: .9rem; margin-top: .5rem; }
.scene-msg-act {
  background: none; border: none; box-shadow: none; padding: 0;
  font: .78rem var(--sans); color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.scene-msg-act:hover { color: var(--fg); background: none; transform: none; box-shadow: none; }
.scene-reading {
  margin: .6rem 0 0; font-size: .88rem; line-height: 1.55;
  padding-inline-start: .65rem;
  border-inline-start: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  color: var(--scene-card-fg);
}
.scene-crisis {
  margin: .6rem 0 0; font-size: .88rem; line-height: 1.6;
  padding: .55rem .7rem; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* --- IL QUADERNO DEL DIARIO ----------------------------------------------------
   Il diario di Rosalind è un quaderno vero: due pagine aperte, la scrittura
   SULLE righe (l'interlinea del testo e il passo delle righe sono lo stesso
   numero), la cucitura, il bordo delle pagine già scritte che spunta sotto.
   I colori della carta derivano dai token dell'app con color-mix: così il
   quaderno segue da solo il giorno e la notte, senza blocchi di tema suoi. */
.dbook-wrap {
  --dpaper: color-mix(in srgb, var(--gold) 7%, var(--card));
  --dpaper-shade: color-mix(in srgb, var(--fg) 6%, var(--dpaper));
  --dpaper-spine: color-mix(in srgb, var(--fg) 13%, var(--dpaper));
  --dline: color-mix(in srgb, var(--fg) 13%, transparent);
  max-width: 62rem; margin: 0 auto; perspective: 1600px;
}
.dbook {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 30rem;
  background:
    linear-gradient(90deg, var(--dpaper-shade) 0%, var(--dpaper) 8%, var(--dpaper) 46%, var(--dpaper-spine) 50%, var(--dpaper) 54%, var(--dpaper) 92%, var(--dpaper-shade) 100%);
  border: 1px solid var(--line);
  border-radius: 8px 14px 14px 8px;
  box-shadow:
    0 18px 40px -18px rgba(20, 12, 4, .5),
    2px 2px 0 -1px var(--dpaper-shade), 4px 4px 0 -2px var(--dpaper-spine),
    -2px 2px 0 -1px var(--dpaper-shade), -4px 4px 0 -2px var(--dpaper-spine);
}
.dspine {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent);
  transform: translateX(-50%);
}
.dspine::before, .dspine::after {
  content: ''; position: absolute; left: -3px; width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 60%, transparent);
}
.dspine::before { top: 14%; }
.dspine::after { bottom: 14%; }

.dpage {
  position: relative;
  padding: 1.6rem 2rem 2.4rem;
  min-width: 0;
  display: flex; flex-direction: column;
  color: var(--fg);
}
.dpage-left { padding-inline-end: 2.4rem; }
.dpage-right { padding-inline-start: 2.4rem; }
.dpage-head {
  display: flex; align-items: baseline; gap: .7rem;
  font: .72rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.dpage-head .dp-sp { flex: 1 1 auto; }
.dpage-act {
  font: .72rem var(--sans); letter-spacing: 0; text-transform: none;
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 0; text-decoration: underline; text-underline-offset: 2px; box-shadow: none;
}
.dpage-act:hover { color: var(--accent); background: none; transform: none; box-shadow: none; }
.dpage-body {
  flex: 1 1 auto;
  font: 1.02rem/1.9rem var(--serif);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.9rem - 1px), var(--dline) calc(1.9rem - 1px), var(--dline) 1.9rem);
  background-origin: content-box;
  min-height: 13.3rem;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.dpage-title { font-weight: 700; }
.dpage-n {
  position: absolute; bottom: .7rem; left: 0; right: 0;
  text-align: center; font: .7rem var(--serif); font-style: italic; color: var(--muted);
  pointer-events: none;
}

/* la lettura di Rosalind, appuntata sulla pagina a fronte: la scheda che già
   esiste, spogliata della sua scatola — sulla carta non servono cornici */
.dpage .d-reading { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
.dpage .d-reading-wait { font: italic .92rem/1.6 var(--serif); color: var(--muted); }

/* la pagina bianca: si scrive DENTRO il quaderno, sulle righe */
.dwrite {
  flex: 1 1 auto; width: 100%;
  border: none; outline: none; resize: none;
  box-shadow: none; border-radius: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.9rem - 1px), var(--dline) calc(1.9rem - 1px), var(--dline) 1.9rem);
  font: 1.02rem/1.9rem var(--serif); color: var(--fg);
  padding: 0;
}
.dwrite:focus, .dwrite:focus-visible { box-shadow: none; outline: none; }
.dwrite::placeholder { color: var(--muted); font-style: italic; }
.dwrite-title {
  width: 100%; border: none; outline: none; box-shadow: none; border-radius: 0;
  background: transparent; padding: 0; margin: 0 0 .2rem;
  font: 700 1.05rem/1.9rem var(--serif); color: var(--fg);
}
.dwrite-title::placeholder { color: var(--muted); font-weight: 400; font-style: italic; }
.dwrite-row { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; }
.dwrite-row .d-count { margin-inline-start: auto; font: .72rem var(--sans); color: var(--muted); }
.dwrite-save {
  font: .84rem var(--sans); padding: .4rem .9rem; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer;
}
.dwrite-cancel {
  font: .8rem var(--sans); background: none; border: none; box-shadow: none;
  color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0;
}

/* gli angoli piegati (restano; le frecce sotto sono la via principale) */
.dflip {
  position: absolute; bottom: 0; width: 3.2rem; height: 3.2rem;
  border: none; background: transparent; cursor: pointer; z-index: 4; box-shadow: none;
}
.dflip::before { content: ''; position: absolute; bottom: 0; width: 0; height: 0; transition: border-width .18s ease; }
.dflip-prev { left: 0; }
.dflip-prev::before { left: 0; border-bottom: 1.6rem solid var(--dpaper-spine); border-right: 1.6rem solid transparent; }
.dflip-next { right: 0; }
.dflip-next::before { right: 0; border-bottom: 1.6rem solid var(--dpaper-spine); border-left: 1.6rem solid transparent; }
.dflip:hover::before { border-bottom-width: 2.3rem; }
.dflip:disabled { display: none; }
.dflip:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

/* LE FRECCE VISIBILI: la navigazione che si vede e si clicca, sotto il
   quaderno, con la posizione in mezzo. Gli angoli sono il gesto, queste sono
   il comando. */
.dbook-nav { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: .8rem 0 0; }
.dbook-arrow {
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  font: 1.25rem/1 var(--serif); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1);
}
.dbook-arrow:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.dbook-arrow:disabled { opacity: .3; cursor: default; }
.dbook-pos { min-width: 13rem; text-align: center; font: .78rem var(--sans); color: var(--muted); }
/* L'invito a sfogliare, sulla pagina bianca con voci alle spalle: una nota,
   non un contenuto — e in oro, perché è un invito e non un avvertimento. */
.dbook-indietro { text-align: center; margin: .7rem auto 0; max-width: 46rem; font: .88rem/1.6 var(--sans); color: var(--gold); }
.dbook-priv { text-align: center; margin: .9rem auto 0; max-width: 46rem; font: italic .76rem/1.6 var(--serif); color: var(--muted); }

/* la pagina che gira: un foglio rigato senza contenuto che ruota sulla
   cucitura; a metà giro il contenuto sotto cambia */
.dleaf {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 6;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.9rem - 1px), var(--dline) calc(1.9rem - 1px), var(--dline) 1.9rem) content-box,
    linear-gradient(90deg, var(--dpaper) 0%, var(--dpaper-shade) 100%);
  padding: 3.4rem 2rem 2.4rem;
  border: 1px solid var(--line);
  pointer-events: none;
}
.dleaf.from-right { right: 0; transform-origin: left center; animation: dleaf-r .55s ease-in both; }
.dleaf.from-left { left: 0; transform-origin: right center; animation: dleaf-l .55s ease-in both; }
@keyframes dleaf-r { from { transform: rotateY(0); opacity: 1; } to { transform: rotateY(-140deg); opacity: 0; } }
@keyframes dleaf-l { from { transform: rotateY(0); opacity: 1; } to { transform: rotateY(140deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dleaf { animation: none !important; display: none; }
}

/* --- LA FINESTRA DI CONFERMA -----------------------------------------------
   Al posto del confirm() del browser: stessa carta, stesso inchiostro, stessi
   bottoni dell'app. Il rosso dell'azione distruttiva è l'accent, che qui È il
   colore del pericolo. */
.dlg {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); color: var(--fg);
  box-shadow: var(--shadow-2);
  /* mai più largo dello schermo meno un margine: a 320px toccava i bordi (26/09/2026) */
  padding: 1.15rem 1.25rem; max-width: min(26rem, calc(100vw - 1.5rem));
  /* i dialoghi possono contenere più del previsto — il muro di Shylock ora ha
     dentro la vetrina dei pacchetti — e su uno schermo basso il contenuto va
     SCORSO, non tagliato: senza questo il pulsante di chiusura finiva fuori */
  max-height: calc(100dvh - 2.5rem); overflow-y: auto;
  animation: rise-in .25s ease-out both;
}
.dlg::backdrop { background: rgba(22, 15, 7, .45); backdrop-filter: blur(3px); }
.dlg-msg { margin: 0 0 1.05rem; font: 1rem/1.6 var(--serif); }
.dlg-row { display: flex; justify-content: flex-end; gap: .6rem; }
.dlg-btn { font: .88rem var(--sans); padding: .45rem .95rem; border-radius: 10px; cursor: pointer; }
.dlg-cancel { background: transparent; border: 1px solid var(--line); color: var(--fg); }
.dlg-cancel:hover { border-color: var(--gold); }
.dlg-ok { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); }
.dlg-ok:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .dlg { animation: none; } }

/* La domanda di Amleto nell'exchange: il dubbio era generico e lui chiede,
   invece di tirare a indovinare. Occhiello in oro, domanda in corsivo serif. */
.turn-question {
  margin: .6rem 0; padding: .75rem .95rem;
  border: 1px solid var(--line); border-radius: 14px;
  border-inline-start: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, var(--card));
  animation: rise-in .4s ease-out both;
}
.tq-h { display: block; margin: 0 0 .25rem; font: .66rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tq-p { margin: 0; font: italic 1.02rem/1.55 var(--serif); }

/* --- LE SALE DEL CASTELLO ------------------------------------------------------
   Le tracce riorganizzate per personaggio: una sala ciascuno, con l'emblema a
   linea, il conto di ciò che gli hai portato, e il sentiero per andarci. Una
   sala vuota INVITA, non mostra zeri. */
.ct-win { margin: 0 0 1rem; }
.ct-route { margin: 0 0 1.3rem; }
.ct-rooms {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .9rem; align-items: start;
}
.ct-room {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); box-shadow: var(--shadow-1);
  padding: .85rem .95rem;
  animation: rise-in .45s ease-out both;
}
.ct-room-h {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: none; box-shadow: none; padding: 0; margin: 0 0 .55rem;
  text-align: start; cursor: pointer; color: inherit; font: inherit;
}
.ct-room-h:hover { background: none; transform: none; box-shadow: none; }
.ct-room-h:hover .ct-room-go { transform: translateX(3px); color: var(--accent); }
.ct-room-h:hover .ct-ico { color: var(--accent); }
.ct-ico { width: 26px; height: 26px; flex: none; color: var(--gold); transition: color .15s; }
.ct-room-names { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ct-room-names strong { font: 700 1.02rem var(--serif); }
.ct-room-names span { font: .72rem var(--sans); color: var(--muted); }
.ct-room-n { font: 700 1.25rem var(--serif); color: var(--accent); }
.ct-room-go { font-size: 1.05rem; color: var(--muted); transition: transform .15s, color .15s; }
.ct-empty { margin: .1rem 0 0; font: italic .88rem/1.5 var(--serif); color: var(--muted); }
.ct-inner-h { display: block; margin: .2rem 0 .4rem; font: .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ct-note { margin: 0; font: .84rem var(--sans); color: var(--muted); }
/* il ritmo pieno può essere lungo (90 giorni, o da sempre): scorre da solo */
.tr-chart { overflow-x: auto; }

/* --- LA SOGLIA E LA GUIDA -------------------------------------------------------
   Finché Ariel aspetta una risposta i cartelli della foresta tacciono; quando
   la soglia si chiude, si accendono in dissolvenza. La tela della guida vive
   nel riquadro sporgente come gli altri strati; il cartiglio è una scheda di
   vetro come le jcard. */
.journey .jlabels { transition: opacity .8s ease; }
.journey.is-welcome .jlabels { opacity: 0; pointer-events: none; }
.gd-canvas {
  position: absolute; left: -3%; top: -3%; width: 106%; height: 106%;
  pointer-events: none; z-index: 5;
}
.gd-card {
  position: absolute; z-index: 6; max-width: 360px;
  background: var(--scene-card-bg);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--scene-card-line); border-radius: 16px;
  box-shadow: 0 12px 30px var(--scene-card-shadow);
  padding: .9rem 1.1rem .85rem;
  animation: rise-in .35s ease-out both;
}
.gd-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .45rem; }
.gd-eyebrow { display: block; flex: 1 1 auto; font: .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.gd-voice {
  background: none; border: none; box-shadow: none; padding: .15rem; margin: 0;
  color: var(--scene-card-muted); cursor: pointer; line-height: 0; border-radius: 8px;
}
.gd-voice:hover { color: var(--gold); background: none; transform: none; box-shadow: none; }
.gd-voice.is-off { opacity: .55; }
.gd-voice:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.gd-verse { margin: 0 0 .15rem; font: italic 1.12rem/1.5 var(--serif); color: var(--scene-card-fg); unicode-bidi: plaintext; }
/* LA RESA IN PROSA DEL VERSO. Tonda e non corsiva: il corsivo è del verso, e
   due righe corsive di fila si leggono come una sola citazione lunga. Colore
   smorzato e corpo minore perché è un appoggio, non la battuta. */
.gd-gloss { margin: 0 0 .3rem; font: .92rem/1.5 var(--sans); color: var(--scene-card-muted); }
/* Il filetto d'oro fra la fonte e la battuta del personaggio: lo stesso segno
   del programma di sala nella scheda del verso, così le carte si parlano. */
.gd-src { display: block; font: .68rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--scene-card-muted); margin: 0 0 .7rem; padding-bottom: .45rem; background: linear-gradient(var(--gold), var(--gold)) left bottom / 36px 1px no-repeat; }
.gd-text { margin: 0 0 .75rem; font: .98rem/1.6 var(--sans); color: var(--scene-card-fg); }
.gd-btns { display: flex; gap: .55rem; justify-content: flex-end; }
.gd-btn { font: .92rem var(--sans); padding: .45rem .95rem; border-radius: 11px; cursor: pointer; }
.gd-main { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); }
.gd-main:hover { filter: brightness(1.08); }
.gd-quiet { background: transparent; border: 1px solid var(--scene-card-line); color: var(--scene-card-fg); }
.gd-quiet:hover { border-color: var(--gold); }
/*
 * IL TELEFONO HA UN'ALTRA COMPOSIZIONE.
 *
 * Su 375 punti la scena 16/9 diventa una striscia da 276px: la figura scendeva
 * a un terzo, la scheda copriva Ariel e il bottone finiva fuori schermo. Qui la
 * scena si ALZA mentre la guida recita (torna compatta quando finisce, così
 * l'elenco dei sentieri resta a portata) e la scheda diventa un foglio a tutta
 * larghezza in basso: il testo passa da 214 a ~330px di misura.
 */
@media (max-width: 640px) {
  .journey { transition: height .45s ease; }
  .journey.is-welcome { height: 58vh; }

  /* Ancorata con left/right, MAI con transform: l'animazione d'ingresso finisce
     con `transform: none` e cancellerebbe il centramento (vedi placeCard). */
  .gd-card {
    left: .5rem; right: .5rem; top: auto; bottom: .5rem;
    max-width: none; padding: .85rem .95rem .8rem;
  }
  .gd-verse { font-size: 1.06rem; line-height: 1.45; }
  .gd-text { font-size: 1rem; }
  .gd-btn { font-size: .95rem; padding: .5rem 1.05rem; }
  .gd-btns { gap: .5rem; }

  /* Sul telefono l'ELENCO è la mappa: il sentiero di cui Orlando sta parlando
     si accende, perché la sua figura non può più camminare fino al punto. */
  .road-card.is-told, .road-door.is-told {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 32%, transparent);
  }
}

/* Il verso tipico in testa a ogni pannello di scena: l'originale inglese,
   in corsivo, prima della mano tesa. L'altoparlante sta nell'angolo. */
.scene-verse {
  margin: .1rem 0 .45rem; font: italic 1.06rem/1.5 var(--serif);
  color: var(--scene-card-fg);
  /* il verso è inglese anche in arabo: senza plaintext le virgolette e il «!»
     finivano dalla parte sbagliata («”!All hail… hail“», 26/09/2026) */
  unicode-bidi: plaintext;
}
.scene-gloss { margin: -.25rem 0 .5rem; font: .9rem/1.5 var(--sans); color: var(--scene-card-muted); }
.scene-ask .gd-voice { position: absolute; top: .55rem; inset-inline-end: .6rem; }

/* --- LINGUE CON ALTRE REGOLE TIPOGRAFICHE -----------------------------------
   Tre cose che valgono per l'arabo e per il cinese e che il resto del foglio,
   pensato per il latino, sbaglia.

   1. ARABO: la scrittura è CORSIVA, le lettere si legano. Una letter-spacing —
      che qui è usata in sessanta punti per le etichette in maiuscoletto — spezza
      le legature e il risultato non è "spaziato": è illeggibile, come se ogni
      lettera fosse una parola. Va azzerata, e siccome deve vincere su regole
      sparse in tutto il foglio, è l'unico posto in cui !important è la scelta
      giusta e non una pezza.
   2. ARABO: non esiste il corsivo. Un font senza corsivo viene inclinato dal
      browser (obliquo sintetico) e sembra un difetto di stampa. Restano in
      corsivo i VERSI di Shakespeare, che sono in inglese e portano lang="en".
   3. ARABO e CINESE: righe più alte. Le lettere arabe hanno discendenti lunghi,
      gli ideogrammi sono quadrati e pieni: con l'interlinea del latino il testo
      si impasta. */
:root[lang='ar'] * { letter-spacing: normal !important; }
:root[lang='ar'] *:not([lang='en']) { font-style: normal; }
:root[lang='ar'] body { line-height: 1.85; }
:root[lang^='zh'] body { line-height: 1.8; }

/* Il Sankey è un DISEGNO con coordinate proprie: i passi vanno da sinistra a
   destra perché così è costruito il grafo, non perché così si legge l'italiano.
   Ribaltarlo lo romperebbe (le etichette dell'ultima colonna, ancorate a fine
   riga, finirebbero fuori). Resta LTR anche in arabo. */
.sankey { direction: ltr; }

/* Le etichette sopra il canvas NON hanno bisogno di nulla: sono posizionate con
   `left` e `top` in pixel, che sono fisici e quindi non seguono la direzione —
   il disegno sotto non si ribalta e loro restano al loro posto sopra il sentiero
   giusto. Il testo dentro, invece, si ribalta come deve. */

/* Su telefono la carta è un'altra cosa (vedi emomap.js: parte dal ritratto e nel
   dizionario non scrive nomi). Qui si aggiusta solo la misura del testo: quello
   che resta scritto deve restare leggibile su un quadrato di 340 pixel. */
@media (max-width: 640px) {
  .emap { padding: .6rem; }
  /* La carta è disegnata a 900 unità e su 340 pixel si riduce di 2,6 volte:
     a 12 unità un nome era alto 4 pixel (giro di prova del 23/09/2026). Le
     misure qui sono in unità della carta; emomap.js usa le stesse per non far
     sovrapporre i nomi. */
  .emap-label { font-size: 24px; opacity: .88; }
  .emap-quad { font-size: 24px; letter-spacing: .05em; } /* a 30 toccavano il filetto e «Fortunale» (26/09/2026) */
  .emap-axis { font-size: 22px; letter-spacing: .08em; }
  .emap-note { font-size: .76rem; }
}

/* Il quaderno su telefono: una pagina per volta, sfogliando si passa prima
   dalla pagina a fronte (scrittura -> lettura -> voce dopo). */
@media (max-width: 720px) {
  .dbook { grid-template-columns: 1fr; min-height: 26rem; border-radius: 10px; 
    /* una pagina sola: la piega in mezzo (disegnata nel fondo) passava sul testo */
    background: linear-gradient(90deg, var(--dpaper-shade) 0%, var(--dpaper) 6%, var(--dpaper) 94%, var(--dpaper-shade) 100%); }
  .dspine { display: none; }
  .dpage, .dpage-left, .dpage-right { padding: 1.3rem 1.2rem 2.2rem; }
  .dpage[hidden] { display: none; }
  .dleaf { width: 100%; }
  .dbook-pos { min-width: 0; }
}

/* --- LA PAGINA DI RECUPERO (reset.html) -------------------------------------
   Vive fuori dall'app, come l'informativa: riusa il guscio .legal e i bottoni
   della guida (.gd-btn) per non inventare un secondo linguaggio visivo per due
   moduli. Sta in fondo al foglio perché non ha varianti responsive proprie: la
   misura di lettura la dà già .legal. */
.pw-forgot { margin: .55rem 0 0; text-align: center; font-size: .85rem; }
.pw-forgot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.pw-forgot a:hover { color: var(--accent); }

.reset-back { display: inline-block; margin-bottom: 1.2rem; color: var(--muted); text-decoration: none; }
.reset-back:hover { color: var(--gold); }
.reset-hint { color: var(--muted); max-width: 34rem; }
.reset-form { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; max-width: 30rem; }
.reset-form.is-stack { flex-direction: column; align-items: stretch; }
/* In colonna il flex-basis diventa ALTEZZA: senza questo i campi password
   venivano alti quattordici righe. La base la impone il contenuto. */
.reset-form.is-stack input, .reset-form.is-stack .gd-btn { flex: 0 0 auto; }
.reset-form input {
  flex: 1 1 14rem; min-width: 0; font: 1rem var(--sans);
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); color: var(--fg);
}
.reset-form input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.reset-form .gd-btn { flex: 0 0 auto; }
.reset-ok { margin: 1.2rem 0 0; font-weight: 700; }
.reset-bad { margin: 1rem 0 0; color: var(--accent); }
.reset-go { display: inline-block; margin-top: 1.2rem; text-decoration: none; }
/* il pulsante-link dentro una pagina .legal: `.legal a` gli dava il colore
   dell'accento, cioè quello del suo sfondo, e la scritta spariva («Vai
   all'accesso» su verifica e reset, 26/09/2026) */
.legal a.gd-main { color: var(--on-accent); }

/* Il link di recupero nel cockpit: campo di sola lettura, largo quanto la riga. */
.ac-reset { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ac-reset input {
  flex: 1 1 16rem; min-width: 0; font: .78rem var(--mono, monospace);
  padding: .35rem .5rem; border: 1px solid var(--gold); border-radius: 8px;
  background: var(--card); color: var(--fg);
}
.ac-reset-hint { flex-basis: 100%; margin: .3rem 0 0; font-size: .75rem; color: var(--muted); }

/* --- LA PROVA GRATUITA -------------------------------------------------------
   La barra nel profilo e la scheda che annuncia la fine. Non è un errore: è un
   bivio, quindi ha il titolo e il tono delle carte dell'app, non del rosso. */
.pf-trial-n { margin: 0 0 .5rem; font-size: 1.05rem; }
.pf-trial-n strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pf-bar {
  display: block; height: 8px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--line) 60%, transparent);
}
.pf-bar span { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.pf-bar.is-over span { background: var(--accent); }

.dlg-notice .dlg-title {
  margin: 0 0 .5rem; font: 700 1.15rem/1.3 var(--serif); color: var(--fg);
}
.dlg-notice .dlg-msg { color: var(--muted); }

.ac-trial { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; align-self: center; margin-inline-end: .3rem; }

.ac-trial.is-super { color: var(--gold); font-weight: 700; }
.ac-btn.is-on { border-color: var(--gold); color: var(--gold); }

/* --- Le persone: tabelle dense, lette con l'occhio non con la calcolatrice --- */
.ins-scroll { overflow-x: auto; margin-top: .5rem; }
.ins-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.ins-table th {
  text-align: start;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: .5rem .7rem .45rem 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ins-table th.is-sortable { cursor: pointer; }
.ins-table th.is-sortable:hover { color: var(--fg); }
.ins-table th.is-sorted { color: var(--accent); }
.ins-table th.is-sorted::after { content: ' ▾'; }
.ins-table th:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ins-table td {
  padding: .5rem .7rem .5rem 0;
  border-bottom: 1px dotted var(--line);
  vertical-align: baseline;
}
.ins-table .num { text-align: end; font-variant-numeric: tabular-nums; }
.ins-table tr.is-quiet td { color: var(--muted); opacity: .7; }
.ins-who { font-weight: 600; }
.ins-tag {
  margin-inline-start: .4rem;
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: 0 .35rem;
}
.ins-left { color: var(--muted); }
.ins-when { color: var(--muted); white-space: nowrap; }

/* La quota: barra e frazione insieme. Con pochi dati si smorza, non si nasconde. */
.ins-quota { display: flex; align-items: center; gap: .5rem; min-width: 11rem; }
.ins-quota-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--line) 60%, transparent);
  overflow: hidden;
}
.ins-quota-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.ins-quota-n { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.ins-quota.is-thin .ins-quota-fill { background: var(--muted); opacity: .55; }
.ins-quota.is-thin .ins-quota-n { font-style: italic; }

/* Suggerita più volte e mai aperta: il numero che vale la pena vedere. */
.ins-table td.is-cold { color: var(--accent); font-weight: 700; }

/* --- IL LABORATORIO TEATRALE -------------------------------------------------
   Parlare con un personaggio per capirne le ragioni. I TRE REGISTRI si devono
   distinguere a colpo d'occhio, perché sono il patto della finestra:
     quello che DICE          filetto d'oro e corsivo serif — è il trattamento
                              che i versi veri hanno in tutta l'app;
     quello che il testo DÀ   tono di servizio, sans su carta piana;
     quello che NON DICE      bordo tratteggiato: il documento finisce qui,
                              oltre c'è la scelta d'attore. */


/* la scelta in due mosse: l'opera, poi il personaggio */
.dlg-lab-scegli { max-width: min(34rem, calc(100vw - 1.5rem)); width: min(34rem, calc(100vw - 2rem)); }
.dlg-lab-scegli h3 { margin: 0 0 .2rem; font: 700 1.2rem var(--serif); }
.lab-scegli-sub { margin: 0 0 .75rem; font: .85rem/1.5 var(--sans); color: var(--muted); }
.lab-scegli-l { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; max-height: 55vh; overflow-y: auto; }
.lab-caso { border-color: var(--gold); }

/* la finestra del laboratorio */
.dlg-lab { max-width: min(36rem, calc(100vw - 1.5rem)); width: min(36rem, calc(100vw - 2rem)); }
.lab-head { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .5rem; }
.lab-nome { font: 700 1.25rem var(--serif); }
.lab-opera { font: .8rem var(--sans); color: var(--muted); }
.lab-x {
  margin-inline-start: auto; background: none; border: 0; cursor: pointer;
  color: var(--muted); font: 1rem var(--sans); padding: .2rem .4rem;
}
.lab-x:hover { color: var(--fg); }

/* la cautela PRIMA della conversazione, per le opere che la portano */
.lab-cautela {
  margin: 0 0 .7rem; padding: .6rem .8rem;
  background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 10px;
  font: .85rem/1.5 var(--sans);
}

/* il patto, detto all'inizio: otto turni, una lettura */
.lab-patto { margin: .6rem 0; font: .8rem/1.5 var(--sans); color: var(--muted); }

.lab-filo { display: flex; flex-direction: column; gap: .6rem; max-height: 46vh; overflow-y: auto; margin: 0 0 .7rem; }
.lab-mio {
  align-self: flex-end; margin: 0; max-width: 85%;
  padding: .5rem .8rem; border-radius: 14px 14px 4px 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
  border: 1px solid var(--line); font: .92rem/1.5 var(--sans);
}
.lab-turno { display: flex; flex-direction: column; gap: .5rem; }
.lab-risposta { margin: 0; font: 1rem/1.6 var(--serif); }

/* i tre registri */
.lab-reg { border-radius: 12px; padding: .55rem .8rem; }
.lab-reg-h { display: block; margin: 0 0 .3rem; font: .64rem var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.lab-reg-p { margin: 0; font: .88rem/1.55 var(--sans); }
.lab-dice { border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 6%, var(--card)); }
.lab-dice .lab-reg-h { color: var(--gold); }
.lab-verso { margin: 0 0 .25rem; font: italic .98rem/1.5 var(--serif); unicode-bidi: plaintext; }
.lab-verso:last-child { margin-bottom: 0; }
.lab-verso-ref { font: .68rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.lab-da { border: 1px solid var(--line); background: var(--card); }
.lab-da .lab-reg-h { color: var(--muted); }
.lab-nondice { border: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent); background: none; }
.lab-nondice .lab-reg-h, .lab-nondice .lab-reg-p { color: var(--muted); }

/* una citazione inventata non passa, e si dice */
.lab-scartate { margin: 0; font: .74rem var(--sans); color: var(--muted); font-style: italic; }

.lab-form { display: flex; align-items: center; gap: .6rem; }
.lab-campo {
  flex: 1; resize: none; padding: .55rem .75rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--fg); font: .92rem/1.45 var(--sans);
}
.lab-campo:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.lab-conta { flex: none; font: .72rem var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.lab-err { margin: 0 0 .9rem; }

/* --- I MONOLOGHI ---------------------------------------------------------------
   Righe chiuse — chi parla, dove, come comincia, quante parole — e UNO aperto
   alla volta. Il testo è il dato: inglese col filetto d'oro, la resa sotto. */
.mono-box { margin-top: 1.1rem; }
.mono-list { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0 .7rem; }
.mono-riga {
  display: flex; align-items: baseline; gap: .55rem; width: 100%;
  background: none; border: 1px solid var(--line); border-radius: 12px;
  padding: .45rem .75rem; cursor: pointer; color: var(--fg); font: .88rem var(--sans);
  text-align: start;
}
.mono-riga:hover { border-color: var(--gold); }
.mono-riga.is-active { border-color: var(--gold); }
.mono-riga strong { font: 700 .88rem var(--sans); white-space: nowrap; }
.mono-ref { font: .68rem var(--sans); letter-spacing: .08em; color: var(--gold); white-space: nowrap;
  /* un titolo lungo («Sogno di una notte di mezza estate · 5.1») spingeva la riga
     fuori dallo schermo del telefono: il riferimento si accorcia coi puntini */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mono-incipit {
  font: italic .86rem var(--serif); color: var(--muted); unicode-bidi: plaintext;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.mono-n {
  font: .7rem var(--sans); color: var(--muted); white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem;
  font-variant-numeric: tabular-nums;
}
.mono-open { margin: 0 0 .5rem; }
.mono-testo {
  border-inline-start: 3px solid var(--gold); padding: .35rem 0 .35rem .9rem; margin: .6rem 0;
}
.mono-verso { margin: 0; font: italic 1.02rem/1.65 var(--serif); unicode-bidi: plaintext; white-space: pre-line; }
.mono-resa { margin: .55rem 0 0; font: .9rem/1.6 var(--sans); color: var(--muted); }
.mono-testo .case-intro-src { margin-top: .45rem; }

/* --- LA RICERCA NEL CORPUS -------------------------------------------------------
   In fondo al canone: battute vere, verificate per costruzione, salvabili. */
/* LE DUE RICERCHE SONO FRATELLE e stanno affiancate sopra l'elenco: una
   filtra i TITOLI, l'altra cerca le PAROLE DENTRO le battute. Le etichette
   gemelle («Fra le opere» / «Fra le battute») dicono la differenza da sole —
   #cerca stava sotto quarantanove schede e nessuno ci arrivava. */
#cerca { margin: 0; }
.cerca-h { margin: 0 0 .45rem; }
.cerca-form { display: flex; gap: .5rem; margin: 0 0 .8rem; }
/* niente padding proprio: il campo dei versi è alto come il filtro accanto,
   e lo stile lo detta la regola generale di input[type=search] */
.cerca-campo { flex: 1; min-width: 0; }
.cerca-campo:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.cerca-esiti { display: flex; flex-direction: column; gap: .6rem; }
.cerca-riga { unicode-bidi: plaintext; }
.cerca-vuoto { font: .9rem var(--sans); color: var(--muted); }

/* --- LE DUE MASCHERE DI PUCK -----------------------------------------------------
   I punti caldi stanno SULLE maschere disegnate (percentuali della tela 16:9);
   invisibili finché non li tocchi, un anello d'oro al passaggio. Sotto il palco
   i bottoni gemelli: la scena è la poesia, i bottoni sono la maniglia. */
.scene-mask-spot {
  position: absolute; z-index: 6; width: 7%; aspect-ratio: 33 / 43; min-width: 44px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: none; border: 2px solid transparent; cursor: pointer; padding: 0;
}
.scene-mask-spot:hover, .scene-mask-spot:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 45%, transparent);
  outline: none;
}
.mask-doors { display: flex; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.mask-door {
  display: inline-flex; align-items: center; gap: .5rem; flex: 1; min-width: 14rem;
  padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--fg); font: .88rem var(--sans);
  cursor: pointer; text-align: start;
}
.mask-door:hover { border-color: var(--gold); }
.mask-door .icn { color: var(--gold); flex: none; }

/* il filo verso la ricerca dei versi, nel pannello di Puck */
.scene-verse-link {
  margin-top: .5rem; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: .8rem var(--sans); text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- IL PANNELLO DI SCENA IN FINESTRA ---------------------------------------------
   Il dialogo di Puck (dietro la maschera comica) è lo stesso askPanel della
   scena, montato in un dialog: qui perde la posizione assoluta e il vetro, e
   prende la carta della finestra. */
.dlg-scena { max-width: min(34rem, calc(100vw - 1.5rem)); width: min(34rem, calc(100vw - 2rem)); }
.scene-ask.is-window {
  position: static; width: auto; max-width: none;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; box-shadow: none; padding: 0; margin: 0;
  animation: none;
}
.scene-ask.is-window .scene-thread { max-height: 40vh; }

/* La TARGA: il pannello che è solo presentazione (il teatro di Puck). Più
   stretto, per non arrivare addosso alle maschere che porge — misurato: col
   pannello a tutta larghezza le si sovrapponeva di 23px. Sotto gli 860px torna
   a tutta larghezza, perché lì scende sotto la scena. */
.scene-ask.is-targa { width: min(20rem, 33%); }
@media (max-width: 860px) { .scene-ask.is-targa { width: auto; } }

/* il libro delle letture accreditate, nel dettaglio utente del cockpit */
.cred-delta { font: 600 .8rem var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.cred-delta.is-giu { color: var(--accent); }

/* --- LA MINI-SCHEDA DELL'ISCRIZIONE ----------------------------------------------
   Tre domande facoltative, chiuse di default: un'iscrizione che si apre con un
   questionario allontana. Le domande sono ETICHETTE (piccole, in tondo), non
   titoli: il titolo della pagina è uno, e non è «Da che posto guardi?». */
/*
 * LE FACOLTATIVE: la stessa misura dei campi, e un bordo che dice «non devi».
 *
 * Era un link sottolineato, largo quanto le sue parole (duecentosessantotto
 * pixel su trecentosessantasei) e alto sedici: in una colonna di riquadri
 * sembrava un errore di impaginazione. Ora è larga e alta come email e
 * password — la richiesta era esattamente questa — e la differenza la porta il
 * TRATTEGGIO invece della dimensione: pieno = ti serve, tratteggiato = se vuoi.
 * Cambiare la misura per dire «meno importante» costringe l'occhio a rimettere
 * a fuoco tre volte in una colonna di cinque righe.
 */
.scheda-apri {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; min-height: 3.2rem; margin: 0; padding: .55rem .8rem;
  background: none; border: 1px dashed var(--line); border-radius: 6px;
  color: var(--muted); font: .93rem/1.35 var(--sans); text-align: start; text-decoration: none; cursor: pointer;
}
.scheda-apri:hover { border-color: var(--accent); color: var(--fg); }
/*
 * IL SEGNO: più quando è chiusa, meno quando è aperta.
 *
 * Prima era un «+» che ruotava di 45 gradi, e ruotando diventa una «×» — che
 * in un modulo non dice «richiudi», dice «annulla»: il segno con cui si
 * scartano le cose. Un meno non è ambiguo, e nessuno teme di perdere quello
 * che ha scritto.
 */
.scheda-apri::after {
  content: '+'; font: 1.15rem var(--sans); line-height: 1; color: var(--accent);
}
.scheda-apri[aria-expanded='true'] { border-style: solid; color: var(--fg); }
.scheda-apri[aria-expanded='true']::after { content: '\2212'; }
/* il corpo continua il riquadro di sopra: un blocco solo, non due cose vicine */
.scheda-corpo {
  display: flex; flex-direction: column; gap: 1.1rem;
  margin: -.75rem 0 0; padding: 1.2rem 1rem 1rem;
  background: color-mix(in srgb, var(--gold) 6%, var(--card)); border-radius: 0 0 10px 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
}
.scheda-campi { display: flex; flex-direction: column; gap: 1.1rem; }
.scheda-select {
  width: 100%; min-height: 44px; padding: .5rem .8rem; border-radius: 9px;
  border: 0; background: var(--strato); color: var(--fg); font: 1rem var(--sans);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 14px -10px rgba(0,0,0,.35);
}
.scheda-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.scheda-gruppo { display: flex; flex-direction: column; gap: .45rem; }
/* le domande come le etichette dell'app: maiuscoletto spaziato, non prosa */
.scheda-dom {
  font: .7rem var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.scheda-fila { display: flex; flex-wrap: wrap; gap: .35rem; }
.scheda-b { font: .9rem var(--sans); padding: .42rem .85rem; min-height: 38px; border-color: transparent; background: var(--strato); }
.scheda-b.is-active { background: color-mix(in srgb, var(--gold) 18%, var(--card)); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.scheda-nota { margin: .15rem 0 0; font: .72rem/1.45 var(--sans); color: var(--muted); }
/* il ritmo della colonna lo tiene il `gap` del modulo, non i margini dei campi */

/* --- ENTRARE CON UN PROVIDER -----------------------------------------------------
   Sotto il modulo, separati da un «oppure» che non urla: la strada principale
   resta email e password, questa è una scorciatoia per chi la vuole. Sono link
   veri (il giro OAuth è una navigazione), quindi si comportano da link. */
#oauthrow { margin: .9rem 0 .2rem; }
.oauth-o {
  margin: 0 0 .6rem; text-align: center; font: .72rem var(--sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
/*
 * I PULSANTI DEI PROVIDER VANNO IN COLONNA, non affiancati.
 *
 * Con tre su una riga, sul telefono diventano tre francobolli: nomi tagliati e
 * un'area toccabile che si manca. In colonna hanno tutti la stessa altezza e la
 * stessa larghezza, e si leggono — che sulla soglia è tutto quello che serve.
 */
.oauth-fila { display: flex; flex-direction: column; gap: .5rem; }
.oauth-fila .oauth-btn { width: 100%; justify-content: center; min-height: 44px; }

/*
 * I MARCHI, e le due regole d'uso che non si negoziano.
 *
 * La G di Google ha i suoi quattro colori e NON segue il tema: su fondo scuro
 * va su un dischetto chiaro, perché ricolorarla di bianco sarebbe modificare un
 * marchio altrui. Apple e GitHub sono monocromatici e seguono il testo, quindi
 * si invertono da soli col tema (`currentColor`).
 */
.marchio { width: 18px; height: 18px; flex: none; }
.marchio-google { background: #fff; border-radius: 50%; padding: 1px; box-sizing: content-box; }
.oauth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  flex: 1; min-width: 9rem; padding: .55rem .9rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--fg); font: .88rem var(--sans);
  text-decoration: none;
}
.oauth-btn:hover { border-color: var(--gold); }
.oauth-btn .icn { color: var(--gold); flex: none; }

/* --- LO SCAFFALE DELLE STANZE ----------------------------------------------------
   Al posto delle pasticche «nome · numero»: schede con la SOSTANZA di quello che
   hai trovato lì — la riga dell'opera, l'esempio dell'emozione — e il numero
   ridotto a marca discreta, solo se maggiore di uno. Ogni scheda è una porta. */
.ct-scaffale {
  /* min(20rem, 100%): nella stanza aperta di un telefono lo scaffale è largo
     270px, e una colonna minima di 20rem sbordava a destra facendo scorrere
     tutta la pagina in orizzontale (22/09/2026, foto di Mauro dal castello). */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: .6rem; margin: .3rem 0 .2rem;
}
.ct-carta {
  display: flex; flex-direction: column; gap: .3rem; width: 100%;
  padding: .7rem .85rem; text-align: start; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--fg); box-shadow: var(--shadow-1);
}
.ct-carta:hover { border-color: var(--gold); }
.ct-carta:hover .ct-carta-vai { color: var(--gold); }
.ct-carta-h { display: flex; align-items: center; gap: .45rem; }
.ct-carta-i { color: var(--gold); flex: none; }
.ct-carta-t { font: 700 .95rem var(--serif); }
.ct-carta-n {
  margin-inline-start: auto; font: .68rem var(--sans); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .02rem .4rem;
  font-variant-numeric: tabular-nums;
}
.ct-punti { margin-inline-start: auto; font: 700 .9rem var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
/* la riga di sostanza: due righe al massimo, poi si taglia — è un assaggio,
   non il testo intero, che sta dove la cosa vive */
.ct-carta-r {
  font: .84rem/1.45 var(--sans); color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ct-carta-q { display: flex; justify-content: space-between; gap: .5rem; font: .7rem var(--sans); color: var(--muted); }
.ct-carta-vai { color: var(--accent); white-space: nowrap; }

/* «Riprendi»: la riga in cima al castello con l'ultima cosa lasciata qui. Una
   riga sola, larga come la mappa, con l'occhiello in oro: si vede prima di
   scegliere una stanza, che è il punto. */
.ct-riprendi {
  display: flex; flex-direction: column; gap: .25rem; width: 100%;
  margin: 0 0 .9rem; padding: .75rem .95rem; text-align: start; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 7%, var(--card));
  color: var(--fg); box-shadow: var(--shadow-1);
}
.ct-riprendi:hover { border-color: var(--gold); }
.ct-riprendi-occhiello { font: .66rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ct-riprendi-t { font: 700 1.05rem var(--serif); }
.ct-riprendi-r {
  font: .85rem/1.5 var(--sans); color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ct-riprendi .ct-carta-vai { align-self: flex-end; font: .72rem var(--sans); }

/* --- LA VETRINA DEI PACCHETTI ----------------------------------------------------
   Dove si può comprare: dentro il muro di Shylock (la prova è finita) e nel
   profilo accanto al conto delle letture. Tre carte in fila, quella che conviene
   col nastro: il conto per lettura lo fa la vetrina, non chi guarda. */
.vt { margin: .9rem 0 .2rem; }
.vt-h {
  margin: 0 0 .5rem; font: .68rem var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.vt-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.vt-carta {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .7rem .6rem .6rem; text-align: center;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.vt-carta.is-meglio { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.vt-nastro {
  position: absolute; top: -.55rem; left: 50%; transform: translateX(-50%);
  padding: .05rem .45rem; border-radius: 999px; background: var(--gold); color: var(--bg);
  font: 700 .6rem var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.vt-nome { font: 700 .95rem var(--serif); }
.vt-letture { font: .74rem var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.vt-prezzo { font: 700 1.15rem var(--sans); color: var(--fg); font-variant-numeric: tabular-nums; margin: .1rem 0 .35rem; }
.vt-btn {
  display: block; width: 100%; padding: .4rem .5rem; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--accent);
  font: .82rem var(--sans); text-decoration: none; text-align: center; cursor: pointer;
}
.vt-btn:hover { border-color: var(--gold); }
.vt-btn:disabled { opacity: .6; cursor: default; }
.vt-btn.is-cassa { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.vt-btn.is-cassa:hover { filter: brightness(1.08); }
/* Il pulsante della cassa nostra è una fetch: può fallire (non autenticato,
   pacchetto sconosciuto, cassa spenta), e l'errore si dice qui accanto invece
   che in un alert. */
.vt-errore { margin: .35rem 0 0; font: .72rem/1.4 var(--sans); color: var(--danger, #b3261e); }
.vt-nota { margin: .55rem 0 0; font: .72rem/1.45 var(--sans); color: var(--muted); }

/* Sullo schermo stretto tre carte in griglia fanno 2+1, che è sbilenco: una
   colonna sola, e la carta si distende in riga — nome e letture a sinistra,
   prezzo e pulsante a destra. */
@media (max-width: 480px) {
  .vt-fila { grid-template-columns: 1fr; }
  .vt-carta {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: .1rem .7rem; text-align: start; padding: .6rem .7rem;
  }
  .vt-nastro { left: auto; right: .7rem; transform: none; }
  .vt-nome { grid-column: 1; }
  .vt-letture { grid-column: 1; }
  .vt-prezzo { grid-column: 2; grid-row: 1; margin: 0; text-align: end; }
  .vt-btn { grid-column: 2; grid-row: 2; width: auto; padding: .3rem .8rem; }
}

/* --- lo stato della verifica nel cockpit ------------------------------------------
   Il riquadro sta in TESTA al dettaglio utente: è la prima cosa da leggere quando
   qualcuno scrive «mi chiede di confermare e non mi arriva niente». Rosso solo
   quando la persona è davvero bloccata — altrimenti è un'informazione, non un
   allarme. */
.ac-verifica {
  margin: 0 0 .8rem; padding: .7rem .9rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card);
  display: flex; flex-direction: column; gap: .35rem; align-items: flex-start;
}
.ac-verifica.is-bloccato { border-color: var(--warn-line); background: var(--warn-bg); }
.ac-vf-h { font: 700 .62rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ac-vf-p { margin: 0; font: .88rem/1.5 var(--sans); }
.ac-vf-muro { margin: 0; font: 600 .8rem var(--sans); }
.ac-verifica.is-bloccato .ac-vf-muro { color: var(--accent); }
.ac-vf-esito { font: .78rem var(--sans); color: var(--muted); }
.ac-btn.is-armato { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ac-vf-avviso { margin: .1rem 0 0; font: .72rem/1.45 var(--sans); color: var(--muted); max-width: 42rem; }

/* --- l'accredito dopo un pagamento, nel cockpit ---------------------------------
   Il gruppo sta su una riga coi bottoni: chi accredita ha appena letto una mail e
   sta guardando la riga di quella persona, non cerca un pannello a parte. Il menu
   ha la misura dei bottoni accanto, così la riga non balla. */
.ac-pack { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ac-pack-h { font-family: var(--sans); font-size: .7rem; color: var(--muted); }
.ac-sel {
  font-family: var(--sans); font-size: .74rem;
  padding: .38rem .5rem; border-radius: 6px;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  cursor: pointer;
}
.ac-sel:hover { border-color: var(--accent); }
/* L'esito resta accanto al comando e non sparisce: chi accredita vuole vedere
   scritto quanto ha dato, perché il numero lo dice il server e non il bottone. */
.ac-pack-esito { font-family: var(--sans); font-size: .72rem; color: var(--accent); }

/* La striscia dell'esito: in cima al pannello e non accanto al comando, perché il
   ridisegno della tabella cancellerebbe un nodo messo dentro la riga. */
.ac-avviso {
  margin: 0 0 .7rem; padding: .5rem .8rem; border-radius: 8px;
  font: .8rem var(--sans);
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
}
.ac-avviso.is-guasto { border-color: var(--warn-line); background: var(--warn-bg); }

/* Aria fra i comandi e quello che cancella: nella riga il gruppo dell'accredito
   finiva appiccicato a «Elimina utente», e un clic scivolato di mezzo centimetro
   fra «dai le letture a chi ha pagato» e «cancella quella persona» è una
   distanza troppo corta. La conferma c'è per entrambi, ma la mano viene prima. */
.ac-btn-danger { margin-inline-start: 1.2rem; }

/* --- la cassa (/paga.html) -------------------------------------------------------
   Pagina a sé, e volutamente spoglia: chi arriva qui ha una carta in mano e deve
   leggere due cose — cosa compra e quanto costa — senza niente intorno che
   distragga. Nessun elemento dell'app: né mappa, né personaggi, né navigazione. */
.pg {
  max-width: 32rem; margin: 0 auto; padding: 3rem 1.25rem 4rem;
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.pg-h { margin: 0; font: 400 1.9rem/1.2 var(--serif); color: var(--fg); }
.pg-p { margin: 0; font: 1rem/1.6 var(--sans); color: var(--fg); }
/* La scheda del pacchetto: il numero grande e il prezzo grande, perché sono le
   due cose su cui si decide. */
.pg-scheda {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); width: 100%; box-sizing: border-box;
}
.pg-pack { font: 400 1.3rem var(--serif); color: var(--fg); }
.pg-prezzo { font: 700 1.5rem var(--sans); color: var(--accent); margin-inline-start: auto; }
/* L'attesa dell'accredito: è un'attesa dichiarata, non un errore, quindi ha il
   tono di una nota e non di un allarme. */
.pg-attesa { margin: 0; font: .92rem/1.5 var(--sans); color: var(--muted); font-style: italic; }
.pg-ok { margin: 0; font: 600 1.1rem/1.5 var(--sans); color: var(--fg); }
/* Il pagamento è andato ma l'accredito tarda: giallo e non rosso — non è un
   guasto di chi legge, e le letture arriveranno comunque. */
.pg-tardi {
  margin: 0; padding: .8rem 1rem; border-radius: 10px;
  border: 1px solid var(--warn-line); background: var(--warn-bg);
  font: .95rem/1.55 var(--sans); color: var(--fg);
}
.pg-btn {
  display: inline-block; margin-top: .4rem; padding: .55rem 1.1rem;
  border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font: 600 .9rem var(--sans);
}
.pg-btn:hover { filter: brightness(1.08); }

/* --- la pagina pubblica dei prezzi (/pricing.html) --------------------------------
   Si legge senza account: chi arriva vuole sapere quanto costa in dieci secondi,
   quindi il numero e il prezzo sono grandi e il resto è nota. */
.pz { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; display: flex; flex-direction: column; gap: 1rem; }
.pz-h { margin: 0; font: 400 2.1rem/1.2 var(--serif); color: var(--fg); }
.pz-p { margin: 0; font: 1.02rem/1.6 var(--sans); color: var(--fg); max-width: 34rem; }
.pz-prova { margin: 0; font: 600 1.02rem/1.6 var(--sans); color: var(--accent); }
.pz-fila { display: flex; gap: .8rem; flex-wrap: wrap; margin: .6rem 0; }
.pz-carta {
  flex: 1 1 12rem; position: relative; display: flex; flex-direction: column; gap: .25rem;
  padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.pz-carta.is-meglio { border-color: var(--accent); }
.pz-nastro {
  position: absolute; top: -.6rem; inset-inline-start: 1rem;
  font: 700 .6rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); padding: .12rem .5rem; border-radius: 4px;
}
.pz-nome { font: 400 1.15rem var(--serif); color: var(--fg); }
.pz-letture { font: .8rem var(--sans); color: var(--muted); }
.pz-prezzo { font: 700 1.6rem var(--sans); color: var(--fg); margin-top: .2rem; font-variant-numeric: tabular-nums; }
.pz-nota { margin: 0; font: .9rem/1.55 var(--sans); color: var(--muted); max-width: 34rem; }
.pz-btn {
  align-self: flex-start; margin-top: .6rem; padding: .6rem 1.2rem; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); text-decoration: none; font: 600 .95rem var(--sans);
}
.pz-btn:hover { filter: brightness(1.08); }
/* il conto di chi è dentro, detto dove si decide se aggiungere letture */
.pz-tue { margin: 0; font: 600 1.02rem/1.6 var(--sans); color: var(--gold); }
/* il «prendi» dentro la carta: un bottone, non un link, con la stessa veste */
.pz-compra {
  border: 0; cursor: pointer; align-self: flex-start; margin-top: .6rem;
  padding: .45rem 1rem; border-radius: 8px; background: var(--accent); color: var(--on-accent);
  font: 600 .9rem var(--sans); text-decoration: none;
}
.pz-compra:disabled { opacity: .6; cursor: default; }
/* la tournée non ha prezzo: la carta si distingue per il filetto dorato */
.pz-tournee { border-style: dashed; border-color: var(--gold); }
.vt-tournee { border-style: dashed; border-color: var(--gold); }
.pz-legal { margin: 1.4rem 0 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.pz-legal a { font: .82rem var(--sans); color: var(--muted); }

/* --- la pagina che mostra il prodotto (/about.html) ------------------------------
   Si legge senza account e senza JavaScript: il venditore ha rifiutato il sito
   perché aprendolo si trovava un muro di login, e questa pagina è la risposta.
   Testo prima di tutto: chi la apre deve capire in venti secondi cosa fa l'app e
   quanto costa. */
.ab { max-width: 64rem; margin: 0 auto; padding: 2.2rem 1.25rem 4rem; }
.ab-head { margin-bottom: 2.4rem; }
.ab h1 { margin: 0 0 .9rem; font: 400 clamp(2.3rem, 5.5vw, 3.4rem)/1.12 var(--serif); color: var(--fg); }
.ab-lead { margin: 0; font: 1.08rem/1.65 var(--sans); color: var(--fg); max-width: 36rem; }
.ab-sez { margin: 0 0 2.4rem; }
.ab h2 { margin: 0 0 .9rem; font: 400 1.35rem var(--serif); color: var(--accent); }
.ab-sez p { margin: 0 0 .7rem; font: 1rem/1.65 var(--sans); color: var(--fg); max-width: 36rem; }
/* L'esempio: la domanda di chi scrive e la risposta dell'app, distinte a occhio.
   È il pezzo che fa capire il prodotto più di qualsiasi descrizione. */
.ab-esempio {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.ab-tu { margin: 0; font: italic 1.02rem/1.6 var(--serif); color: var(--muted); }
.ab-risposta { display: flex; flex-direction: column; gap: .4rem; border-inline-start: 2px solid var(--accent); padding-inline-start: 1rem; }
.ab-caso { margin: 0; font: 600 .92rem var(--sans); color: var(--fg); }
.ab-lezione { margin: 0; font: 1.02rem/1.55 var(--sans); color: var(--fg); }
.ab-verso { margin: .3rem 0 0; font: italic 1.02rem/1.5 var(--serif); color: var(--fg); }
.ab-fonte { margin: 0; font: .78rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ab-nota { margin: .8rem 0 0; font: .9rem/1.55 var(--sans); color: var(--muted); }
.ab-lista { margin: 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.ab-lista li { font: 1rem/1.6 var(--sans); color: var(--fg); max-width: 36rem; }
.ab-btn {
  display: inline-block; margin-top: .3rem; padding: .6rem 1.2rem; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); text-decoration: none; font: 600 .95rem var(--sans);
}
.ab-btn:hover { filter: brightness(1.08); }
.ab-piede { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.ab-legal { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 0; }
.ab-legal a { font: .82rem var(--sans); color: var(--muted); }

/* --- about, secondo atto: tre porte e tre scene -----------------------------
   La prima versione raccontava solo il consiglio sul problema; il diario e il
   laboratorio — due terzi del prodotto — non comparivano. Ora la pagina apre su
   tre porte (guida, diario, palcoscenico) e ogni porta ha la sua SCENA: un
   mockup finto ma fedele, che mostra solo cose che l'app fa davvero. Le regole
   qui sotto vivono SOLO in /about.html; i blocchi condivisi con la vetrina in
   home (.ab-esempio, .ab-lista) stanno sopra e non si toccano. */
.ab-hero {
  position: relative; text-align: center; padding: 3.2rem 0 0;
  /* la luce di scena: un alone caldo dietro al titolo, spento quanto basta
     da reggere sia la carta chiara sia il buio del tema scuro */
  background: radial-gradient(58% 72% at 50% 0%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 72%);
}
.ab-hero::after { content: '❧'; display: block; margin-top: 2.1rem; color: var(--gold); font: 1.4rem var(--serif); }
.ab-stemma { display: block; width: 72px; height: 72px; margin: 0 auto .9rem; border-radius: 26%; object-fit: cover; box-shadow: var(--shadow-1); }
/* lo stesso medaglione sulla soglia dell'app e in testa alle pagine pubbliche */
.soglia-stemma { display: block; width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 26%; object-fit: cover; box-shadow: var(--shadow-1); }
.pagina-stemma { display: block; width: 64px; margin: 1.8rem auto 0; }
.pagina-stemma img { display: block; width: 64px; height: 64px; border-radius: 26%; object-fit: cover; box-shadow: var(--shadow-1); }
.ab-marca { margin: 0 0 1.6rem; font: 600 .85rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.ab-marca span { display: block; margin-top: .15rem; font: italic 400 .8rem var(--serif); letter-spacing: .12em; color: var(--muted); text-transform: lowercase; }
.ab-hero .ab-lead { margin: 0 auto; max-width: 42rem; font-size: 1.12rem; }
.ab-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.ab-btn-ghost { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.ab-btn-ghost:hover { filter: none; background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* le tre porte: le stesse carte della foresta, in miniatura */
.ab-porte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 2.6rem 0 1rem; }
.ab-porta {
  display: block; padding: 1.15rem 1.25rem 1.25rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--fg); text-decoration: none; box-shadow: var(--shadow-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ab-porta:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ab-porta-n { font: 400 1.35rem var(--serif); color: var(--gold); }
.ab-porta strong { display: block; margin: .15rem 0 .4rem; font: 400 1.3rem var(--serif); color: var(--accent); }
.ab-porta p { margin: 0; font: .92rem/1.55 var(--sans); color: var(--muted); }

/* i duetti: testo da una parte, scena dall'altra; su telefono uno sopra l'altro */
.ab-duetto { display: grid; gap: 1.8rem; align-items: center; margin: 3.4rem 0; }
.ab-duetto h2 { font-size: 1.6rem; }
@media (min-width: 60rem) {
  .ab-duetto { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 3rem; }
  .ab-inverti { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); }
  .ab-inverti .ab-testo { order: 2 }
  .ab-inverti .ab-mock { order: 1 }
}

/* la scena: una carta dell'app, leggermente storta come una foto appoggiata */
.ab-mock {
  margin: 0; display: flex; flex-direction: column; gap: .9rem;
  padding: 1.15rem 1.3rem 1.3rem; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow-2); transform: rotate(-.6deg);
}
.ab-inverti .ab-mock { transform: rotate(.6deg); }
.ab-mock-barra {
  margin: 0; padding-bottom: .6rem; border-bottom: 1px solid var(--line);
  font: 600 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}

/* la scena del diario */
.ab-diario-voce { margin: 0; font: italic 1.05rem/1.7 var(--serif); color: var(--fg); }
.ab-rosalind { border-inline-start: 2px solid var(--gold); padding-inline-start: 1rem; }
.ab-rosalind-nome { margin: 0 0 .2rem; font: 600 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ab-rosalind-dice { margin: 0; font: 1rem/1.6 var(--sans); color: var(--fg); }
.ab-chips { margin: 0; display: flex; gap: .45rem; flex-wrap: wrap; }
.ab-chip { font: .82rem var(--sans); padding: .28rem .75rem; border-radius: 999px; border: 1px solid; color: var(--fg); }
/* i colori delle famiglie (gioia, paura, tristezza): fissi, mescolati alla
   carta così tengono in entrambi i temi */
.ab-chip-gioia { background: color-mix(in srgb, #c9973f 16%, var(--card)); border-color: color-mix(in srgb, #c9973f 45%, transparent); }
.ab-chip-paura { background: color-mix(in srgb, #7b6bb7 16%, var(--card)); border-color: color-mix(in srgb, #7b6bb7 45%, transparent); }
.ab-chip-tristezza { background: color-mix(in srgb, #5a7fa8 16%, var(--card)); border-color: color-mix(in srgb, #5a7fa8 45%, transparent); }
.ab-giorni { margin: .1rem 0 0; display: flex; gap: .45rem; align-items: center; }
.ab-giorno { width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid var(--line); }
.ab-giorno.pieno { background: var(--gold); border-color: var(--gold); opacity: .8; }
.ab-giorno.oggi { background: var(--accent); border-color: var(--accent); transform: scale(1.3); }

/* la scena del laboratorio: i tre registri della seduta */
.ab-registro { display: flex; flex-direction: column; gap: .25rem; border-inline-start: 2px solid var(--line); padding-inline-start: 1rem; }
.ab-registro-nome { margin: 0; font: 600 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ab-registro-testo { margin: 0; font: .95rem/1.6 var(--sans); color: var(--fg); }

/* la compagnia: cinque sigilli */
.ab-cast { text-align: center; margin-top: 3.4rem; }
.ab-compagnia { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1rem; }
.ab-compagnia li { padding: 1.15rem .9rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.ab-sigillo { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .55rem; border: 1px solid var(--gold); border-radius: 50%; font: 400 1.3rem var(--serif); color: var(--gold); }
.ab-compagnia strong { display: block; margin-bottom: .3rem; font: 400 1.1rem var(--serif); color: var(--fg); }
.ab-compagnia p { margin: 0; font: .85rem/1.5 var(--sans); color: var(--muted); }

/* il canone, in numeri */
.ab-numeri { text-align: center; padding: 2rem 1rem 1.8rem; border-block: 1px solid var(--line); margin: 3.2rem 0; }
.ab-conte { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 3rem; margin: 0 0 1.2rem; }
.ab-conta dt { font: 400 2.6rem/1 var(--serif); color: var(--gold); }
.ab-conta dd { margin: .35rem 0 0; font: .85rem/1.45 var(--sans); color: var(--muted); max-width: 11rem; }
.ab-numeri .ab-nota { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .ab-porta { transition: none; }
  .ab-porta:hover { transform: none; }
}

/* Il richiamo alla pagina del prodotto, sulla schermata di accesso: chi arriva e
   trova «serve un account» deve avere una strada per capire prima di iscriversi. */
/* LA SOGLIA veste la stessa scena della presentazione: la luce calda dietro il
   titolo, il fregio prima della scheda, il rimando come pulsante e non come
   riga sottolineata. Teatro e diario chiedono la stessa cosa: calma. */
.soglia-capo {
  text-align: center; padding: 2.2rem 1rem 0; max-width: 46rem;
  background: radial-gradient(58% 72% at 50% 0%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 72%);
}
.soglia-capo::after { content: '❧'; display: block; margin: 1.6rem 0 1.8rem; color: var(--gold); font: 1.4rem var(--serif); }
.soglia-titolo { margin: 0 0 .9rem; font: 400 clamp(2.1rem, 5vw, 3rem)/1.12 var(--serif); color: var(--fg); }
.soglia-capo .lead { margin: 0 auto 1.5rem; }
.auth-scopri { margin: 0; font: .95rem/1.5 var(--sans); }
.auth-scopri a {
  display: inline-block; padding: .55rem 1.15rem; border: 1px solid var(--accent); border-radius: 8px;
  color: var(--accent); font-weight: 600; text-decoration: none;
}
.auth-scopri a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* LA VETRINA IN HOME — la presentazione del prodotto per chi non è entrato.
   Riusa i blocchi di /about.html (.ab-esempio, .ab-lista, .ab-*): qui servono
   solo il contenitore e il titolo, perché .ab h2 vale dentro .ab e questa
   sezione vive nella home. */
.vetrina { max-width: 64rem; margin: 2.6rem auto 0; padding: 2rem 1.25rem 0; border-top: 1px solid var(--line); }
.vetrina h2 { margin: 0 auto 1.2rem; max-width: 40rem; text-align: center; font: 400 1.5rem/1.25 var(--serif); color: var(--accent); }
/* il guscio si allarga per le tre porte, ma la prosa resta a misura di lettura */
.vetrina .ab-esempio, .vetrina .ab-nota { max-width: 40rem; margin-inline: auto; }
.vetrina .ab-esempio { border-radius: 16px; box-shadow: var(--shadow-2); }
.vetrina .ab-porte { margin: 1.8rem 0 0; }
.vetrina-costo { margin: 1.6rem auto 0; font: .95rem/1.6 var(--sans); color: var(--muted); max-width: 40rem; text-align: center; }
.vetrina-piu { margin: 1.4rem 0 0; text-align: center; }
.vetrina-piu a { font: .95rem var(--sans); color: var(--accent); }

/* i monologhi principali, in cima al canone: nasce chiuso perché sono 32 righe
   e aperto spingerebbe ricerca e opere sotto la piega */
.princ-box { margin: 0 0 1.2rem; }
.princ-box > summary { cursor: pointer; list-style: none; }
.princ-box > summary::-webkit-details-marker { display: none; }
.princ-box > summary::before { content: '▸'; display: inline-block; width: 1em; transition: transform .15s; }
.princ-box[open] > summary::before { transform: rotate(90deg); }
.princ-sub { margin: .3rem 0 .6rem; opacity: .75; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .princ-box > summary::before { transition: none; } }

/* --- il campanello di scena, nel profilo (solo guscio nativo) --------------
   Una riga per richiamo: l'interruttore a sinistra, l'ora a destra. L'ora è un
   input di sistema (su iOS apre la ruota della sveglia), quindi si veste come
   gli altri campi invece di travestirsi da qualcos'altro. */
.pf-camp { align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.pf-camp .consent { margin: 0; flex: 1 1 12rem; }
.pf-camp input[type='time'] {
  font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: .4rem .55rem;
  min-height: 44px; /* si tocca col dito, non col mouse */
}
.pf-camp input[type='time']:disabled { opacity: .5; }

/* --- il sipario che si apre: l'attesa, invece di tre punti ------------------
   Due tele di velluto che si scostano, la luce di scena che cresce fra loro, e
   si richiudono. Il ciclo non finisce perché non sappiamo quanto durerà
   l'attesa: è un respiro, non una barra che promette una percentuale che non
   abbiamo. Tutto qui dentro: nessun disegno, nessun file. */
.sipario { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.6rem 0; }
.sipario-palco {
  position: relative; display: block; width: 8.5rem; height: 5rem;
  overflow: hidden; border-radius: 8px;
  /* il fondo del palco: il legno in ombra, non il nero del vuoto */
  background: linear-gradient(180deg, #120d08 0%, #1d150d 70%, #241a10 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent);
}
/* la luce di scena: cresce quando le tele si aprono */
.sipario-luce {
  position: absolute; inset: 0;
  background: radial-gradient(58% 68% at 50% 62%, rgba(255, 214, 138, .62), rgba(255, 200, 110, .12) 62%, transparent 78%);
  animation: sipario-luce 2.6s ease-in-out infinite;
}
/* Le due tele: velluto in pieghe (le strisce), bordate d'oro sul taglio.
   IL ROSSO È FISSO, non `--accent`: nel tema scuro l'accento è un salmone
   chiaro e il velluto virava al rosa. Un sipario è un oggetto — il suo colore
   non si inverte col tema, come il bianco del logo di Google in vetrina. */
.sipario-tela {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background: repeating-linear-gradient(90deg, #6f2424 0 .28rem, #491818 .28rem .56rem);
  animation: sipario-apri 2.6s ease-in-out infinite;
}
.sipario-sx { left: 0; border-inline-end: 1px solid var(--gold); border-end-end-radius: 6px; }
.sipario-dx { right: 0; border-inline-start: 1px solid var(--gold); border-end-start-radius: 6px; animation-name: sipario-apri-dx; }
.sipario-frase { font: .9rem var(--sans); color: var(--muted); letter-spacing: .02em; }

@keyframes sipario-apri {
  0%, 100% { transform: translateX(0); }
  45%, 65% { transform: translateX(-88%); }
}
@keyframes sipario-apri-dx {
  0%, 100% { transform: translateX(0); }
  45%, 65% { transform: translateX(88%); }
}
@keyframes sipario-luce {
  0%, 100% { opacity: .25; }
  45%, 65% { opacity: 1; }
}
/* Chi ha chiesto meno movimento vede le tele socchiuse e ferme: l'attesa non è
   un buon posto per ignorare quella richiesta. */
@media (prefers-reduced-motion: reduce) {
  .sipario-tela, .sipario-luce { animation: none; }
  .sipario-sx { transform: translateX(-62%); }
  .sipario-dx { transform: translateX(62%); }
  .sipario-luce { opacity: .9; }
}

/* --- il sipario all'apertura (solo nel guscio) ------------------------------
   Il sipario è chiuso finché la scena non è pronta: quando si alza, dietro c'è
   già la schermata giusta — la foresta per chi è dentro, la soglia per chi no.
   Copre tutto, quindi ha una rete di sicurezza in JS (sei secondi) e non
   intercetta più i tocchi appena comincia ad alzarsi. */
/* NIENTE FONDO SUL CONTENITORE: le due tele coprono già tutto (51% + 51%, con
   la sovrapposizione al centro), e un fondo qui si vedrebbe al posto della
   pagina nel momento in cui le tele si scostano — cioè proprio quando il
   sipario deve scoprire la scena. Visto alzando la tela a metà. */
.boot-sipario { position: fixed; inset: 0; z-index: 9000; overflow: hidden; }
/* La tela diventa toccabile solo a scena pronta: prima, alzarla scoprirebbe la
   schermata sbagliata — il difetto che questa tela esiste per chiudere. */
.boot-sipario.is-pronto { cursor: pointer; }
.boot-sipario.is-aperto { pointer-events: none; }
.boot-tela {
  position: absolute; top: 0; bottom: 0; width: 51%;
  /* lo stesso velluto del sipario d'attesa, e per la stessa ragione un rosso
     suo: un sipario è un oggetto, non segue il tema */
  background: repeating-linear-gradient(90deg, #6f2424 0 .9rem, #491818 .9rem 1.8rem);
  transition: transform .85s cubic-bezier(.65, .02, .32, 1);
}
.boot-sx { left: 0; border-inline-end: 2px solid var(--gold); }
.boot-dx { right: 0; border-inline-start: 2px solid var(--gold); }
.boot-sipario.is-aperto .boot-sx { transform: translateX(-100%); }
.boot-sipario.is-aperto .boot-dx { transform: translateX(100%); }
/* il medaglione al centro, come lo stemma sul drappo: si spegne prima che le
   tele si scostino, o resterebbe sospeso sul vuoto */
/* Il centro: medaglione, epigrafe e invito in colonna. Era tutto in posizione
   assoluta, e con tre elementi uno sopra l'altro serviva una colonna vera. */
.boot-centro {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  width: min(92%, 30rem); text-align: center;
}
.boot-epi { opacity: 0; transition: opacity .8s ease-out .2s; }
.boot-sipario.is-pronto .boot-epi { opacity: 1; }
/* l'epigrafe sulla tela: chiara sul velluto, non i colori del tema */
.boot-epi .epi-frase { color: #f4e6c8; font: italic 1.05rem/1.6 var(--serif); margin: 0 0 .5rem; }
.boot-epi .epi-chi { color: var(--gold); font: .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.boot-marchio {
  width: 5.5rem; height: 5.5rem; border-radius: 26%; object-fit: cover;
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .8);
  animation: boot-respiro 2.4s ease-in-out infinite;
  transition: opacity .3s ease-out;
}
.boot-sipario.is-aperto .boot-centro { opacity: 0; transition: opacity .3s ease-out; }
.boot-sipario.is-aperto .boot-marchio { animation: none; }
/* L'invito: compare quando la scena è pronta, in oro sotto il medaglione.
   Non è un pulsantino — la maniglia è tutta la tela — ma il testo dice il
   gesto, perché una tela muta non si sa che si può alzare. */
.boot-invito {
  margin: 0; padding: .55rem 1.3rem; border: 1px solid var(--gold); border-radius: 999px;
  font: 600 .95rem var(--sans); letter-spacing: .04em; color: #f4e6c8;
  background: rgba(18, 13, 8, .45);
  opacity: 0; transition: opacity .5s ease-out;
  white-space: nowrap;
}
.boot-sipario.is-pronto .boot-invito { opacity: 1; animation: boot-invito 2.8s ease-in-out infinite; }
.boot-sipario.is-aperto .boot-invito { opacity: 0; animation: none; }
@keyframes boot-invito {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 138, 0); }
  50% { box-shadow: 0 0 18px 2px rgba(255, 214, 138, .22); }
}
@keyframes boot-respiro {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .boot-tela { transition: opacity .3s ease-out; }
  .boot-marchio { animation: none; }
  .boot-sipario.is-pronto .boot-invito { animation: none; }
  .boot-sipario.is-aperto .boot-tela { transform: none; opacity: 0; }
  .boot-sipario.is-aperto { opacity: 0; transition: opacity .3s ease-out; }
}

/* ============================================================================
   LA MAPPA DEGLI IDIOMI (app/public/mappa.js) — parte 2, 3 settembre 2026.

   Progettata per 375-430 px in verticale, e su desktop è la STESSA colonna:
   nessun layout separato. Le azioni stanno in fondo (zona del pollice), i
   bersagli sono ≥ 44×44 px con ≥ 8 px di distanza, e un round entra in una
   schermata — durante il giro non si scorre. Token e tipografia sono quelli di
   sopra: nessuna palette nuova.
   ========================================================================== */

/* --- la testa: la serie e il giro di oggi --------------------------------- */
.mp-testa {
  display: flex; gap: .8rem; margin-top: 1.1rem;
}
.mp-serie, .mp-oggi {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .7rem .5rem; border-radius: .7rem;
  background: var(--card); border: 1px solid var(--line);
}
.mp-serie-n, .mp-oggi-n {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.mp-serie-l, .mp-oggi-l {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.mp-ripasso {
  margin: .7rem 0 0; padding: .6rem .8rem; border-radius: .5rem;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  font-size: .95rem;
}

/* --- le città, una sotto l'altra come tappe ------------------------------- */
.mp-citta { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }

/* --- il sentiero: le città come caselle, il Globe in fondo (04/09/2026) ------ */
.mp-grado { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; margin: .6rem 0 .2rem; padding: .55rem .8rem; border-radius: .6rem; background: var(--card); border: 1px solid var(--line); }
.mp-grado-l { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mp-grado-n { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--gold); }
.mp-grado-p { flex-basis: 100%; color: var(--muted); font-size: .82rem; }
.mp-sentiero { position: relative; margin: .6rem 0 .4rem; }
.mp-linea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mp-linea path { fill: none; stroke-width: 3px; stroke-linecap: round; }
.mp-linea-fatta { stroke: var(--gold); }
.mp-linea-resto { stroke: var(--line); stroke-dasharray: 6 7; }
.mp-nodo { position: absolute; transform: translate(-50%, -30px); width: 44%; display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; }
.mp-cerchio {
  width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.25rem;
  background: var(--card); border: 2px solid var(--line); color: var(--muted);
  box-shadow: var(--shadow-1); touch-action: manipulation;
}
.mp-cerchio:disabled { cursor: default; }
.mp-nodo.is-fatta .mp-cerchio { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.mp-nodo.is-aperta .mp-cerchio { border-color: var(--accent); color: var(--text); animation: mp-pulsa 1.8s ease-in-out infinite; }
.mp-nodo.is-chiusa { opacity: .55; }
.mp-nodo-globe .mp-cerchio { width: 76px; height: 76px; font-size: 1.6rem; border-style: dashed; }
.mp-nodo-globe.is-aperta .mp-cerchio { border-style: solid; border-color: var(--gold); color: var(--gold); }
.mp-nodo-nome { font-family: var(--serif); font-weight: 700; font-size: .98rem; line-height: 1.2; margin-top: .25rem; }
.mp-nodo-sotto { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
/* La barra dei passi sotto la casella, e la riga che dice cosa manca. */
.mp-nodo-barra { width: 68px; height: 4px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin-top: .15rem; }
.mp-nodo-serve { color: var(--muted); font-size: .74rem; line-height: 1.3; margin-top: .2rem; max-width: 15rem; }
.mp-nodo-serve.is-ok { color: var(--gold); }
.mp-nodo.is-superata .mp-cerchio { border-color: var(--gold); color: var(--gold); }
/* L'uscita dal giro: piccola, in cima, e non somiglia a un pulsante di gioco. */
.gh-esci { margin-inline-start: auto; min-height: 32px; padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: .8rem; cursor: pointer; touch-action: manipulation; }
.game-over.is-super .game-end-t { color: var(--gold); }
.game-over.is-mancato .game-end-t { color: var(--accent); }
.mp-vai-nodo { width: auto; min-height: 36px; padding: .35rem .9rem; margin-top: .3rem; font-size: .9rem; }
@keyframes mp-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(122, 47, 47, .45); } 50% { box-shadow: 0 0 0 9px rgba(122, 47, 47, 0); } }

/* --- la scheda sotto il sentiero, e i tocchi (04/09/2026, secondo giro) ------- */
.mp-cerchio { transition: transform .12s ease, border-color .12s ease; }
.mp-cerchio:active { transform: scale(.94); }
/* La casella SCELTA: un anello dorato, così si vede di quale parla la scheda. */
.mp-nodo.is-scelta .mp-cerchio { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
.mp-nodo.is-aperta.is-scelta .mp-cerchio { animation: none; }
/* La pedina: dove sei. Sta sopra il cerchio e oscilla piano. */
.mp-pedina { position: absolute; top: -26px; font-size: 1.35rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); animation: mp-pedina 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes mp-pedina { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.mp-dettaglio { margin-top: .4rem; padding: 1rem 1.1rem 1.1rem; border-radius: .8rem; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.mp-dettaglio.is-entrata { animation: mp-entra .28s ease-out; }
@keyframes mp-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mp-det-tappa { margin: 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mp-det-nome { margin: .15rem 0 .1rem; font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; }
.mp-det-stato { margin: 0 0 .7rem; font-size: .85rem; color: var(--muted); }
.mp-det-stato.is-ok { color: var(--gold); }
.mp-det-l { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mp-det-conti { display: flex; gap: 1rem; margin: .2rem 0 .5rem; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.mp-det-serve { margin: .3rem 0 .6rem; font-size: .92rem; line-height: 1.4; }
.mp-det-serve.is-ok { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .mp-pedina, .mp-dettaglio.is-entrata { animation: none; } }
@media (prefers-reduced-motion: reduce) { .mp-nodo.is-aperta .mp-cerchio { animation: none; } }
.mp-tappa {
  padding: .9rem 1rem; border-radius: .7rem;
  background: var(--card); border: 1px solid var(--line);
  opacity: .55;
}
.mp-tappa.is-aperta { opacity: 1; box-shadow: var(--shadow-1); }
.mp-tappa.is-fatta { border-color: var(--gold); }
.mp-tappa-riga { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.mp-tappa-nome { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
.mp-tappa-n { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.mp-barra { height: 5px; border-radius: 99px; background: var(--bg); margin: .5rem 0 .4rem; overflow: hidden; }
.mp-barra-in { display: block; height: 100%; background: var(--gold); }
.mp-buffone { margin: .3rem 0 .6rem; display: flex; flex-direction: column; gap: .15rem; }
.mp-buffone-nome { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.mp-buffone-verso { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: .92rem; line-height: 1.35; }
.mp-chiusa { margin: .2rem 0 0; color: var(--muted); font-size: .85rem; }
.mp-vai {
  width: 100%; min-height: 44px; margin-top: .2rem;
  padding: .6rem 1.1rem; border-radius: .55rem; cursor: pointer; font-weight: 600;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  touch-action: manipulation;
}
.mp-globe { border-style: dashed; }
.mp-globe-d { margin: .3rem 0 .7rem; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.mp-back { margin-bottom: .8rem; min-height: 44px; }
.mp-tag { color: var(--gold); }

/* --- il giro: un round, una schermata ------------------------------------- */
.mp-round { display: flex; flex-direction: column; padding: 1rem 1rem 1.1rem; }

/* RICONOSCI: la carta si trascina a destra o a sinistra, e i due significati
   restano toccabili — il trascinamento da solo escluderebbe la tastiera e i
   lettori di schermo, e su desktop non esiste. `pan-y` lascia alla pagina lo
   scorrimento verticale dentro la carta. */
/* La carta è alta quanto basta: con 7,5rem di altezza minima il round del
   riconoscimento, barra degli aiuti compresa, sforava la schermata di 59 px a
   375×667 — e la prima cosa da fare diventava scorrere. */
.mp-carta {
  display: grid; place-items: center; text-align: center;
  min-height: 5.6rem; margin: .45rem 0 .7rem; padding: .9rem .9rem;
  border-radius: .8rem; background: var(--bg); border: 1px solid var(--gold);
  touch-action: pan-y; user-select: none; cursor: grab;
  transition: transform .18s ease, border-color .18s ease;
}
.mp-carta.is-sx { border-color: var(--accent); }
.mp-carta.is-dx { border-color: #4c7a45; }
.mp-carta-forma { font-family: var(--serif); font-size: 1.35rem; line-height: 1.25; }
.mp-scelte { display: flex; flex-direction: column; gap: .45rem; }
.mp-scelta {
  min-height: 44px; padding: .6rem .8rem; border-radius: .55rem; cursor: pointer; text-align: start;
  background: var(--card); border: 1px solid var(--line); color: var(--fg);
  font-size: 1rem; line-height: 1.4; touch-action: manipulation;
}
.mp-scelta.is-right { border-color: #4c7a45; background: rgba(96, 150, 86, .16); font-weight: 600; }
.mp-scelta.is-wrong { border-color: var(--accent); background: rgba(122, 47, 47, .12); }
.mp-scelta:disabled { cursor: default; }

/* LA CANDELA è una forma css che si accorcia: nessuna immagine, e l'altezza in
   transizione è tutto il movimento che serve.

   L'ALTEZZA SI SCRIVE IN PIXEL, non in percentuale: dentro un grid la
   percentuale non si risolveva e la cera non compariva affatto — restava la
   fiamma sospesa nel vuoto. Visto dal vivo a 375×667 il 3/9/2026. */
.mp-candela {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 56px; margin: .1rem 0 .4rem;
}
.mp-fiamma {
  width: 9px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 65%, #ffd58a, var(--gold));
  box-shadow: 0 0 12px rgba(255, 190, 90, .55);
  margin-bottom: 2px;
}
.mp-cera {
  width: 16px; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 45%, var(--card)), var(--card));
  border: 1px solid var(--line); border-bottom: none;
  transition: height .25s ease;
}
.mp-candela.is-scossa { animation: mp-scossa .3s ease; }
@keyframes mp-scossa {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
/* La frase intera a caselle (04/09/2026): le parole sono blocchi che vanno a
   capo interi, come le parole di un verso. Le caselle sono strette perché un
   verso di sessanta lettere deve stare in tre righe su un telefono. */
.mp-frase { display: flex; flex-wrap: wrap; justify-content: center; row-gap: .5rem; column-gap: .55rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; margin: .3rem 0 .1rem; }
.mp-spazio { display: none; }
/* Il significato È la domanda della candela, ma su una schermata sola deve
   stare in tre righe: qui pesa meno che nel gesto del riconoscimento. */
.mp-round .mp-senso { font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; margin: .1rem 0 .3rem; }
/* «Out, out, brief candle» si dice una volta sola, e sta su due righe sue: il
   verso e la regola erano attaccati («…candle!»Ogni errore…»). */
.mp-candela-verso { margin: .1rem 0 .5rem; }
.mp-candela-q { display: block; font-family: var(--serif); font-style: italic; color: var(--gold); font-size: .98rem; }
.mp-candela-n { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; margin-top: .15rem; }
.mp-parola { display: inline-flex; gap: .14rem; align-items: baseline; vertical-align: baseline; }
.mp-casella {
  display: inline-block; min-width: .92rem; border-bottom: 2px solid var(--gold);
  text-align: center; font-weight: 700; text-transform: uppercase;
}
.mp-casella.is-piena { border-bottom-color: var(--line); }
/* Le due sbagliate che il buffone toglie: restano al loro posto, spente. */
.mp-scelta.is-via { opacity: .32; text-decoration: line-through; }
.mp-segno { display: inline-block; }
.mp-nota { color: var(--muted); font-size: .82rem; text-align: center; margin: .2rem 0 0; }
.mp-vite { color: var(--muted); font-size: .75rem; text-align: center; letter-spacing: .06em; text-transform: uppercase; margin: .2rem 0 .3rem; }

/* LA TASTIERA È NOSTRA, mai quella di sistema: su iOS coprirebbe metà schermo e
   suggerirebbe la parola che si sta indovinando. Tre file, tasti ≥ 44 px. */
.mp-tasti { display: flex; flex-direction: column; gap: .3rem; margin-top: auto; padding-top: .2rem; }
.mp-fila { display: flex; gap: .25rem; justify-content: center; }
.mp-tasto {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: .5rem 0;
  border-radius: .45rem; cursor: pointer; touch-action: manipulation;
  background: var(--card); border: 1px solid var(--line); color: var(--fg);
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
}
.mp-tasto:disabled { opacity: .35; cursor: default; }
.mp-tasto.is-right { border-color: #4c7a45; background: rgba(96, 150, 86, .18); opacity: 1; }
.mp-tasto.is-wrong { border-color: var(--accent); opacity: .5; }
.mp-forma { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; margin: .2rem 0 .3rem; }

/* Chi ha chiesto meno movimento non ha bisogno di una candela che ondeggia né
   di una carta che ruota: restano il colore e la posizione, che bastano. */
@media (prefers-reduced-motion: reduce) {
  .mp-carta, .mp-cera { transition: none; }
  .mp-candela.is-scossa { animation: none; }
}

/* --- il verso del giorno --------------------------------------------------
   Sei righe di caselle e la stessa tastiera della candela. I colori sono i
   token dell'app, non quelli di Wordle: verde per «al suo posto», ocra per
   «c'è ma altrove», e il fondo della pagina per «non c'è». */
.mp-vdg { border-style: solid; }
.vdg-griglia { display: flex; flex-direction: column; gap: .3rem; align-items: center; margin: .5rem 0 .3rem; }
.vdg-riga { display: flex; gap: .3rem; }
.vdg-c {
  display: grid; place-items: center;
  width: 2.05rem; height: 2.05rem; border-radius: .35rem;
  border: 1px solid var(--line); background: var(--bg);
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700; text-transform: uppercase;
}
.vdg-c.is-bozza { border-color: var(--gold); }
.vdg-c.is-giusta { border-color: #4c7a45; background: rgba(96, 150, 86, .3); }
.vdg-c.is-altrove { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 28%, var(--bg)); }
.vdg-c.is-fuori { opacity: .45; }
.mp-tasto.is-forse { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--card)); opacity: 1; }
.mp-tasto-largo { flex: 2 1 0; font-family: var(--sans); font-size: .9rem; }
/* La griglia da copiare quando gli appunti non ci sono: si seleziona a mano. */
.vdg-testo {
  margin: .5rem 0 0; padding: .6rem .8rem; border-radius: .5rem;
  background: var(--bg); border: 1px solid var(--line);
  font-family: ui-monospace, Menlo, monospace; font-size: .95rem; line-height: 1.3;
  user-select: all; white-space: pre;
}

/* --- i tre aiuti ----------------------------------------------------------
   Pulsanti veri e non icone misteriose: chi gioca la prima volta deve capire
   che cosa sta per spendere. Restano visibili anche da spenti — sapere che
   cosa non si ha più fa parte del gioco. */
/* UNA RIGA SOLA, TRE PULSANTI. Con `flex: 1 1 8rem` a 375 px andavano a capo e
   la barra prendeva due righe: il round usciva dalla schermata proprio quando
   chi gioca ha bisogno di vedere domanda e opzioni insieme. */
.ai-barra { display: flex; gap: .35rem; margin-top: .7rem; }
.ai-tasto {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: .45rem .3rem;
  border-radius: .5rem; cursor: pointer; touch-action: manipulation;
  background: none; border: 1px dashed var(--gold); color: var(--gold);
  font-size: .72rem; line-height: 1.2; hyphens: auto;
}
.ai-tasto:disabled { cursor: default; }
.ai-tasto.is-speso { opacity: .35; border-style: solid; }
/* il pubblico che non c'è ancora: spento ma leggibile, perché la scritta è il messaggio (27/09/2026) */
.ai-tasto.is-assente { opacity: .6; border-style: dotted; color: var(--muted); }
.ai-nota { color: var(--muted); font-size: .88rem; margin: .45rem 0 0; line-height: 1.4; }
.ai-buffone {
  margin: .7rem 0 .2rem; padding: .7rem .9rem; border-radius: .5rem;
  background: color-mix(in srgb, var(--gold) 8%, var(--bg));
  border: 1px dashed var(--gold);
}
.ai-buffone-h {
  display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .35rem;
}
.ai-riga { display: flex; gap: .5rem; margin: .15rem 0; font-size: .92rem; line-height: 1.4; }
.ai-et {
  flex: none; min-width: 4.6rem; font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); padding-top: .18rem;
}
/* Un'opzione tolta dal 50:50: resta al suo posto, spenta. Sparire cambierebbe
   la disposizione sotto il dito mentre si sta per toccare. */
.game-opt.is-tolta { opacity: .25; text-decoration: line-through; }
/* La barra del pubblico dentro l'opzione: quanti hanno scelto quella. */
.ai-quota { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.ai-quota-b { height: 4px; border-radius: 99px; background: var(--gold); min-width: 2px; }
.ai-quota-n { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Il premio: una riga, non un'animazione. È un credito, non una vittoria. */
.mp-premio {
  margin: .6rem 0 0; padding: .55rem .8rem; border-radius: .5rem;
  background: color-mix(in srgb, var(--gold) 14%, var(--bg));
  border: 1px solid var(--gold); color: var(--fg);
  font-size: .95rem; line-height: 1.4;
}
.mp-premio.is-tetto { background: var(--warn-bg); border-color: var(--warn-line); color: var(--muted); }

/* TELEFONI BASSI (iPhone SE: 667px di altezza). Con la testata a due righe e la
   scena a tutto schermo, titolo e scheda della guida si mangiavano la foresta.
   Tutto un po' più piccolo, e la scheda della guida più compatta. */
@media (max-width: 640px) and (max-height: 700px) {
  body.scena-piena .hero .journey-head h1 { font-size: 1.3rem; margin-bottom: .15rem; }
  body.scena-piena .hero .journey-head .sub { font-size: .88rem; }
  body.scena-piena .hero .journey-head .orn, body.scena-piena .hero .journey-head .ornament { display: none; }
  body.scena-piena .gd-card { padding: .6rem .8rem .65rem; }
  body.scena-piena .gd-verse { font-size: .95rem; line-height: 1.35; }
  body.scena-piena .gd-text, body.scena-piena .gd-gloss { font-size: .9rem; line-height: 1.35; }
  body.scena-piena .gd-text { margin-bottom: .5rem; }
  body.scena-piena .scene-stage .scene-ask .scene-q { font-size: .92rem; }
}

/* COLLAUDO UX DEL 07/09/2026 (formato telefono, tutte le sezioni) --------------
   Tre cose misurate, non a occhio: bersagli sotto i 32px (il muto delle
   schede era 21×21, i filtri della mappa emotiva 26px, i link del piede 16px)
   e il pannello «I monologhi principali» che era una riga di testo nudo con un
   triangolino, l'unico interruttore della pagina senza l'aria di un pulsante. */
.princ-box > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--strato, transparent); font-weight: 600;
}
.princ-box > summary:hover { border-color: var(--gold); }
.princ-box[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* il margine di tocco resta, ma il link torna in riga (26/09/2026): da blocco
   con 2,6px ai lati staccava le parole («nell' informativa sulla privacy .») */
.legal a { padding-block: .35rem; }
.gd-voice { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) {
  .emap-win-b, .emo-mode button, .emo-tabs button { min-height: 2.1rem; }
}

/* Durante un giro di gioco Jaques si ritira: sul telefono il suo pulsante
   copriva «Chiedi al buffone», il terzo aiuto (collaudo del 07/09/2026).
   E quel che l'app porta in vista con scrollIntoView lascia aria alla testata
   fissa, che altrimenti gli si posa sopra. */
@media (max-width: 640px) {
  /* `:not(.is-open)`: si ritira solo il PULSANTE. Con la regola su tutto `.cucw`
     anche il pannello spariva, e «Chiedi a Jaques» sotto un verso o nella scheda
     di cultura apriva una chat che nessuno vedeva (14/09/2026, Mauro: «il chiedi
     a Jaques dai giochi non funziona»). */
  body:has(.game-round) .cucw:not(.is-open) { display: none; }
}
.game-round, .scene-ask, .mp-mappa, .section-title, .palco, .ct-room, .ct-room-head { scroll-margin-top: 5.5rem; }

/* L'invito a scegliere un nome, dove starebbe il nome: sembra il nome, si
   tocca come un pulsante. */
.pf-name-invito { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline dotted; text-underline-offset: .2em; }
.pf-name-invito:hover { color: var(--gold); }

/* Sul telefono la ricerca fra le battute va su due righe: campo a tutta
   larghezza, tasto sotto a destra. In una riga sola il segnaposto si troncava
   a metà parola (collaudo del 07/09/2026). */
@media (max-width: 640px) {
  .cerca-form { flex-wrap: wrap; justify-content: flex-end; }
  .cerca-form .cerca-campo { flex: 1 1 100%; }
}

/* DUE GIOCHI, DUE INSEGNE (07/09/2026): il verso del giorno e il sentiero
   delle città non si confondono più. Un'intestazione sopra ciascuno, aria in
   mezzo, e il verso del giorno ha l'aria di un biglietto del giorno (bordo
   tratteggiato, candela), non di una tappa del sentiero. */
.mp-sezione { margin: 1.6rem 0 .6rem; font: .68rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: .6rem; }
.mp-sezione::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--gold) 28%, transparent); }
.mp-sezione-mappa { margin-top: 2.2rem; }
.mp-vdg { border-style: dashed; }
.mp-vdg .mp-tappa-nome::before { content: '🕯️ '; }

/* LE OPERE LETTE nella biblioteca di Puck: percentuale in testa, barra, e la
   lista del canone per genere con una spunta per opera. */
.ct-lette-testa { margin-bottom: .8rem; }
.ct-lette-h { margin: 0 0 .2rem; font-size: 1.05rem; }
.ct-lette-pct { margin: 0 0 .45rem; color: var(--muted); font: .9rem var(--sans); }
.ct-lette-barra { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; }
.ct-lette-pieno { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width .4s ease; }
.ct-lette.is-completa .ct-lette-h::after { content: ' ✦'; color: var(--gold); }
.ct-lette-g { margin: .9rem 0 .3rem; font: .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ct-lette-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ct-lette-lab { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; padding: .45rem .55rem; border-radius: 10px; cursor: pointer; }
.ct-lette-lab:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.ct-lette-cb { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); grid-row: 1 / span 2; margin: 0; }
.ct-lette-nome { font-family: var(--serif); font-size: 1rem; }
.ct-lette-sub { font: .74rem var(--sans); color: var(--muted); }
.ct-lette-lab:has(.ct-lette-cb:checked) .ct-lette-nome { color: var(--gold); }
.ct-carico { text-align: center; color: var(--muted); }

/* IL DIARIO DI ROSALIND, 11/09/2026: lo spunto positivo, la nota sotto la
   domanda, l'esercizio; frecce che dicono dove portano; sul telefono le due
   linguette «La tua pagina / La lettura». E la scheda dell'emozione in finestra. */
.d-reading-spunto { margin: .6rem 0 .9rem; padding: .7rem .85rem; border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, transparent); border-inline-start: 3px solid var(--gold); }
.d-reading-spunto p, .d-reading-ex p { margin: .2rem 0 0; font: 1rem/1.55 var(--serif); }
.d-reading-qnota { margin: .3rem 0 0; font: italic .82rem/1.5 var(--serif); color: var(--muted); }
.d-reading-ex { margin-top: .9rem; padding: .7rem .85rem; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.d-reading-ex .d-reading-qh::before { content: '✦ '; color: var(--accent); }
.dbook-arrow.dbook-arrow-t { width: auto; border-radius: 999px; padding: 0 .9rem; gap: .45rem; font: .82rem var(--sans); height: 2.5rem; }
.dbook-arrow-i { font: 1.15rem/1 var(--serif); }
.dbook-lati { display: flex; justify-content: center; gap: .4rem; margin: .6rem 0 0; }
.dbook-lato { font: .78rem var(--sans); letter-spacing: .04em; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.dbook-lato.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--fg); }
.dlg-emo { text-align: start; margin-top: .2rem; }
.dlg-emo-ex { margin: 0 0 .7rem; font: italic 1rem/1.5 var(--serif); }
.dlg-emo-facts { margin: 0; display: grid; gap: .5rem; }
.dlg-emo-facts dt { font: .68rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.dlg-emo-facts dd { margin: .1rem 0 0; font: .92rem/1.5 var(--sans); }
@media (max-width: 640px) {
  .dbook-arrow.dbook-arrow-t .dbook-arrow-l { max-width: 7.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbook-pos { min-width: 0; font-size: .72rem; }
  /* a 320px le due frecce con la scritta e la posizione in mezzo non ci
     stavano: uscivano di 20px per lato (26/09/2026). Sul telefono la
     posizione sale su una riga sua, e sotto restano le due frecce intere. */
  .dbook-nav { flex-wrap: wrap; gap: .5rem .8rem; }
  .dbook-pos { order: -1; flex-basis: 100%; }
}
.dlg-emo-apri { margin-top: .9rem; font: .82rem var(--sans); color: var(--accent); background: none; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; }
.dlg-notice .dlg-msg:empty { display: none; }

/* Il quadro OTA nel cockpit. */
.admin-ota { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: .9rem 1.1rem; }
.admin-ota-h { margin: 0 0 .6rem; font-size: 1rem; }
.admin-ota-r { display: flex; gap: .8rem; font: .86rem/1.6 var(--sans); }
.admin-ota-l { color: var(--muted); min-width: 11rem; }
.admin-ota-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; }
.admin-ota-sel, .admin-ota-quota { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--fg); }
.admin-ota-quota { width: 4.5rem; }
.admin-ota-b { font: .82rem var(--sans); padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--gold); background: transparent; color: var(--fg); cursor: pointer; }
.admin-ota-b.is-rosso { border-color: var(--accent); color: var(--accent); }

/* I ROUND DI CULTURA e gli aiuti spiegati (14/09/2026). */
.mp-carta.is-cultura .mp-carta-forma { font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0; text-transform: none; }
.mp-scelte.is-icone { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.mp-scelte.is-icone .mp-scelta { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .9rem .6rem; text-align: center; }
.mp-scelta-i { width: 2.2rem; height: 2.2rem; color: var(--gold); }
.mp-cult-opera { font-weight: 700; }
.ai-barra { flex-wrap: wrap; }
.ai-tasto { display: flex; flex-direction: column; align-items: center; gap: .15rem; flex: 1 1 8rem; }
.ai-tasto-n { font-weight: 600; }
.ai-tasto-s { font: .68rem/1.25 var(--sans); color: var(--muted); letter-spacing: 0; text-transform: none; }
.ai-tasto:disabled .ai-tasto-s { opacity: .6; }
/* Il castello nella foresta a tutto schermo: una lanterna col nome, come i sentieri. */
/* Il castello sta SOPRA i sentieri, in disparte (14/09/2026, Mauro: «è una
   cosa secondaria, non deve distogliere l'attenzione dai cammini»): più piccolo
   e smorzato delle lanterne, senza alone, nel cielo accanto al maniero. */
body.scena-piena .journey .jhouse.is-lanterna { display: block; padding: .22rem .55rem .26rem; border-radius: 10px; background: color-mix(in srgb, var(--scene-card-bg) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--scene-card-line) 60%, transparent); box-shadow: none; opacity: .85; z-index: 4; }
body.scena-piena .journey .jhouse-l { font: 500 .66rem/1.2 var(--sans); letter-spacing: .04em; color: var(--scene-card-muted); white-space: nowrap; }
.tab-castello .icn-t { width: 1.3em; height: 1.3em; }
.tab-castello span { white-space: nowrap; }

/* I due gesti sotto il verso della lettura: metti via, chiedi a Jaques. */
.d-reading-azioni { margin-top: .5rem; justify-content: flex-start; }

/* La riga d'attesa sulla tela, mentre il server si sveglia: più smorzata dell'invito. */
.boot-invito.is-attesa { opacity: .6; font-style: italic; font-weight: 400; border-color: transparent; background: none; white-space: normal; }

/* --- «Shakespeare o no?»: la carta da trascinare, i timbri, le porte (15/09/2026) --- */
.bd-scena { position: relative; padding: .4rem 0 .2rem; touch-action: pan-y; }
.bd-carta { position: relative; overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; min-height: 9.5rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.6rem 1.3rem; transition: transform .38s cubic-bezier(.2, .9, .3, 1.15), opacity .3s; will-change: transform; }
.bd-carta.is-presa { transition: none; cursor: grabbing; }
.bd-carta.is-vola-dx { transform: translateX(600px) rotate(28deg) !important; opacity: 0; }
.bd-carta.is-vola-sx { transform: translateX(-600px) rotate(-28deg) !important; opacity: 0; }
.bd-frase { font-size: 1.3rem; }
.bd-timbro { position: absolute; top: .7rem; padding: .25rem .7rem; border: 3px solid; border-radius: 8px; font: 800 .95rem var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .08s; }
.bd-timbro.is-si { right: .7rem; color: var(--gold); border-color: var(--gold); transform: rotate(12deg); }
.bd-timbro.is-no { left: .7rem; color: var(--accent); border-color: var(--accent); transform: rotate(-12deg); }
.bd-fila { position: absolute; bottom: .5rem; right: .8rem; font: 600 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.bd-hint { margin: .2rem 0 .5rem; text-align: center; font-size: .8rem; color: var(--muted); }
.bd-scelte { flex-direction: row; gap: .6rem; }
.bd-scelta { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 600; }
.bd-scelta.is-si { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.bd-scelta.is-no { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.bd-freccia { font-size: 1.3rem; line-height: 1; opacity: .7; }
.bd-porte { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 .3rem; }
.bd-porta { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); font: 600 .84rem var(--sans); cursor: pointer; margin: 0; }
.bd-porta:hover { border-color: var(--gold); }
.bd-porta-i { width: 1.05em; height: 1.05em; }
.bd-card { margin: 1rem auto .4rem; max-width: 22rem; padding: 1.1rem 1.2rem 1rem; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--card) 88%, var(--gold)), var(--card)); text-align: center; display: grid; gap: .3rem; }
.bd-card-h { font: 600 .74rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.bd-card-n { margin: 0; font: 700 2.6rem/1 var(--serif); }
.bd-card-v { margin: 0; font: italic 1.05rem var(--serif); }
.bd-card-marchio { font: 700 .8rem var(--serif); letter-spacing: .04em; opacity: .7; }
.bd-sfida { margin-top: .4rem; justify-self: center; }

/* La carta della raffica nella mappa: oro, come le lanterne del gioco. */
.mp-raffica { border-style: solid; border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.mp-raffica .mp-tappa-nome::before { content: '🃏 '; }

/* In ritratto (telefono e iPad verticale) il castello ha la sua lanterna: lo stendardo sul maniero sparisce, o compare due volte (21/09/2026). */
.journey[data-ritratto="1"] .jflag { display: none; }

/* Il pulsante «Condividi», accanto alla stellina: stessa famiglia del fav-btn. */
.sh-btn { display: inline-flex; align-items: center; gap: .35rem; margin: .4rem .4rem 0 0; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 600 .78rem var(--sans); cursor: pointer; }
.sh-btn:hover { border-color: var(--gold); color: var(--gold); }
.sh-btn-i { width: 1em; height: 1em; }

/* La striscia dell'aggiornamento pronto: in basso, sopra la zona sicura, un tocco e si installa. */
.ota-striscia { position: fixed; left: .8rem; right: .8rem; bottom: calc(.8rem + var(--sab)); z-index: 70; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem .6rem 1rem; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-2); font: 600 .88rem var(--sans); animation: rise-in .35s ease-out both; }
.ota-striscia span { flex: 1 1 auto; }
.ota-striscia-b { padding: .4rem .8rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 .82rem var(--sans); cursor: pointer; }
.ota-striscia-x { width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
/* Su telefono la striscia sta SOPRA il ritratto di Jaques, non sopra di lui, e
   si ritira mentre il suo pannello è aperto (copriva la casella «Che cosa vuoi
   sapere?», 23/09/2026). Sta qui e non nel blocco del telefono perché a pari
   peso vince l'ultima riga. */
@media (max-width: 640px) {
  .ota-striscia { bottom: calc(5.4rem + var(--sab)); }
  body:has(.cucw.is-open) .ota-striscia { display: none; }
}

.bd-trad { font-style: italic; }
.bd-spiega { margin-top: .5rem; }

.bd-spiega.is-attesa { opacity: .7; font-style: italic; }

/* Nelle lingue da destra a sinistra la carta resta sinistra→destra: il gesto è
   fisso (destra = Shakespeare) e i pulsanti e i timbri devono stare dalla stessa
   parte del gesto (23/09/2026, prova in arabo). */
.bd-scena, .bd-scelte { direction: ltr; }

/* A 320px (iPhone SE prima serie, Android piccoli) la scritta diventava «Yo…»:
   mancavano 37px (26/09/2026). La scritta resta — Mauro la vuole —, si
   stringono margini, marchio e spazi; i comandi restano sopra i 36px. */
@media (max-width: 360px) {
  body { padding-inline: .55rem; }
  .topbar { padding-inline: .45rem; gap: .25rem; }
  .topbar .brand { gap: .3rem; }
  .topbar .brandtext { font-size: 1rem; }
  .brandmark { width: 1.6rem; height: 1.6rem; }
  .topbar .controls, .topbar #account { gap: .2rem; }
  .topbar .who { min-width: 40px; }
}

/* I VERSI INGLESI IN UNA PAGINA ARABA (26/09/2026): senza plaintext il paragrafo
   prende la direzione della pagina, e virgolette e punteggiatura finali saltano
   dalla parte sbagliata («”meat it feeds on» nella vetrina). Con plaintext la
   direzione la decide la prima lettera: inglese a sinistra, arabo a destra. */
.cucw-verse, .d-reading-verse, .game-quote, .fav-verse, .ab-verso, .ab-fonte,
.mp-buffone-verso, .mp-candela-verso, .quote-ctx, .quote-who { unicode-bidi: plaintext; }

/* LA BARRA IN BASSO, SUL TELEFONO (26/09/2026, Mauro, sull'esempio di un'app
   di lettura): le sezioni diventano una fila fissa in fondo, icona sopra e nome
   corto sotto, tutte in vista senza scorrere. La Foresta è la prima, col suo
   albero; il castello dice solo «Castello». Sopra la barra salgono Jaques e gli
   avvisi; mentre si scrive la barra si toglie, o starebbe sopra la tastiera.
   Da 641px in su resta la barra in alto, coi nomi interi. */
.tab-corto, .icn-albero { display: none; }
@media (max-width: 640px) {
  body:has(#app-nav:not([hidden])) { padding-bottom: calc(4.6rem + var(--sab)); }
  nav#app-nav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 55; margin: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: .3rem .2rem calc(.3rem + var(--sab));
    background: color-mix(in srgb, var(--card) 96%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); border-bottom: 0;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
    overflow: visible; scroll-snap-type: none;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  nav#app-nav[hidden] { display: none; }
  nav#app-nav > .tab, nav#app-nav > .backbtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
    margin: 0; padding: .3rem 0 .2rem; min-width: 0; min-height: 3.2rem;
    font: 500 .64rem/1.1 var(--sans); letter-spacing: .01em; text-transform: none;
    color: var(--muted); background: none; border: 0; opacity: 1;
  }
  nav#app-nav > * > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  nav#app-nav .icn-t { width: 1.5rem; height: 1.5rem; opacity: .8; }
  nav#app-nav .tab.is-active { color: var(--gold); }
  nav#app-nav .tab.is-active .icn-t { opacity: 1; }
  nav#app-nav .tab.is-active::after { display: none; }
  nav#app-nav .tab-lungo { display: none; }
  nav#app-nav .tab-corto, nav#app-nav .icn-albero { display: block; }
  nav#app-nav .backbtn > svg:not(.icn-t) { display: none; }
  nav#app-nav > .a-meta { opacity: 1; }
  /* sopra la barra: Jaques e gli avvisi */
  body:has(#app-nav:not([hidden])) .cucw { bottom: calc(4.4rem + var(--sab)); }
  body:has(#app-nav:not([hidden])) .upd-toast,
  body:has(#app-nav:not([hidden])) .ota-striscia { bottom: calc(9rem + var(--sab)); }
  /* mentre si scrive la barra si toglie: sulla tastiera non serve, e la coprirebbe */
  body:has(:is(textarea, input:not([type]), input[type='text'], input[type='search'], input[type='email'], input[type='password'], [contenteditable='true']):focus) nav#app-nav,
  body.appena-scritto nav#app-nav { display: none; }
  body:has(:is(textarea, input:not([type]), input[type='text'], input[type='search'], input[type='email'], input[type='password'], [contenteditable='true']):focus) { padding-bottom: calc(1rem + var(--sab)); }
}
@media (max-width: 360px) {
  nav#app-nav > .tab, nav#app-nav > .backbtn { font-size: .6rem; letter-spacing: 0; }
  nav#app-nav .icn-t { width: 1.35rem; height: 1.35rem; }
}

/* a 320px «Domanda 1 di / 10» andava a capo (27/09/2026) */
@media (max-width: 360px) {
  .gh-dom { font-size: .8rem; }
  .gh-punti-n { font-size: 1.2rem; }
  .game-head.gh-partita { padding-inline: .55rem; }
}

/* CON ADMIN LE VOCI SONO OTTO (27/09/2026, foto di Mauro a 375px: «Prosp…»,
   «Rosali…»). Si stringono scritta e icona perché tutte stiano intere. */
@media (max-width: 640px) {
  nav#app-nav:has(#tab-admin:not([hidden])) > .tab,
  nav#app-nav:has(#tab-admin:not([hidden])) > .backbtn { font-size: .56rem; letter-spacing: -.01em; }
  nav#app-nav:has(#tab-admin:not([hidden])) .icn-t { width: 1.3rem; height: 1.3rem; }
}

/* la testata dei giri della mappa: la riga della città con «Esci», poi quella del Globe (28/09/2026) */
.gh-citta { margin-bottom: .3rem; align-items: center; }
.gh-dove { font: .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gh-citta .gh-esci { margin-inline-start: auto; }

/* LA «i» DEI PUNTI (28/09/2026): accanto a «Domanda n di m», toccata apre le regole */
/* il riquadro si appoggia alla testata (sticky, quindi posizionata), non alla «i»: partendo dalla «i» usciva a destra dallo schermo */
.gh-info { position: static; display: inline-block; margin-inline-start: .35rem; vertical-align: middle; }
.gh-info-b {
  width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid var(--gold);
  background: transparent; color: var(--gold); font: italic 700 .78rem/1 var(--serif);
  display: inline-grid; place-items: center; cursor: pointer; padding: 0;
}
.gh-info-b[aria-expanded='true'] { background: var(--gold); color: var(--bg); }
.gh-info-pop {
  position: absolute; z-index: 20; top: calc(100% + .35rem); inset-inline: 0;
  padding: .7rem .85rem .75rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2);
  font: 400 .82rem/1.45 var(--sans); color: var(--fg); white-space: normal; text-align: start;
}
.gh-info-h { margin: 0 0 .35rem; font: 700 .85rem var(--serif); color: var(--gold); }
.gh-info-pop ul { margin: 0; padding-inline-start: 1.05rem; display: grid; gap: .25rem; }
.gh-bonus { color: var(--gold); font-weight: 700; }

/* === LA CLASSIFICA GENERALE SUL PALCO DEL GLOBE (28/09/2026) ===========
   Sotto la mappa. Il cartellone, poi il palco: i «cieli» stellati retti da
   due colonne, la parete a graticcio della casa degli attori, le tende, le
   tavole del pavimento, il riflettore sul primo; sopra, i tre gradini. */
.cl { margin: 2.2rem 0 1rem; }
.cl-cartellone { text-align: center; margin-bottom: .9rem; }
.cl-kicker { margin: 0; font: 600 .7rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.cl-titolo { margin: .2rem 0 .25rem; font: 700 1.55rem/1.15 var(--serif); color: var(--fg); }
.cl-nota { margin: 0 auto; max-width: 30rem; font: italic .86rem/1.45 var(--serif); color: var(--muted); }
.cl-vuota { text-align: center; font: italic .95rem var(--serif); color: var(--muted); }

.cl-palco {
  position: relative; height: 345px; margin: 0 auto; max-width: 34rem;
  border-radius: 14px 14px 10px 10px; overflow: hidden; isolation: isolate;
  background: #2a1a10; box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 0 0 1px rgba(201,164,76,.35);
}
/* i cieli: il baldacchino dipinto di stelle, con l'orlo a festoni */
.cl-cieli {
  position: absolute; inset: 0 0 auto 0; height: 62px; z-index: 3;
  background:
    radial-gradient(circle at 12% 40%, #f4d98a 0 1.4px, transparent 2px),
    radial-gradient(circle at 30% 25%, #f4d98a 0 1.2px, transparent 2px),
    radial-gradient(circle at 47% 55%, #f4d98a 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 64% 30%, #f4d98a 0 1.2px, transparent 2px),
    radial-gradient(circle at 80% 50%, #f4d98a 0 1.4px, transparent 2px),
    radial-gradient(circle at 92% 22%, #f4d98a 0 1.1px, transparent 1.8px),
    linear-gradient(#16264a, #22386a);
  border-bottom: 3px solid #b8903c;
}
.cl-cieli::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
  background: radial-gradient(circle at 50% 0, #22386a 0 10px, transparent 10.5px) 0 0 / 24px 14px repeat-x;
  filter: drop-shadow(0 2px 0 #b8903c);
}
/* la parete della casa degli attori: intonaco e travi di quercia */
.cl-parete {
  position: absolute; inset: 62px 0 70px 0; z-index: 1;
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 22px), #1a0f08 calc(50% - 22px) calc(50% + 22px), transparent calc(50% + 22px)),
    repeating-linear-gradient(90deg, #4a2e1a 0 7px, transparent 7px 64px),
    repeating-linear-gradient(0deg, #4a2e1a 0 6px, transparent 6px 58px),
    linear-gradient(#e9dcc0, #d8c7a2);
}
/* la porta centrale in penombra e le tende rosse ai lati */
.cl-tenda { position: absolute; top: 58px; bottom: 60px; width: 22%; z-index: 2;
  background: repeating-linear-gradient(90deg, #7b1f1f 0 9px, #5a1515 9px 16px);
  box-shadow: inset 0 -30px 30px rgba(0,0,0,.35); }
.cl-tenda-sx { left: 0; border-radius: 0 0 60% 0; }
.cl-tenda-dx { right: 0; border-radius: 0 0 0 60%; }
/* le colonne dipinte a marmo che reggono i cieli */
.cl-colonna { position: absolute; top: 56px; bottom: 58px; width: 18px; z-index: 4;
  background: linear-gradient(90deg, #8a6a4a, #e8d8bb 40%, #b89a74 70%, #6e5238);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 4px 0 10px rgba(0,0,0,.35); }
.cl-colonna::before, .cl-colonna::after { content: ''; position: absolute; left: -5px; right: -5px; height: 9px; background: #b8903c; border-radius: 2px; }
.cl-colonna::before { top: -2px; }
.cl-colonna::after { bottom: -2px; }
.cl-colonna-sx { left: 9%; }
.cl-colonna-dx { right: 9%; }
/* il riflettore sul gradino più alto */
.cl-riflettore { position: absolute; z-index: 5; left: 50%; top: 40px; width: 240px; height: 290px; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255,236,170,.45), transparent 70%),
              conic-gradient(from 160deg at 50% 0, transparent 0deg, rgba(255,236,170,.22) 18deg, rgba(255,236,170,.22) 22deg, transparent 40deg);
  pointer-events: none; mix-blend-mode: screen; }
/* le tavole del palco, in prospettiva */
.cl-assi { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 2;
  background: repeating-linear-gradient(90deg, #7a4e2a 0 38px, #6a4222 38px 40px), linear-gradient(#8a5a32, #5c3a1e);
  background-blend-mode: multiply; border-top: 3px solid #3c2412;
  box-shadow: inset 0 12px 16px rgba(0,0,0,.35); }

/* il podio sulle tavole */
.cl-podio { position: absolute; z-index: 6; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; align-items: flex-end; gap: .35rem; padding: 0 5%; }
.cl-gradino { flex: 1 1 0; max-width: 8.5rem; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cl-faccia { position: relative; display: grid; place-items: center; margin-bottom: .25rem; }
.cl-faccia .av { border: 3px solid var(--cl-metallo, #c9a44c); box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.45); }
.cl-corona { position: absolute; top: -1.35rem; font-size: 1.35rem; color: #f2cf6a; text-shadow: 0 1px 0 #7a5a18, 0 0 10px rgba(255,220,120,.7); }
.cl-medaglia { position: absolute; bottom: -.35rem; right: -.35rem; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  display: grid; place-items: center; font: 700 .75rem var(--sans); color: #2a1a10;
  background: radial-gradient(circle at 35% 30%, #fff6d8, var(--cl-metallo, #c9a44c) 60%, #6e5226); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
/* nome e punti su un cartiglio scuro: sul muro chiaro della casa degli attori si leggevano male */
.cl-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .8rem var(--serif); color: #fbf1dc;
  background: rgba(26, 14, 6, .78); padding: .12rem .45rem .05rem; border-radius: 6px 6px 0 0; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.cl-punti { font: 700 .72rem var(--sans); color: #f2cf6a; background: rgba(26, 14, 6, .78); padding: .02rem .45rem .14rem; border-radius: 0 0 6px 6px; margin-bottom: .3rem; white-space: nowrap; }
.cl-blocco { width: 100%; display: grid; place-items: center; border-radius: 6px 6px 0 0;
  background: linear-gradient(#f3e6c8, #d9c49a); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12), 0 6px 10px rgba(0,0,0,.45);
  border: 1px solid #b8903c; border-bottom: 0; }
.cl-blocco-n { font: 700 1.5rem var(--serif); color: #7a5a18; }
.cl-1 { --cl-metallo: #d9b24a; }
.cl-2 { --cl-metallo: #c4c9cf; }
.cl-3 { --cl-metallo: #c07d45; }
.cl-1 .cl-blocco { height: 86px; }
.cl-2 .cl-blocco { height: 62px; }
.cl-3 .cl-blocco { height: 46px; }
.cl-gradino.is-me .cl-nome { color: #ffe39a; }
.cl-tu { margin-inline-start: .3rem; padding: 0 .35rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 700 .62rem var(--sans); letter-spacing: .03em; vertical-align: middle; }

/* la fila sotto il palco */
.cl-fila { list-style: none; margin: .9rem auto 0; padding: 0; max-width: 34rem; display: grid; gap: .4rem; }
.cl-riga { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cl-riga.is-me { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); }
.cl-rank { width: 1.6rem; text-align: center; font: 700 .95rem var(--serif); color: var(--muted); }
.cl-mezzo { flex: 1 1 auto; min-width: 0; display: grid; gap: .25rem; }
.cl-riga-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .88rem var(--sans); color: var(--fg); }
.cl-barra { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; }
.cl-barra-in { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), #e6c56e); }
.cl-riga-punti { font: 700 .95rem var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.cl-salto { text-align: center; color: var(--muted); letter-spacing: .3em; }
.cl-dove { text-align: center; margin: .7rem 0 0; font: 600 .85rem var(--sans); color: var(--muted); }
.cl-nome-manca { text-align: center; font-size: .82rem; color: var(--muted); }
@media (max-width: 380px) {
  .cl-palco { height: 315px; }
  .cl-podio { padding: 0 3%; gap: .25rem; }
  .cl-1 .cl-blocco { height: 72px; }
  .cl-2 .cl-blocco { height: 52px; }
  .cl-3 .cl-blocco { height: 38px; }
  .cl-titolo { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .cl-gradino { animation: cl-sale .6s ease-out both; }
  .cl-2 { animation-delay: .1s; }
  .cl-3 { animation-delay: .2s; }
}
@keyframes cl-sale { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* i punti del verso del giorno, a verso finito (28/09/2026) */
.mp-vdg-punti { text-align: center; font: 700 .9rem var(--sans); color: var(--muted); margin: .1rem 0 .5rem; }
.mp-vdg-punti.is-right { color: #b8862b; }

/* ==========================================================================
   IL LETTORE: le opere intere (28/09/2026). Uno strato a tutto schermo sopra la
   barra delle linguette (55) e sotto il pannello di Jaques (60): «Chiedi a
   Jaques» dalla barra apre la chat davanti alla pagina. Il TASTO di Jaques
   invece sparisce finché si legge (Mauro: «quando sei dentro l'opera puoi
   togliere Jaques»): torna solo se lo si chiama. Classi `lt-`, di nessun altro.
   ========================================================================== */
html.lt-aperto .cucw:not(.is-open) { display: none; }
.lt {
  position: fixed; inset: 0; z-index: 58;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  --lt-fs: 1.04rem;
  --lt-font: var(--serif);
  --gutter: 2.6rem;
}
.lt[data-carattere="sans"] { --lt-font: var(--sans); }
.lt[data-carattere="mono"] { --lt-font: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; }
.lt[data-numeri="0"] { --gutter: .2rem; }
.lt[data-numeri="0"] .lt-num { display: none; }

/* la testata: indietro · la scena · l'ingranaggio */
/* `header, main, footer { margin: 0 auto }` non la tocca: è un div */
.lt-testa {
  flex: none; display: flex; align-items: center; gap: .5rem;
  padding: calc(.45rem + var(--sat)) 12px .45rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, var(--bg));
}
.lt-tasto {
  flex: none; min-width: 40px; height: 40px; padding: 0 .55rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--fg);
  font: 600 .95rem var(--sans); cursor: pointer; touch-action: manipulation;
}
.lt-tasto:hover { color: var(--gold); }
.lt-tasto svg { width: 1.35rem; height: 1.35rem; }
.lt-freccia { font: 400 1.7rem/1 var(--serif); margin-top: -.15rem; }
.lt-indietro-l { font: 600 .95rem var(--sans); }
.lt-centro { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.lt-titolo { max-width: 100%; font: 600 .74rem var(--sans); letter-spacing: .04em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-centro:not(.ha-scelta) .lt-titolo { font: 700 1.05rem var(--serif); color: var(--fg); letter-spacing: 0; }
.lt-dove { max-width: 100%; display: inline-flex; align-items: center; gap: .3rem; font: 700 1rem var(--serif); overflow: hidden; white-space: nowrap; }
.lt-dove > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.lt-giu { font-size: .7rem; color: var(--gold); }
/* il menu delle scene sta SOPRA il nome della scena, trasparente: toccando il
   nome si apre la ruota del sistema */
.lt-scegli { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* il pannello delle opzioni */
.lt-opz {
  position: absolute; z-index: 2; top: calc(3.6rem + var(--sat)); inset-inline-end: 10px;
  width: min(20rem, calc(100vw - 20px)); padding: .9rem 1rem 1rem;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-2);
}
.lt-opz-h { margin: 0 0 .45rem; font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.lt-opz-riga { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.lt-a-meno { font: 700 .8rem var(--serif); border: 1px solid var(--line); }
.lt-a-piu { font: 700 1.25rem var(--serif); border: 1px solid var(--line); }
.lt-punti { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 .3rem; }
.lt-punto { width: 22px; height: 22px; border: 0; background: transparent; cursor: pointer; position: relative; }
.lt-punto::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--line); }
.lt-punto.is-on::after { inset: 4px; background: var(--gold); }
.lt-caratteri { gap: .4rem; }
.lt-car { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .3rem; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--fg); cursor: pointer; }
.lt-car.is-on { border-color: var(--gold); color: var(--gold); }
.lt-car-a { font-size: 1.2rem; }
.lt-car[data-carattere="serif"] .lt-car-a { font-family: var(--serif); }
.lt-car[data-carattere="sans"] .lt-car-a { font-family: var(--sans); }
.lt-car[data-carattere="mono"] .lt-car-a { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.lt-car-l { font: 600 .68rem var(--sans); }
.lt-interruttore { justify-content: space-between; margin: 0; font: 600 .9rem var(--sans); cursor: pointer; }
.lt-interruttore input { width: 1.2rem; height: 1.2rem; accent-color: var(--gold); }

/* il corpo */
.lt-corpo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 1.1rem 14px calc(3rem + var(--sab));
  /* la parola si prende col tocco: niente lente e niente menu del sistema */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lt.ha-barra .lt-corpo { padding-bottom: calc(11rem + var(--sab)); }
.lt-corpo > * { max-width: var(--reading); margin-inline: auto; }
.lt-attesa, .lt-guasto { color: var(--muted); text-align: center; margin-top: 3rem; font-style: italic; }
.lt-nota { color: var(--muted); font: italic .92rem/1.5 var(--serif); margin-bottom: 1.2rem; }

/* la biblioteca */
.lt-genere { font: 700 .78rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 1.6rem auto .6rem; }
.lt-opere { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; }
.lt-opera {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: start;
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg);
  cursor: pointer; touch-action: manipulation;
}
.lt-opera:hover { border-color: var(--gold); }
.lt-opera-t { font: 700 1rem/1.25 var(--serif); }
.lt-opera-s { font: .78rem var(--sans); color: var(--muted); }

/* la scena */
.lt-prima { display: block; margin: 0 auto .8rem; padding: .2rem 0; border: 0; background: transparent; color: var(--muted); font: 600 .8rem var(--sans); cursor: pointer; }
.lt-scena-h { font: 700 .8rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: .4rem auto .2rem; padding-inline-start: var(--gutter); }
.lt-luogo { font: italic 1rem/1.45 var(--serif); color: var(--muted); margin-bottom: 1.3rem; padding-inline-start: var(--gutter); }
.lt-did { font: italic calc(var(--lt-fs) * .88)/1.5 var(--serif); color: var(--muted); margin: .9rem auto; padding-inline-start: calc(var(--gutter) + 1.2rem); }
.lt-did-in { margin: .35rem 0; }
.lt-bat { margin: 1rem auto; border-radius: 10px; }
.lt-bat.is-cercata { background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--gold) 10%, transparent); }
.lt-chi { margin: 0 0 .2rem; padding-inline-start: var(--gutter); font: 700 .8rem var(--sans); letter-spacing: .08em; color: var(--gold); }

/* il verso: il numero nella gronda a sinistra, e il verso che sul telefono va
   a capo rientra, così si vede che è lo stesso verso */
.lt-v {
  position: relative; margin: 0;
  padding-inline-start: calc(var(--gutter) + 1.1em); text-indent: -1.1em;
  font: var(--lt-fs)/1.6 var(--lt-font);
}
.lt-v.lt-prosa { padding-inline-start: var(--gutter); text-indent: 0; margin-bottom: .4rem; }
.lt-v.lt-prosa.lt-senza-num { margin-bottom: 1.1rem; }
.lt-strofa { margin: 0 auto 1.1rem; }
.lt-sonetto { margin: 0 auto 2rem; }
/* il numero: nella prosa sta dove comincia la riga dell'edizione — un elemento
   assoluto senza `top` resta all'altezza a cui sarebbe stato nel testo */
.lt-num {
  position: absolute; inset-inline-start: 0; width: calc(var(--gutter) - .55rem);
  text-align: end; text-indent: 0;
  font: 500 .7rem/calc(var(--lt-fs) * 1.6) var(--sans); color: color-mix(in srgb, var(--muted) 75%, transparent);
  /* toccato, il numero prende il verso intero */
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lt-num b { font-weight: 500; display: inline-block; min-width: 1.6rem; text-align: center; line-height: 1.5rem; border-radius: 999px; }
.lt-num.is-on { color: var(--fg); }
.lt-num.is-on b { box-shadow: 0 0 0 1.5px var(--muted); }
.lt-d { font-style: italic; color: var(--muted); font-size: .88em; }

/* la parola: presa, sottolineata, annotata */
.w { border-radius: 5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.w.is-segno { text-decoration: underline 2px color-mix(in srgb, var(--gold) 80%, transparent); text-underline-offset: 4px; }
.w.is-nota { text-decoration-style: solid; background: color-mix(in srgb, var(--gold) 9%, transparent); }
.w.is-sel { background: color-mix(in srgb, var(--gold) 38%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 38%, transparent); }
.lt-nota-segno { display: inline-flex; vertical-align: -.1em; margin-inline-start: .15rem; padding: 0; width: 1.15em; height: 1.15em; border: 0; background: transparent; color: var(--gold); cursor: pointer; text-indent: 0; }
.lt-nota-segno svg { width: 100%; height: 100%; }

.lt-fine { margin: 2.4rem auto 1rem; text-align: center; }
.lt-avanti {
  padding: .75rem 1.3rem; border: 1px solid var(--gold); border-radius: 999px; background: transparent; color: var(--gold);
  font: 700 .92rem var(--sans); cursor: pointer; touch-action: manipulation;
}
.lt-avanti:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.lt-finis { font: italic 1.1rem var(--serif); color: var(--muted); }

/* la barra sotto la parola presa */
.lt-barra {
  position: absolute; z-index: 1; inset-inline: 10px; bottom: calc(10px + var(--sab));
  max-width: 34rem; margin-inline: auto;
  padding: .55rem .6rem .6rem;
  border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow-2);
  animation: rise-in .2s ease-out both;
}
.lt-barra-t { margin: .1rem .4rem .45rem; display: flex; flex-direction: column; gap: .1rem; }
.lt-barra-q { font: italic .92rem/1.35 var(--serif); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lt-barra-h { display: block; margin: 0 .4rem .45rem; font: .72rem var(--sans); color: var(--muted); }
/* parola · frase · verso */
.lt-modi { display: flex; gap: .3rem; margin: 0 .3rem .35rem; }
.lt-modo { flex: 1; padding: .35rem .2rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); font: 600 .78rem var(--sans); cursor: pointer; touch-action: manipulation; }
.lt-modo.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
/* la traduzione */
.lt-trad-dlg { width: min(32rem, calc(100vw - 24px)); }
.lt-trad-orig { margin: 0 0 .7rem; font: italic 1rem/1.5 var(--serif); color: var(--muted); }
.lt-trad-orig mark { background: color-mix(in srgb, var(--gold) 35%, transparent); color: var(--fg); border-radius: 4px; padding: 0 .1em; font-style: normal; }
.lt-trad-resa { margin: 0 0 .6rem; font: 1.08rem/1.55 var(--serif); }
.lt-trad-resa.is-attesa { color: var(--muted); font-style: italic; }
.lt-trad-resa.is-guasto { color: var(--accent); font-size: .95rem; }
.lt-trad-nota { margin: 0 0 .8rem; font: .75rem/1.4 var(--sans); color: var(--muted); }
.lt-barra-fila { display: flex; align-items: center; justify-content: space-between; gap: .2rem; }
.lt-b {
  /* sette tasti: si dividono la fila, da 48 px a scendere, perché a 320 ci stiano */
  flex: 1 1 0; min-width: 36px; max-width: 52px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 14px; background: transparent; color: var(--fg); cursor: pointer; touch-action: manipulation;
}
.lt-b:hover, .lt-b.is-on { color: var(--gold); }
.lt-b.is-on { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.lt-b svg { width: 1.55rem; height: 1.55rem; }
.lt-b-via { color: var(--muted); }
.lt-b-jaques { flex: none; width: 52px; max-width: none; height: 52px; border: 2px solid var(--gold); border-radius: 14px; background: color-mix(in srgb, var(--gold) 10%, var(--card)); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 30%, transparent); overflow: hidden; }
.lt-b-jaques .lt-b-ritratto { width: 100%; height: 100%; }

/* l'avviso breve: «Copiato», «Messo da parte nel castello» */
.lt-avviso {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(4.2rem + var(--sat));
  padding: .5rem 1rem; border-radius: 999px; background: var(--fg); color: var(--bg);
  font: 600 .85rem var(--sans); box-shadow: var(--shadow-2); animation: lt-appare .2s ease-out both; white-space: nowrap;
}

/* la nota */
.lt-nota-dlg { width: min(32rem, calc(100vw - 24px)); }
.lt-nota-h { margin: 0 0 .5rem; font: 700 1.1rem var(--serif); }
.lt-nota-q { margin: 0 0 .2rem; font: italic 1rem/1.45 var(--serif); }
.lt-nota-dove { margin: 0 0 .7rem; font: .78rem var(--sans); color: var(--muted); }
.lt-nota-area { width: 100%; box-sizing: border-box; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); font: 1rem/1.5 var(--serif); resize: vertical; }
.lt-nota-elimina { margin-inline-end: auto; color: var(--accent); }

/* le porte nella scheda dell'opera e sopra il canone */
.lt-porta { display: inline-flex; align-items: center; gap: .45rem; margin: .6rem 0 .2rem; padding: .55rem 1.1rem; border: 1px solid var(--gold); border-radius: 999px; background: transparent; color: var(--gold); font: 700 .9rem var(--sans); cursor: pointer; touch-action: manipulation; }
.lt-porta:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.lt-porta .icn, .lt-porta svg { width: 1.1em; height: 1.1em; }
.cerca-riga .lt-porta { margin: .4rem .4rem 0 0; padding: .3rem .7rem; font-size: .78rem; }
#biblioteca { margin: 0 0 1rem; }
/* nella scheda dell'opera la porta sta su una riga sua, non accanto a «La sinossi» */
.work > .lt-porta { display: flex; width: max-content; max-width: 100%; margin: .9rem 0 .4rem; }
@keyframes lt-appare { from { opacity: 0; } to { opacity: 1; } }
/* sugli schermi stretti «Biblioteca» lascia il posto al nome della scena: resta la freccia */
@media (max-width: 360px) { .lt-indietro-l { display: none; } }

/* ==========================================================================
   PUCK: la card che chiede e la ricerca gratuita unica (28/09/2026). La card è
   quella di Prospero (scene-ask + scene-form), con gli esempi da toccare; la
   ricerca sotto è un campo solo, con il cartellino «Gratis, sempre».
   ========================================================================== */
.scene-esempi { margin: .1rem 0 .5rem; }
.scene-esempi .chip { font-size: .8rem; }
.pk-finite { margin: .6rem 0 0; }
.puck-versi:empty { display: none; }
.puck-versi { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 1.4rem; }
.ricerca-unica { margin: 0 0 1.4rem; }
.ricerca-unica #filter { margin: 0; flex: 1; min-width: 0; }
.ricerca-unica .cerca-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.cerca-gratis {
  font: 700 .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: #3f7a45; border: 1px solid #9cc49f; background: #eef6ee; border-radius: 999px; padding: .15rem .55rem;
}
:root[data-theme='dark'] .cerca-gratis { color: #9fd3a3; border-color: #3f6b43; background: #17261a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .cerca-gratis { color: #9fd3a3; border-color: #3f6b43; background: #17261a; } }
.cerca-gruppo { margin: .8rem 0 .1rem; font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ricerca-unica .canon { margin: 0; }
/* il pulsante spento si vede spento: a letture finite Puck non risponde */
.scene-go:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }

/* ==========================================================================
   LA CARD DI COMANDO di Amleto e di Puck (28/09/2026, Mauro: «migliora la UX
   e la UI della sezione di Puck e di Amleto… molto user friendly ed
   esteticamente all'avanguardia»). La scena resta la copertina; la card è il
   posto dove si scrive: sta NEL FLUSSO e sale sul bordo della scena (come già
   sul telefono), così non può più uscire dal palco e coprire quello che segue
   — la card di Puck, cresciuta col campo e gli esempi, lo faceva sul computer.
   ========================================================================== */
@media (min-width: 861px) {
  .scene-stage .scene-ask.is-comando {
    position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    width: min(44rem, calc(100% - 3rem)) !important; max-width: none !important;
    margin: -7.5rem auto 0 !important; padding: 1.15rem 1.35rem 1.2rem;
    border-radius: 22px;
  }
  /* Amleto sta a sinistra sulle mura: la card a destra */
  #elsinore .scene-ask.is-comando { margin-inline: auto 1.5rem !important; }
  /* Puck: centrata e più larga — sale sul palco sotto i suoi piedi, le maschere restano in vista */
  #theatre .scene-ask.is-comando { width: min(52rem, calc(100% - 3rem)) !important; margin-inline: auto !important; }
}
.scene-ask.is-comando .scene-q { font-size: 1.22rem; line-height: 1.3; margin-bottom: .65rem; }
.scene-ask.is-comando .scene-verse { font-size: 1rem; }
/* gli esempi: una riga che scorre, sfumata a destra — tre o cinque idee pronte, senza mezza schermata */
.scene-ask.is-comando .scene-esempi,
.scene-ask.is-comando .examples {
  display: flex; flex-wrap: nowrap; gap: .4rem; align-items: center;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin: .1rem -1.35rem .6rem 0; padding: .1rem 1.35rem .2rem 0;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.scene-ask.is-comando .scene-esempi::-webkit-scrollbar,
.scene-ask.is-comando .examples::-webkit-scrollbar { display: none; }
.scene-ask.is-comando .scene-esempi .chip,
.scene-ask.is-comando .examples button { flex: none; white-space: nowrap; scroll-snap-align: start; font-size: .82rem; padding: .32rem .8rem; }
.scene-ask.is-comando .examples-label { flex: none; font-size: .62rem; }
/* il campo: grande, morbido, ed è la cosa più in vista della card */
.scene-ask.is-comando .scene-input-multi,
.scene-ask.is-comando #text {
  width: 100%; box-sizing: border-box; min-height: 6.2rem; margin: 0;
  font: 1rem/1.5 var(--serif); padding: .8rem .95rem; border-radius: 16px;
  border: 1px solid var(--scene-card-line); background: var(--card); color: var(--fg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}
.scene-ask.is-comando .scene-input-multi:focus,
.scene-ask.is-comando #text:focus { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); outline: none; }
.scene-ask.is-comando .scene-go,
.scene-ask.is-comando #go { padding: .62rem 1.3rem; border-radius: 999px; font-size: .95rem; font-weight: 600; }
.scene-ask.is-comando #ask { margin: 0; }
.scene-ask.is-comando #ask .row { margin-top: .7rem; gap: .6rem; flex-wrap: wrap; }
.scene-ask.is-comando #ask .row .mic, .scene-ask.is-comando #ask .row #reset { border-radius: 999px; }
.scene-ask.is-comando .sendnote { font-size: .72rem; margin-top: .6rem; color: var(--scene-card-muted); }
/* Puck: il costo accanto al pulsante */
.pk-azioni { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.pk-costo {
  display: inline-flex; align-items: center; gap: .3rem; margin-inline-end: auto;
  font: 600 .74rem var(--sans); color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); border-radius: 999px; padding: .28rem .7rem;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.pk-costo::before { content: '✦'; font-size: .8em; }
.scene-ask.is-comando .scene-form:has(.scene-input-multi) .pk-azioni .scene-go { align-self: auto; }

/* I TRE INGRESSI DI PUCK: riquadri uguali, in fila sul computer */
#theatre .mask-doors { display: none; }
.pk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1.2rem 0 1.6rem; }
@media (max-width: 640px) { .pk-tiles { grid-template-columns: 1fr; gap: .5rem; } }
.pk-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .1rem; align-items: center;
  text-align: start; padding: .85rem 1rem; border-radius: 18px; cursor: pointer; touch-action: manipulation;
  border: 1px solid var(--line); background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--gold) 6%, var(--card)));
  color: var(--fg); font: inherit; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.pk-tile:hover, .pk-tile:focus-visible { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-1); outline: none; }
.pk-tile-i {
  grid-row: 1 / span 2; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 14px;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
}
.pk-tile-i svg { width: 1.35rem; height: 1.35rem; }
.pk-tile-t { font: 700 1rem/1.25 var(--serif); }
.pk-tile-s { font: .8rem/1.35 var(--sans); color: var(--muted); }

/* IL CANONE: i generi come filtri, le schede compatte */
.canon-h { margin: 1.6rem 0 .2rem; font: 700 1.2rem var(--serif); }
.canon-chips { margin: .6rem 0 1rem; }
.canon-gruppo { margin: 1.1rem 0 .45rem; font: 700 .74rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.canon-gruppo .canon-group-n { font-weight: 600; margin-inline-start: .3rem; }
.canon .canon-group-items { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.canon .canon-group-items button { padding: .7rem .9rem; border-radius: 16px; }
.canon .canon-group-items .o { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .84rem; line-height: 1.45; }
/* da computer la scena di Amleto e di Puck è un po' più bassa: la card, e il
   campo dove si scrive, entrano nella prima schermata */
@media (min-width: 861px) { #elsinore .scene-canvas, #theatre .scene-canvas { max-height: 58vh; } }
/* i sonetti uno per uno: numero, primo verso, sezione e tema */
.canon .son-items { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.canon .son-card { display: flex; flex-direction: column; gap: .3rem; }
.canon .son-card .t { font: 700 1rem var(--serif); }
.canon .son-card .son-primo { margin: 0; font: italic .9rem/1.4 var(--serif); color: var(--fg); -webkit-line-clamp: 1; }
.son-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.son-tag { font: 600 .68rem/1.25 var(--sans); letter-spacing: .03em; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: .2rem .5rem; }
.son-tag.is-tema { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.canon .son-tutti { justify-self: start; margin-top: .2rem; }
.canon-sub { margin: 0 0 .2rem; font: italic .92rem/1.45 var(--serif); color: var(--muted); }
/* i generi: pulsanti piccoli; sul telefono una fila sola che scorre */
.canon-chips .chip { font-size: .86rem; padding: .3rem .8rem; }
@media (max-width: 640px) {
  .canon-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); }
  .canon-chips::-webkit-scrollbar { display: none; }
  .canon-chips .chip { flex: none; white-space: nowrap; }
  .pk-tile { padding: .7rem .85rem; border-radius: 16px; }
  .pk-tile-i { width: 2.3rem; height: 2.3rem; border-radius: 12px; }
}
/* Amleto: il pulsante e il microfono sulla stessa riga; stretti, il microfono è un'icona */
.scene-ask.is-comando #ask .row { flex-wrap: nowrap; }
.scene-ask.is-comando #ask .row #go { flex: none; }
@media (max-width: 420px) {
  .scene-ask.is-comando #mic-label { display: none; }
  .scene-ask.is-comando #mic { padding: .55rem .75rem; }
}
@media (max-width: 420px) { .pk-costo { font-size: .68rem; padding: .24rem .55rem; } .pk-azioni { gap: .45rem; } .scene-ask.is-comando .pk-azioni .scene-go { padding: .55rem 1rem; } }
/* il cassetto dei monologhi: c'è il suo riquadro fra i tre ingressi, e chiuso non fa doppione */
#principali .princ-box:not([open]) { display: none; }

/* ==========================================================================
 * LE STANZE DEL CASTELLO RIFATTE (28/09/2026, stanze.js)
 * ========================================================================== */

/* i colori dei generi: dorsi, medaglie, barre. Toni medi, che reggono sia sulla
   carta chiara sia sulla notte, con il testo chiaro sopra */
.pk-g-tragedy { --pk-c: #7a2f2f; }
.pk-g-history { --pk-c: #8f6229; }
.pk-g-comedy { --pk-c: #4c7446; }
.pk-g-romance { --pk-c: #3d6788; }
.pk-g-poem { --pk-c: #684c84; }
.pk-g-sonnet { --pk-c: #9a6f33; }
.pk-g-other, .pk-g-poetry { --pk-c: #6f6659; }

/* --- il giardino di Amleto --- */
.am-barra { display: flex; align-items: center; gap: .8rem; margin: 0 0 .6rem; }
.am-cerca { flex: 1 1 auto; min-width: 0; }
.am-quanti { flex: none; font: 600 .78rem var(--sans); color: var(--muted); }
.am-chips { margin: 0 0 .4rem; }
.am-mese { margin: 1.3rem 0 .5rem; font: 700 .74rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.am-lista { display: grid; gap: .55rem; }
.am-mese:first-child { margin-top: .4rem; }
.am-caso { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
.am-caso[open] { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); box-shadow: var(--shadow-1); }
.am-caso-s { list-style: none; cursor: pointer; display: grid; gap: .3rem; padding: .8rem 1rem .85rem; }
.am-caso-s::-webkit-details-marker { display: none; }
.am-caso-s:hover .am-caso-r { color: var(--accent); }
.am-caso-d { font: 600 .74rem var(--sans); color: var(--muted); }
.am-caso-r { font: 1rem/1.45 var(--serif); color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-caso[open] .am-caso-r { -webkit-line-clamp: unset; display: block; font-weight: 600; }
.am-caso-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.am-caso-n { font: italic .82rem var(--serif); color: var(--muted); }
.am-caso-dentro { padding: 0 1rem 1rem; border-top: 1px dashed var(--line); margin: 0 1rem; padding-inline: 0; }
.am-occhiello { display: block; margin: .9rem 0 .3rem; font: 700 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.am-occhiello-a { color: var(--gold); }
.am-domanda { margin: 0; font: italic .95rem/1.55 var(--serif); color: var(--muted); white-space: pre-line; }
.am-caso[open] .am-caso-s .am-caso-r { display: none; }
.am-risposta { margin: 0; white-space: pre-line; font: 1rem/1.6 var(--serif); }

/* --- la biblioteca di Puck --- */
.pk-lette-testa { display: flex; align-items: center; gap: 1.3rem; }
.pk-anello-w { position: relative; flex: none; width: 128px; height: 128px; }
.pk-anello { width: 100%; height: 100%; transform: rotate(-90deg); }
.pk-anello circle { fill: none; stroke-width: 11; }
.pk-anello-fondo { stroke: color-mix(in srgb, var(--gold) 16%, var(--line)); }
.pk-anello-pieno { stroke: var(--gold); stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.2, .8, .2, 1); }
.pk-lette.is-completa .pk-anello-pieno { stroke: var(--accent); }
.pk-anello-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pk-anello-p { font: 700 1.7rem/1 var(--serif); color: var(--fg); }
.pk-anello-su { font: 600 .72rem var(--sans); color: var(--muted); margin-top: .2rem; }
.pk-lette-parole { flex: 1 1 auto; min-width: 0; }
.pk-lette-parole .ct-lette-h { margin: 0 0 .2rem; }
.pk-lette-sub { margin: 0 0 .7rem; font: italic .9rem/1.45 var(--serif); color: var(--muted); }
.pk-lette-generi { display: grid; gap: .32rem; }
.pk-gen { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .6rem; row-gap: .15rem; font: 600 .76rem var(--sans); }
.pk-gen-n { color: var(--fg); }
.pk-gen-c { color: var(--muted); font-variant-numeric: tabular-nums; }
.pk-gen-b { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--pk-c) 14%, var(--line)); overflow: hidden; }
.pk-gen-b i { display: block; height: 100%; background: var(--pk-c); border-radius: inherit; transition: width .5s ease; }
.pk-lette-d { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.pk-lette-s { cursor: pointer; font: 700 .9rem var(--sans); color: var(--accent); padding: .3rem 0; }
.pk-lette-d[open] .pk-lette-s { margin-bottom: .4rem; }

.pk-scaff .ct-lette-h, .pk-pers .ct-lette-h { margin: 0 0 .2rem; }
.pk-scaffale { display: flex; flex-wrap: wrap; align-items: flex-end; padding: 0 .4rem; margin: .4rem 0 .6rem; }
.pk-slot { height: 196px; display: flex; align-items: flex-end; padding: 0 2px; border-bottom: 9px solid color-mix(in srgb, #7a5a36 70%, var(--bg)); box-shadow: 0 6px 6px -5px rgba(40, 25, 10, .35); margin-bottom: .8rem; }
.pk-dorso {
  position: relative; width: 34px; border: 0; border-radius: 4px 4px 1px 1px; cursor: pointer; padding: .5rem 0 .6rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pk-c) 78%, #000) 0, var(--pk-c) 18%, color-mix(in srgb, var(--pk-c) 88%, #fff) 50%, var(--pk-c) 82%, color-mix(in srgb, var(--pk-c) 70%, #000) 100%);
  color: #fbf1dc; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  box-shadow: inset 0 3px 0 rgba(255, 236, 190, .28), inset 0 -3px 0 rgba(255, 236, 190, .22);
  transition: transform .18s, box-shadow .18s;
}
.pk-dorso:nth-child(n) { margin: 0; }
.pk-slot:nth-child(3n) .pk-dorso { width: 30px; }
.pk-slot:nth-child(4n+1) .pk-dorso { width: 38px; }
.pk-dorso:hover, .pk-dorso:focus-visible { transform: translateY(-8px); outline: none; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .45); }
.pk-dorso-t { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 .68rem/1 var(--serif); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: calc(100% - 1.6rem); }
.pk-dorso-n { font: 700 .62rem var(--sans); background: rgba(255, 240, 205, .92); color: #3a2a18; border-radius: 99px; min-width: 1.2rem; padding: .08rem .25rem; text-align: center; }
.pk-dorso.is-letta::before { content: ''; position: absolute; top: 12%; left: 0; right: 0; height: 4px; background: rgba(255, 228, 160, .75); }
.pk-legenda { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font: 600 .74rem var(--sans); color: var(--muted); }
.pk-leg { display: inline-flex; align-items: center; gap: .35rem; }
.pk-leg i { width: .7rem; height: .7rem; border-radius: 3px; background: var(--pk-c); }

.pk-pers-g { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: .6rem; }
.pk-p { position: relative; display: flex; align-items: center; gap: .8rem; text-align: start; font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: .75rem .9rem; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.pk-p:hover, .pk-p:focus-visible { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-1); outline: none; }
.pk-p-m { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem var(--serif); color: #fbf1dc; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pk-c) 70%, #fff), var(--pk-c) 70%); box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px color-mix(in srgb, var(--pk-c) 55%, var(--gold)); }
.pk-p-t { display: grid; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.pk-p-nome { font: 700 1rem var(--serif); }
.pk-p-op { font: italic .84rem var(--serif); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-p-d { font: 600 .72rem var(--sans); color: var(--muted); }
.pk-p-b { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--pk-c) 14%, var(--line)); overflow: hidden; margin-top: .25rem; }
.pk-p-b i { display: block; height: 100%; background: var(--pk-c); }
.pk-p-lab { position: absolute; top: .55rem; right: .6rem; width: 1rem; height: 1rem; color: var(--gold); }

@media (max-width: 560px) {
  .pk-lette-testa { flex-direction: column; align-items: stretch; text-align: start; }
  .pk-anello-w { align-self: center; }
  .pk-slot { height: 180px; }
  .pk-dorso { width: 30px; }
}

/* --- lo scrittoio di Rosalind: il libro --- */
.rs-libro { --rs-carta: #fbf5e6; --rs-ink: #2a2117; --rs-pelle: #5c2b27; --rs-oro: #c99a55; margin: .4rem auto 1rem; max-width: 60rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .rs-libro { --rs-carta: #262118; --rs-ink: #efe4cf; } }
:root[data-theme='dark'] .rs-libro { --rs-carta: #262118; --rs-ink: #efe4cf; }
.rs-copertina {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  width: min(100%, 22rem); aspect-ratio: 3 / 4; margin: 0 auto; border: 0; cursor: pointer; padding: 2rem 1.6rem;
  border-radius: 6px 16px 16px 6px; color: #f3e3c0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, .1) 5%, transparent 9%),
    radial-gradient(ellipse at 30% 20%, rgba(255, 220, 170, .14), transparent 60%),
    var(--rs-pelle);
  box-shadow: inset 0 0 0 6px var(--rs-pelle), inset 0 0 0 7.5px var(--rs-oro), 0 18px 30px -14px rgba(30, 10, 5, .6), 6px 0 0 -2px #e8dcc2, 8px 2px 0 -2px #d8ccb0;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
  transform-origin: left center;
}
.rs-copertina:hover, .rs-copertina:focus-visible { transform: perspective(900px) rotateY(-8deg); outline: none; }
.rs-cop-fregio { width: 3.4rem; height: 1.4rem; border-top: 1.5px solid var(--rs-oro); border-bottom: 1.5px solid var(--rs-oro); position: relative; }
.rs-cop-fregio::after { content: '❦'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--rs-oro); font-size: .95rem; }
.rs-cop-t { font: 700 1.55rem/1.2 var(--serif); text-align: center; letter-spacing: .01em; }
.rs-cop-n { font: italic .95rem var(--serif); color: color-mix(in srgb, #f3e3c0 75%, transparent); }
.rs-cop-apri { margin-top: .6rem; font: 700 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rs-oro); border: 1px solid var(--rs-oro); border-radius: 99px; padding: .4rem .9rem; }

.rs-nav { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 0 0 .6rem; }
.rs-nav-sotto { margin: .7rem 0 0; gap: .6rem; }
.rs-nav-b { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 700 1.3rem/1 var(--serif); cursor: pointer; }
.rs-nav-b:disabled { opacity: .35; cursor: default; }
.rs-nav-p { font: 600 .8rem var(--sans); color: var(--muted); min-width: 8rem; text-align: center; }
.rs-nav-chiudi { font: 600 .8rem var(--sans); color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 99px; padding: .35rem .85rem; cursor: pointer; }

.rs-spread {
  display: grid; grid-template-columns: 1fr; border-radius: 6px; color: var(--rs-ink);
  background: var(--rs-carta);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rs-ink) 10%, transparent), 0 16px 30px -18px rgba(30, 15, 5, .55), 0 3px 0 -1px color-mix(in srgb, var(--rs-carta) 85%, #000), 0 6px 0 -2px color-mix(in srgb, var(--rs-carta) 75%, #000);
  animation: rs-volta .45s cubic-bezier(.2, .8, .2, 1);
}
.rs-spread.is-indietro { animation-name: rs-volta-indietro; }
@keyframes rs-volta { from { opacity: 0; transform: perspective(1400px) rotateY(-14deg) translateX(18px); transform-origin: left center; } }
@keyframes rs-volta-indietro { from { opacity: 0; transform: perspective(1400px) rotateY(14deg) translateX(-18px); transform-origin: right center; } }
@media (prefers-reduced-motion: reduce) { .rs-spread { animation: none; } }
.rs-pagina { padding: 1.5rem 1.4rem 1.7rem; min-width: 0; }
.rs-pagina + .rs-pagina { border-top: 1px dashed color-mix(in srgb, var(--rs-ink) 18%, transparent); }
@media (min-width: 760px) {
  .rs-spread { grid-template-columns: 1fr 1fr; background: linear-gradient(90deg, var(--rs-carta) 0, var(--rs-carta) calc(50% - 22px), color-mix(in srgb, var(--rs-carta) 86%, #000) 50%, var(--rs-carta) calc(50% + 22px), var(--rs-carta) 100%); }
  .rs-pagina { padding: 2rem 2.2rem 2.3rem; }
  .rs-pagina + .rs-pagina { border-top: 0; }
}
.rs-pg-d { display: block; font: 700 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.rs-pg-h { margin: 0 0 .7rem; font: 700 1.3rem/1.25 var(--serif); color: var(--rs-ink); }
.rs-pg-corpo p { margin: 0 0 .8rem; font: 1.02rem/1.7 var(--serif); white-space: pre-line; }
.rs-commento .d-reading { margin: 0; background: transparent; border: 0; padding: 0; }
.rs-senza { font: italic .95rem var(--serif); color: var(--muted); }
.rs-indice-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.rs-indice-v { width: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; text-align: start; background: none; border: 0; border-bottom: 1px dotted color-mix(in srgb, var(--rs-ink) 22%, transparent); padding: .45rem 0; cursor: pointer; color: var(--rs-ink); font: inherit; }
.rs-indice-v:hover .rs-indice-t { color: var(--accent); }
.rs-indice-t { font: 1rem/1.35 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-indice-p { font: 700 .82rem var(--serif); color: var(--gold); }
.rs-indice-d { grid-column: 1 / -1; font: .72rem var(--sans); color: var(--muted); }
.rs-frontespizio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; }
.rs-frontespizio .rs-cop-fregio { --rs-oro: var(--gold); }
.rs-front-t { margin: 0; font: 700 1.35rem/1.25 var(--serif); }
.rs-front-d { margin: 0; font: italic .9rem var(--serif); color: var(--muted); }
@media (max-width: 759px) { .rs-frontespizio { display: none; } }

/* --- il profilo nel castello: il ritmo sotto --- */
.ct-ritmo { margin-top: 1.6rem; }

/* la copertina che si apre: ruota sul dorso e svanisce (anche davanti al quaderno di Rosalind) */
.rs-copertina.is-apre { transform: perspective(1100px) rotateY(-78deg); opacity: 0; transition: transform .42s cubic-bezier(.4, 0, .6, 1), opacity .42s ease-in; }
.d-copertina { padding: 1rem 0 1.5rem; }

/* ==========================================================================
 * LA FORESTA SUL FONDALE (3.60, 28/09/2026): tema chiaro = carta in cornice
 * dorata, tema scuro = vetro scuro con l'arancio delle fiamme. Le classi le
 * mette journey.js quando il fondale è arrivato: senza, resta tutto com'era.
 * ========================================================================== */
.hero:has(.journey.ha-fondale) .journey-head h1,
body.scena-piena .hero:has(.journey.ha-fondale) .journey-head h1 { color: #f6e8c8; text-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 0 26px rgba(0, 0, 0, .55); }
.hero:has(.journey.ha-fondale) .journey-head .sub,
body.scena-piena .hero:has(.journey.ha-fondale) .journey-head .sub { color: #e6d4ae; text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 0 16px rgba(0, 0, 0, .5); }
.hero:has(.journey.fondale-film) .journey-head .sub { color: #c9d7e8; }

/* i cartelli dei sentieri: targhette di carta antica con la doppia cornice d'oro */
body .journey.fondale-olio .jcard,
body.scena-piena .journey.fondale-olio .jcard.is-lanterna {
  background: linear-gradient(#f2e3c0, #dcc38e); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px #7b5520, inset 0 0 0 4px #e9d096, inset 0 0 0 5px #7b5520, 0 10px 22px rgba(20, 10, 2, .6);
}
body .journey.fondale-olio .jcard h3 { color: #3a2410; }
body .journey.fondale-olio .jcard p { color: #6a4e2c; }
body .journey.fondale-olio .jcard:hover, body .journey.fondale-olio .jcard:focus-visible {
  box-shadow: inset 0 0 0 1.5px #7b5520, inset 0 0 0 4px #f6dc98, inset 0 0 0 5px #7b5520, 0 0 0 2px #f0c56a, 0 14px 28px rgba(20, 10, 2, .65), 0 0 26px rgba(255, 196, 100, .45);
}
/* e di notte: vetro scuro, il bordo acceso d'arancio come le lanterne */
body .journey.fondale-film .jcard,
body.scena-piena .journey.fondale-film .jcard.is-lanterna {
  background: rgba(8, 16, 28, .55); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(212, 166, 114, .5); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 0 18px rgba(212, 166, 114, .22), inset 0 1px 0 rgba(255, 255, 255, .1);
}
body .journey.fondale-film .jcard h3 { color: #f4f8ff; }
body .journey.fondale-film .jcard p { color: #e0c49c; }
body .journey.fondale-film .jcard:hover, body .journey.fondale-film .jcard:focus-visible {
  border-color: #d4a672; box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 26px rgba(212, 166, 114, .5);
}
/* la lanterna del castello nel cielo del telefono, e lo stendardo sul computer */
body.scena-piena .journey.fondale-olio .jhouse.is-lanterna { background: linear-gradient(#f2e3c0, #dcc38e); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #7b5520, 0 6px 14px rgba(20, 10, 2, .55); opacity: 1; }
body.scena-piena .journey.fondale-olio .jhouse-l { color: #3a2410; }
body.scena-piena .journey.fondale-film .jhouse.is-lanterna { background: rgba(8, 16, 28, .55); border: 1px solid rgba(188, 215, 255, .25); opacity: 1; }
body.scena-piena .journey.fondale-film .jhouse-l { color: #d7e4f3; }

/* ==========================================================================
 * I DUE MATERIALI DELL'INTERFACCIA (3.61, dal mock-up scelto da Mauro)
 * data-materia sulla radice lo mette app.js col tema: «olio» (chiaro) = legno
 * scuro, carta antica e oro; «film» (scuro) = vetro scuro e l'arancio delle
 * fiamme. Si cambiano le VARIABILI dentro ogni pezzo, non i pezzi: così tutto
 * quello che c'è dentro (bottoni, campi, menù) segue da sé.
 * ========================================================================== */

/* --- l'intestazione --- */
:root[data-materia='olio'] .topbar {
  --fg: #f1dfb8; --muted: #c8a878; --line: rgba(199, 154, 77, .45); --card: #2a1a0c; --accent: #f0c56a; --glass: #1f140a;
  background: linear-gradient(#2c1b0d, #180e06); border-color: rgba(123, 85, 32, .8);
  box-shadow: inset 0 1px 0 rgba(240, 197, 106, .25), 0 10px 26px rgba(20, 10, 2, .45);
}
:root[data-materia='film'] .topbar {
  --fg: #eef4fb; --muted: #93a7bf; --line: rgba(188, 215, 255, .2); --card: #0b1520; --accent: #d4a672; --glass: rgba(3, 7, 12, .72);
  background: rgba(3, 7, 12, .72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-color: rgba(188, 215, 255, .14);
}

/* --- la barra delle sezioni: in alto sul computer, in basso sul telefono --- */
:root[data-materia='olio'] nav#app-nav { --muted: #a8875a; --gold: #f0c56a; --fg: #f1dfb8; --line: #7b5520; --card: #1e1309; }
:root[data-materia='film'] nav#app-nav { --muted: #6f86a2; --gold: #d4a672; --fg: #eef4fb; --line: rgba(188, 215, 255, .14); --card: #03070c; }
@media (min-width: 641px) {
  :root[data-materia='olio'] nav#app-nav { background: linear-gradient(#2a1a0c, #1a1007); border-radius: 12px; padding: .15rem .6rem 0; border-bottom: 1px solid #7b5520; }
  :root[data-materia='film'] nav#app-nav { background: rgba(3, 7, 12, .6); border-radius: 12px; padding: .15rem .6rem 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  body.a-casa nav#app-nav { display: none; }
}
@media (max-width: 640px) {
  :root[data-materia='olio'] nav#app-nav { background: linear-gradient(#2a1a0c, #160d06); border-top: 1px solid #7b5520; box-shadow: inset 0 1px 0 rgba(240, 197, 106, .22), 0 -8px 22px rgba(20, 10, 2, .35); }
  :root[data-materia='film'] nav#app-nav { background: rgba(3, 7, 12, .74); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(188, 215, 255, .12); }
  :root[data-materia='olio'] nav#app-nav .is-active { text-shadow: 0 0 10px rgba(240, 165, 58, .75); }
  :root[data-materia='film'] nav#app-nav .is-active { text-shadow: none; }
  nav#app-nav > .backbtn.is-active { color: var(--gold); }
}

/* --- le schede dei personaggi sopra i fondali --- */
.scene-stage.fondale-olio {
  --scene-card-fg: #2a1a0c; --scene-card-muted: #6a4e2c; --scene-card-line: #b08a4e;
  --card: #fbf2dc; --fg: #2a1a0c; --line: #b08a4e; --muted: #6a4e2c; --gold: #8a5a1c; --accent: #7a2418; --on-accent: #f7e6c4;
}
.scene-stage.fondale-olio .scene-ask {
  background: linear-gradient(#f3e6c8, #e4d0a4); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #7b5520, inset 0 0 0 6px #d9b56a, inset 0 0 0 7px #7b5520, inset 0 0 40px rgba(120, 70, 20, .3), 0 18px 34px rgba(20, 10, 2, .6);
}
.scene-stage.fondale-olio .scene-ask .scene-who { color: #7a3d14; }
.scene-stage.fondale-olio .scene-go,
.scene-stage.fondale-olio .scene-ask #go { background: linear-gradient(#8a2a1c, #5e170e); border-color: #3a0d06; color: #f7e6c4; box-shadow: inset 0 1px 0 #c0553f, 0 3px 0 #3a0d06; }
.scene-stage.fondale-olio .scene-input, .scene-stage.fondale-olio .scene-ask #text { font-family: var(--serif); }
.scene-stage.fondale-film {
  --scene-card-fg: #eef4fb; --scene-card-muted: #a9bfd8; --scene-card-line: rgba(188, 215, 255, .22); --scene-card-bg: rgba(8, 16, 28, .55);
  --card: rgba(255, 255, 255, .06); --fg: #e8f0f9; --line: rgba(188, 215, 255, .2); --muted: #a9bfd8; --gold: #d4a672; --accent: #c49058; --on-accent: #1a0a00;
}
.scene-stage.fondale-film .scene-ask {
  background: rgba(8, 16, 28, .55); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(188, 215, 255, .22); border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.scene-stage.fondale-film .scene-go,
.scene-stage.fondale-film .scene-ask #go { background: #c49058; border-color: #c49058; color: #1a0a00; box-shadow: inset 0 1px 0 rgba(255, 240, 215, .35), 0 3px 10px rgba(0, 0, 0, .35); }
.scene-stage.fondale-film .scene-ask #text::placeholder, .scene-stage.fondale-film .scene-input::placeholder { color: #8ea6c2; }

/* --- la foresta sul telefono: le targhette in due righe, la scheda di Jaques --- */
body.scena-piena .journey.fondale-olio .jcard.is-lanterna.is-targhetta,
body.scena-piena .journey.fondale-film .jcard.is-lanterna.is-targhetta { padding: .32rem .7rem .38rem; max-width: 9rem; text-align: center; }
.jcard.is-targhetta h3 { line-height: 1.15; }
.jcard-con { display: block; font: italic .66rem/1.2 var(--serif); margin-top: .08rem; }
.journey.fondale-olio .jcard-con { color: #6a4e2c; }
.journey.fondale-film .jcard-con { color: #e0c49c; }
.jq-accompagna { display: none; }
@media (max-width: 640px) {
  body.scena-piena .hero .jq-accompagna {
    display: block; position: absolute; left: 14px; right: 14px; bottom: 3.8rem; z-index: 6;
    padding: .8rem .95rem .85rem; border-radius: 4px;
  }
  body.scena-piena .hero:has(.journey.is-welcome) .jq-accompagna { display: none; }
  /* il primo saluto di Jaques (il fumetto) sta proprio lì: finché c'è, la scheda aspetta */
  body.scena-piena:has(.cucw-nudge:not([hidden])) .hero .jq-accompagna { display: none; }
}
.jq-h { margin: 0; font: 700 .66rem var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.jq-t { margin: .3rem 0 .55rem; font: .86rem/1.4 var(--sans); }
.jq-b { display: flex; flex-wrap: wrap; gap: .4rem; }
.jq-b .chip { font-size: .78rem; padding: .3rem .7rem; }
:root[data-materia='olio'] .jq-accompagna {
  background: linear-gradient(#f3e6c8, #e4d0a4); color: #2a1a0c;
  box-shadow: inset 0 0 0 2px #7b5520, inset 0 0 0 6px #d9b56a, inset 0 0 0 7px #7b5520, 0 16px 30px rgba(20, 10, 2, .6);
}
:root[data-materia='olio'] .jq-h { color: #7a3d14; }
:root[data-materia='olio'] .jq-b .chip { background: transparent; border: 1px solid #9a7440; color: #5a3a16; }
:root[data-materia='film'] .jq-accompagna {
  background: rgba(8, 16, 28, .55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #e8f0f9;
  border: 1px solid rgba(188, 215, 255, .22); border-radius: 20px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
:root[data-materia='film'] .jq-h { color: #d4a672; }
:root[data-materia='film'] .jq-b .chip { background: rgba(255, 255, 255, .07); border: 1px solid rgba(188, 215, 255, .2); color: #d7e4f3; }

/* --- il castello: la facciata dipinta, e le stanze come targhe --- */
.cs-fondale { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; pointer-events: none; }
:root[data-materia='olio'] .cs-fondale { background-image: url('/img/scene/castello-olio-o.jpg'); }
:root[data-materia='film'] .cs-fondale { background-image: url('/img/scene/castello-film-o.jpg'); }
@media (max-width: 680px) {
  .cs-fondale { inset: 0 0 auto 0; height: 112px; }
  :root[data-materia='olio'] .cs-fondale { background-image: url('/img/scene/castello-olio-v.jpg'); }
  :root[data-materia='film'] .cs-fondale { background-image: url('/img/scene/castello-film-v.jpg'); }
  :root[data-materia='olio'] .castle-scene { background: #1a1009; }
  :root[data-materia='film'] .castle-scene { background: #03070c; }
  :root[data-materia='olio'] .cs-room { background: linear-gradient(#f0e0bb, #dcc28c); border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #7b5520, inset 0 0 0 4px #e8cf92, inset 0 0 0 5px #7b5520; }
  :root[data-materia='olio'] .cs-room .cs-targa { color: #3a2410; }
  :root[data-materia='olio'] .cs-room .cs-n { background: #7a2a18; color: #f6e3b8; }
  :root[data-materia='film'] .cs-room { background: rgba(10, 20, 32, .55); border: 1px solid rgba(188, 215, 255, .18); border-radius: 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  :root[data-materia='film'] .cs-room .cs-targa { color: #e8f0f9; }
  :root[data-materia='film'] .cs-room .cs-n { background: #c49058; color: #1a0a00; }
}
.castle-scene > .cs-room, .castle-scene > .cs-polonio, .castle-scene > .gd-card { z-index: 2; }
/* il nome nella testata (3.61) prende il colore della testata, non quello della
   pagina. La pagina resta della sua carta: sotto le scene ci sono elenchi e
   testi scritti per quel fondo, e scurirla li renderebbe illeggibili. */
:root[data-materia='olio'] .topbar .brandtext { color: #f1dfb8; }
:root[data-materia='film'] .topbar .brandtext { color: #eef4fb; }
:root[data-materia='olio'] .castle-scene .cs-pol-name { color: #f1dfb8; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
:root[data-materia='film'] .castle-scene .cs-pol-name { color: #e0c49c; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

/* ==========================================================================
 * LE DUE TAVOLOZZE DEL MOCK-UP (3.61, Mauro: «voglio che sia più come il
 * mockup»). Nel mock-up anche il tema chiaro è scuro: legno, carta antica e oro
 * («olio»); lo scuro è la notte blu con l'arancio delle fiamme («film»). Sono le
 * VARIABILI di tutta l'app, così ogni pagina — elenchi, giochi, profilo — segue.
 * `[data-materia]` pesa quanto `[data-theme='dark']` e viene dopo: vince.
 * ========================================================================== */
:root[data-materia='olio'] {
  /* CARTA CHIARA, UN PELO PIÙ SCURA (28/09/2026, Mauro: «troppo marrone la
     versione chiara», poi «fai carta chiara un pelo più scura»): le pagine sono
     carta, il legno e l'oro restano alla testata, alla barra e alle scene. */
  color-scheme: light;
  --bg: #e9e0cd; --fg: #221c14; --muted: #675d4e; --line: #cdc1a8; --card: #f4eee0;
  --accent: #7a2f2f; --on-accent: #fff; --gold: #85591f;
  --warn-bg: #f1e3c8; --warn-line: #d0a260;
  --cs-sky-a: #2a1a0c; --cs-sky-b: #6b4424; --cs-stars: .2; --cs-moon: #fff0cf; --cs-hill: #1a120a;
  --cs-stone-a: #4a3b2c; --cs-stone-b: #231a12; --cs-mortar: rgba(0, 0, 0, .3); --cs-slit: #0f0c08; --cs-merli: #4a3b2c;
  --cs-flag: #8a2a1c; --cs-gate: #0e0b07; --cs-ground: #1a120a; --cs-road: #3a2814;
  --cs-win: rgba(46, 30, 12, .88); --cs-win-line: rgba(217, 168, 90, .55); --cs-win-fg: #f3dfae; --cs-win-glow: rgba(255, 190, 90, .3);
  --scene-card-bg: rgba(255, 251, 240, .62); --scene-card-line: rgba(255, 255, 255, .7); --scene-card-fg: #2c2113; --scene-card-muted: #6d5b3f; --scene-card-shadow: rgba(46, 28, 6, .3);
  --shadow-1: 0 1px 2px rgba(42, 28, 6, .06), 0 10px 26px -14px rgba(42, 28, 6, .3);
  --shadow-2: 0 2px 4px rgba(42, 28, 6, .08), 0 20px 48px -18px rgba(42, 28, 6, .4);
  --glass: rgba(233, 224, 205, .9);
}
:root[data-materia='film'] {
  color-scheme: dark;
  --bg: #04080d; --fg: #e8f0f9; --muted: #93a7bf; --line: #1c2a3a; --card: #0b1420;
  --accent: #cf9c66; --on-accent: #1a0a00; --gold: #d4a672;
  --warn-bg: #1a1408; --warn-line: #7a5a2c;
  --cs-sky-a: #02050b; --cs-sky-b: #123049; --cs-stars: .9; --cs-moon: #eef6ff; --cs-hill: #03070b;
  --cs-stone-a: #2b3440; --cs-stone-b: #0d1218; --cs-merli: #2b3440; --cs-flag: #a04b43; --cs-ground: #03070b; --cs-road: #0d1a22;
  --cs-win: rgba(10, 20, 32, .88); --cs-win-line: rgba(212, 166, 114, .5); --cs-win-fg: #ffd9b0; --cs-win-glow: rgba(255, 150, 60, .3);
  --scene-card-bg: rgba(8, 16, 28, .55); --scene-card-line: rgba(188, 215, 255, .22); --scene-card-fg: #eef4fb; --scene-card-muted: #a9bfd8; --scene-card-shadow: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -12px rgba(0, 0, 0, .6);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 20px 48px -16px rgba(0, 0, 0, .75);
  --glass: rgba(3, 7, 12, .8);
}

/* ==========================================================================
 * IL TELEFONO COME NEL MOCK-UP (3.61). Quando sullo schermo c'è una scena col
 * fondale: la scena parte dal bordo alto e arriva alla barra, l'intestazione
 * (logo, nome, avatar) le sta sopra trasparente, la scheda del personaggio è
 * compatta e posata sul fondo della scena, subito sopra la barra.
 * Senza fondale (immagine che non c'è) resta tutto come prima.
 * ========================================================================== */
@media (max-width: 640px) {
  body.scena-piena:has(#view-home:not([hidden]) .journey.ha-fondale),
  body.scena-piena:has(#app-view > section:not([hidden]) > .scene-stage.ha-fondale) { padding-top: 0; }
  body.scena-piena:has(#view-home:not([hidden]) .journey.ha-fondale) .topbar,
  body.scena-piena:has(#app-view > section:not([hidden]) > .scene-stage.ha-fondale) .topbar {
    position: fixed; top: calc(.5rem + var(--sat)); left: .6rem; right: .6rem; margin: 0; z-index: 50;
    background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.scena-piena:has(#view-home:not([hidden]) .journey.ha-fondale) .topbar::before,
  body.scena-piena:has(#view-home:not([hidden]) .journey.ha-fondale) .topbar::after,
  body.scena-piena:has(#app-view > section:not([hidden]) > .scene-stage.ha-fondale) .topbar::before,
  body.scena-piena:has(#app-view > section:not([hidden]) > .scene-stage.ha-fondale) .topbar::after { display: none; }
  body.scena-piena:has(.ha-fondale) .topbar .brandtext { text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
  body.scena-piena:has(.ha-fondale) .topbar .iconbtn, body.scena-piena:has(.ha-fondale) .topbar .langbtn { background: rgba(0, 0, 0, .28); }

  /* la foresta: dal bordo alto alla barra; il titolo sotto l'intestazione */
  body.scena-piena .hero:has(.journey.ha-fondale) .journey,
  body.scena-piena .hero:has(.journey.ha-fondale) .journey.is-welcome { height: calc(var(--vh-utile, 100dvh) - var(--barra-h, 4.6rem)); }
  body.scena-piena .hero:has(.journey.ha-fondale) .journey-head { top: calc(5.4rem + var(--sat)); }
  /* in pixel: sopra la scena le scritte non devono crescere col testo del
     sistema né con la base della pagina (Safari su iPhone, 28/09/2026) */
  body.scena-piena .hero:has(.journey.ha-fondale) .journey-head h1 { font-size: 26px; line-height: 1.1; margin-bottom: 4px; }
  body.scena-piena .hero:has(.journey.ha-fondale) .journey-head .sub { font-style: italic; font-size: 14px; }
  body.scena-piena .hero:has(.journey.ha-fondale) .journey-head::before,
  body.scena-piena .hero:has(.journey.ha-fondale) .journey-head h1::after { display: none; }
  body.scena-piena .journey.ha-fondale .jcard.is-targhetta h3 { font-size: 13px; }
  body.scena-piena .journey.ha-fondale .jcard.is-targhetta .jcard-con { font-size: 11px; }
  body.scena-piena .journey.ha-fondale .jcard.is-targhetta { padding: 5px 10px 6px !important; max-width: 142px !important; } /* 128: «Un'emozione» non ci stava coi rulli del cartiglio */
  body.scena-piena .journey.ha-fondale .jhouse.is-lanterna .jhouse-l { font-size: 11px; }
  body.scena-piena .hero .jq-accompagna .jq-t { font-size: 13px; }
  body.scena-piena .hero .jq-accompagna .jq-b .chip { font-size: 12px; padding: 4px 10px; }

  /* le sezioni: la scena intera, la scheda posata sul fondo */
  body.scena-piena #app-view > section > .scene-stage.ha-fondale { position: relative; margin-bottom: 1.2rem; }
  /* fino al bordo, sotto la barra: prima fra scena e barra restava una striscia
     del fondo della pagina (collaudo, 28/09/2026) */
  body.scena-piena .scene-stage.ha-fondale .scene-canvas { height: calc(var(--vh-utile, 100dvh) - var(--barra-h, 4.6rem)); }
  body.scena-piena .scene-stage.ha-fondale .scene-ask {
    /* in fondo, ma SOPRA il pulsante di Jaques (3,4rem a 4,4rem dal fondo dello
       schermo): prima copriva «Chiedi a Puck» e «Cerca» (collaudo, 28/09/2026) */
    position: absolute !important; left: .8rem !important; right: .8rem !important; bottom: 3.8rem !important; top: auto !important;
    margin: 0 !important; max-height: calc(var(--vh-utile, 100dvh) - var(--barra-h, 4.6rem) - 3.8rem - 5.6rem); overflow-y: auto; padding: .8rem .95rem .85rem;
  }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-who { font-size: .6rem; margin-bottom: .2rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-verse { font-size: .98rem; line-height: 1.3; margin-bottom: .15rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-gloss { font-size: .74rem; line-height: 1.35; margin: 0 0 .45rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-q { font-size: .98rem; line-height: 1.28; margin: .5rem 0 .45rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-alt,
  body.scena-piena .scene-stage.ha-fondale .scene-ask .sendnote,
  body.scena-piena .scene-stage.ha-fondale .scene-ask .examples-label { display: none; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask #text,
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-input-multi { min-height: 3.6rem; font-size: .86rem; padding: .55rem .7rem; border-radius: 10px; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-esempi .chip,
  body.scena-piena .scene-stage.ha-fondale .scene-ask .examples button { font-size: .72rem; padding: .25rem .6rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask #go,
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-go { font-size: .82rem; padding: .5rem .95rem; border-radius: 10px; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-thread { max-height: 24dvh; }

  /* il castello: la facciata grande in cima, il titolo sopra la facciata,
     le stanze in targhette strette */
  body.scena-piena #view-favourites:not([hidden]) > .journey-head { margin-top: calc(5.2rem + var(--sat)); }
  .castle-scene .cs-svg, .castle-scene .cs-fondale { height: 250px; }
  .castle-scene { padding-top: 262px; }
  .castle-scene .cs-room { padding: .38rem .7rem; min-height: 0; }
  .castle-scene .cs-room .cs-vano { width: 22px; }
  .castle-scene .cs-polonio { top: 176px; }
}
@media (max-width: 640px) {
  /* il castello non ha una scena a tutto schermo: la sua testata resta in cima
     ma trasparente, e la pagina lascia il posto per lei */
  body.scena-piena:has(#view-favourites:not([hidden])) { padding-top: 0; }
  /* sul castello la testata non sta sopra una scena ma sulla carta: tiene il suo legno */
  body.scena-piena:has(#view-favourites:not([hidden])) .topbar { position: fixed; top: calc(.5rem + var(--sat)); left: .6rem; right: .6rem; margin: 0; z-index: 50; }
}
@media (max-width: 640px) {
  body.scena-piena.scorso .topbar {
    background: var(--glass) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
    /* la seconda ombra, piena e spostata in su, copre la fascia sotto l'ora di
       iOS: lì passava la pagina (Simulatore, 28/09/2026) */
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35) !important; border-radius: 14px;
  }
}

/* le opere trovate nella conversazione: un titolo lungo va a capo, e una pillola
   su tre righe diventava un ovale (collaudo del 28/09/2026) */
.scene-ask .scene-hit { border-radius: 12px; align-items: center; }
.scene-mask-spot[hidden] { display: none; }

/* la scheda del personaggio non esce dalla sua scena (collaudo, 28/09/2026): su
   computer e tablet quella di Prospero era più alta del palco e scendeva sopra
   il testo della pagina; ora scorre dentro di sé */
@media (min-width: 641px) {
  .scene-stage .scene-ask:not(.is-comando) { max-height: calc(100% - var(--cima, 0%) - 1rem); overflow-y: auto; }
}
/* sul telefono, sopra il fondale, la porta del castello sta nella scheda di
   Jaques: la lanterna nel cielo si toglie, non c'era spazio fra il sottotitolo
   e i sentieri (Safari su iPhone, 28/09/2026) */
@media (max-width: 640px) {
  body.scena-piena .journey.ha-fondale .jhouse.is-lanterna { display: none; }
}

/* LA SCHEDA COME NEL MOCK-UP, SUL TELEFONO (28/09/2026, prova nel Simulatore:
   in Safari la scheda di Amleto copriva tre quarti della scena). Il campo
   parte da due righe e si apre quando ci si scrive; gli esempi in una fila che
   scorre; i pulsanti della misura di un pollice, non di una mano. */
@media (max-width: 640px) {
  body.scena-piena .scene-stage.ha-fondale .scene-ask #text,
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-input-multi { min-height: 0; height: calc(2 * 1.45em + 1.6rem); line-height: 1.45; overflow: hidden; transition: height .25s ease; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask #text:focus,
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-input-multi:focus,
  body.scena-piena .scene-stage.ha-fondale .scene-ask #text:not(:placeholder-shown),
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-input-multi:not(:placeholder-shown) { height: 6.4rem; overflow: auto; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-esempi,
  body.scena-piena .scene-stage.ha-fondale .scene-ask .examples { margin: .1rem 0 .4rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask #ask .row { margin-top: .45rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask #ask .row .mic { width: 2.3rem; height: 2.3rem; }
  /* nel tondo entra solo l'icona: fra 421 e 640px la scritta restava e andava
     a capo parola per parola accanto a un cerchio vuoto (collaudo a 430px) */
  body.scena-piena .scene-stage.ha-fondale .scene-ask #ask .row .mic { flex: none; padding: 0; justify-content: center; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask #mic-label { display: none; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-verse { font-size: .92rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-q { font-size: .94rem; margin: .35rem 0 .35rem; }
}

.scena-giu { display: none; }
@media (max-width: 640px) {
  body.scena-piena .scene-stage.ha-fondale + .scena-giu {
    display: flex; width: max-content; align-items: center; gap: .4rem; position: relative; z-index: 7;
    margin: calc(-1.2rem - 3.1rem) 0 1.6rem .9rem; padding: .4rem .85rem; border-radius: 99px;
    font: 600 12px var(--sans); letter-spacing: .04em; cursor: pointer;
    background: rgba(0, 0, 0, .38); color: #f4e8cf; border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  body.scena-piena .scene-stage.ha-fondale + .scena-giu .scena-giu-f { animation: giu 1.6s ease-in-out infinite; }
}
@keyframes giu { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(3px) } }
@media (prefers-reduced-motion: reduce) { .scena-giu-f { animation: none !important; } }

/* scorrendo, la fascia sopra la testata (sotto l'ora di iOS) copre la pagina
   che le passa dietro (Simulatore, 28/09/2026) */
@media (max-width: 640px) {
  /* in Safari la zona sotto l'ora sta sopra lo 0 della pagina fissa: il velo
     parte più in alto e scende fino alla testata */
  body.scena-piena.scorso::before {
    content: ''; position: fixed; left: 0; right: 0; top: -120px; height: calc(120px + var(--sat) + .5rem + 2px); z-index: 49;
    background: var(--bg); pointer-events: none;
  }
}
/* la carta di Polonio sopra la barra delle sezioni, non sotto (Simulatore,
   28/09/2026: i suoi pulsanti finivano dietro la barra) */
@media (max-width: 680px) {
  .cs-card { position: fixed !important; left: .6rem !important; right: .6rem !important; top: auto !important; bottom: calc(var(--barra-h, 4.6rem) + .6rem) !important; z-index: 56 !important; max-height: calc(var(--vh-utile, 100dvh) - var(--barra-h, 4.6rem) - 7rem); overflow-y: auto; }
}
/* mentre una guida parla (Ariel, Orlando, Polonio) Jaques si ritira: sul
   telefono copriva i pulsanti della carta (Simulatore, 28/09/2026) */
@media (max-width: 680px), (max-height: 500px) {
  body:has(.gd-card:not([hidden])) .cucw:not(.is-open) { display: none; }
}

/* il fregio «❧» sopra il titolo non si mette sulle scene: sul cielo sembrava
   una macchia arancione (Mauro, 28/09/2026) */
.hero:has(.journey.ha-fondale) .journey-head::before,
.hero:has(.journey.ha-fondale) .journey-head h1::before { display: none !important; content: none !important; }

.pk-scaffale.is-vuoto { justify-content: center; }
.pk-posto { display: block; width: 32px; border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent); border-bottom: 0; border-radius: 4px 4px 0 0; opacity: .7; }
.pk-vuoto-t { margin: .2rem 0 .8rem; font: italic 1rem/1.45 var(--serif); color: var(--muted); text-align: center; }
.pk-scaff .ct-go { display: block; margin: 0 auto; }

/* ==========================================================================
 * IL CARTIGLIO (28/09/2026, scelto da Mauro fra foglio di scena, cartiglio e
 * nuvola). Schede, cartelli e pulsanti sono rotoli di pergamena: la carta al
 * centro, due estremità arrotolate ai lati. Le estremità sono SFONDI (tre
 * gradienti in fila), non ::before/::after: non occupano i pseudo-elementi e
 * non escono dal riquadro, quindi niente può finirci sotto o sopra.
 * Dentro la pergamena l'inchiostro è scuro in entrambi i temi: le variabili
 * si ridefiniscono sul rotolo, e tutto ciò che contiene le segue.
 * ========================================================================== */
:root[data-materia] {
  --rotolo: linear-gradient(90deg, #7d5f33 0, #c9a870 22%, #f3e3bd 48%, #b8955d 78%, #6f522b 100%);
  --carta-rotolo: linear-gradient(#f4e8cb, #e6d3a8);
  --rotolo-w: 13px;
}
:root[data-materia='film'] {
  --rotolo: linear-gradient(90deg, #4f3f28 0, #8d7a58 22%, #cbbb97 48%, #7f6c4c 78%, #463720 100%);
  --carta-rotolo: linear-gradient(#ddd1b4, #c8b995);
}
:root[data-materia] :is(
  .scene-stage.ha-fondale .scene-ask,
  .gd-card,
  .journey .jcard,
  .ct-carta, .am-caso, .pk-p, .road-card,
  #app-view .canon button, .ricerca-unica .canon button,
  .ct-riprendi
) {
  --fg: #2a1a0c; --muted: #6a4e2c; --line: #b08a4e; --card: #fbf3dd; --gold: #85591f; --accent: #7a2418; --on-accent: #f7e6c4;
  --scene-card-fg: #2a1a0c; --scene-card-muted: #6a4e2c; --scene-card-line: #b08a4e;
  color: #2a1a0c;
  background:
    var(--rotolo) left top / var(--rotolo-w) 100% no-repeat,
    var(--rotolo) right top / var(--rotolo-w) 100% no-repeat,
    var(--carta-rotolo) !important;
  border: 0 !important; border-radius: 3px !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, .5), inset 0 -1px 0 rgba(90, 60, 25, .35), 0 12px 24px rgba(10, 5, 0, .45) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding-inline: calc(var(--rotolo-w) + .85rem) !important;
}
/* il libro di Rosalind resta un libro rosso: la copertina non è un rotolo */
:root[data-materia] .rs-copertina { background: linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.1) 5%, transparent 9%), radial-gradient(ellipse at 30% 20%, rgba(255,220,170,.14), transparent 60%), var(--rs-pelle) !important; padding-inline: 1.6rem !important; box-shadow: inset 0 0 0 6px var(--rs-pelle), inset 0 0 0 7.5px var(--rs-oro), 0 18px 30px -14px rgba(30,10,5,.6) !important; border-radius: 6px 16px 16px 6px !important; color: #f3e3c0; }
/* i cartelli piccoli e i pulsanti-chip: rotoli sottili */
:root[data-materia] :is(.journey .jcard, .scene-stage.ha-fondale .scene-ask .chip, .scene-stage.ha-fondale .scene-ask .examples button, .scene-stage.ha-fondale .scene-ask .scene-hit) {
  --rotolo-w: 7px;
}
:root[data-materia] :is(.scene-stage.ha-fondale .scene-ask .chip, .scene-stage.ha-fondale .scene-ask .examples button, .scene-stage.ha-fondale .scene-ask .scene-hit, .gd-card .gd-quiet) {
  background:
    var(--rotolo) left top / var(--rotolo-w) 100% no-repeat,
    var(--rotolo) right top / var(--rotolo-w) 100% no-repeat,
    linear-gradient(#fbf1d8, #efe0bb) !important;
  border: 0 !important; border-radius: 2px !important; color: #3a2410 !important;
  box-shadow: 0 2px 5px rgba(40, 20, 5, .3) !important;
  padding-inline: calc(var(--rotolo-w) + .6rem) !important;
}
/* i pulsanti d'azione: un sigillo di ceralacca, non un rotolo */
:root[data-materia] :is(.scene-stage.ha-fondale .scene-go, .scene-stage.ha-fondale .scene-ask #go, .gd-card .gd-main) {
  background: radial-gradient(circle at 35% 30%, #a8392a, #6e1a10 70%) !important; color: #f7e6c4 !important;
  border: 0 !important; border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 190, 160, .35), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 3px 8px rgba(0, 0, 0, .35) !important;
}
/* le guide non sono di vetro: il testo della carta è inchiostro */
:root[data-materia] .gd-card :is(.gd-text, .gd-verse) { color: #2a1a0c; }
:root[data-materia] .gd-card :is(.gd-eyebrow, .gd-src) { color: #7a3d14; }
:root[data-materia] .gd-card .gd-gloss { color: #5a4028; }
/* LE SCRITTE PICCOLE (collaudo, 28/09/2026, Mauro: «controlla che il font non
   sia troppo piccolo»): niente sotto i 12px sul telefono */
@media (max-width: 640px) {
  .scene-who, .scene-ask .scene-who { font-size: 12px !important; }
  .canon .g, .canon-group-items .g, .chip-n, .emap-legend, .emap-legend span, .cs-pol-name, .canon-gruppo, .canon-group-n { font-size: 12px !important; }
}
/* sui cartelli della foresta l'inchiostro è scuro anche di notte: le regole del
   vetro (3.60) dicevano testo chiaro, e sulla pergamena non si leggeva */
:root[data-materia] body .journey .jcard h3 { color: #2a1a0c !important; text-shadow: none !important; }
:root[data-materia] body .journey .jcard p,
:root[data-materia] body .journey .jcard .jcard-con { color: #6a4e2c !important; }
:root[data-materia] body .journey .jcard:hover,
:root[data-materia] body .journey .jcard:focus-visible { box-shadow: 0 0 0 2px #d4a672, 0 12px 24px rgba(10, 5, 0, .5) !important; }
:root[data-materia] .scene-stage.ha-fondale .scene-ask :is(#text, .scene-input, .scene-input-multi)::placeholder { color: #8a7458 !important; }
:root[data-materia] .scene-stage.ha-fondale .scene-ask :is(#text, .scene-input, .scene-input-multi) { color: #2a1a0c; background: #fbf3dd; }
/* il pavimento delle scritte, su ogni schermo (collaudo, 28/09/2026) */
.chip-n, .cs-pol-name, .ec-fam, .scene-who, .vt-nastro, .emap-legend, .emap-legend span, .pf-nota-p, .sh-s, .scene-hit .g { font-size: max(12px, 1em * .7) !important; }
.scene-who { font-size: 12px !important; }
.cs-targa { font-size: max(11.5px, .55rem) !important; }
.cs-r-profilo .cs-targa { font-size: 11.5px !important; }
@media (max-width: 640px) {
  /* il campo di Prospero ha un'imbottitura più stretta di quello di Amleto: due righe esatte anche lì */
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-input-multi:placeholder-shown:not(:focus) { height: calc(2 * 1.45em + 1.1rem); }
}

/* la mappa della compagnia: la maschera sopra Verona non copre il titolo */
.mp-sezione-mappa + .mp-sentiero { margin-top: 2.4rem; }
@media (min-width: 681px) {
  /* sulla facciata le targhe più grandi vanno a capo invece di sporgere dalla finestra */
  .cs-targa { white-space: normal; letter-spacing: .02em !important; line-height: 1.15; overflow-wrap: anywhere; }
}
.scene-ask.is-comando .examples-label { font-size: 12px !important; }

/* la foresta velata finché arriva il suo fondale (journey.js) */
.journey.in-attesa > canvas, .journey.in-attesa .jlabels { opacity: 0; }
.journey > canvas, .journey .jlabels { transition: opacity .35s ease; }
.hero:has(.journey.in-attesa) .journey-head { opacity: 0; }

/* niente esempi da toccare sotto Amleto e sotto Puck (29/09, Mauro: «togli
   questi»): il campo e il suo segnaposto bastano */
#examples, .scene-esempi { display: none !important; }

/* LE PAROLE LUNGHE (29/09, prova in 7 lingue): «Niedergeschlagenheit» usciva
   dalla scheda dell'emozione e finiva sul rullo della pergamena; in russo
   «эмоциональную» toccava i bordi del cartello. Nelle schede e nei cartelli
   la parola va a capo con il trattino, o spezzata se la lingua non ne ha. */
.ec-t, .jcard h3, .jcard p, .ct-porta, .cs-targa, .emo-card :is(h3, h4, strong),
.pk-titolo, .rs-titolo, .gd-card :is(h3, h4, strong) {
  min-width: 0; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
}

/* IL MODULO RESTA IN VISTA (29/09, collaudo a 1440×900 e 1024×768): dopo una
   ricerca di Prospero la scheda cresceva oltre la scena, scorreva dentro di sé
   e «Cerca» finiva sotto il bordo, invisibile. Il campo e il pulsante restano
   attaccati in fondo alla scheda; sopra scorrono le risposte. */
:root[data-materia] { --carta-fondo: #e7d4aa; }
:root[data-materia='film'] { --carta-fondo: #c9ba96; }
/* solo dove la scheda scorre: sul telefono non scorre, e il fondo piatto
   del modulo si vedeva come un riquadro sulla pergamena */
@media (min-width: 681px) {
  .scene-stage .scene-ask .scene-form {
    position: sticky; bottom: -.95rem; z-index: 2;
    margin-bottom: -.9rem; padding: .6rem 0 .9rem;
    background: linear-gradient(to bottom, transparent 0, var(--carta-fondo, var(--scene-card-bg)) .6rem);
  }
}

/* IL TELEFONO DI TRAVERSO (29/09, collaudo a 844×390): la guida di Ariel era
   più alta dello spazio e la testa finiva sotto l'intestazione. Sugli schermi
   bassi la guida ha un tetto e scorre dentro di sé. */
@media (max-height: 500px) {
  .gd-card { max-height: 62dvh; overflow-y: auto; overscroll-behavior: contain; max-width: min(40rem, calc(100vw - 2rem)); padding: .6rem 1rem .6rem; }
  .gd-card .gd-verse { font-size: .98rem; line-height: 1.3; }
  .gd-card .gd-text { font-size: .92rem; line-height: 1.35; }
}

/* LA BARRA SUI TELEFONI PICCOLI (29/09, collaudo a 320px): le scritte
   scendevano a 10px e in russo si troncavano. Si allarga lo spazio togliendo i margini; la misura resta quella delle barre di iOS (10 punti), perché a 11 «Проспе…» si tagliava. */
@media (max-width: 360px) {
  body nav#app-nav { padding-left: .1rem; padding-right: .1rem; }
}
/* …ma i cartelli della foresta si allargano sulla parola prima di spezzarla:
   con min-width 0 a 320px diventava «Un'emozio-ne» */
.jcard h3, .jcard p { min-width: auto; overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }

/* SAFARI INGRANDISCE LA PAGINA quando si tocca un campo sotto i 16px (Simulatore,
   29/09): dopo la risposta di Prospero il campo prende il fuoco da sé, la
   pagina si ingrandiva e la pergamena usciva dai bordi. Sui touch 16px netti. */
@media (pointer: coarse), (max-width: 680px) {
  body :is(#text, .scene-input, .scene-input-multi, .cucw-input, #admin-user-filter) { font-size: 16px !important; }
}

/* LE CASELLE DEL VERSO (29/09, Simulatore): vuote erano alte 2px (il solo
   filetto) e una parola col trattino alta una riga: nella stessa riga le parole
   stavano ad altezze diverse, e una finiva a metà fra le due righe. Ogni
   casella è alta una riga, piena o vuota, e le parole si allineano in basso. */
.mp-casella { height: 1.3em; line-height: 1.3em; vertical-align: bottom; }
.mp-parola { align-items: flex-end; }
.mp-frase { align-items: flex-end; }

/* ==========================================================================
 * IL CARTIGLIO PIÙ IN BASSO (29/09/2026, Mauro dal telefono: «il cartiglio
 * copre l'immagine, mettilo più giù»). Stava 3,8rem sopra la barra per far
 * posto a «Continua qui sotto» e a Jaques: l'invito ora è l'ultima riga della
 * scheda, e Jaques, finché la scena è in vista, sale in alto a destra sotto
 * l'intestazione; quando si scorre torna al suo posto in basso.
 * ========================================================================== */
@media (max-width: 640px) {
  body.scena-piena .scene-stage.ha-fondale .scene-ask {
    bottom: .6rem !important;
    max-height: calc(var(--vh-utile, 100dvh) - var(--barra-h, 4.6rem) - .6rem - 5.6rem);
  }
  body.scena-piena:not(.a-casa):not(.scorso) .cucw:not(.is-open) {
    top: calc(var(--hero-top, 5rem) + .5rem); bottom: auto;
  }
  body.scena-piena:not(.a-casa):not(.scorso) .cucw:not(.is-open) .cucw-launch { width: 2.9rem; height: 2.9rem; }
  /* l'invito dentro la scheda: una riga piccola, in inchiostro */
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scena-giu {
    display: inline-flex; align-items: center; gap: .35rem; margin: .5rem 0 0; padding: .15rem 0;
    background: none; border: 0; box-shadow: none; color: #6a4e2c;
    font: 600 12px var(--sans); letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scena-giu .scena-giu-f { animation: giu 1.6s ease-in-out infinite; text-decoration: none; }
}

/* il costo sotto il pulsante (Amleto, Rosalind): lo stesso cartellino di Puck */
.costo-riga { margin: .45rem 0 0; display: flex; }
.pk-costo.is-finite { color: #8a2a1c; border-color: #c98a7a; }
.dwrite-row + .costo-riga { margin-top: .55rem; }

/* chiudere il libro di Rosalind */
.dbook-chiudi {
  display: block; margin: .8rem auto 0; padding: .45rem 1.1rem; border-radius: 999px;
  font: 600 .8rem var(--sans); letter-spacing: .04em; cursor: pointer;
  background: transparent; color: var(--fg); border: 1px solid var(--line);
}
.dbook-chiudi:disabled { opacity: .45; cursor: default; }

/* la parte gratis di Prospero, detta come sotto Puck */
.pro-gratis-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 1.2rem 0 .3rem; }
/* Puck e Prospero: il cartellino sopra, poi «Continua qui sotto» a sinistra e il pulsante a destra */
.pk-a-capo { display: none; }
@media (max-width: 640px) {
  body.scena-piena .scene-stage.ha-fondale .pk-azioni { justify-content: flex-start; row-gap: .5rem; }
  body.scena-piena .scene-stage.ha-fondale .pk-azioni .pk-a-capo { display: block; flex-basis: 100%; height: 0; }
  body.scena-piena .scene-stage.ha-fondale .pk-azioni .scena-giu { margin: 0 auto 0 0; }
}
.dbook-chiudi.is-cima { margin: 0 0 .6rem auto; padding: .3rem .8rem; font-size: .74rem; }
.dbook-chiudi.is-cima::before { content: '✕'; margin-right: .35rem; font-size: .8em; }
/* il messaggio accanto a «Cerca il caso» (microfono negato, attesa): a capo
   sotto i pulsanti, non una colonna stretta di fianco (Simulatore, 29/09) */
.scene-ask.is-comando #ask .row { flex-wrap: wrap; }
.scene-ask.is-comando #ask .row #status:not(:empty) { flex-basis: 100%; order: 9; font-size: .85rem; line-height: 1.35; margin: 0; }
.scene-ask.is-comando #ask .row #status:empty { display: none; }

/* JAQUES IN ALTO SENZA STRISCIA INVISIBILE (29/09/2026, Mauro: «non funziona
   il muto»): una regola più specifica gli lasciava il bordo in basso, e il
   contenitore si allungava per tutto lo schermo sul lato destro, prendendosi
   il tocco sull'altoparlante del cartiglio. Ora il contenitore non prende
   tocchi: li prendono solo il pulsante e il pannello. */
.cucw { pointer-events: none; }
.cucw > * { pointer-events: auto; }
@media (max-width: 640px) {
  body.scena-piena:not(.a-casa):not(.scorso):has(#app-nav:not([hidden])) .cucw:not(.is-open),
  body.scena-piena:not(.a-casa):not(.scorso) .cucw:not(.is-open) { bottom: auto !important; }
}

/* IL CARTIGLIO COMPATTO SUL TELEFONO (29/09/2026, Mauro: «i cartigli continuano
   a coprire le immagini»): coprivano dal 44% al 66% della scena. Il verso e la
   sua resa restano detti dalla voce entrando e scritti sul computer; qui restano
   il nome, la domanda, il campo (una riga finché è vuoto) e il pulsante. */
@media (max-width: 640px) {
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-verse,
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-gloss { display: none; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-who { margin-bottom: 0; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-q { font-size: .92rem; line-height: 1.3; margin: .25rem 0 .45rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask #text:placeholder-shown:not(:focus),
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-input-multi:placeholder-shown:not(:focus) {
    height: calc(1.45em + 1.1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.scena-piena .scene-stage.ha-fondale .scene-ask { padding-top: .6rem !important; padding-bottom: .65rem !important; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .costo-riga { margin-top: .35rem; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .pk-azioni { margin-top: .4rem; }
}
/* «Continua qui sotto» sulla riga del nome, a sinistra dell'altoparlante; il
   costo e il pulsante su una riga sola */
@media (max-width: 640px) {
  body.scena-piena .scene-stage.ha-fondale .scene-ask { position: absolute; }
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scena-giu {
    position: absolute; top: .55rem; inset-inline-end: 2.7rem; margin: 0; font-size: 11.5px; /* dal lato dell'altoparlante: in arabo il nome sta a destra */
  }
  body.scena-piena .scene-stage.ha-fondale .pk-azioni { justify-content: space-between; flex-wrap: nowrap; }
  body.scena-piena .scene-stage.ha-fondale .pk-azioni .pk-costo { flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 1.25; }
}

/* LA NUVOLETTA DEL VERSO (29/09/2026): sul telefono il verso di Shakespeare lo
   dice il personaggio, in inglese, accanto alla testa; nel cartiglio resta la
   sua resa nella lingua di chi legge. Sul computer non c'è: il cartiglio sta
   accanto alla scena e ha tutti e due. */
.scene-nuvola { display: none; }
@media (max-width: 640px) {
  body.scena-piena .scene-stage.ha-fondale .scene-nuvola {
    display: block; position: absolute; z-index: 4; margin: 0;
    width: max-content; max-width: min(66vw, 17rem);
    padding: .5rem .75rem .55rem; border-radius: 14px;
    background: rgba(250, 243, 226, .94); color: #2a1a0c;
    border: 1px solid rgba(120, 88, 44, .45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    font: italic 500 .9rem/1.32 var(--serif); letter-spacing: .005em;
    pointer-events: none; animation: rise-in .45s ease-out both;
  }
  body.scena-piena .scene-stage.ha-fondale .scene-nuvola[hidden] { display: none; }
  /* la coda, verso la testa */
  body.scena-piena .scene-stage.ha-fondale .scene-nuvola::after {
    content: ''; position: absolute; bottom: -9px; left: calc(var(--coda, 24px) - 9px);
    width: 16px; height: 16px; transform: rotate(45deg);
    background: rgba(250, 243, 226, .94);
    border-right: 1px solid rgba(120, 88, 44, .45); border-bottom: 1px solid rgba(120, 88, 44, .45);
  }
  /* nel cartiglio torna la spiegazione (la resa), non il verso */
  body.scena-piena .scene-stage.ha-fondale .scene-ask .scene-gloss {
    display: block; font: italic .84rem/1.35 var(--serif); color: #5a4028; margin: .15rem 0 .1rem;
  }
}
@media (max-width: 640px) {
  /* di fianco alla testa: la coda esce dal lato che la guarda */
  body.scena-piena .scene-stage.ha-fondale .scene-nuvola.coda-lato::after { bottom: auto; top: calc(var(--coda-y, 20px) - 8px); }
  body.scena-piena .scene-stage.ha-fondale .scene-nuvola.coda-lato.coda-sx::after { left: -9px; border: 0; border-left: 1px solid rgba(120, 88, 44, .45); border-bottom: 1px solid rgba(120, 88, 44, .45); }
  body.scena-piena .scene-stage.ha-fondale .scene-nuvola.coda-lato.coda-dx::after { left: auto; right: -9px; border: 0; border-right: 1px solid rgba(120, 88, 44, .45); border-top: 1px solid rgba(120, 88, 44, .45); }
}
/* sui telefoni più stretti il costo sta sopra il pulsante, su una riga sua:
   accanto si stringeva in una colonna di una parola per riga (ungherese, 29/09) */
@media (max-width: 360px) {
  body.scena-piena .scene-stage.ha-fondale .pk-azioni { flex-wrap: wrap; }
  body.scena-piena .scene-stage.ha-fondale .pk-azioni .pk-costo { flex: 1 1 100%; }
  body.scena-piena .scene-stage.ha-fondale .pk-azioni .scene-go { margin-inline-start: auto; }
}

/* IL DIARIO: consegnare o tenere per sé, e dettare (29/09/2026) */
.dwrite-row { flex-wrap: wrap; row-gap: .5rem; }
.dwrite-tieni {
  padding: .5rem .9rem; border-radius: 999px; cursor: pointer;
  font: 600 .82rem var(--sans); letter-spacing: .02em;
  background: transparent; color: var(--fg); border: 1px solid var(--line);
}
.dwrite-tieni:disabled, .dwrite-save:disabled { opacity: .55; cursor: default; }
.dwrite-mic { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.dwrite-mic .icn-t { width: 1.1rem; height: 1.1rem; }
.dwrite-row .d-count { margin-inline-start: auto; }
.dbk-consegna { margin-top: .9rem; }

/* LA PARTITA IN SOSPESO (29/09/2026, «Esci e salva»): la carta in cima alla
   mappa e al menù del Globe. Oro pieno come la raffica — è la prima cosa da
   toccare — e i due pulsanti uno sotto l'altro, larghi come la carta: sul
   telefono il pollice non deve scegliere fra due bersagli stretti. Classi sue
   (mp-sospesa, gm-sospesa): non tocca le carte del verso e della raffica. */
.mp-sospesa { border-style: solid; border-width: 2px; border-color: color-mix(in srgb, var(--gold) 70%, var(--line)); margin-bottom: .9rem; }
.mp-sospesa .mp-tappa-nome::before { content: '⏸ '; }
.mp-sospesa-azioni { display: flex; flex-direction: column; gap: .5rem; }
.mp-sospesa-azioni .game-other { width: 100%; min-height: 44px; margin: 0; }
.gm-sospesa:empty { display: none; }

/* LA TESTATA CON LA STRISCIA DELLE LETTURE (29/09/2026): sui telefoni il nome
   si tagliava in «You…». Quando la striscia c'è, resta il medaglione delle
   maschere — è lo stesso volto dell'icona dell'app — e il nome si ritira. */
@media (max-width: 480px) {
  .topbar:has(#crediti:not([hidden])) .brandtext { display: none; }
}

/* --- L'ATTIVITÀ (30/09/2026) ------------------------------------------------
   Chi arriva, chi torna, e i segni dei post (attivita.js). Classi tutte `att-`
   e nuove: niente da spartire col cockpit né con le persone, così un ritocco
   qui non sposta niente altrove. Con la quarta voce le sotto-tab dell'admin non
   stanno più in una riga sul telefono: vanno a capo, solo qui (la stessa classe
   .subtabs serve anche alla mappa delle emozioni, che non va toccata). */
#admin-subtabs { flex-wrap: wrap; row-gap: .2rem; }
.att { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.att-vuoto { color: var(--muted); font-size: .85rem; margin: 0; }
.att-nota { color: var(--muted); font-size: .8rem; margin: 0 0 .7rem; line-height: 1.45; }
.att-h { font: 700 1.05rem/1.3 var(--serif); margin: 0 0 .6rem; color: var(--fg); }
.att-blocco { min-width: 0; }

/* Il periodo (30/09/2026): le scorciatoie in una riga che va a capo, sotto i due
   campi data «Da» e «A», larghi quanto serve al calendario nativo e non di più. */
.att-periodo {
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem;
}
.att-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.att-date { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.att-campo { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 7rem; min-width: 0; max-width: 14rem; }
.att-coda { white-space: nowrap; }
.att-campo-l { font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.att-campo .att-input-data { width: 100%; min-width: 0; box-sizing: border-box; }
.att-date-errore { margin: 0; }
.att-quando-periodo { margin: 0 0 .5rem; font-family: var(--sans); }
.att-chip {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .03em;
  padding: .4rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
}
.att-chip:hover { border-color: var(--accent); color: var(--fg); }
.att-chip.is-active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

.att-carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem; }
.att-carta { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; min-width: 0; }
.att-carta p { margin: 0; }
.att-carta-h { font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Il ⓘ e il suo riquadro. Il bottone è piccolo a vedersi ma non a toccarsi: la
   zona di tocco si allarga col padding negativo del margine, non con la cifra. */
.att-info {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; min-height: 1.6rem; margin: -.4rem -.3rem -.4rem 0; padding: 0;
  background: none; border: 0; border-radius: 99px; cursor: pointer;
  font: 400 .85rem/1 var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; vertical-align: middle;
}
.att-info:hover, .att-info[aria-expanded="true"] { color: var(--accent); }
.att-info:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
.att-pop {
  position: absolute; z-index: 1000; box-sizing: border-box;
  background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .75rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font: .8rem/1.45 var(--sans); text-transform: none; letter-spacing: 0; text-align: start; white-space: normal;
}
.att-pop-h { display: block; margin-bottom: .2rem; font-weight: 700; }
.att-pop p { margin: 0; }

/* Da dove: due righe sotto le carte, i numeri in chiaro e lo zero spento. */
.att-dadove { margin-top: .7rem; display: flex; flex-direction: column; gap: .25rem; }
.att-dadove-h { margin: 0; font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.att-dadove-r { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-family: var(--sans); font-size: .8rem; align-items: baseline; }
.att-dadove-chi { min-width: 4.5rem; color: var(--muted); }
.att-pf b { font-variant-numeric: tabular-nums; }
.att-pf.is-zero { color: var(--muted); }
.att-carta-n { font: 700 1.9rem/1.15 var(--serif); font-variant-numeric: tabular-nums; color: var(--fg); margin: .15rem 0 !important; }
.att-delta { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.att-delta.is-su { color: var(--gold); font-weight: 600; }
.att-delta.is-giu { color: var(--accent); }

/* Il grafico: barre nell'SVG (si deformano senza danno), scritte fuori. */
.att-asse-y { font-family: var(--sans); font-size: .72rem; color: var(--muted); margin-bottom: .2rem; }
.att-area { position: relative; padding-top: 1.1rem; }
.att-svg { display: block; width: 100%; height: 170px; border-bottom: 1px solid var(--line); overflow: visible; }
.att-griglia { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.att-b-nuovi { fill: var(--accent); }
/* nuovi nel colore dell'accento, attivi in inchiostro: due tinte che non si
   confondono né sulla carta né al buio (oro e salmone, di notte, si somigliano) */
.att-b-attivi { fill: color-mix(in srgb, var(--fg) 28%, transparent); }
.att-b-ritorno { fill: color-mix(in srgb, var(--fg) 80%, transparent); }
.att-segno-linea { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.att-presa { fill: transparent; cursor: pointer; }
.att-presa:hover { fill: color-mix(in srgb, var(--fg) 7%, transparent); }
.att-bandiera {
  position: absolute; top: 0; transform: translateX(-50%);
  background: none; border: 0; padding: 0 .15rem; cursor: pointer;
  font-size: .9rem; line-height: 1; color: var(--fg);
}
.att-bandiera:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.att-asse-x { display: flex; justify-content: space-between; font-family: var(--sans); font-size: .72rem; color: var(--muted); margin-top: .3rem; }
/* meno di sette giorni: ogni data sotto la sua colonna, non sparse ai due lati */
.att-asse-x.is-poste { position: relative; display: block; height: 1.1rem; }
.att-asse-x.is-poste span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.att-legenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem; font-family: var(--sans); font-size: .74rem; color: var(--muted); }
.att-voce { display: inline-flex; align-items: center; gap: .35rem; }
.att-campione { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; }
.att-campione.is-nuovi { background: var(--accent); }
.att-campione.is-attivi { background: color-mix(in srgb, var(--fg) 28%, transparent); }
.att-campione.is-ritorno { background: color-mix(in srgb, var(--fg) 80%, transparent); }
.att-campione.is-segno { width: 0; height: .8rem; border-radius: 0; border-left: 1px dashed var(--fg); }
.att-didascalia { margin: .55rem 0 0; font-size: .8rem; color: var(--fg); line-height: 1.4; min-height: 2.3em; }

/* I segni: modulo e elenco. */
.att-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.att-input {
  font: .85rem/1.3 var(--sans); padding: .45rem .6rem; min-width: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg);
}
.att-input-data { flex: 0 0 auto; color-scheme: light dark; }
.att-input-testo { flex: 1 1 14rem; }
.att-bottone {
  font: 600 .8rem/1 var(--sans); padding: .5rem .9rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
}
.att-bottone:disabled { opacity: .6; cursor: default; }
.att-errore { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--accent); }
.att-segni { list-style: none; margin: .8rem 0 0; padding: 0; }
.att-segno { display: flex; align-items: baseline; gap: .7rem; padding: .45rem 0; border-bottom: 1px dotted var(--line); font-size: .85rem; }
.att-segno-d { flex: 0 0 auto; font-family: var(--sans); font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.att-segno-l { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.att-togli {
  flex: 0 0 auto; font: .76rem/1 var(--sans); padding: .3rem .6rem; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
}
.att-togli:hover { border-color: var(--accent); color: var(--accent); }

/* Le persone: la tabella scorre dentro la sua scatola, mai la pagina. */
.att-scorre { overflow-x: auto; max-width: 100%; }
.att-tabella { width: 100%; border-collapse: collapse; font-size: .82rem; }
.att-tabella th {
  text-align: start; font-family: var(--sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: .45rem .7rem .4rem 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.att-tabella td { padding: .45rem .7rem .45rem 0; border-bottom: 1px dotted var(--line); vertical-align: baseline; }
.att-tabella .num { text-align: end; font-variant-numeric: tabular-nums; }
/* Le intestazioni si toccano per ordinare: il bottone eredita il carattere del th. */
.att-th { display: inline-flex; align-items: center; gap: .15rem; }
.att-ordina {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; padding: .2rem 0; cursor: pointer; white-space: nowrap;
}
.att-ordina:hover, .att-tabella th.is-ordinata .att-ordina { color: var(--fg); }
.att-ordina:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.att-freccia { display: inline-block; min-width: .8em; opacity: .45; }
.att-tabella th.is-ordinata .att-freccia { opacity: 1; color: var(--accent); }
.att-filtri { margin-bottom: .6rem; }
.att-pf-cella { white-space: nowrap; }
.att-pf-segno { display: inline-flex; width: 1em; margin-inline-end: .3rem; justify-content: center; color: var(--muted); font-size: .75rem; }
.att-muto { color: var(--muted); }
.att-chi { min-width: 11rem; }
.att-email { font-weight: 600; overflow-wrap: anywhere; }
.att-nick { display: block; color: var(--muted); font-size: .76rem; }
.att-quando { color: var(--muted); white-space: nowrap; }
.att-badge {
  margin-inline-start: .4rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 99px; padding: 0 .4rem; white-space: nowrap;
}
.att-badge.is-nuovo { color: var(--accent); }
.att-badge.is-ritorna { color: var(--gold); }

/* Le origini: nome, barra, frazione — la percentuale da sola mente coi numeri piccoli. */
.att-origini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.att-origine { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto; align-items: center; gap: .6rem; font-size: .82rem; }
.att-origine-nome { overflow-wrap: anywhere; }
.att-origine-barra { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.att-origine-pieno { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.att-origine-n { font-family: var(--sans); font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }