@font-face { font-family: 'Pixelify Sans'; font-weight: 400 700; font-display: swap; src: url(fonts/pixelify-latin.woff2) format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-weight: 400 700; font-display: swap; src: url(fonts/pixelify-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(fonts/bricolage-latin.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(fonts/bricolage-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
:root {
  --cielo: #a9e1ff;
  --cielo-basso: #d9f3ff;
  --notte: #14182b;
  --inchiostro: #17203a;
  --arancio: #ff7a3d;
  --arancio-cupo: #d9531a;
  --erba: #6cc24a;
  --pixel: 'Pixelify Sans', ui-monospace, monospace;
  --titolo: 'Bricolage Grotesque', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
/* telefono: niente zoom col doppio tocco (il pizzico resta), niente selezione o menu tenendo premuto su tasti, canvas e interfaccia */
html { background: var(--cielo); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, canvas, a.btn, .scarica, .nav, .hud, .gesto, .scopri, .stick, .esito, .tasti, .aiuto, .armadio-tip, .targhe, .quota, .mirino, .urlo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nav button, .scopri, .esci, .esito button, .gioca, .btn, .scarica, .limbo button { touch-action: manipulation; }
html.bloccato { overflow: hidden; }
body { min-height: 100vh; color: var(--inchiostro); font-family: var(--titolo); overflow-x: hidden; }
::selection { background: var(--arancio); color: #fff; }
.barra { position: fixed; inset: 0 0 auto; z-index: 6; display: flex; align-items: center; gap: 28px; padding: 18px clamp(16px, 4vw, 48px); transition: color .3s; }
body.scura .barra nav a { color: #fff; }
body.scura .barra .marchio { color: #f2f5f8; }
body.scura .scarica { background: #ffd34a; color: var(--inchiostro); }
.marchio { font: 800 28px/1 var(--pixel); letter-spacing: .04em; color: #e6eaf0; -webkit-text-stroke: .7px #1f2633; text-shadow: 1px 1px 0 #8a929e, 2px 2px 0 #646c78, 3px 3px 0 #434a55, 4px 4px 0 #2a303a, 5px 6px 0 rgba(0,0,0,.25); text-decoration: none; display: flex; align-items: center; gap: 12px; }
.marchio svg { width: 30px; height: 40px; margin-top: -8px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.28)); }
.barra nav { margin-left: auto; display: flex; gap: 26px; font: 600 17px var(--titolo); }
.barra nav a { color: var(--inchiostro); text-decoration: none; }
.scarica { font: 700 17px var(--pixel); background: var(--inchiostro); color: #fff; padding: 11px 18px; text-decoration: none; box-shadow: inset 0 -4px 0 rgba(0,0,0,.35); }
.scena { --tramonto: 0; position: relative; height: 190vh; }
.palco { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; background: linear-gradient(color-mix(in oklab, var(--cielo), #ff9466 calc(var(--tramonto) * 85%)) 45%, color-mix(in oklab, var(--cielo-basso), #ffd08a calc(var(--tramonto) * 90%))); }
canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.testo { position: relative; z-index: 2; text-align: center; padding-top: clamp(92px, 12vh, 132px); will-change: transform, opacity; }
h1 { font: 800 clamp(44px, 6.6vw, 96px)/1.04 var(--titolo); font-stretch: 85%; letter-spacing: -0.02em; text-wrap: balance; max-width: 14ch; margin: 0 auto; animation: arriva 2.6s cubic-bezier(.16,1,.3,1) both; }
/* le parole si stampano una alla volta: arrivano da lontano, grandi e sfocate, e si piantano */
h1 .blocco { display: inline-block; margin: 0 .05em; opacity: 0; animation: stampa .8s cubic-bezier(.2,1.1,.3,1) both; animation-delay: calc(var(--i) * .17s + .45s); }
@keyframes stampa { 0% { opacity: 0; transform: translateY(-.7em) scale(1.6); filter: blur(8px); } 60% { opacity: 1; transform: translateY(.06em) scale(.95); filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes arriva { from { transform: scale(1.08); } }
.sotto { margin: 22px auto 0; max-width: 46ch; font: 500 clamp(18px, 1.5vw, 21px)/1.4 var(--titolo); text-wrap: balance; animation: sale .7s cubic-bezier(.16,1,.3,1) 1.9s both; }
.azioni { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.azioni .btn { animation: posa .45s cubic-bezier(.34,1.56,.64,1) both; }
.azioni .btn:nth-child(1) { animation-delay: 2.3s; } .azioni .btn:nth-child(2) { animation-delay: 2.45s; }
@keyframes sale { from { opacity: 0; transform: translateY(14px); } }
@keyframes appare { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes posa { from { opacity: 0; transform: scale(.6) translateY(-20px); } }
.uccello { position: absolute; z-index: 0; width: 22px; height: 10px; color: #27324f; animation: vola linear infinite; }
.uccello svg { width: 100%; height: 100%; animation: batte .5s steps(2) infinite; }
@keyframes vola { from { transform: translateX(-60px); } to { transform: translateX(calc(100vw + 60px)); } }
@keyframes batte { 50% { transform: scaleY(-.6); } }
.btn { font: 700 19px var(--pixel); padding: 14px 22px; text-decoration: none; color: #fff; background: var(--arancio); box-shadow: inset 0 -5px 0 var(--arancio-cupo), 0 6px 0 rgba(23,32,58,.15); }
.btn.b { background: #fff; color: var(--inchiostro); box-shadow: inset 0 -5px 0 #cfd8e6, 0 6px 0 rgba(23,32,58,.15); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--arancio-cupo); }
.chat { position: absolute; z-index: 3; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 4vh, 40px); font: 500 17px/1.35 var(--pixel); color: #fff; display: grid; gap: 4px; max-width: min(440px, calc(100vw - 32px)); }
.chat p { background: rgba(10, 14, 28, .74); padding: 4px 10px; text-shadow: 2px 2px 0 rgba(0,0,0,.35); animation: entra .5s cubic-bezier(.16,1,.3,1) both; }
.chat b { color: #ffd34a; font-weight: 700; }
.chat .s { color: #8ff0b4; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
/* invito a scendere: un bottone vero, che porta alla prima tappa */
.scopri { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(24px, 7vh, 64px); width: max-content; margin: 0 auto; font: 700 19px var(--pixel); color: var(--inchiostro); background: #ffd34a; border: 0; padding: 14px 24px; box-shadow: inset 0 -5px 0 #d6a51f, 0 8px 0 rgba(23,32,58,.18); cursor: pointer; animation: posa .45s cubic-bezier(.34,1.56,.64,1) 2.9s both, rimbalza 1.4s ease-in-out 3.4s infinite; }
.scopri:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 #d6a51f; animation: none; }
/* su schermo largo il bottone sta a destra: il mondo resta libero per guardarlo e giocarci */
@media (min-width: 701px) { .scopri { left: auto; right: clamp(24px, 4vw, 64px); margin: 0; } }
@keyframes rimbalza { 50% { transform: translateY(6px); } }
.scopri.posato { animation: rimbalza 1.4s ease-in-out infinite; }
.scopri.via { opacity: 0; visibility: hidden; pointer-events: none; animation: none; transition: opacity .25s, visibility 0s .25s; }
.chat .d { color: #6b6b6b; } .chat .g { color: #ffe36b; }
/* navigazione fissa: tappa indietro/avanti, capitolo corrente coi sei punti */
/* cuciture a blocchi fra le scene: strisce dentro ogni scena, sopra il canvas del mondo e sotto testi e interfaccia */
.fisso .cucitura, .palco .cucitura, .finale .cucitura { position: absolute; inset: auto; left: 0; right: 0; width: 100%; height: auto; z-index: 1; pointer-events: none; display: none; }
.cucitura.alto { top: 0; } .cucitura.basso { bottom: 0; }
.nav { position: fixed; z-index: 7; right: clamp(12px, 2.5vw, 36px); bottom: clamp(14px, 3vh, 30px); display: flex; align-items: stretch; gap: 8px; font-family: var(--pixel); opacity: 0; transition: opacity .4s; pointer-events: none; }
.nav.su { opacity: 1; pointer-events: auto; }
.nav.nascosta { display: none; }
.nav button { width: 46px; border: 0; cursor: pointer; font: 700 22px var(--pixel); color: var(--inchiostro); background: #ffd34a; box-shadow: inset 0 -4px 0 #d6a51f, 0 6px 0 rgba(0,0,0,.2); }
.nav button:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #d6a51f; }
.nav button:disabled { opacity: .35; cursor: default; }
.nav .capitoli { display: grid; gap: 5px; align-content: center; padding: 8px 14px; background: rgba(10, 14, 28, .82); color: #fff; min-width: 170px; box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.nav .capitoli b { font: 700 16px var(--pixel); color: #ffd34a; white-space: nowrap; }
.nav .capitoli small { font: 500 12px var(--titolo); color: #c7cde6; }
.nav .punti { display: flex; gap: 5px; }
.nav .punti i { width: 14px; height: 10px; background: rgba(255,255,255,.22); cursor: pointer; }
.nav .punti i.qui { background: #ffd34a; } .nav .punti i.fatto { background: rgba(255,211,74,.45); }
/* scene: sezione alta, contenuto fissato */
.sc { position: relative; height: 420vh; background: var(--fondo, #14182b); }
.fisso { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; }
.fisso canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.copia { position: absolute; z-index: 3; left: clamp(16px, 5vw, 80px); top: clamp(90px, 16vh, 170px); max-width: 30ch; color: #fff; opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.copia.su { opacity: 1; transform: none; }
.copia h2 span { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .5s, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 70ms); }
.copia.su h2 span { opacity: 1; transform: none; }
.flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; box-shadow: inset 0 0 180px 60px rgba(255, 30, 30, .75); }
.flash.via { animation: ferita 2.4s ease-out both; }
@keyframes ferita { 0% { opacity: 0; } 8% { opacity: 1; background: rgba(255, 40, 40, .35); } 30% { background: transparent; opacity: .8; } 100% { opacity: .45; } }
.inpiedi { position: absolute; z-index: 3; left: 0; right: 0; top: 30%; text-align: center; font: 700 clamp(44px, 6vw, 84px)/1 var(--pixel); color: #5cff7a; text-shadow: 5px 5px 0 #0d3a14; opacity: 0; pointer-events: none; }
.inpiedi.via { animation: inpiedi 2.2s cubic-bezier(.16,1,.3,1) both; }
@keyframes inpiedi { 0% { opacity: 0; transform: scale(1.4); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
.copia h2 { font: 800 clamp(38px, 5.2vw, 72px)/0.98 var(--titolo); font-stretch: 85%; letter-spacing: -0.03em; text-wrap: balance; }
.copia p { margin-top: 14px; font: 500 clamp(17px, 1.4vw, 20px)/1.45 var(--titolo); color: #d7dcf2; text-wrap: pretty; }
.copia .plugin { display: inline-block; margin-top: 14px; font: 700 15px var(--pixel); color: #ffd34a; pointer-events: auto; }
/* Epurazione: giorno pieno, testi scuri */
#altare .fisso { background: linear-gradient(#9fd8ff, #d9f3ff); }
#altare .copia { color: var(--inchiostro); } #altare .copia p { color: #33405f; } #altare .copia .plugin { color: #b3440f; }
#epurazione .fisso { --sera: 0; background: linear-gradient(color-mix(in oklab, #9fd8ff, #ff9466 calc(var(--sera) * 70%)), color-mix(in oklab, #d9f3ff, #ffd08a calc(var(--sera) * 80%))); }
#epurazione .copia { color: var(--inchiostro); } #epurazione .copia p { color: #33405f; } #epurazione .copia .plugin { color: #b3440f; }
.boss.viola .boss-t { color: #d9a6ff; text-shadow: 2px 2px 0 #2a0a3a; } .boss.viola b { background: #b45cff; } .boss.viola i { background: #2a0a3a; border-color: #150520; }
.azione.rosso { color: #ff6b6b; text-shadow: 2px 2px 0 #3a0d0d; } .azione.verde { color: #5cff7a; }
.titolo-mc.verde strong { color: #5cff7a; text-shadow: 5px 5px 0 #0d3a14; }
.lampo { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.lampo.via { animation: lampo .6s linear both; }
@keyframes lampo { 0% { opacity: .95; } 18% { opacity: 0; } 28% { opacity: .7; } 45% { opacity: 0; } }
.urlo { position: absolute; z-index: 3; left: 0; top: 0; font: 700 clamp(26px, 2.6vw, 38px) var(--pixel); color: #ffd34a; text-shadow: 3px 3px 0 #000; opacity: 0; pointer-events: none; }
.urlo.su { opacity: 1; animation: urlo .9s cubic-bezier(.16,1,.3,1) both; }
.urlo.rosso { color: #ff4040; }
@keyframes urlo { 0% { transform: translate(-50%, -100%) scale(.3); } 40% { transform: translate(-50%, -135%) scale(1.25); } 100% { transform: translate(-50%, -120%) scale(1); } }
#livelli .fisso { --prof: 0; background: linear-gradient(color-mix(in oklab, #ff9f6e, #0b0d16 calc(var(--prof) * 100%)), color-mix(in oklab, #7d5ba6, #07080d calc(var(--prof) * 100%))); }
#livelli .copia { color: #fff; }
.targhe { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.targa-wy { position: absolute; left: 0; top: 0; padding: 3px 9px; background: rgba(0,0,0,.45); color: #fff; font: 600 clamp(13px, 1.1vw, 16px) var(--pixel); white-space: nowrap; opacity: 0; transition: opacity .25s; }
.targa-wy small { font-size: .72em; letter-spacing: .04em; } .targa-wy b { font-weight: 700; } .targa-wy i { font-style: normal; color: #444; font-weight: 700; margin: 0 .35em; font-family: system-ui, sans-serif; }
.quota { position: absolute; left: 0; top: 0; z-index: 2; font: 600 15px var(--pixel); color: #ffe7a8; text-shadow: 2px 2px 0 rgba(0,0,0,.5); transition: opacity .4s; pointer-events: none; }
/* il mirino di gioco: segue il mouse, o da solo passa da un mob all'altro */
.mirino { position: absolute; z-index: 3; left: 0; top: 0; width: 22px; height: 22px; margin: -11px; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: difference; }
.mirino::before, .mirino::after { content: ''; position: absolute; background: #fff; }
.mirino::before { left: 9px; top: 0; width: 4px; height: 22px; } .mirino::after { top: 9px; left: 0; width: 22px; height: 4px; }
.mirino.su { opacity: 1; }
.aiuto { position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translate(-50%, 10px); padding: 9px 16px; font: 600 16px var(--pixel); color: var(--inchiostro); background: #ffd34a; box-shadow: inset 0 -4px 0 #d6a51f; opacity: 0; transition: opacity .4s, transform .4s; pointer-events: none; }
.aiuto.su { opacity: 1; transform: translate(-50%, 0); animation: invito2 1.6s ease-in-out infinite; }
.aiuto.usato { animation: none; }
@keyframes invito2 { 50% { transform: translate(-50%, -4px); } }
#livelli canvas { cursor: crosshair; }
#crollo .fisso { background: #0c0d12; }
.boss.giallo .boss-t { color: #ffe066; text-shadow: 2px 2px 0 #3a2f0d; } .boss.giallo b { background: #ffd34a; } .boss.giallo i { background: #3a2f0d; border-color: #1a1405; }
.titolo-mc { position: absolute; left: 0; right: 0; top: 26%; text-align: center; opacity: 0; transform: scale(1.1); transition: opacity .6s, transform .8s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.titolo-mc.su { opacity: 1; transform: none; }
.titolo-mc strong { display: block; font: 700 clamp(40px, 5.5vw, 76px)/1 var(--pixel); color: #ffe066; text-shadow: 5px 5px 0 #3a2f0d; }
.titolo-mc span { display: block; margin-top: 10px; font: 600 clamp(16px, 1.5vw, 21px) var(--pixel); color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.azione.oro { color: #ffcc33; text-shadow: 2px 2px 0 #3a2a05; bottom: 64px; font-size: clamp(17px, 1.6vw, 22px); }
.azione.oro.lampo { color: #fff1b0; }
.gesto-corri { --v: 0; animation: invito 0.6s ease-in-out infinite; }
.gesto-corri .tacche { flex: 0 0 38px; width: 38px; height: 38px; background: conic-gradient(var(--inchiostro) calc(var(--v) * 360deg), rgba(23,32,58,.18) 0); border-radius: 4px; }
.gesto-corri.colpo { animation: colpo .18s ease-out; }
@keyframes colpo { 50% { transform: translateX(-50%) scale(.94); } }
.esito { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 26px 30px; background: rgba(8, 10, 18, .82); color: #fff; max-width: min(520px, calc(100vw - 32px)); animation: sale .5s cubic-bezier(.16,1,.3,1) both; }
.esito[hidden] { display: none; }
.esito strong { font: 800 clamp(32px, 4vw, 52px)/1 var(--titolo); font-stretch: 85%; letter-spacing: -0.02em; color: #5cff7a; text-shadow: 4px 4px 0 #0d3a14; }
.esito.male strong { color: #ffcc33; text-shadow: 4px 4px 0 #3a2a05; }
.esito.rosso strong { color: #ff4040; text-shadow: 4px 4px 0 #3a0808; }
.esito span { font: 500 17px/1.45 var(--titolo); color: #dfe3f1; }
.esito button { font: 700 16px var(--pixel); padding: 10px 18px; background: #ffd34a; color: var(--inchiostro); border: 0; cursor: pointer; }
.esito div { display: flex; gap: 10px; }
#sepolto .fisso { background: #020308; cursor: none; }
.titolo-mc.rosso strong { color: #ff4040; text-shadow: 5px 5px 0 #3a0808; }
.titolo-mc.buio-mc strong { color: #d0d0d0; text-shadow: 5px 5px 0 #262626; } .titolo-mc.buio-mc span { color: #9a9a9a; }
.titolo-mc.viola strong { color: #b45cff; text-shadow: 5px 5px 0 #230a3a; }
.azione.viola { color: #c27bff; text-shadow: 2px 2px 0 #1d0a2e; bottom: 64px; font-size: clamp(17px, 1.6vw, 22px); }
.azione.viola.nero { color: #000; text-shadow: 0 0 6px rgba(255,255,255,.55); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); }
.non-voltarti { position: absolute; left: 0; right: 0; top: 46%; text-align: center; font: 700 clamp(26px, 3vw, 40px) var(--pixel); color: #8a0000; text-shadow: 3px 3px 0 #000; opacity: 0; transition: opacity .3s; letter-spacing: .06em; }
.non-voltarti.su { opacity: 1; animation: trema .12s steps(2) infinite; }
@keyframes trema { 50% { transform: translateX(2px); } }
.cartello { position: absolute; left: 0; top: 0; font: 700 clamp(13px, 1.2vw, 18px)/1.15 var(--pixel); color: #ff3030; text-align: center; text-shadow: 0 0 8px #ff0000, 0 0 18px rgba(255,0,0,.5); opacity: 0; transition: opacity 1.4s; }
.cartello.su { opacity: .9; }
.battito { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 160px 50px rgba(140, 0, 0, .7); transition: opacity .6s; }
.battito.su { opacity: 1; animation: battito 1.1s ease-in-out infinite; }
@keyframes battito { 0%, 100% { opacity: .35; } 12% { opacity: 1; } 24% { opacity: .5; } 36% { opacity: .9; } }
.chat .grigio { color: #bdbdbd; }
#backrooms .fisso { background: #1a1708; }
.velo-nero { position: absolute; inset: 0; z-index: 1; background: #000; pointer-events: none; }
.boss.blu .boss-t { color: #8fb8ff; text-shadow: 2px 2px 0 #0d1a3a; } .boss.blu b { background: #4f8cff; } .boss.blu i { background: #0d1a3a; border-color: #050a18; }
.ingresso { position: absolute; z-index: 3; left: 0; right: 0; top: 40%; text-align: center; opacity: 0; transition: opacity 1s; color: #aaa; font-family: var(--pixel); }
.ingresso.su { opacity: 1; }
.ingresso strong { display: block; font: 600 clamp(30px, 4vw, 54px)/1 var(--pixel); color: #b5b5b5; text-shadow: 3px 3px 0 #222; }
.ingresso span { display: block; margin-top: 12px; font: 600 clamp(16px, 1.6vw, 22px) var(--pixel); color: #6b6b6b; }
.ingresso.storpio strong { color: #555; filter: blur(1px); animation: storpio .25s steps(2) infinite; }
@keyframes storpio { 50% { transform: translate(2px, -1px) skewX(6deg); opacity: .7; } }
.copia.scura-testo { color: #2b2408; background: rgba(247, 236, 178, .94); padding: 22px 26px 24px; box-shadow: 0 10px 0 rgba(0,0,0,.18); max-width: 31ch; } .copia.scura-testo p { color: #4a3f12; } .copia.scura-testo .plugin { color: #8a1c12; }
.copia.scura-testo h2 { font-size: clamp(32px, 3.8vw, 54px); }
.chat .obf { color: #fff; }
/* il minigame del Livello 0: copre la scena, ha canvas e interfaccia propri */
.gioco { position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; transition: opacity .5s; }
.gioco.su { opacity: 1; }
.gioco[hidden] { display: none; }
.gioco canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; touch-action: none; cursor: default; }
.gioco .hud { z-index: 2; }
.gioco .esci { position: absolute; z-index: 4; top: 84px; right: clamp(16px, 3vw, 40px); font: 700 15px var(--pixel); color: #fff; background: rgba(10, 14, 28, .8); border: 2px solid rgba(255,255,255,.35); padding: 8px 12px; cursor: pointer; }
.gioco .esci small { font-size: 11px; opacity: .6; margin-left: 6px; }
.gioco .tasti { position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px; text-align: center; font: 600 15px var(--pixel); color: #cfc7a0; text-shadow: 2px 2px 0 #000; pointer-events: none; transition: opacity 1s; }
.gioco .stick { position: absolute; z-index: 4; left: 22px; bottom: 22px; width: 128px; height: 128px; border-radius: 50%; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.3); display: none; touch-action: none; }
.gioco .stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: rgba(255,255,255,.6); }
.gioco .armadio-tip { position: absolute; z-index: 3; left: 50%; bottom: clamp(70px, 12vh, 110px); transform: translateX(-50%); font: 600 16px var(--pixel); color: #ffe7a8; text-shadow: 2px 2px 0 #000; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
.gioco .armadio-tip.su { opacity: 1; }
.gioco .esito { z-index: 6; }
.gioco .chat { bottom: clamp(60px, 9vh, 90px); }
.gioco .battito { z-index: 2; }
@media (pointer: coarse) { .gioco .stick { display: block; } .gioco .tasti { display: none; } .fisso .gioco .chat { bottom: 164px; } .gioco .armadio-tip { bottom: 164px; } }
.finale { position: relative; z-index: 2; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(120% 90% at 50% 0%, #243058, #0e1224 70%); color: #fff; text-align: center; padding: clamp(80px, 12vh, 120px) 16px 24px; }
.finale .piede { margin-top: auto; padding-top: 40px; }
.finale .festa { z-index: 0; pointer-events: none; }
.finale-dentro { position: relative; z-index: 2; }
.finale h2 { font: 800 clamp(44px, 6.4vw, 92px)/1.02 var(--titolo); font-stretch: 85%; letter-spacing: -0.02em; }
.finale h2 .blocco { display: inline-block; margin: 0 .05em; opacity: 0; }
.finale.via h2 .blocco { animation: stampa .8s cubic-bezier(.2,1.1,.3,1) both; animation-delay: calc(var(--i) * .16s + .2s); }
.finale .motto { margin-top: 12px; font: 700 clamp(22px, 2.6vw, 34px) var(--pixel); color: #ffd34a; text-shadow: 3px 3px 0 #3a2a05; }
.finale .motto, .finale .finale-dentro > p, .finale .azioni, .hotbar { opacity: 0; }
.finale.via .motto { animation: appare .7s cubic-bezier(.16,1,.3,1) 1s both; }
.finale.via .finale-dentro > p { animation: appare .7s cubic-bezier(.16,1,.3,1) 1.4s both; }
.finale.via .azioni { animation: appare .7s cubic-bezier(.16,1,.3,1) 1.7s both; }
.finale.via .hotbar { animation: appare .7s cubic-bezier(.16,1,.3,1) 2s both; }
.finale.via .hotbar a { animation: posa .45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * .1s + 2.2s); }
.finale > .finale-dentro > p { margin: 18px auto 0; max-width: 42ch; font: 500 clamp(18px, 1.5vw, 21px)/1.45 var(--titolo); color: #d6dbef; }
.finale .azioni { margin-top: 30px; }
.finale .prima { font-size: 17px !important; }
.finale .prima a { color: #ffd34a; }
.hotbar { margin: 56px auto 0; display: inline-flex; gap: 0; padding: 6px; background: #8b8b8b; border: 4px solid #1d1d1d; box-shadow: inset 4px 4px 0 #c6c6c6, inset -4px -4px 0 #555; }
.hotbar a { position: relative; width: clamp(64px, 9vw, 92px); aspect-ratio: 1; display: grid; place-items: center; background: #8b8b8b; box-shadow: inset 3px 3px 0 #373737, inset -3px -3px 0 #fff; transition: transform .15s; }
.hotbar a:hover, .hotbar a:focus-visible { transform: translateY(-6px); outline: 4px solid #fff; outline-offset: -4px; }
.hotbar svg { width: 62%; height: 62%; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.3)); }
.hotbar .tip { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 280px; padding: 10px 12px; text-align: left; background: #100010; border: 3px solid #2a0a5a; box-shadow: inset 0 0 0 2px #5a1aa8; font: 500 15px/1.35 var(--pixel); color: #a8a8a8; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 3; }
.hotbar .tip b { display: block; color: #fff; font-weight: 700; } .hotbar .tip i { display: block; font-style: normal; color: #55ffff; }
.hotbar a:hover .tip, .hotbar a:focus-visible .tip { opacity: 1; }
.piede { margin-top: 90px; font: 400 13px/1.5 var(--titolo); color: #7f88a8; }
@media (max-width: 700px) { .hotbar .tip { display: none; } .hotbar a { width: clamp(44px, 13vw, 92px); } .fisso .chat { bottom: 74px; } .fisso .chat p:not(:nth-last-child(-n+2)) { display: none; } .aiuto { bottom: 16px; font-size: 14px; } .targa-wy { font-size: 11px; } }
/* interfaccia di gioco */
.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--pixel); color: #fff; }
.boss { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); width: min(560px, 86vw); text-align: center; }
.boss-t { display: block; font: 600 clamp(14px, 1.3vw, 18px) var(--pixel); color: #ff6b6b; text-shadow: 2px 2px 0 #3a0d0d; }
.boss i { display: block; margin-top: 6px; height: 8px; background: #3a0d0d; border: 2px solid #1a0505; }
.boss b { display: block; height: 100%; background: #ff4d4d; transform-origin: left; }
.boss.verde .boss-t { color: #5cff7a; text-shadow: 2px 2px 0 #0d3a14; }
.boss.verde b { background: #3fdc5c; }
.azione { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(70vw, 760px); bottom: 118px; padding: 4px 14px; text-align: center; font: 600 clamp(15px, 1.4vw, 19px) var(--pixel); color: #5cff7a; text-shadow: 2px 2px 0 #0d3a14; background: rgba(10, 14, 28, .62); }
.azione b { font-weight: 400; letter-spacing: 1px; } .azione i { font-style: normal; color: #9a9a9a; letter-spacing: 1px; }
.azione[hidden] { display: none; }
.chat .r { color: #ff7b7b; font-weight: 500; }
.gesto small { display: block; font: 500 13px var(--titolo); opacity: .75; margin-top: 2px; text-align: left; }
.limbo small { font: 600 16px var(--pixel); letter-spacing: .1em; opacity: .7; }

.fisso .chat { position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(70px, 10vh, 100px); }
.targa { position: absolute; left: 0; top: 0; font: 600 15px var(--pixel); background: rgba(0,0,0,.5); padding: 2px 8px; white-space: nowrap; }
.targa.terra { color: #ff6b6b; }
.targa.tu { color: #ffd34a; }
.vita { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: grid; gap: 6px; justify-items: start; }
.cuori { display: flex; gap: 2px; }
.cuori svg { width: 18px; height: 18px; }
.slot { display: flex; border: 3px solid #1b1b1b; background: rgba(139,139,139,.55); }
.slot i { width: 40px; height: 40px; border: 2px solid rgba(0,0,0,.35); }
.slot i:first-child { outline: 3px solid #fff; outline-offset: -3px; }
.gesto { position: absolute; z-index: 4; left: 50%; bottom: clamp(110px, 18vh, 170px); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; font: 700 clamp(17px, 1.5vw, 21px) var(--pixel); color: var(--inchiostro); background: #ffd34a; border: 0; box-shadow: inset 0 -5px 0 #d6a51f, 0 8px 0 rgba(0,0,0,.25); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; animation: invito 1.6s ease-in-out infinite; }
.gesto.premuto { transform: translateX(-50%) translateY(3px); box-shadow: inset 0 -2px 0 #d6a51f; animation: none; }
.gesto:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.anello { --v: 0; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--inchiostro) calc(var(--v) * 360deg), rgba(23,32,58,.18) 0); display: grid; place-items: center; }
.anello::after { content: ''; width: 24px; height: 24px; border-radius: 50%; background: #ffd34a; }
@keyframes invito { 50% { transform: translateX(-50%) scale(1.04); } }
.limbo { position: absolute; z-index: 5; inset: 0; display: grid; place-content: center; text-align: center; gap: 14px; background: #e8d36a; color: #3b3214; font-family: var(--pixel); }
.limbo[hidden], .gesto[hidden], .boss[hidden] { display: none; }
.limbo strong { font: 700 clamp(34px, 5vw, 64px)/1 var(--pixel); }
.limbo p { font: 500 19px/1.4 var(--titolo); max-width: 36ch; }
.limbo button { justify-self: center; font: 700 18px var(--pixel); padding: 12px 20px; background: #3b3214; color: #e8d36a; border: 0; cursor: pointer; }
@media (max-width: 700px) { #spawn .chat p:not(:last-child) { display: none; } .uccello { display: none; } .boss { top: 74px; } .copia h2 { font-size: 34px; } .gesto { width: calc(100vw - 32px); } .slot { display: none; } .copia { top: 128px; } .fisso .chat { bottom: 74px; } .barra nav { display: none; } .barra { gap: 12px; } .scarica { margin-left: auto; } .nav { left: 12px; right: 12px; bottom: 10px; } .nav .capitoli { flex: 1; min-width: 0; } .nav .capitoli small { display: none; } .aiuto { bottom: 66px; } .scopri { bottom: 118px; } .gioco .esci { top: 70px; } .vita { bottom: 72px; } .azione { bottom: auto; top: 112px; } .azione.oro, .azione.viola { bottom: auto; top: 112px; } }
@media (max-width: 700px) { .chat { font-size: 13px; line-height: 1.25; gap: 3px; max-width: calc(100vw - 24px); } .chat p { padding: 3px 7px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } #spawn .chat { bottom: 12px; } .scopri { bottom: 100px; font-size: 17px; padding: 12px 20px; } .nav .capitoli b { font-size: 14px; } }
/* telefono in verticale: interfaccia di gioco impilata in alto (bossbar, barra azione), testo sotto, titoli di gioco a meta' schermo, gesto sopra la chat (un solo messaggio) */
@media (max-width: 700px) {
  .boss { top: 68px; width: calc(100vw - 32px); } .boss-t { font-size: 12px; line-height: 1.2; } .boss i { margin-top: 4px; height: 6px; }
  .azione, .azione.oro, .azione.viola { bottom: auto; top: 118px; font-size: 13px; line-height: 1.2; padding: 2px 10px; max-width: calc(100vw - 24px); }
  .copia { top: 158px; } .copia p { font-size: 15px; line-height: 1.35; margin-top: 8px; } .copia .plugin { margin-top: 8px; font-size: 13px; }
  .copia.scura-testo { padding: 14px 16px 16px; } .copia.scura-testo h2 { font-size: 28px; }
  .titolo-mc { top: 44%; } .titolo-mc strong { font-size: 32px; } .titolo-mc span { font-size: 14px; }
  .inpiedi { top: 48%; } .non-voltarti { top: 52%; }
  .fisso .chat p:not(:last-child) { display: none; }
  .gesto { bottom: 140px; font-size: 16px; padding: 12px 18px 12px 12px; } .aiuto { bottom: 134px; }
  .gioco .armadio-tip, .fisso .gioco .chat { bottom: 164px; }
  /* esiti (Salvo!, Crollo, Ti ha preso): bassi e compatti, sotto il testo e sopra la chat */
  .esito { top: auto; bottom: 150px; transform: translateX(-50%); width: calc(100vw - 32px); max-width: none; padding: 14px 16px 16px; gap: 6px; }
  .esito strong { font-size: 26px; } .esito span { font-size: 14px; line-height: 1.35; } .esito button { font-size: 14px; padding: 8px 14px; }
  .gioco .esito { bottom: 170px; }
}
/* telefono: la barra del browser (iOS, Android) copre il fondo dei 100vh; quello che sta in basso sale di quel tanto (--barra-browser = 100vh - 100svh), e la chat del primo schermo sta sopra la nav delle tappe */
@media (max-width: 700px) {
  :root { --barra-browser: calc(100vh - 100svh); }
  #spawn .chat { bottom: calc(var(--barra-browser) + 66px); }
  .fisso .chat { bottom: calc(var(--barra-browser) + 74px); }
  .scopri { bottom: calc(var(--barra-browser) + 150px); }
  .gesto { bottom: calc(var(--barra-browser) + 140px); } .aiuto { bottom: calc(var(--barra-browser) + 134px); }
  .vita { bottom: calc(var(--barra-browser) + 72px); }
  .esito { bottom: calc(var(--barra-browser) + 150px); } .gioco .esito { bottom: calc(var(--barra-browser) + 170px); }
  .gioco .armadio-tip, .fisso .gioco .chat { bottom: calc(var(--barra-browser) + 164px); }
  .gioco .stick { bottom: calc(var(--barra-browser) + 22px); }
}
/* aggiunte del sito allo stile della home: link nel piede, bottone "in arrivo", voce viola di Magic */
.piede a { color: #aab3d4; }
.btn.attesa { background: #3a3f5c; color: #d6dbef; box-shadow: inset 0 -5px 0 #262a40, 0 6px 0 rgba(0,0,0,.25); cursor: default; }
.btn.attesa:hover, .btn.attesa:active { transform: none; box-shadow: inset 0 -5px 0 #262a40, 0 6px 0 rgba(0,0,0,.25); }
.chat .v { color: #c27bff; }
/* selettore di lingua nella barra: stesso colore dei link, cornice a blocco */
.barra .lingua { font: 700 15px/1 var(--pixel); color: var(--inchiostro); text-decoration: none; border: 2px solid currentColor; padding: 7px 9px; }
body.scura .barra .lingua { color: #fff; }