:root{
  --ink:#0B1214;
  --ink-2:#111C1F;
  --ink-3:#16262A;
  --paper:#F2EFE6;
  --dim:#93A09E;
  --teal:#3FD0C9;
  --amber:#E8B15C;
  --lost:#38454A;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;user-select:none;
  display:flex;align-items:center;justify-content:center;
}
#stage{position:relative;width:100%;height:100%;max-width:780px}

/* orbita */
#orbit{position:absolute;inset:5% 3%;border:1px solid transparent;border-radius:50%;
  transform:scale(.96);transition:border-color .9s,transform .9s;pointer-events:none}
#orbit.on{border-color:rgba(63,208,201,.26);transform:scale(1)}

/* scene */
.scene{display:none;position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(86%,440px)}
.scene.on{display:block}

/* --- chat --- */
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--ink-3);border-radius:10px 10px 0 0}
.chat-head .av{width:32px;height:32px;border-radius:50%;background:var(--teal-dim,#24565A);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--paper);flex:0 0 auto}
.chat-head .txt{display:flex;flex-direction:column;line-height:1.25}
.who{font-size:14px}
.status{font-size:11px;color:var(--dim);min-height:13px}
.chat-log{height:32vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  gap:6px;padding:14px 10px;background:var(--ink-2)}
.msg{filter:blur(var(--f,0px));transition:filter .7s ease,opacity .35s,transform .35s;max-width:76%;font-size:14px;line-height:1.4;padding:7px 10px 5px;border-radius:12px 12px 12px 3px;
  background:#1D2E33;align-self:flex-start;position:relative;
  opacity:0;transform:translateY(5px);transition:opacity .35s,transform .35s}
.msg.in{opacity:1;transform:none}
.msg i{display:block;font-style:normal;font-size:9.5px;color:var(--dim);text-align:right;margin-top:3px}
.msg.me{align-self:flex-end;background:#1B4F52;border-radius:12px 12px 3px 12px}
.composer{background:var(--ink-3);padding:11px 12px;border-radius:0 0 10px 10px}
.draft{filter:blur(var(--f,0px));transition:filter .7s ease;font-size:14.5px;line-height:1.5;min-height:46px;color:var(--paper);font-family:inherit}
.cursor{display:inline-block;width:6px;height:15px;vertical-align:-3px;background:var(--teal);
  margin-left:2px;opacity:0}
.writing .cursor{opacity:1;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.bar{height:2px;background:rgba(242,239,230,.1);margin-top:10px;position:relative}
.fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--teal);transition:width .12s linear}

/* --- stanza: barre parallele --- */
.room-head{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  margin-bottom:16px;text-align:center}
.room{display:flex;flex-direction:column;gap:7px}
.track{
  background:transparent;border:none;padding:7px 0 9px;cursor:pointer;
  filter:blur(var(--f,0px));transition:filter .7s ease,color .25s;
  font:inherit;text-align:left;color:var(--dim);position:relative;
  display:grid;grid-template-columns:1fr auto;gap:2px 8px;transition:color .25s}
.track:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.track .lbl{font-size:13px;line-height:1.3}
.track .pcv{font-size:10.5px;letter-spacing:.06em;color:var(--dim);align-self:center}
.track .rail{grid-column:1/-1;height:3px;background:rgba(242,239,230,.09);margin-top:5px;position:relative}
.track .lvl{position:absolute;inset:0 auto 0 0;width:0;background:var(--lost);transition:width .12s linear}
.track.goal .lbl{color:var(--paper)}
.track.active{color:var(--paper)}
.track.active .lvl{background:var(--teal)}
.track.active .pcv{color:var(--teal)}
.track.cold .lvl{background:var(--amber);opacity:.45}
.track.done .lvl{background:var(--teal);opacity:.7}
.track.done{opacity:.4;cursor:default}

/* meta / comandi */
#meta{position:absolute;left:0;right:0;bottom:calc(5% + 96px);display:flex;
  justify-content:space-between;padding:0 8%;font-size:11px;letter-spacing:.07em;color:var(--dim)}
#hint{position:absolute;left:50%;bottom:calc(5% + 64px);transform:translateX(-50%);
  width:88%;text-align:center;font-size:11px;letter-spacing:.08em;color:var(--dim);line-height:1.5}
#act{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);
  border:1px solid rgba(63,208,201,.5);background:transparent;color:var(--teal);
  font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 34px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;display:none}
#act.on{display:block}
#act.held{background:var(--teal);color:var(--ink)}
#act:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* pensieri */
.thought{filter:blur(var(--f,0px));position:absolute;max-width:210px;font-size:13.5px;line-height:1.45;
  background:rgba(17,28,31,.96);border:1px solid rgba(242,239,230,.14);
  border-left:2px solid var(--amber);padding:11px 13px;border-radius:2px;
  cursor:pointer;opacity:0;transform:translateY(6px);
  transition:opacity .5s,transform .5s,filter .7s;z-index:6}
.thought.in{opacity:1;transform:none}
.thought.dying{opacity:.1;filter:blur(1px)}
.thought.frozen{border-left-color:var(--teal)}
.thought:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* lettura */
#reader{position:absolute;inset:0;background:rgba(11,18,20,.94);display:none;
  align-items:center;justify-content:center;padding:32px;z-index:20}
#reader.on{display:flex}
#reader p{font-family:Georgia,serif;font-size:21px;line-height:1.5;max-width:420px;text-align:center}
#reader small{display:block;margin-top:26px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-family:inherit}

/* pannelli */
.panel{position:absolute;inset:0;background:var(--ink);display:none;flex-direction:column;
  align-items:center;justify-content:center;padding:34px;text-align:center;z-index:30}
.panel.on{display:flex}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
/* h1 accanto a h2: il titolo del pannello iniziale e' diventato <h1> (la
   pagina non ne aveva nessuno). margin esplicito perche' i default del
   browser differiscono fra h1 e h2 e la spaziatura sarebbe cambiata. */
.panel h1,.panel h2{font-family:Georgia,serif;font-weight:400;font-size:24px;line-height:1.45;max-width:440px;margin:.83em 0}
.said{font-family:Georgia,serif;font-size:19px;line-height:1.7;max-width:400px}
.said em{color:var(--teal);font-style:normal}
.stat{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:20px}
.closer{font-size:12.5px;line-height:1.7;color:var(--dim);margin-top:22px;max-width:340px}
.cta,.choice,.mode{border:1px solid rgba(63,208,201,.5);background:transparent;color:var(--teal);
  font:inherit;cursor:pointer;border-radius:999px}
.cta{margin-top:32px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:14px 30px}
.cta:hover{background:var(--teal);color:var(--ink)}
/* Finale: la CTA vera (contatto) è piena, "Ricomincia" resta defilata. */
.cta.primary{background:var(--teal);color:var(--ink);text-decoration:none;display:inline-block;
  border-color:var(--teal);margin-top:22px}
.cta.primary:hover{filter:brightness(1.08)}
.cta.ghost{margin-top:12px;font-size:11px;padding:10px 22px;border-color:rgba(242,239,230,.2);
  color:var(--dim)}
.cta.ghost:hover{background:transparent;color:var(--paper);border-color:rgba(242,239,230,.4)}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:34px;width:min(100%,320px)}
.choice{padding:14px 18px;font-size:14px;color:var(--paper);border-color:rgba(242,239,230,.22)}
.choice:hover{border-color:var(--teal);color:var(--teal)}
.modes{display:flex;flex-direction:column;gap:12px;margin-top:34px;width:min(100%,340px)}
.mode{border-radius:3px;padding:16px 18px;text-align:left;display:flex;flex-direction:column;gap:5px;
  border-color:rgba(242,239,230,.18)}
.mode b{font-weight:500;font-size:15px;color:var(--paper)}
.mode span{font-size:12.5px;color:var(--dim);line-height:1.4}
.mode:hover{border-color:var(--teal)}
.nagi-mark{width:34px;height:34px;border:1px solid var(--teal);border-radius:50%;margin-bottom:26px;
  position:relative}
.nagi-mark::after{content:"";position:absolute;width:6px;height:6px;background:var(--teal);
  border-radius:50%;top:-3px;left:50%;margin-left:-3px}

#list{margin-top:22px;max-width:440px;width:100%;text-align:left;max-height:34vh;overflow-y:auto}
#list li{list-style:none;font-size:13.5px;line-height:1.45;padding:8px 0 8px 14px;
  border-left:2px solid var(--teal);margin-bottom:6px}
#list li.lost{border-left-color:var(--lost);color:var(--lost)}

/* ============================================================
   SCENA STANZA + ritocchi UI (feedback pilota 2026-08-14)
   Regola di comunicazione: nell'atto 3 la nitidezza nasce SEMPRE
   dalla scelta del giocatore (.active), mai da Nagi che indica.
   ============================================================ */

/* ---- LAVORO: la stessa scena, vestita da monitor ----
   Cornice dello schermo, intestazione della mail al posto della persona, le
   notifiche di sistema al posto dei messaggi. Il motore non cambia. */
#sChat.work{width:min(94%,620px);padding:14px 14px 22px;border-radius:10px;
  background:#0E1618;border:1px solid rgba(242,239,230,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
#sChat.work::after{content:"";display:block;height:8px;width:34%;margin:16px auto -14px;
  background:rgba(242,239,230,.12);border-radius:0 0 4px 4px}
#sChat.work .chat-head{background:#132227;border-radius:6px 6px 0 0}
#sChat.work .chat-head .av{background:#2C4247;font-size:15px}
#sChat.work .chat-log{background:#0F1B1E;height:26vh}
/* le notifiche entrano da destra e stanno a destra: sono di sistema, non di
   una persona che ti parla */
#sChat.work .msg{align-self:flex-end;background:#1B2A2F;border-radius:8px 8px 3px 8px;
  border-left:0;border-right:2px solid var(--amber);max-width:82%}
#sChat.work .composer{background:#0F1B1E;padding-top:10px}

/* Volti di Nagi sopra l'intervento: tre età, una sola voce. */
.nagi-faces{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:22px}
.nagi-faces img{width:78px;height:78px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(63,208,201,.4);background:var(--ink-2)}
.nagi-faces.one img{width:104px;height:104px;border-color:var(--teal);
  box-shadow:0 0 0 6px rgba(63,208,201,.08)}
/* nel finale il volto sta sopra la CTA: un filo più contenuto */
#p3 .nagi-faces{margin:24px 0 4px}
@media (max-width:520px){.nagi-faces img{width:64px;height:64px}
  .nagi-faces.one img{width:86px;height:86px}}

/* STEP 1 — davanti alla porta */
.doorwrap{width:112px;height:168px;margin-bottom:26px;perspective:700px}
.door{width:100%;height:100%;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid rgba(242,239,230,.14);border-radius:3px;position:relative;
  transform-origin:left center;transition:transform .5s ease,opacity .5s}
.door::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;
  border-radius:50%;background:var(--dim)}
#pDoor{cursor:pointer}
#pDoor.opening .door{transform:rotateY(-72deg);opacity:.35}
#pDoor.opening{background:radial-gradient(circle at 50% 45%,var(--ink-2),var(--ink) 70%)}
.doorTxt{font-family:Georgia,serif;font-size:19px;line-height:1.5;max-width:380px;color:var(--paper)}
.doorCta{margin-top:26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}

/* ---- STANZA NAVIGABILE ----
   Ambiente vettoriale (SVG inline, nessuna immagine esterna) + azioni come
   cerchi di attenzione ancorati agli oggetti. L'anello È la barra: stessa
   percentuale della meccanica, altra pelle. */
/* La stanza è un ambiente, non una card: su desktop prende tutta la scena. */
#sRoom.scene{width:min(96%,760px)}
.roomScene{position:relative;width:100%;aspect-ratio:400/260;border-radius:12px;
  overflow:hidden;border:1px solid rgba(242,239,230,.07);background:var(--ink-2)}
.roomArt{position:absolute;inset:0;width:100%;height:100%}
.room{position:absolute;inset:0}

.spot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;padding:0;
  background:transparent;border:0;cursor:pointer;color:var(--paper);display:block;z-index:2}
.spot .ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--teal) calc(var(--p,0)*1%),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 58%);
  mask:radial-gradient(circle,transparent 56%,#000 58%)}
.spot::before{content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px solid rgba(242,239,230,.28);background:rgba(11,18,20,.5);transition:border-color .3s,transform .3s}
.spot .pcv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;color:var(--dim)}
.spot .lbl{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);
  white-space:nowrap;font-size:10.5px;color:var(--dim);background:rgba(11,18,20,.72);
  padding:2px 6px;border-radius:4px;opacity:0;transition:opacity .25s;pointer-events:none}
.spot:hover .lbl,.spot:focus-visible .lbl,.spot.active .lbl{opacity:1;color:var(--paper)}
.spot.active::before{border-color:var(--teal);transform:scale(1.08)}
.spot.cold::before{border-color:rgba(232,177,92,.5)}
.spot.done .ring{background:conic-gradient(rgba(63,208,201,.55) 100%,transparent 0)}
.spot.done{opacity:.45;cursor:default}
/* L'obiettivo NON è mai evidenziato dal gioco: nell'atto 1 è il più spento
   della stanza — sta lì davanti e non lo vedi. */
#sRoom:not(.act3) .spot.goal{opacity:.42}
#sRoom:not(.act3) .spot.goal .lbl{opacity:0}
#sRoom:not(.act3) .spot.goal.active{opacity:1}

/* Atto 1: gli oggetti si accendono a turno — attenzione "prepotente" */
.track.lure{animation:lure 1.1s ease-in-out}
@keyframes lure{
  0%,100%{box-shadow:0 0 0 0 rgba(232,177,92,0)}
  45%{box-shadow:0 0 0 6px rgba(232,177,92,.16)}
}
.spot.lure::before{border-color:rgba(232,177,92,.75)}

/* Pensieri che fluttuano DENTRO la stanza: coprono quello che guardi */
.thought.inRoom{position:absolute;max-width:46%}
/* il drift parte DOPO l'entrata (.in): l'animazione vince sul transform base */
.thought.inRoom.in{animation:drift 6s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(var(--dx,6px),var(--dy,-5px))}}

/* Atto 3: la stanza parte LEGGIBILE; il resto arretra solo DOPO la scelta
   (classe hasActive) — mai all'ingresso, o non si capisce nulla. */
#sRoom.act3.hasActive .track{opacity:.34;transition:opacity .5s}
#sRoom.act3.hasActive .track.active{opacity:1}
/* L'obiettivo resta pieno anche mentre fai altro: è il motivo per cui sei
   entrato, dichiarato da te. Non lampeggia più forte, non ti sgrida: aspetta. */
#sRoom.act3.hasActive .track.beacon{opacity:1}

/* Atto 3: il caricabatterie torna in scena, centrale, coi cerchi concentrici.
   Non è Nagi a indicarlo: è il motivo per cui sei entrato, ora dichiarato. */
.spot.beacon{width:52px;height:52px}
.spot.beacon::after{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid rgba(63,208,201,.45);animation:beacon 2.6s ease-out infinite}
.spot.beacon .lbl{opacity:1;color:var(--paper)}
@keyframes beacon{
  0%{transform:scale(.72);opacity:.9}
  100%{transform:scale(1.5);opacity:0}
}

/* Chat: badge non letti + CTA fisica */
.chat-head .badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--amber);color:var(--ink);font-size:11px;line-height:20px;text-align:center}
.badge.shake{animation:shake .5s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-3px)}40%{transform:translateX(3px)}
  60%{transform:translateX(-2px)}80%{transform:translateX(2px)}
}
#act.on:not(.held){animation:pulseCta 2.4s ease-in-out infinite}
@keyframes pulseCta{
  0%,100%{box-shadow:0 0 0 0 rgba(63,208,201,0)}
  50%{box-shadow:0 0 0 5px rgba(63,208,201,.14)}
}

/* Icona accessibilità: discreta, tonda */
#fogoff{padding:7px;line-height:0}
#fogoff[aria-pressed="true"]{color:var(--teal);border-color:rgba(63,208,201,.45)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}
@media (max-width:520px){.thought{max-width:44vw;font-size:12.5px}.panel h1,.panel h2{font-size:21px}.said{font-size:17px}
  .doorwrap{width:92px;height:138px}.doorTxt{font-size:17px}}

/* --- nebbia: accessibilità --- */
#fogoff{position:absolute;top:10px;right:12px;z-index:40;background:transparent;
  border:1px solid rgba(242,239,230,.16);color:var(--dim);font:inherit;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px;cursor:pointer}
#fogoff:hover{color:var(--paper)}
body.noblur *{filter:none!important}
@media (prefers-reduced-motion:reduce){.track,.msg,.thought,.draft{filter:none!important}}