/* Fable RPG. Sistema "notte di velluto e fotocopia": nero, lilla cenere, pervinca, un solo punto cremisi (il dardo).
   Impaginazione alla Perplexity (barra laterale, colonna centrale, pannelli di vetro) con resa cinematografica: sfondi sfocati, grana, profondita' 3D.
   Solo tema scuro. Le immagini seguono i riferimenti di Edeen (collage fotografico grana, bicromia malva/pervinca). */
:root {
  --nero: #060509;
  --notte: #0b0a10;
  --vetro: rgba(19, 16, 27, .62);
  --vetro-2: rgba(33, 28, 48, .7);
  --vetro-3: rgba(52, 44, 76, .55);
  --filo: rgba(199, 181, 236, .12);
  --filo-2: rgba(199, 181, 236, .26);
  --perla: #ece8f4;
  --fumo: #9d95b0;
  --lilla: #c7b5ec;
  --pervinca: #8f9bff;
  --malva: #b892bc;
  --dardo: #d0293d;
  --ooc: #82a7c9;
  --ok: #8fd0a6;
  --attesa: #e3c27e;
  /* caratteri scelti da Edeen (campionario, opzione B): Bodoni Moda per titoli e gioco, Manrope per l'interfaccia */
  --f-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --f-gioco: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --f-ui: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-etichetta: "Manrope", "Segoe UI", system-ui, sans-serif;
  --r: 18px;
  --r-s: 12px;
  --ombra: 0 30px 80px -20px rgba(0, 0, 0, .75), 0 0 0 1px var(--filo);
  --lato: max(16px, env(safe-area-inset-left, 0px));
  --lato-d: max(16px, env(safe-area-inset-right, 0px));
  --rail: 248px;
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { background: var(--nero) }
body { margin: 0; background: var(--nero); color: var(--perla); font: 16px/1.6 var(--f-ui); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { max-width: 100%; display: block }
a { color: var(--lilla); text-decoration-color: var(--filo-2); text-underline-offset: 3px }
a:hover { color: var(--perla) }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; color: var(--perla); text-wrap: balance; margin: 0; line-height: 1.02; letter-spacing: -.01em }
h1 { font-size: clamp(2.4rem, 5vw, 4rem) }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem) }
h3 { font-size: 1.35rem; font-weight: 600 }
p { margin: 0 }
button { font: inherit }
:focus-visible { outline: 2px solid var(--pervinca); outline-offset: 2px; border-radius: 6px }
::selection { background: var(--pervinca); color: var(--nero) }
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-thumb { background: var(--vetro-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box }
.salta { position: absolute; left: -999px; top: 8px; z-index: 90; background: var(--lilla); color: var(--nero); padding: 6px 12px; border-radius: 8px }
.salta:focus { left: 8px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.etichetta { font: 700 .66rem/1.2 var(--f-etichetta); letter-spacing: .16em; text-transform: uppercase; color: var(--fumo) }
.fumo { color: var(--fumo) }
.vuoto-stato { color: var(--fumo); font-style: italic; padding: 20px 0; font-family: var(--f-gioco) }

/* ---------------------------------------------------------------- cinema: sfondo sfocato, velo, grana */
.cinema { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden }
.cinema-img { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(28px) saturate(.9) brightness(.55); opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 12s ease-out }
.cinema-img.attiva { opacity: 1; transform: scale(1) }
.cinema-velo { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 0%, rgba(6,5,9,.55) 60%, rgba(6,5,9,.95) 100%), linear-gradient(180deg, rgba(6,5,9,.25), rgba(6,5,9,.7)) }
.grana { position: absolute; inset: -50%; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grana 1.2s steps(6) infinite }
@keyframes grana { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion: reduce) { .grana { animation: none } .cinema-img { transition: opacity .3s } }

/* ---------------------------------------------------------------- vetro */
.vetro { background: var(--vetro); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); border-radius: var(--r); box-shadow: var(--ombra); position: relative }
.vetro::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(199,181,236,.35), rgba(199,181,236,.05) 40%, rgba(143,155,255,.18)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none }
.pannello { padding: 24px; display: grid; gap: 16px; min-width: 0; align-content: start }

/* ---------------------------------------------------------------- barra laterale */
.rail { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: var(--rail); padding: calc(20px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 22px; background: linear-gradient(180deg, rgba(10,9,15,.82), rgba(10,9,15,.92)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid var(--filo) }
.marchio { display: flex; align-items: baseline; gap: 2px; font: 400 1.75rem/1 var(--f-display); color: var(--perla); text-decoration: none; padding: 4px 10px; letter-spacing: .01em }
.marchio b { font-weight: 600; color: var(--lilla) }
.marchio i { width: .26em; height: .26em; border-radius: 50%; background: var(--dardo); box-shadow: 0 0 10px var(--dardo); display: inline-block; margin-left: .1em }
.voci { display: grid; gap: 2px }
.voce-nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--fumo); text-decoration: none; font: 500 .98rem var(--f-ui); position: relative; transition: background .2s, color .2s }
.voce-nav svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.voce-nav:hover { background: rgba(199,181,236,.07); color: var(--perla) }
.voce-nav[aria-current="page"] { background: linear-gradient(90deg, rgba(143,155,255,.16), rgba(143,155,255,.04)); color: var(--perla); box-shadow: inset 0 0 0 1px var(--filo) }
.voce-nav[aria-current="page"] svg { stroke: var(--pervinca) }
.badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--dardo); color: #fff; font: 700 .72rem/20px var(--f-ui); text-align: center; box-shadow: 0 0 12px rgba(208,41,61,.6) }
.rail-fondo { margin-top: auto; display: grid; gap: 10px }
.pg-mini { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-radius: 14px; text-decoration: none; color: var(--perla) }
.pg-mini img, .pg-mini .vuoto-ritratto { width: 46px; height: 58px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px var(--filo-2) }
.pg-mini b { font: 600 1.05rem/1.1 var(--f-display); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pg-mini span { font-size: .78rem; color: var(--fumo); display: block }
.scegli-pg { width: 100%; font-size: .85rem }
.io-riga { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: .85rem; color: var(--fumo) }
.io-riga img { width: 26px; height: 26px; border-radius: 50% }
.io-riga button { margin-left: auto }
.tab-tel { display: none }
main { position: relative; z-index: 1; margin-left: var(--rail); min-height: 100vh }
@media (max-width: 900px) {
  :root { --rail: 0px }
  .rail { position: sticky; width: auto; bottom: auto; flex-direction: row; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) var(--lato-d) 10px var(--lato); border-right: 0; border-bottom: 1px solid var(--filo); gap: 10px }
  .rail .voci, .rail .io-riga, .rail .pg-mini { display: none }
  .rail-fondo { margin: 0 0 0 auto; display: flex; gap: 8px; align-items: center }
  .scegli-pg { max-width: 170px }
  .marchio { font-size: 1.45rem; padding: 0 }
  main { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) }
  .tab-tel { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 6px var(--lato-d) calc(6px + env(safe-area-inset-bottom, 0px)) var(--lato); background: rgba(10,9,15,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--filo) }
  .tab-tel a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; color: var(--fumo); text-decoration: none; font: 500 .68rem var(--f-ui); position: relative }
  .tab-tel svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
  .tab-tel a[aria-current="page"] { color: var(--perla) }
  .tab-tel a[aria-current="page"] svg { stroke: var(--pervinca) }
  .tab-tel .badge { position: absolute; top: 0; left: 55%; margin: 0; min-width: 16px; height: 16px; font-size: .62rem; line-height: 16px }
}

/* ---------------------------------------------------------------- controlli */
.btn { font: 600 .9rem/1 var(--f-ui); letter-spacing: .01em; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--filo-2); background: rgba(199,181,236,.06); color: var(--perla); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, border-color .2s, transform .15s, box-shadow .2s; white-space: nowrap }
.btn:hover { background: rgba(199,181,236,.13); border-color: var(--lilla); color: var(--perla) }
.btn:active { transform: translateY(1px) }
.btn.pieno { background: linear-gradient(135deg, var(--lilla), var(--pervinca)); color: #0b0a14; border-color: transparent; box-shadow: 0 8px 30px -8px rgba(143,155,255,.7) }
.btn.pieno:hover { box-shadow: 0 10px 40px -6px rgba(143,155,255,.9); color: #0b0a14 }
.btn.rosso { border-color: rgba(208,41,61,.5); color: #f08a96; background: rgba(208,41,61,.08) }
.btn.rosso:hover { background: rgba(208,41,61,.18); border-color: var(--dardo) }
.btn.piccolo { padding: 7px 12px; font-size: .8rem }
.btn.discord { background: #5865f2; border-color: #5865f2; color: #fff }
.btn.discord:hover { background: #4752c4 }
.btn:disabled { opacity: .4; cursor: not-allowed }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--filo); background: rgba(199,181,236,.05); color: var(--perla); font: 500 .84rem var(--f-ui); text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s }
.chip:hover { border-color: var(--filo-2); background: rgba(199,181,236,.1); color: var(--perla) }
.chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover }
.chip[aria-pressed="true"], .chip[aria-current="page"] { border-color: var(--pervinca); background: rgba(143,155,255,.14) }
.chips { display: flex; gap: 8px; flex-wrap: wrap }
input, select, textarea { font: 1rem/1.5 var(--f-ui); color: var(--perla); background: rgba(6,5,9,.55); border: 1px solid var(--filo); border-radius: var(--r-s); padding: 11px 14px; width: 100%; min-width: 0; transition: border-color .2s, box-shadow .2s }
select { cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fumo) 50%), linear-gradient(135deg, var(--fumo) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px }
textarea { resize: vertical; font-family: var(--f-gioco); font-size: 1.04rem }
input:focus, select:focus, textarea:focus { border-color: var(--pervinca); outline: none; box-shadow: 0 0 0 4px rgba(143,155,255,.12) }
input::placeholder, textarea::placeholder { color: rgba(157,149,176,.7) }
label.campo { display: grid; gap: 7px }
.campi { display: grid; gap: 16px }
.campi.due { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.azioni { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.pill { font: 700 .66rem var(--f-etichetta); letter-spacing: .12em; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; display: inline-block; line-height: 1.2 ; text-transform: uppercase }
.pill.approvata { color: var(--ok) } .pill.attesa { color: var(--attesa) } .pill.correggere { color: #f08a96 } .pill.bozza { color: var(--fumo) }
.segmenti { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(6,5,9,.5); border: 1px solid var(--filo) }
.segmenti button { border: 0; background: transparent; color: var(--fumo); padding: 8px 16px; border-radius: 999px; cursor: pointer; font: 600 .86rem var(--f-ui); transition: background .25s, color .25s }
.segmenti button[aria-selected="true"] { background: var(--vetro-3); color: var(--perla); box-shadow: 0 0 0 1px var(--filo-2) }

/* ---------------------------------------------------------------- pagine */
.pagina { max-width: 1180px; margin: 0 auto; padding: 48px var(--lato-d) 96px var(--lato); display: grid; gap: 36px; align-content: start }
.pagina.stretta { max-width: 860px }
.testa-pagina { display: grid; gap: 12px }
.testa-pagina p { color: var(--fumo); max-width: 62ch; font-size: 1.05rem }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px }
.entra { animation: entra .7s cubic-bezier(.2,.7,.2,1) both }
.entra-2 { animation-delay: .08s } .entra-3 { animation-delay: .16s } .entra-4 { animation-delay: .24s }
@keyframes entra { from { opacity: 0; transform: translateY(14px) } }
@media (prefers-reduced-motion: reduce) { .entra { animation: none } }

/* ---------------------------------------------------------------- 3D: inclinazione al passaggio del mouse */
[data-tilt] { transform-style: preserve-3d; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1) }
[data-tilt].muove { transition: transform .08s linear }
[data-tilt] .riflesso { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.22), transparent 45%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s }
[data-tilt]:hover .riflesso { opacity: 1 }

/* ---------------------------------------------------------------- ingresso */
.eroe { position: relative; min-height: min(86vh, 820px); display: grid; align-items: center; overflow: hidden }
.eroe > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; animation: kenburns 30s ease-out both }
@keyframes kenburns { from { transform: scale(1.12) translateX(2%) } to { transform: scale(1) } }
.eroe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,5,9,.92) 0%, rgba(6,5,9,.6) 40%, transparent 70%), linear-gradient(0deg, var(--nero) 0%, transparent 30%) }
.eroe-testo { position: relative; z-index: 2; padding: 60px var(--lato-d) 60px max(48px, var(--lato)); display: grid; gap: 22px; justify-items: start; max-width: 720px }
.eroe h1 { font-size: clamp(3.6rem, 10vw, 8.5rem); font-weight: 400; line-height: .86; letter-spacing: -.02em }
.eroe h1 b { font-weight: 600; color: var(--lilla); display: block }
.eroe h1 i { color: var(--dardo); font-style: normal }
.motto { font: italic 1.35rem var(--f-gioco); color: var(--perla) }
.motto::before { content: ""; display: inline-block; width: .38em; height: .38em; border-radius: 50%; background: var(--dardo); margin-right: .6em; vertical-align: .12em; box-shadow: 0 0 12px var(--dardo) }
.eroe .intro { max-width: 48ch; color: var(--fumo); font-size: 1.08rem }
.domanda { width: min(640px, 100%); padding: 18px 18px 14px; display: grid; gap: 14px }
.domanda .finta { font: italic 1.2rem var(--f-gioco); color: var(--fumo); padding: 4px 6px }
.domanda .finta b { color: var(--perla); font-style: normal; font-weight: 500 }
.falene { position: absolute; inset: 0; z-index: 1; pointer-events: none }
.falene i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--lilla); box-shadow: 0 0 8px var(--lilla); opacity: 0; animation: polvere linear infinite }
@keyframes polvere { 0% { opacity: 0; transform: translate(0,0) } 15% { opacity: .9 } 100% { opacity: 0; transform: translate(-80px, -60vh) } }
@media (prefers-reduced-motion: reduce) { .falene { display: none } .eroe > img { animation: none } }
.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: passo }
.passi li { padding: 22px; display: grid; gap: 8px; align-content: start }
.passi li::before { counter-increment: passo; content: counter(passo, upper-roman); font: 400 2.2rem/1 var(--f-display); color: var(--malva) }
.passi b { font: 600 1.25rem var(--f-display) }
.passi p { color: var(--fumo); font-size: .95rem }
.carta-regione { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--perla); box-shadow: var(--ombra); display: grid; align-content: end }
.carta-regione img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0) scale(1.06); transition: transform .8s ease }
.carta-regione:hover img { transform: scale(1.12) }
.carta-regione::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,5,9,.94)) }
.carta-regione div { position: relative; z-index: 2; padding: 18px; display: grid; gap: 2px; transform: translateZ(40px) }
.carta-regione b { font: 600 1.6rem/1 var(--f-display) }
.carta-regione span { font-size: .85rem; color: var(--fumo) }
.carta-regione .vivo { position: absolute; z-index: 2; top: 14px; right: 14px; transform: translateZ(30px) }
.riga-regioni { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; overflow-x: auto; padding: 10px 4px 24px; scroll-snap-type: x mandatory; perspective: 1200px }
.riga-regioni > * { scroll-snap-align: start }
.due-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start }
@media (max-width: 860px) { .due-col { grid-template-columns: minmax(0, 1fr) } .eroe-testo { padding-left: var(--lato) } }

/* ---------------------------------------------------------------- mappa: sempre intera, in primo piano, mai sotto le barre */
.mappa { position: relative; height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 360px; overflow: hidden }
.palco { position: relative; container-type: size; display: grid; place-items: center; padding: 28px; min-width: 0; min-height: 0 }
.piano { position: relative; width: min(100cqw, 150cqh); aspect-ratio: 2400 / 1600; border-radius: 20px; overflow: hidden; box-shadow: 0 50px 120px -30px rgba(0,0,0,.95), 0 0 0 1px var(--filo-2), 0 0 140px -30px rgba(143,155,255,.35); animation: entra .9s cubic-bezier(.2,.7,.2,1) both }
.piano > img { position: absolute; inset: 0; width: 100%; height: 100% }
.piano svg { position: absolute; inset: 0; width: 100%; height: 100%; --k: 2 }
.strada { stroke: var(--lilla); stroke-width: calc(1.6px * var(--k)); stroke-dasharray: calc(1px * var(--k)) calc(7px * var(--k)); stroke-linecap: round; fill: none; opacity: .45 }
.strada.vicina { opacity: 1; stroke: var(--pervinca); stroke-width: calc(2.6px * var(--k)); filter: drop-shadow(0 0 6px rgba(143,155,255,.9)); animation: scorre 1.6s linear infinite }
@keyframes scorre { to { stroke-dashoffset: -60 } }
.giorni { font: 700 11px var(--f-ui); fill: var(--perla); paint-order: stroke; stroke: #060509; stroke-width: 3.5px; letter-spacing: .08em }
.piano.stretto .giorni { display: none }
.nodo { cursor: pointer }
.nodo .alone { fill: var(--pervinca); opacity: .14; transition: opacity .3s }
.nodo:hover .alone, .nodo:focus .alone, .nodo.scelto .alone { opacity: .4 }
.nodo .gemma { fill: #0b0a10; stroke: var(--perla); stroke-width: 2 }
.nodo.scelto .gemma { fill: var(--lilla); stroke: #fff }
.nodo .vita { fill: var(--dardo) }
.nodo .vita-onda { fill: none; stroke: var(--dardo); stroke-width: 2; animation: onda 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center }
@keyframes onda { from { transform: scale(.6); opacity: .9 } to { transform: scale(2.6); opacity: 0 } }
.nodo text { font: 600 19px var(--f-display); fill: var(--perla); paint-order: stroke; stroke: #060509; stroke-width: 4.5px; stroke-linejoin: round; pointer-events: none }
.nodo text.qui { font: 700 10px var(--f-etichetta); fill: var(--pervinca); letter-spacing: .14em; stroke-width: 3.5px }
.viandante { fill: var(--dardo); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 10px var(--dardo)) }
@media (prefers-reduced-motion: reduce) { .nodo .vita-onda, .strada.vicina { animation: none } }
.lato-mappa { position: relative; z-index: 2; margin: 20px 20px 20px 0; align-self: start; overflow: hidden; max-height: calc(100dvh - 40px); overflow-y: auto }
.lato-mappa .copertina { position: relative; aspect-ratio: 16 / 10 }
.lato-mappa .copertina img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r) var(--r) 0 0 }
.lato-mappa .copertina::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(19,16,27,.98)) }
.lato-mappa .dentro { padding: 0 22px 24px; margin-top: -48px; position: relative; z-index: 2; display: grid; gap: 14px }
.lato-mappa h2 { font-size: 2.4rem }
.stanze { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.stanza-riga { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; text-decoration: none; color: var(--perla); border: 1px solid transparent; transition: background .2s, border-color .2s }
a.stanza-riga:hover { background: rgba(199,181,236,.07); border-color: var(--filo) }
.stanza-riga img { width: 64px; height: 44px; border-radius: 9px; object-fit: cover }
.stanza-riga b { font-weight: 500; display: block; line-height: 1.25 }
.stanza-riga small { color: var(--fumo); font-size: .78rem }
.stanza-riga.chiusa { opacity: .5; cursor: not-allowed }
.presenza { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem var(--f-ui); color: var(--fumo); font-variant-numeric: tabular-nums }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--dardo); box-shadow: 0 0 8px var(--dardo) }
.punto.spento { background: transparent; box-shadow: none; border: 1px solid var(--filo-2) }
.viaggio { border-radius: 14px; padding: 16px; display: grid; gap: 10px; background: linear-gradient(135deg, rgba(143,155,255,.12), rgba(199,181,236,.04)); border: 1px solid rgba(143,155,255,.3) }
@media (max-width: 1060px) {
  .mappa { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible }
  .palco { container-type: normal; padding: 16px var(--lato-d) 12px var(--lato) }
  .piano { width: 100%; border-radius: 14px }
  .lato-mappa { margin: 0 var(--lato-d) 24px var(--lato); max-height: none }
}

/* ---------------------------------------------------------------- stanza di gioco */
.stanza { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 100vh; height: 100dvh }
.stanza > * { min-width: 0; min-height: 0 }
.scena-col { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0 }
.sipario { position: relative; min-height: 250px; padding-top: 70px; overflow: hidden; display: grid; align-content: end }
.sipario img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 40s ease-out both }
.sipario::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,5,9,.35) 0%, rgba(6,5,9,.55) 45%, rgba(11,10,16,.98) 100%), linear-gradient(90deg, rgba(6,5,9,.7), transparent 70%) }
.sipario .dentro { position: relative; z-index: 2; padding: 0 28px 14px; display: grid; gap: 8px; max-width: 900px; margin: 0 auto; width: 100% }
.sipario h1 { font-size: clamp(2rem, 4vw, 3rem) }
.sipario .descr { color: var(--fumo); font: italic .98rem var(--f-gioco); max-width: 70ch }
.sipario .scena { color: var(--perla); font: italic 1rem var(--f-gioco); padding: 6px 12px; border-left: 2px solid var(--dardo); background: rgba(208,41,61,.08); border-radius: 0 10px 10px 0; justify-self: start }
.sipario .indietro { position: absolute; z-index: 3; top: 16px; left: 20px }
.righe { overflow-y: auto; padding: 20px 28px 30px; display: flex; flex-direction: column; gap: 18px; overscroll-behavior: contain; scroll-behavior: smooth }
.righe > * { width: 100%; max-width: 820px; margin-left: auto; margin-right: auto }
.righe .altri { align-self: center; width: auto }
.msg { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; position: relative; animation: entra .5s cubic-bezier(.2,.7,.2,1) both }
.ritratto { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 600 1rem var(--f-display); color: var(--lilla); background: var(--vetro-3); box-shadow: 0 0 0 1px var(--filo-2); flex: none }
.ritratto img { width: 100%; height: 100%; object-fit: cover }
.msg .chi { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.msg .chi b { font: 600 1.12rem var(--f-display); color: var(--lilla) }
.msg .chi a { text-decoration: none }
.msg .chi time, .msg .chi .tag { font: 500 .72rem var(--f-ui); color: var(--fumo); letter-spacing: .04em }
.msg .corpo { font: 1.1rem/1.62 var(--f-gioco); overflow-wrap: anywhere; color: #ded8ea }
.parlato { color: #fff; text-shadow: 0 0 18px rgba(199,181,236,.35) }
.fuori { color: var(--ooc); font: .86rem var(--f-ui) }
.msg.png .chi b { color: var(--malva) }
.msg.png .ritratto { color: var(--malva); box-shadow: 0 0 0 1px var(--malva) }
.msg.sussurro { padding: 10px 14px; border-radius: 14px; background: rgba(143,155,255,.06); border: 1px dashed rgba(143,155,255,.35) }
.msg.sussurro .corpo { font-style: italic }
.msg.fg .corpo { font: .92rem var(--f-ui); color: var(--ooc) }
.msg.fg .chi b { font: 500 .9rem var(--f-ui); color: var(--ooc) }
.didascalia { text-align: center; padding: 18px 0; display: grid; gap: 10px; justify-items: center; position: relative; animation: entra .8s cubic-bezier(.2,.7,.2,1) both }
.didascalia::before, .didascalia::after { content: ""; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--dardo), transparent) }
.didascalia p { font: italic 1.25rem/1.55 var(--f-gioco); color: var(--perla); max-width: 60ch }
.didascalia .etichetta { color: #f08a96 }
.origlia { text-align: center; font: italic .88rem var(--f-gioco); color: var(--fumo); opacity: .8 }
.dado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(143,155,255,.1), rgba(6,5,9,.4)); border: 1px solid var(--filo); position: relative; animation: entra .5s both }
.gemma-dado { width: 58px; height: 58px; display: grid; place-items: center; perspective: 400px }
.gemma-dado span { width: 46px; height: 46px; display: grid; place-items: center; transform: rotate(45deg); border: 1.5px solid var(--lilla); border-radius: 8px; background: radial-gradient(circle at 30% 30%, rgba(199,181,236,.35), rgba(11,10,16,.9)); box-shadow: 0 0 24px -4px rgba(143,155,255,.7); animation: rotola 1s cubic-bezier(.2,.7,.2,1) both }
.gemma-dado b { transform: rotate(-45deg); font: 600 1.35rem var(--f-display); color: #fff; font-variant-numeric: tabular-nums }
@keyframes rotola { 0% { transform: rotate(45deg) rotateX(540deg) rotateY(360deg) scale(.3); opacity: 0 } 100% { transform: rotate(45deg) } }
.dado.critico .gemma-dado span { border-color: #fff; box-shadow: 0 0 34px 0 rgba(199,181,236,.95) }
.dado.fallimento .gemma-dado span { border-color: var(--dardo); box-shadow: 0 0 30px -2px rgba(208,41,61,.9) }
.dado .chi-tira { font-size: .95rem; color: var(--fumo) }
.dado .chi-tira b { color: var(--perla); font-weight: 500 }
.dado .conto { font: 500 .82rem var(--f-ui); color: var(--fumo); font-variant-numeric: tabular-nums }
.dado .esito { font: 700 .7rem var(--f-etichetta); letter-spacing: .12em ; text-transform: uppercase }
.dado.critico .esito { color: var(--lilla) } .dado.fallimento .esito { color: #f08a96 }
.togli { position: absolute; top: 0; right: 0; opacity: 0; background: rgba(208,41,61,.12); border: 0; border-radius: 8px; color: #f08a96; cursor: pointer; font: 600 .7rem var(--f-ui); padding: 3px 8px }
.msg:hover .togli, .dado:hover .togli, .didascalia:hover .togli, .togli:focus { opacity: 1 }
.compositore { padding: 0 24px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, var(--notte) 60%, transparent) }
.scatola { max-width: 820px; margin: 0 auto; padding: 14px 14px 10px; display: grid; gap: 10px; border-radius: 22px }
.scatola textarea { border: 0; background: transparent; box-shadow: none; padding: 4px 6px; min-height: 52px; max-height: 220px; resize: none; font-size: 1.08rem }
.scatola textarea:focus { box-shadow: none }
.scatola .barra { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.scatola .come { width: auto; max-width: 220px; padding: 7px 34px 7px 12px; border-radius: 999px; font-size: .85rem; background-color: rgba(199,181,236,.06) }
.invia { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: linear-gradient(135deg, var(--lilla), var(--pervinca)); color: #0b0a14; box-shadow: 0 8px 26px -8px rgba(143,155,255,.8); transition: transform .15s }
.invia:hover { transform: scale(1.06) }
.invia svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.altre-stanze { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: none }
.lato-stanza { border-left: 1px solid var(--filo); background: rgba(10,9,15,.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow-y: auto; padding: 22px 18px; display: grid; align-content: start; gap: 20px }
.presenti { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.presenti a { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--perla); padding: 6px; border-radius: 12px }
.presenti a:hover { background: rgba(199,181,236,.07) }
.presenti .ritratto { width: 32px; height: 32px }
@media (max-width: 1180px) { .stanza { grid-template-columns: minmax(0, 1fr) } .lato-stanza { display: none } }
@media (max-width: 900px) {
  .stanza { height: calc(100dvh - 58px - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) }
  .sipario { min-height: 0; padding-top: 56px }
  .sipario .indietro { top: 12px; left: 16px }
  .sipario .descr { display: none }
  .sipario .dentro { padding: 0 16px 10px }
  .righe { padding: 14px 16px }
  .compositore { padding: 0 10px 8px }
  .dado { grid-template-columns: auto minmax(0, 1fr) }
  .dado .conto { grid-column: 2 }
}

/* ---------------------------------------------------------------- carte dei personaggi (tarocchi 3D) */
.carta { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; text-decoration: none; color: var(--perla); display: block; transform-style: preserve-3d }
.carta .faccia { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 40px 80px -24px rgba(0,0,0,.9), 0 0 0 1px var(--filo-2) }
.carta .faccia img.volto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.carta .faccia::after { content: ""; position: absolute; inset: 10px; border-radius: 14px; border: 1px solid rgba(236,232,244,.28); pointer-events: none }
.carta .fronte::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(6,5,9,.94)) }
.carta .nome-carta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px 22px 24px; display: grid; gap: 6px; justify-items: start; transform: translateZ(50px) }
.carta .nome-carta b { font: 400 1.9rem/1 var(--f-display) }
.carta .nome-carta span { font-size: .82rem; color: var(--fumo) }
.carta .sigillo-carta { position: absolute; z-index: 2; top: 20px; right: 20px; width: 36px; height: 36px; display: grid; place-items: center; transform: translateZ(40px) rotate(45deg); border: 1px solid var(--perla); background: rgba(6,5,9,.6) }
.carta .sigillo-carta span { transform: rotate(-45deg); font: 600 1rem var(--f-display) }
.carta .retro { transform: rotateY(180deg) }
.carta-girevole { transition: transform .9s cubic-bezier(.2,.7,.2,1) }
.carta-girevole.girata .interno { transform: rotateY(180deg) }
.carta .interno { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1) }
.carta .retro .dentro-retro { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end center; padding: 22px; text-align: center }
.vuoto-ritratto { background: url(/img/ritratto-p.webp) center / cover }

/* ---------------------------------------------------------------- foglio del personaggio */
.foglio-eroe { position: relative; display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 48px; align-items: center; padding: 56px var(--lato-d) 40px max(40px, var(--lato)); max-width: 1240px; margin: 0 auto }
.foglio-eroe .carta { width: 100%; cursor: pointer }
.foglio-eroe h1 { font-size: clamp(3rem, 7vw, 5.6rem); font-weight: 400; line-height: .9 }
.foglio-testo { display: grid; gap: 18px; min-width: 0 }
.valori { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px }
.valore { padding: 14px; border-radius: 14px; display: grid; gap: 4px; background: rgba(6,5,9,.45); border: 1px solid var(--filo); position: relative; cursor: help }
.valore b { font: 400 2rem/1 var(--f-display); color: var(--perla); font-variant-numeric: tabular-nums }
.valore .etichetta { font-size: .64rem }
.valore .spiega { position: absolute; z-index: 5; left: 0; top: calc(100% + 8px); width: 230px; padding: 10px 12px; border-radius: 12px; background: #17131f; border: 1px solid var(--filo-2); font-size: .82rem; color: var(--perla); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .2s, transform .2s; box-shadow: var(--ombra) }
.valore:hover .spiega, .valore:focus .spiega { opacity: 1; transform: none }
.cambio { animation: lampo .7s ease }
@keyframes lampo { 0% { color: var(--pervinca); text-shadow: 0 0 20px var(--pervinca) } 100% { color: inherit } }
.corpo-foglio { max-width: 1240px; margin: 0 auto; padding: 0 var(--lato-d) 100px max(40px, var(--lato)); display: grid; gap: 24px }
.tratti-zona { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 24px; align-items: start }
.radar { width: 100%; aspect-ratio: 1; display: block }
.radar .griglia-radar { fill: none; stroke: var(--filo); stroke-width: 1 }
.radar .asse { stroke: var(--filo); stroke-width: 1 }
.radar .forma { fill: rgba(143,155,255,.22); stroke: var(--pervinca); stroke-width: 2; filter: drop-shadow(0 0 12px rgba(143,155,255,.6)); transition: all .6s cubic-bezier(.2,.7,.2,1) }
.radar .vertice { fill: var(--perla); transition: all .6s cubic-bezier(.2,.7,.2,1) }
.radar text { font: 700 11px var(--f-etichetta); fill: var(--fumo); letter-spacing: .1em; cursor: pointer }
.radar text.scelto { fill: var(--perla) }
.elenco-tratti { display: grid; gap: 8px }
.tratto { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--filo); background: rgba(6,5,9,.35); cursor: pointer; text-align: left; color: var(--perla); transition: border-color .2s, background .2s, transform .2s }
.tratto:hover { border-color: var(--filo-2); transform: translateX(3px) }
.tratto[aria-pressed="true"] { border-color: var(--pervinca); background: rgba(143,155,255,.1) }
.tratto b { font: 600 1.15rem var(--f-display) }
.tratto .cosa { font-size: .84rem; color: var(--fumo) }
.tratto .num { font: 400 1.6rem/1 var(--f-display); font-variant-numeric: tabular-nums }
.bonus { font: 700 .7rem var(--f-ui); color: var(--ok); margin-left: 4px }
.bonus.meno { color: #f08a96 }
.gemme { display: inline-flex; gap: 6px; align-items: center }
.gemme i { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid var(--lilla); display: block; border-radius: 2px; transition: background .3s, box-shadow .3s }
.gemme i.piena { background: var(--lilla); box-shadow: 0 0 10px rgba(199,181,236,.8) }
.gemme i.extra { background: var(--ok); border-color: var(--ok) }
.dettaglio { padding: 22px; display: grid; gap: 14px; align-content: start }
.dettaglio h3 { font-size: 2rem; font-weight: 400 }
.dettaglio ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
.dettaglio li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: .95rem }
.dettaglio li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; transform: rotate(45deg); background: var(--pervinca) }
.dettaglio .effetto b { color: var(--pervinca); font-weight: 700 }
.prova-tiro { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px; border-radius: 14px; background: rgba(6,5,9,.45); border: 1px dashed var(--filo-2) }
.prova-tiro .gemma-dado { width: 52px; height: 52px }
.prova-tiro .gemma-dado span { width: 40px; height: 40px }
.comando { font: 500 .82rem ui-monospace, Consolas, monospace; padding: 4px 8px; border-radius: 8px; background: rgba(143,155,255,.12); color: var(--perla); border: 0; cursor: pointer }
.slot-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; perspective: 1200px }
.slot { position: relative; min-height: 150px; padding: 18px; border-radius: 16px; display: grid; gap: 6px; align-content: start; background: rgba(6,5,9,.45); border: 1px dashed var(--filo-2); overflow: hidden }
.slot.pieno { border-style: solid; border-color: var(--filo-2); background: linear-gradient(160deg, rgba(143,155,255,.14), rgba(6,5,9,.6)) }
.slot .icona-slot { position: absolute; right: -10px; bottom: -14px; width: 90px; height: 90px; stroke: var(--lilla); opacity: .12; fill: none; stroke-width: 1 }
.slot b { font: 600 1.25rem/1.1 var(--f-display); position: relative }
.slot span { font-size: .84rem; color: var(--fumo); position: relative }
.slot .vuoto { font-style: italic; color: rgba(157,149,176,.5) }
.capienza { height: 6px; border-radius: 3px; background: rgba(199,181,236,.1); overflow: hidden }
.capienza i { display: block; height: 100%; background: linear-gradient(90deg, var(--lilla), var(--pervinca)); border-radius: inherit; transition: width .6s }
.borsa { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.borsa li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(6,5,9,.35); border: 1px solid var(--filo) }
.borsa li > div { display: grid; gap: 2px; min-width: 0 }
.borsa li .azioni { justify-content: flex-end }
.denari { display: inline-flex; align-items: center; gap: 10px; font: 400 1.6rem var(--f-display); color: var(--perla) }
.denari::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--lilla) 50%, #5b4d7e); box-shadow: 0 0 12px rgba(199,181,236,.6) }
.testo-lungo { white-space: pre-wrap; font: 1.1rem/1.75 var(--f-gioco); max-width: 68ch; color: #ded8ea }
.testo-lungo.capolettera::first-letter { font: 400 3.6em/.8 var(--f-display); float: left; margin: .06em .08em 0 0; color: var(--lilla) }
.dati { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px }
.dati dt { font: 700 .7rem/1.9 var(--f-etichetta); letter-spacing: .12em; color: var(--fumo) ; text-transform: uppercase }
.dati dd { margin: 0 }
@media (max-width: 960px) {
  .foglio-eroe { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: var(--lato); justify-items: center; text-align: center }
  .foglio-eroe > div:first-child { width: min(300px, 78vw) }
  .foglio-eroe .carta { max-width: 300px }
  .foglio-testo { justify-items: center; width: 100% }
  .foglio-testo .valori { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
  .foglio-testo .valore { padding: 10px 8px; text-align: left }
  .foglio-testo .valore b { font-size: 1.45rem }
  .foglio-testo .valore .spiega { display: none }
  .corpo-foglio { padding-left: var(--lato) }
  .tratti-zona { grid-template-columns: minmax(0, 1fr) }
  .radar { max-width: 340px; margin: 0 auto }
}

/* ---------------------------------------------------------------- editor della scheda */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; max-width: 1240px; margin: 0 auto; padding: 48px var(--lato-d) 100px var(--lato) }
.anteprima { position: sticky; top: 24px; display: grid; gap: 16px }
.anteprima .carta { width: 100%; max-width: 380px }
.passo-titolo { display: flex; align-items: baseline; gap: 12px }
.passo-titolo span { font: 400 2rem/1 var(--f-display); color: var(--malva) }
.alloca { display: grid; gap: 8px }
.alloca-riga { display: grid; grid-template-columns: 110px auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; transition: border-color .2s, background .2s }
.alloca-riga:hover, .alloca-riga:focus-within { border-color: var(--filo); background: rgba(6,5,9,.3) }
.alloca-riga b { font: 600 1.15rem var(--f-display) }
.pips { display: inline-flex; gap: 4px }
.pips button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; padding: 0 }
.pips button i { width: 14px; height: 14px; transform: rotate(45deg); border: 1.5px solid var(--lilla); border-radius: 3px; transition: background .2s, box-shadow .2s, transform .2s }
.pips button.pieno i { background: var(--lilla); box-shadow: 0 0 12px rgba(199,181,236,.8) }
.pips button:hover i { transform: rotate(45deg) scale(1.2) }
.pips button.zero { width: 26px; color: var(--fumo); font: 600 .8rem var(--f-ui) }
.alloca-riga .effetto-breve { font-size: .82rem; color: var(--fumo) }
.residui { font: 700 .82rem var(--f-ui); color: var(--pervinca) }
.residui.finiti { color: var(--ok) }
@media (max-width: 1060px) { .editor { grid-template-columns: minmax(0, 1fr) } .anteprima { position: static; order: -1 } .anteprima .carta { max-width: 260px; margin: 0 auto } }
@media (max-width: 560px) { .alloca-riga { grid-template-columns: 90px auto } .alloca-riga .effetto-breve { grid-column: 1 / -1 } }

/* ---------------------------------------------------------------- missive */
.missive { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start }
.elenco-missive { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.elenco-missive button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 12px 14px; background: none; border: 1px solid transparent; border-radius: 14px; color: var(--perla); cursor: pointer; position: relative }
.elenco-missive button:hover, .elenco-missive button[aria-current="true"] { background: rgba(199,181,236,.07); border-color: var(--filo) }
.elenco-missive .nuova::after { content: ""; position: absolute; right: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--dardo); box-shadow: 0 0 10px var(--dardo) }
.elenco-missive b { font: 600 1.08rem var(--f-display) }
.elenco-missive span { font-size: .8rem; color: var(--fumo) }
.lettera { padding: 40px 40px 32px; display: grid; gap: 16px; min-width: 0 }
.lettera .sigillo { position: absolute; top: -18px; right: 30px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ef5a6b, var(--dardo) 55%, #6c0f1c); display: grid; place-items: center; font: 600 1.2rem var(--f-display); color: #fff; box-shadow: 0 0 0 4px var(--notte), 0 8px 24px rgba(208,41,61,.4) }
.lettera .corpo { font: italic 1.15rem/1.8 var(--f-gioco); white-space: pre-wrap; overflow-wrap: anywhere }
.lettera .firma { justify-self: end; font: 400 1.5rem var(--f-display); color: var(--lilla) }
@media (max-width: 860px) { .missive { grid-template-columns: minmax(0, 1fr) } .lettera { padding: 30px 22px 24px } }

/* ---------------------------------------------------------------- casate */
.stemmi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; perspective: 1200px }
.stemma { padding: 26px 16px 20px; display: grid; justify-items: center; gap: 10px; text-align: center; text-decoration: none; color: var(--perla); border-radius: var(--r) }
.losanga { width: 58px; height: 58px; transform: rotate(45deg) translateZ(30px); border: 1px solid var(--lilla); display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, rgba(199,181,236,.25), rgba(6,5,9,.7)); margin: 8px 0; box-shadow: 0 0 30px -8px rgba(143,155,255,.6) }
.losanga span { transform: rotate(-45deg); font: 600 1.4rem var(--f-display) }
.stemma b { font: 600 1.25rem var(--f-display) }
.stemma-img { width: 128px; height: 128px; object-fit: cover; border-radius: 50%; transform: translateZ(40px); mask-image: radial-gradient(circle, #000 55%, transparent 72%); -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%) }
.stemma-casata { margin: 10px 0 0 -20px }
.stemma-grande { width: 240px; height: 240px; object-fit: cover; mask-image: radial-gradient(circle, #000 52%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%); filter: drop-shadow(0 0 40px rgba(143,155,255,.35)) }
.carta .sigillo-stemma { position: absolute; z-index: 2; top: 12px; right: 12px; width: 64px; height: 64px; object-fit: cover; transform: translateZ(40px); mask-image: radial-gradient(circle, #000 50%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 70%) }

/* ---------------------------------------------------------------- bacheca */
.voce { padding: 28px; display: grid; gap: 14px }
.voce .testo { display: grid; gap: 12px; font: 1.06rem/1.75 var(--f-gioco); color: #ded8ea; max-width: 70ch }
.voce .fissata { color: var(--dardo); font-size: .8rem }
.voci-bacheca { display: grid; gap: 16px }

/* ---------------------------------------------------------------- staff */
.tabella { width: 100%; border-collapse: collapse; font-size: .94rem }
.tabella th { text-align: left; font: 700 .7rem var(--f-etichetta); letter-spacing: .12em; color: var(--fumo); padding: 10px; border-bottom: 1px solid var(--filo) ; text-transform: uppercase }
.tabella td { padding: 12px 10px; border-bottom: 1px solid var(--filo); vertical-align: top }
.scorri-x { overflow-x: auto }
.mini-mappa { position: relative; aspect-ratio: 2400 / 1600; border-radius: 12px; overflow: hidden; cursor: crosshair; max-width: 520px; box-shadow: 0 0 0 1px var(--filo-2) }
.mini-mappa img { width: 100%; height: 100% }
.mini-mappa i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--dardo); border: 2px solid #fff; pointer-events: none }
details.riquadro { border-radius: 16px; background: var(--vetro); border: 1px solid var(--filo) }
details.riquadro > summary { cursor: pointer; padding: 16px 20px; font: 600 1.15rem var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 10px; align-items: center }
details.riquadro > summary::after { content: "+"; color: var(--fumo); font-family: var(--f-ui) }
details.riquadro[open] > summary::after { content: "−" }
details.riquadro > div { padding: 0 20px 20px; display: grid; gap: 14px }
.nota-staff { border-left: 2px solid var(--dardo); padding: 12px 16px; background: rgba(208,41,61,.08); border-radius: 0 12px 12px 0 }

/* ---------------------------------------------------------------- avvisi */
.avvisi { position: fixed; z-index: 80; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)) }
@media (max-width: 900px) { .avvisi { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) } }
.avviso { padding: 14px 18px; border-radius: 14px; background: rgba(23,19,31,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--filo-2); box-shadow: var(--ombra); animation: entra .35s ease; font-size: .95rem }
.avviso.errore { border-color: rgba(208,41,61,.6); box-shadow: 0 0 0 1px rgba(208,41,61,.3), var(--ombra) }
.caricamento { padding: 80px 0; text-align: center; color: var(--fumo); font: italic 1.1rem var(--f-gioco) }