/* FantaLiberty VN engine — CSS puro.
   Baseline: iPhone portrait 390x844 pt. Le animazioni sono @keyframes (piu'
   affidabili delle transition su mobile Safari). Il terzo inferiore dello
   schermo e' area dialogo: i fondali non ci mettono dettagli importanti. */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#0a0a0f;overflow:hidden;overscroll-behavior:none;
 font-family:'Press Start 2P',ui-monospace,monospace;-webkit-text-size-adjust:100%}

#stage{position:relative;width:100vw;height:100vh;height:100svh;overflow:hidden;cursor:pointer;
 -webkit-tap-highlight-color:transparent}

/* ---------- fondale ---------- */
/* il fondale sta su un layer suo: cosi' il testo che si scrive non lo fa ridisegnare */
#bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
 image-rendering:pixelated;transition:filter .8s ease;transform:translateZ(0);will-change:filter,transform}
#bg.zoom{animation:zoom 6s ease-out forwards}
@keyframes zoom{from{transform:scale(1.06)}to{transform:scale(1.16)}}
#bg.blur{filter:blur(6px) brightness(.55)}

/* ---------- NPC: corpo + testa ----------
   #npc e' il riquadro del personaggio; la testa e' posizionata in percentuale
   su quel riquadro (punto di ancoraggio del collo, uguale per tutte le pose). */
#npc{position:absolute;right:-2%;bottom:16%;height:56%;aspect-ratio:3/5;opacity:0;z-index:1;
 filter:drop-shadow(0 10px 20px rgba(0,0,0,.55));transform:translateX(60px);
 transition:height .5s ease, bottom .5s ease}
#npcBody{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 object-position:bottom center;image-rendering:pixelated}
#npcHead{position:absolute;left:50%;top:4%;width:34%;transform:translateX(-50%);
 image-rendering:pixelated}
#npc.in{animation:enter .85s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes enter{from{opacity:0;transform:translateX(74px)}to{opacity:1;transform:translateX(0)}}
#npc.pop{animation:pop .5s ease forwards}
@keyframes pop{0%{opacity:1;transform:scale(1)}45%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
#npc.broken{display:none}
#npc.out{animation:leave .45s ease forwards}
@keyframes leave{from{opacity:1}to{opacity:0;transform:translateX(40px)}}
/* reazione livello 1: movimento minimo, nessun asset nuovo */
#npc.micro{animation:micro .45s ease}
@keyframes micro{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-6px) rotate(-1deg)}}

/* ---------- avatar del giocatore ---------- */
#avatar{position:absolute;left:2%;bottom:20%;height:34%;aspect-ratio:3/5;opacity:0;
 transition:opacity .4s ease}
#avatar.on{opacity:1}
/* durante la scelta l'avatar va al centro e sale sopra il box, e' lui il soggetto */
#avatar.pick{left:50%;margin-left:-13%;bottom:36%;height:40%}
.alayer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 object-position:bottom center;image-rendering:pixelated}
#avatarImg.slideL{animation:slL .28s ease}
#avatarImg.slideR{animation:slR .28s ease}
@keyframes slL{from{opacity:.2;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
@keyframes slR{from{opacity:.2;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
/* avatar non ancora disegnato: sagoma, cosi' lo scheletro resta leggibile */
.alayer.missing{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
 border-radius:10px;border:2px dashed rgba(255,255,255,.18);opacity:.6}

/* ---------- prop / terminale ---------- */
#propwrap{position:absolute;left:50%;top:7%;width:62%;max-width:420px;opacity:0;
 transform:translate(-50%,25px) scale(.85);
 transition:opacity .6s ease, transform .7s cubic-bezier(.2,.9,.3,1);pointer-events:none}
#propwrap.in{opacity:1;transform:translate(-50%,0) scale(1)}
#propwrap.out{opacity:0;transform:translate(-50%,-40px) scale(.8)}
#prop{width:100%;display:block;image-rendering:pixelated;filter:drop-shadow(0 16px 30px rgba(0,0,0,.65))}
#screen{position:absolute;left:28.6%;top:12.6%;width:43%;height:27%;
 padding:3% 4%;color:#0f3b34;font-size:clamp(5px,1.35vw,10px);line-height:1.7;overflow:hidden}
.frow{margin-bottom:.5em;white-space:nowrap;overflow:hidden}
.fk{opacity:.75}
.fv{font-weight:bold}
.cur{display:inline-block;width:.55em;background:#0f3b34;animation:bl .6s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

/* ---------- dialogo (terzo inferiore) ---------- */
#boxwrap{position:absolute;z-index:2;left:4%;right:4%;bottom:calc(3% + env(safe-area-inset-bottom,0px));
 opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease;
 max-height:46%;display:flex;flex-direction:column}
#boxwrap.in{opacity:1;transform:translateY(0)}
#name{align-self:flex-start;background:#1b1f33;border:3px solid #fff;border-radius:10px;
 padding:7px 14px;color:#fff;font-size:clamp(8px,2.15vw,12px);margin-left:12px;position:relative;z-index:2;
 box-shadow:0 4px 0 rgba(0,0,0,.5)}
#name.hidden{display:none}
/* altezza riservata: il box non cambia dimensione a ogni carattere (niente scatti) */
#box{background:#1b1f33;border:3px solid #fff;border-radius:12px;padding:14px 16px;margin-top:-3px;
 color:#fff;font-size:clamp(8px,2.5vw,13px);line-height:1.85;min-height:4.6em;
 box-shadow:0 6px 0 rgba(0,0,0,.5)}
#arrow{text-align:center;color:#fff;font-size:12px;margin-top:5px;opacity:0;animation:bob 1s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- scelte / input / avatar picker ---------- */
#choices{margin-top:10px;display:none;flex-direction:column;gap:7px;overflow-y:auto}
#choices.on{display:flex}
.ch{background:#2a3050;border:3px solid #fff;border-radius:8px;padding:11px 13px;color:#fff;
 font-family:inherit;font-size:clamp(8px,2.35vw,12px);cursor:pointer;text-align:left;
 box-shadow:0 3px 0 rgba(0,0,0,.5)}
.ch:hover,.ch:focus{background:#3d466e;outline:none}

#inputform{margin-top:10px;display:none;gap:7px}
#inputform.on{display:flex}
#ti{flex:1;min-width:0;background:#0d1020;border:3px solid #fff;border-radius:8px;color:#fff;
 font-family:inherit;font-size:16px;padding:10px 11px;outline:none}   /* 16px: iOS non zooma */
#tok{background:#2a3050;border:3px solid #fff;border-radius:8px;color:#fff;font-family:inherit;
 font-size:clamp(8px,2.35vw,12px);padding:10px 13px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.5)}
#tok:disabled{opacity:.35;cursor:default}

#picker{margin-top:10px;display:none;flex-direction:column;gap:8px}
#picker.on{display:flex}
/* carosello avatar: frecce + pallini di avanzamento */
.pnav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.parrow{background:#2a3050;border:3px solid #fff;border-radius:8px;color:#fff;font-family:inherit;
 font-size:clamp(10px,3vw,15px);padding:8px 16px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.5)}
.parrow:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.pdots{display:flex;gap:7px}
.pdot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);
 border:2px solid rgba(255,255,255,.35)}
.pdot.seen{background:rgba(255,255,255,.5)}
.pdot.sel{background:#fff;border-color:#fff;transform:scale(1.25)}

/* ---------- sipario / cartello d'apertura ---------- */
#curtain{position:absolute;inset:0;z-index:5;background:#000;display:none;place-items:center;
 padding:14% 10%;opacity:1}
#curtain.on{display:grid}
/* l'accensione: il nero se ne va piano e la scena emerge */
#curtain.lights{animation:lights 3.4s ease-out forwards}
@keyframes lights{from{opacity:1}to{opacity:0}}
#curtainInner{text-align:center;max-width:34em}

/* sigla dello studio: si accende come un neon, resta acceso pulsando, sfuma */
#logo{display:none;flex-direction:column;align-items:center;opacity:0}
#logo.on{display:flex}
#logo.accendi{animation:neonOn 1s steps(1) forwards}
#logo.acceso{opacity:1;animation:neonPulse 1.8s ease-in-out infinite}
#logo.spegni{animation:neonOff .9s ease-out forwards}
/* accensione a scatti, come un tubo alogeno che fatica a partire */
@keyframes neonOn{
  0%{opacity:0}   8%{opacity:1}  12%{opacity:0}
  22%{opacity:1}  26%{opacity:.15} 34%{opacity:1}
  38%{opacity:.4} 52%{opacity:1}  56%{opacity:.7}
  100%{opacity:1}
}
@keyframes neonPulse{
  0%,100%{filter:drop-shadow(0 0 5px rgba(126,240,120,.30)) brightness(1)}
  50%{filter:drop-shadow(0 0 16px rgba(126,240,120,.55)) brightness(1.12)}
}
@keyframes neonOff{from{opacity:1}to{opacity:0}}

#logoImg{width:min(78vw,420px);image-rendering:pixelated;display:none}
#logoImg.ok{display:block}
/* finche' il logo vero non c'e', lo si disegna in CSS con la stessa insegna */
#logoFallback{border:4px solid #7ef078;border-radius:14px;padding:18px 22px;
 background:rgba(20,60,20,.55);color:#bdf7b8;font-size:clamp(13px,4.6vw,26px);
 box-shadow:inset 0 0 0 3px rgba(126,240,120,.35)}
#logoFallback sup{font-size:.45em;vertical-align:super}
#logoImg.ok ~ #logoFallback{display:none}
/* il palo dell'insegna */
#logoImg.ok ~ #logoStem{display:none}
#logoStem{position:relative;width:10px;height:min(9vh,74px);
 background:repeating-linear-gradient(180deg,#dfe6df 0 6px,#8d968d 6px 12px)}
/* la base dell'insegna, in fondo al palo */
#logoStem::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
 width:34px;height:15px;background:#dfe6df;border-radius:3px;
 box-shadow:inset 0 0 0 4px #c8332a}

/* schermata di avvio: barra a blocchi che finge di caricare */
#boot{display:none;flex-direction:column;align-items:center;gap:14px}
#boot.on{display:flex}
#bootbar{display:flex;gap:4px;width:min(68vw,300px);
 border-top:3px solid #fff;border-bottom:3px solid #fff;padding:5px 3px}
.bblock{flex:1;aspect-ratio:5/7;background:#fff;opacity:0}
.bblock.full{opacity:1}
.bblock.cur{opacity:.45}     /* il blocco in corso di caricamento */
#bootlabel{color:#fff;font-size:clamp(11px,3.4vw,18px);letter-spacing:.42em;text-indent:.42em}
.tline{color:#fff;font-size:clamp(9px,3vw,15px);line-height:2.2;margin-bottom:1.1em;
 text-shadow:0 0 14px rgba(255,255,255,.25)}
.tline.small{font-size:clamp(8px,2.4vw,12px);opacity:.72}
.tline.big{font-size:clamp(11px,3.6vw,19px);letter-spacing:.04em}
/* cursore che lampeggia mentre si scrive e durante le pause */
.tcur{display:inline-block;width:.62em;height:1.05em;background:#fff;vertical-align:-.16em;
 margin-left:.16em;animation:bl .62s steps(1) infinite}
#curtainArrow{color:#fff;font-size:12px;opacity:0;margin-top:1.4em;animation:bob 1s infinite}

#hint{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:14px;color:#fff9;font-size:9px}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#flash.go{animation:fl .55s ease-out}
@keyframes fl{0%{opacity:.85}100%{opacity:0}}

#loaderr{position:absolute;inset:0;display:none;place-items:center;padding:8vw;color:#ffb4b4;
 font-size:12px;line-height:2;text-align:center}
#loaderr.on{display:grid}

/* Schermi larghi (Safari su Mac, tablet): niente stiramento a tutto schermo.
   Si disegna una cornice con le proporzioni di un iPhone (390x844) centrata,
   perche' e' li' che il gioco verra' davvero giocato. */
@media (min-aspect-ratio:3/4){
  body{background:#05060a;display:flex;align-items:center;justify-content:center}
  #stage{
    height:min(100svh,940px);
    width:calc(min(100svh,940px) * 390 / 844);
    max-width:100vw;
    border-radius:22px;
    box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.75);
  }
}