/* Pagine dei plugin, legale e 404: la scena della home in apertura (a tempo, senza scorrimento), poi contenuti su fondo notte */
html.pagina { background: #0e1224; }
body.pagina { background: #0e1224; color: #fff; }
.pagina .barra .marchio { color: #f2f5f8; }

/* apertura: la sezione della home alta uno schermo, fissata senza sticky; testi e gesti della home spenti, resta il mondo con la sua interfaccia */
.eroe { position: relative; height: 100svh; min-height: 620px; --barra-browser: 0px; }
.eroe .sc { height: 100%; min-height: 0; }
.eroe .fisso { position: relative; height: 100%; min-height: 0; }
.eroe .copia, .eroe .gesto, .eroe .aiuto, .eroe .gioca, .eroe .esito, .eroe .limbo, .eroe .gioco, .eroe .cucitura { display: none !important; }
.eroe-velo { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
.eroe-testo { position: absolute; z-index: 3; left: clamp(16px, 5vw, 80px); top: clamp(90px, 16vh, 170px); max-width: 36ch; color: #fff; pointer-events: none; }
.eroe-testo a, .eroe-testo .btn { pointer-events: auto; }
.eroe.chiara .eroe-testo { color: var(--inchiostro); }
.eroe-testo .sopra { font: 700 clamp(15px, 1.3vw, 18px) var(--pixel); color: #ffd34a; letter-spacing: .04em; text-shadow: 2px 2px 0 rgba(0,0,0,.35); animation: sale .6s cubic-bezier(.16,1,.3,1) .2s both; }
.eroe.chiara .eroe-testo .sopra { color: #b3440f; text-shadow: none; }
.eroe-testo h1 { font: 800 clamp(48px, 7vw, 104px)/0.98 var(--titolo); font-stretch: 85%; letter-spacing: -0.03em; margin-top: 8px; max-width: none; animation: sale .7s cubic-bezier(.16,1,.3,1) .35s both; }
.eroe-testo .frase { margin-top: 14px; font: 500 clamp(17px, 1.4vw, 21px)/1.45 var(--titolo); color: #d7dcf2; text-wrap: pretty; max-width: 34ch; animation: sale .7s cubic-bezier(.16,1,.3,1) .55s both; }
.eroe.chiara .eroe-testo .frase { color: #33405f; }
.eroe-testo .azioni { justify-content: flex-start; margin-top: 22px; }
.eroe-testo .azioni .btn:nth-child(1) { animation-delay: .8s; } .eroe-testo .azioni .btn:nth-child(2) { animation-delay: .95s; }
.eroe-testo .fatti { margin-top: 14px; font: 600 14px var(--pixel); opacity: .75; animation: sale .6s cubic-bezier(.16,1,.3,1) 1.1s both; }
#magazzino .fisso { background: linear-gradient(#2a1f3d, #14182b); }
#livelli.sc, #assedio.sc, #crollo.sc, #backrooms.sc, #magazzino.sc, #altare.sc { background: transparent; }

/* invito a scorrere, come nella home: su schermo largo sta a destra, lontano dalla chat */
.eroe .scopri { animation-delay: 1.3s, 1.8s; }

/* contenuti */
.pagina main > section { padding: clamp(56px, 9vh, 110px) clamp(16px, 5vw, 80px); max-width: 1180px; margin: 0 auto; }
.pagina h2 { font: 800 clamp(32px, 4vw, 56px)/1 var(--titolo); font-stretch: 85%; letter-spacing: -0.03em; text-wrap: balance; }
.pagina .intro { margin-top: 14px; max-width: 60ch; font: 500 clamp(17px, 1.3vw, 20px)/1.5 var(--titolo); color: #c7cde6; text-wrap: pretty; }
.dich { text-align: center; }
.dich p { margin: 0 auto; max-width: 30ch; font: 700 clamp(22px, 3vw, 40px)/1.25 var(--pixel); color: #ffd34a; text-shadow: 3px 3px 0 #3a2a05; text-wrap: balance; }
.griglia { margin-top: 36px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tessera { display: flex; flex-direction: column; min-height: 150px; padding: 20px 20px 24px; background: #182040; border: 2px solid #233058; box-shadow: inset 0 -6px 0 rgba(0,0,0,.35); }
@media (min-width: 560px) { .tessera.larga { grid-column: span 2; } }
.tag { font: 600 12px var(--pixel); color: #ffd34a; letter-spacing: .08em; text-transform: uppercase; }
.tessera h3 { margin-top: 8px; font: 800 clamp(20px, 1.6vw, 24px)/1.1 var(--titolo); font-stretch: 85%; letter-spacing: -0.02em; }
.tessera .f1 { margin-top: 10px; font: 600 15px/1.35 var(--titolo); color: #fff; }
.tessera .f2 { font: 500 15px/1.35 var(--titolo); color: #aab3d4; }
.tessera .piu { margin-top: 12px; font: 500 15px/1.5 var(--titolo); color: #c7cde6; text-wrap: pretty; }
.blocchi { margin-top: 36px; display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.blocchi h3 { font: 800 clamp(22px, 1.9vw, 28px)/1.1 var(--titolo); font-stretch: 85%; letter-spacing: -0.02em; }
.blocchi p { margin-top: 10px; font: 500 17px/1.5 var(--titolo); color: #c7cde6; text-wrap: pretty; }
.galleria { margin-top: 36px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.galleria figure { margin: 0; background: #182040; border: 4px solid #233058; }
.galleria img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0a0e1c; }
.galleria figcaption { padding: 10px 12px; font: 500 14px/1.4 var(--pixel); color: #aab3d4; }
.insieme ul { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.insieme li { padding: 16px 18px; background: #182040; border-left: 6px solid #ffd34a; font: 500 17px/1.5 var(--titolo); color: #c7cde6; }
.insieme b { color: #fff; } .insieme .con { color: #aab3d4; } .insieme a { color: #ffd34a; }
.docs .doc { margin-top: 36px; display: grid; gap: 52px; }
/* gli elementi della griglia non devono allargarsi con le tabelle e il codice: su telefono allargherebbero tutta la pagina */
.docs .doc > div { min-width: 0; }
.tab, .pagina pre { max-width: 100%; }
.docs h3 { font: 700 clamp(18px, 1.4vw, 22px) var(--pixel); color: #ffd34a; }
.docs .spiega { margin-top: 14px; font: 500 17px/1.55 var(--titolo); color: #c7cde6; max-width: 70ch; }
.passi { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.passi li { counter-increment: p; padding: 16px 18px 18px; background: #182040; font: 500 15px/1.45 var(--titolo); color: #c7cde6; }
.passi li::before { content: counter(p); display: block; font: 700 22px var(--pixel); color: #ffd34a; }
.passi b { display: block; margin: 6px 0 4px; color: #fff; font-weight: 700; }
.tab { margin-top: 18px; overflow-x: auto; }
.pagina table { width: 100%; border-collapse: collapse; font: 500 15px/1.45 var(--titolo); }
.pagina th { text-align: left; padding: 10px 12px; font: 600 12px var(--pixel); color: #aab3d4; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid #233058; }
.pagina td { padding: 12px; border-bottom: 1px solid #1c2548; vertical-align: top; color: #c7cde6; }
.pagina td:first-child { white-space: nowrap; }
.pagina code { font: 600 .92em var(--pixel); color: #fff; background: #1c2548; padding: 1px 6px; }
.pagina pre { margin-top: 14px; padding: 16px 18px; background: #0a0e1c; border: 2px solid #233058; overflow-x: auto; font: 500 14px/1.5 ui-monospace, Consolas, monospace; color: #c7cde6; }
.pagina pre code { background: none; padding: 0; font: inherit; color: inherit; }
.nota { margin-top: 12px; font: 500 14px/1.45 var(--titolo); color: #9aa3c7; }
.scarica-sez { text-align: center; }
.scarica-sez p { margin: 14px auto 0; max-width: 52ch; font: 500 17px/1.5 var(--titolo); color: #c7cde6; }
.scarica-sez .azioni { margin-top: 26px; }
.scarica-sez .prima { font-size: 15px; } .scarica-sez .prima a { color: #ffd34a; }
.altri { text-align: center; }
.altri .intro { margin: 14px auto 0; }
.pagina .hotbar { opacity: 1; margin-top: 30px; }
.pagina .hotbar a { opacity: 1; }
.hotbar a.qui { outline: 4px solid #ffd34a; outline-offset: -4px; }
.piede-pagina { padding: 40px clamp(16px, 5vw, 80px) 48px; text-align: center; font: 400 13px/1.7 var(--titolo); color: #7f88a8; border-top: 2px solid #182040; }
.piede-pagina p { max-width: 72ch; margin: 0 auto; }
.piede-pagina a { color: #aab3d4; }

/* documentazione generale */
main.documentazione { padding-top: 0; }
.documentazione > section { padding: clamp(48px, 7vh, 90px) clamp(16px, 5vw, 80px); max-width: 1180px; margin: 0 auto; }
.docs-testa { padding-top: clamp(120px, 18vh, 170px) !important; }
.docs-testa .sopra { font: 700 clamp(15px, 1.3vw, 18px) var(--pixel); color: #ffd34a; letter-spacing: .04em; }
.docs-testa h1 { margin: 8px 0 0; max-width: none; animation: none; font: 800 clamp(44px, 6.4vw, 92px)/0.98 var(--titolo); font-stretch: 85%; letter-spacing: -0.03em; }
.docs-testa .intro { max-width: 66ch; }
.sommario { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.sommario a { font: 700 15px var(--pixel); color: var(--inchiostro); background: #ffd34a; padding: 9px 14px; text-decoration: none; box-shadow: inset 0 -4px 0 #d6a51f; }
.sommario a:hover { transform: translateY(-2px); }
.griglia.requisiti { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.schede { margin-top: 36px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.scheda { padding: 22px 22px 24px; background: #182040; border: 2px solid #233058; box-shadow: inset 0 -6px 0 rgba(0,0,0,.35); }
.scheda h3 { margin-top: 8px; font: 800 clamp(26px, 2.2vw, 34px)/1 var(--titolo); font-stretch: 85%; letter-spacing: -0.02em; }
.scheda h3 a { color: #fff; text-decoration: none; }
.scheda .sotto { margin-top: 4px; font: 700 14px var(--pixel); color: #ffd34a; }
.scheda .f { margin-top: 12px; font: 600 15px/1.4 var(--titolo); color: #fff; }
.scheda .piu { margin-top: 10px; font: 500 15px/1.5 var(--titolo); color: #c7cde6; text-wrap: pretty; }
.scheda .link, .plugin-doc .link { margin-top: 14px; font: 700 14px var(--pixel); }
.scheda .link a, .plugin-doc .link a { color: #ffd34a; }
.plugin-docs { margin-top: 36px; display: grid; gap: 10px; }
.plugin-doc { min-width: 0; background: #182040; border: 2px solid #233058; }
.plugin-doc summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 14px; padding: 18px 22px; font: 800 clamp(22px, 1.9vw, 28px)/1 var(--titolo); font-stretch: 85%; letter-spacing: -0.02em; }
.plugin-doc summary::-webkit-details-marker { display: none; }
.plugin-doc summary::before { content: '▶'; font: 700 14px var(--pixel); color: #ffd34a; }
.plugin-doc[open] summary::before { content: '▼'; }
.plugin-doc summary small { margin-left: auto; font: 600 13px var(--pixel); color: #aab3d4; text-align: right; }
.plugin-doc .dentro { padding: 4px 22px 24px; min-width: 0; }
.plugin-doc h4 { margin-top: 24px; font: 700 clamp(16px, 1.2vw, 19px) var(--pixel); color: #ffd34a; }
.plugin-doc .spiega { margin-top: 12px; font: 500 16px/1.55 var(--titolo); color: #c7cde6; max-width: 70ch; }
.composer { margin-top: 48px; padding: 26px clamp(18px, 3vw, 32px) 30px; background: #182040; border: 2px solid #233058; }
.composer h3 { font: 800 clamp(24px, 2.2vw, 32px)/1 var(--titolo); font-stretch: 85%; letter-spacing: -0.02em; }
.composer > p { margin-top: 8px; font: 500 16px/1.5 var(--titolo); color: #c7cde6; }
.chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; font: 700 15px var(--pixel); color: #aab3d4; background: #0e1224; border: 2px solid #233058; cursor: pointer; }
.chip svg { width: 20px; height: 20px; opacity: .45; }
.chip[aria-pressed="true"] { color: var(--inchiostro); background: #ffd34a; border-color: #ffd34a; box-shadow: inset 0 -4px 0 #d6a51f; }
.chip[aria-pressed="true"] svg { opacity: 1; }
.unlocks { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.unlocks li { padding: 14px 16px; background: #0e1224; border-left: 6px solid #ffd34a; font: 500 16px/1.5 var(--titolo); color: #c7cde6; }
.unlocks b { color: #fff; } .unlocks .con { color: #aab3d4; }
.unlocks .none { border-left-color: #233058; color: #aab3d4; }
.domande { margin-top: 32px; display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.domande h3 { font: 800 clamp(20px, 1.6vw, 24px)/1.15 var(--titolo); font-stretch: 85%; }
.domande p { margin-top: 8px; font: 500 16px/1.55 var(--titolo); color: #c7cde6; text-wrap: pretty; }
.domande a, .nota a, .docs .intro a { color: #ffd34a; }
.modulo { margin-top: 24px; display: grid; gap: 10px; grid-template-columns: 1fr 1fr auto; align-items: end; max-width: 760px; }
.modulo label { display: block; font: 600 12px var(--pixel); color: #aab3d4; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.modulo input { width: 100%; padding: 12px 14px; font: 500 16px var(--titolo); color: #fff; background: #0e1224; border: 2px solid #233058; }
.modulo input:focus { outline: 3px solid #ffd34a; outline-offset: 2px; }
.modulo label { grid-row: 1; } .modulo input { grid-row: 2; } .modulo .btn { grid-row: 2; border: 0; cursor: pointer; }
@media (max-width: 700px) { .modulo { grid-template-columns: 1fr; } .modulo label, .modulo input, .modulo .btn { grid-row: auto; } .plugin-doc summary small { display: none; } .eroe-testo .fatti { display: block; font-size: 12px; } }
.eroe-testo .fatti a { color: #ffd34a; }
.eroe.chiara .eroe-testo .fatti a { color: #b3440f; }

/* legale e 404 */
.semplice { padding-top: 120px; min-height: 70vh; }
.semplice h1 { margin: 0; max-width: none; animation: none; font: 800 clamp(40px, 5.6vw, 76px)/1 var(--titolo); font-stretch: 85%; letter-spacing: -0.03em; }
.legale h2 { margin-top: 48px; font: 700 clamp(18px, 1.4vw, 22px) var(--pixel); color: #ffd34a; }
.legale p { margin-top: 14px; max-width: 70ch; font: 500 17px/1.6 var(--titolo); color: #c7cde6; }
.quattro { text-align: center; }
.quattro .codice { font: 700 clamp(72px, 14vw, 160px)/1 var(--pixel); color: #ffd34a; text-shadow: 6px 6px 0 #3a2a05; }
.quattro .intro { margin: 14px auto 0; }
.quattro .azioni { margin-top: 28px; }

@media (max-width: 700px) {
  .eroe { min-height: 560px; }
  .eroe .vita { bottom: 14px; }
  .eroe .scopri { bottom: 140px; }
  .eroe-testo { left: 16px; right: 16px; top: 158px; max-width: none; }
  .eroe-testo h1 { font-size: 40px; }
  .eroe-testo .frase { font-size: 15px; line-height: 1.35; margin-top: 8px; }
  .eroe-testo .azioni { margin-top: 14px; gap: 8px; }
  .eroe-testo .azioni .btn { font-size: 15px; padding: 11px 16px; }
  .eroe-testo .fatti { display: none; }
  .pagina main > section { padding: 48px 16px; }
  .docs .doc { gap: 40px; }
  .pagina td:first-child { white-space: normal; }
}