/* ============================================================
   PROTOCOLO DE QUARENTENA — Laboratório de Biossegurança N3
   ============================================================ */

:root{
  --bg:#05080a;
  --bg-2:#0a1012;
  --panel:rgba(10,18,20,.72);
  --line:rgba(57,255,122,.18);
  --green:#39ff7a;
  --green-dim:#1f8f4a;
  --amber:#ffb627;
  --red:#ff2e3c;
  --text:#dff3ec;
  --muted:#6f8a82;
  --mono:'Share Tech Mono', ui-monospace, monospace;
  --display:'Orbitron', sans-serif;
  --body:'Rajdhani', system-ui, sans-serif;
  --scene:url("cena.jpg");
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 800px at 50% -10%, #0c1a18 0%, var(--bg) 55%, #02040500 100%), var(--bg);
  color:var(--text);
  font-family:var(--body);
  overflow:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ---------- camadas de ambiente ---------- */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:30;
  background:radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.75) 100%);}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:31;opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.5) 3px);
  animation:scan 8s linear infinite;}
@keyframes scan{from{background-position-y:0}to{background-position-y:120px}}
/* cena de fundo (imagem da nave-laboratório) */
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--scene, none) center/cover no-repeat;}
/* escurecedor pra manter os painéis/HUD legíveis sobre a foto clara */
.grid-bg::after{content:"";position:absolute;inset:0;opacity:1;transition:opacity 1.1s ease;
  background:radial-gradient(120% 120% at 50% 40%, rgba(2,8,10,.30) 0%, rgba(2,8,10,.62) 70%, rgba(2,8,10,.82) 100%);}
/* antes da quarentena o laboratório aparece "normal" (mais claro) */
body:not(.quarantine) .grid-bg::after{opacity:.42}
@keyframes drift{from{background-position:0 0}to{background-position:0 -80px}}

/* moléculas desativadas (prejudicavam a leitura) */
.molecules{display:none}
#particles{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ---------- gás tóxico que enche conforme o tempo ---------- */
#gas{position:fixed;inset:0;z-index:22;pointer-events:none;opacity:0;transition:opacity 1.5s linear}
#gas .gas-body{position:absolute;left:0;right:0;bottom:0;height:var(--fill,0%);transition:height 1.1s linear;
  background:linear-gradient(0deg, rgba(46,230,120,.34) 0%, rgba(46,230,120,.18) 48%, rgba(46,230,120,.05) 84%, transparent 100%);
  filter:blur(3px) saturate(1.1)}
#gas .gas-blobs{position:absolute;left:0;right:0;bottom:0;height:var(--fill,0%);transition:height 1.1s linear}
#gas .gas-blobs i{position:absolute;bottom:84%;width:44vw;height:44vw;max-width:540px;max-height:540px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(90,255,170,.32), transparent 62%);
  filter:blur(28px);mix-blend-mode:screen;animation:billow 9s ease-in-out infinite}
#gas .gas-blobs i:nth-child(1){left:-8%;animation-delay:0s}
#gas .gas-blobs i:nth-child(2){left:18%;animation-delay:-2.4s;animation-duration:11s}
#gas .gas-blobs i:nth-child(3){left:42%;animation-delay:-1.2s;animation-duration:8s}
#gas .gas-blobs i:nth-child(4){left:66%;animation-delay:-3.6s;animation-duration:12s}
#gas .gas-blobs i:nth-child(5){left:88%;animation-delay:-.8s;animation-duration:10s}
@keyframes billow{0%,100%{transform:translateY(0) scale(1);opacity:.65}50%{transform:translateY(-20px) scale(1.14);opacity:.95}}
#gas .gas-danger{position:absolute;inset:0;mix-blend-mode:screen;opacity:var(--danger,0);transition:opacity 1.5s linear;
  background:radial-gradient(130% 95% at 50% 100%, rgba(255,46,60,.3), transparent 58%)}
#gas.surge{animation:gasSurge .6s ease-out}
@keyframes gasSurge{0%{filter:brightness(1)}30%{filter:brightness(1.7)}100%{filter:brightness(1)}}

.hazard-stripe{position:fixed;left:0;right:0;height:14px;z-index:20;pointer-events:none;opacity:0;
  transition:opacity .8s ease;
  background:repeating-linear-gradient(45deg,#0000 0 14px,#000 0 28px),
            repeating-linear-gradient(45deg,var(--amber) 0 14px,#181206 0 28px);
  background-blend-mode:multiply;}
body.quarantine .hazard-stripe{opacity:.55}
.hazard-stripe.top{top:0}
.hazard-stripe.bottom{bottom:0;transform:scaleY(-1)}

/* ---------- HUD ---------- */
.hud{position:fixed;top:26px;left:0;right:0;z-index:25;display:flex;justify-content:center;gap:34px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;pointer-events:none;
  text-shadow:0 0 8px rgba(57,255,122,.35);}
.hud-item{display:flex;flex-direction:column;align-items:center;gap:3px}
.hud-label{color:var(--muted);font-size:9px}
.hud-value{color:var(--green)}
.hud-value.alert{color:var(--red);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

/* medidor de O₂ */
.hud-item.o2{position:relative}
.o2-gauge{display:flex;align-items:center;gap:8px}
.o2-track{width:150px;height:9px;border:1px solid var(--line);border-radius:5px;overflow:hidden;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px), rgba(0,0,0,.45)}
.o2-fill{height:100%;width:100%;border-radius:4px;transition:width 1s linear, background .8s linear, box-shadow .8s;
  background:linear-gradient(90deg,#1f8f4a,var(--green));box-shadow:0 0 10px rgba(57,255,122,.6)}
.o2-fill.warn{background:linear-gradient(90deg,#a06a10,var(--amber));box-shadow:0 0 10px rgba(255,182,39,.6)}
.o2-fill.crit{background:linear-gradient(90deg,#8a0d16,var(--red));box-shadow:0 0 12px rgba(255,46,60,.7)}
.o2-clock{font-size:15px;font-weight:700;color:var(--green);min-width:52px;text-align:left}
.o2-clock.warn{color:var(--amber)}
.o2-clock.crit{color:var(--red);animation:blink .55s steps(1) infinite}
.o2-gauge.hit{animation:o2hit .5s}
@keyframes o2hit{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.o2-penalty{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--red);opacity:0;pointer-events:none;
  text-shadow:0 0 10px rgba(255,46,60,.7)}
.o2-penalty.show{animation:penalty 1.2s ease-out}
@keyframes penalty{0%{opacity:0;transform:translate(-50%,4px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}

/* ---------- palco / cenas ---------- */
#stage{position:relative;z-index:10;height:100vh;width:100%}
.scene{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:60px 24px;
  opacity:0;transition:opacity .6s ease}
.scene.active{display:flex;opacity:1}
.hidden{display:none!important}

/* ---------- CENA BOOT ---------- */
.boot-wrap{text-align:center;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:18px}

/* cena inicial: laboratório normal + INICIAR no meio */
.start-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.start-badge{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--green);
  border:1px solid var(--line);border-radius:30px;padding:9px 20px;background:rgba(3,10,9,.5);
  text-shadow:0 0 10px rgba(57,255,122,.5)}

/* boot: título → diagnóstico */
.boot-stage{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:760px;width:100%}
.boot-title-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:rise .7s ease both;transition:transform .8s ease, opacity .8s ease}
.boot-stage.diag .boot-title-wrap{transform:scale(.78)}
.boot-diag-wrap{width:min(580px,90vw);max-height:0;opacity:0;overflow:hidden;
  transition:max-height .7s ease, opacity .6s ease}
.boot-stage.diag .boot-diag-wrap{max-height:340px;opacity:1}
.biohazard{color:var(--amber);filter:drop-shadow(0 0 18px rgba(255,182,39,.55))}
.biohazard.big{width:96px;height:96px}
.biohazard svg{width:100%;height:100%}
.mol-hero{width:114px;height:114px}
.mol-hero img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 16px rgba(57,255,122,.5))}
/* ícones (PNG neon) */
.hdr-ico{width:26px;height:26px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(57,255,122,.5))}
.lab-row{display:flex;justify-content:center;gap:24px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.lab-row img{width:46px;height:46px;object-fit:contain;opacity:.85;filter:drop-shadow(0 0 8px rgba(57,255,122,.4))}
.door-lock img{width:74px;height:74px;object-fit:contain}
.lock-ico img{width:46px;height:46px;object-fit:contain}
.spin{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-console{font-family:var(--mono);font-size:13px;line-height:1.85;letter-spacing:.03em;
  text-align:left;width:min(580px,90vw);min-height:200px;
  background:rgba(3,10,9,.55);border:1px solid var(--line);border-radius:8px;
  padding:16px 20px;box-shadow:inset 0 0 50px rgba(57,255,122,.05),0 10px 36px rgba(0,0,0,.5)}
.boot-console .bhead{color:var(--green);font-size:12px;letter-spacing:.1em;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px;
  text-shadow:0 0 10px rgba(57,255,122,.5);white-space:nowrap;overflow:hidden;
  display:flex;align-items:center;gap:8px}
.boot-console .bhead-tx{overflow:hidden;text-overflow:ellipsis}
.boot-console .bl{display:flex;align-items:center;white-space:nowrap;opacity:0;transform:translateY(3px);
  animation:blIn .22s ease forwards}
@keyframes blIn{to{opacity:1;transform:none}}
.boot-console .lbl{color:#9fc2b8;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.boot-console .leader{flex:1 1 auto;min-width:12px;margin:0 8px;
  border-bottom:1px dotted #34463f;transform:translateY(-3px)}
.boot-console .st{flex:0 0 auto;font-weight:700;text-shadow:0 0 9px currentColor}
.boot-console .st.ok{color:var(--green)}
.boot-console .st.warn{color:var(--amber)}
.boot-console .st.crit{color:var(--red)}
.boot-console .bl.crit-line .st{animation:blink .5s steps(1) 5}
.boot-console .caret{color:var(--green);animation:blink 1s steps(1) infinite}
@media(max-width:480px){
  .boot-console{font-size:10.5px;padding:12px 14px;letter-spacing:0;min-height:170px}
  .boot-console .bhead{font-size:10px;letter-spacing:.04em}
}
.lock-title{font-family:var(--display);font-weight:900;font-size:clamp(28px,6vw,64px);
  letter-spacing:.04em;color:#fff;line-height:1.05;
  text-shadow:0 0 24px rgba(255,46,60,.5);}
.lock-sub{color:var(--muted);font-size:clamp(14px,2vw,18px);letter-spacing:.04em;max-width:520px}
.lock-sub strong{color:var(--amber)}
.hint{color:var(--muted);font-family:var(--mono);font-size:11px;opacity:.7;margin-top:4px}

/* ---------- botões ---------- */
.btn-primary{position:relative;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.08em;
  color:#031006;background:linear-gradient(180deg,var(--green),var(--green-dim));
  border:none;border-radius:6px;padding:16px 34px;cursor:pointer;overflow:hidden;
  box-shadow:0 0 0 1px rgba(57,255,122,.6),0 0 28px rgba(57,255,122,.35);
  transition:transform .15s, box-shadow .25s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--green),0 0 40px rgba(57,255,122,.6)}
.btn-primary:active{transform:translateY(0)}
.btn-primary.small{font-size:13px;padding:12px 24px}
.btn-glow{position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:sheen 3s ease-in-out infinite}
@keyframes sheen{0%,100%{left:-60%}50%{left:120%}}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 1px rgba(57,255,122,.6),0 0 22px rgba(57,255,122,.3)}
  50%{box-shadow:0 0 0 1px var(--green),0 0 46px rgba(57,255,122,.7)}}
.btn-ghost{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);
  background:transparent;border:1px solid var(--line);border-radius:5px;padding:11px 20px;cursor:pointer;
  transition:.2s}
.btn-ghost:hover{color:var(--green);border-color:var(--green)}

/* ---------- glitch ---------- */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden}
.glitch::before{color:var(--red);clip-path:inset(0 0 55% 0);animation:gl1 2.6s infinite linear alternate}
.glitch::after{color:var(--green);clip-path:inset(55% 0 0 0);animation:gl2 2s infinite linear alternate}
@keyframes gl1{0%{transform:translate(0)}100%{transform:translate(-2px,-1px)}}
@keyframes gl2{0%{transform:translate(0)}100%{transform:translate(2px,1px)}}

/* ---------- CENA CINEMATIC ---------- */
#scene-cinematic{padding:0;overflow:hidden}
.cine-video{display:none}
.cine-bg{position:absolute;inset:0;z-index:0;background:var(--scene) center/cover no-repeat;transform:scale(1.06)}
.cine-bg.play{animation:kenburns 5.4s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.24) translate(-1.6%,-1.2%)}}
.cine-grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 115% at 50% 42%, transparent 34%, rgba(0,10,8,.66) 100%)}
.cine-alert{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(0deg, rgba(255,46,60,.16), rgba(255,46,60,.05))}
.cine-alert.on{animation:cineAlarm 1s ease-in-out infinite}
@keyframes cineAlarm{0%,100%{opacity:.2}50%{opacity:.85}}
.cine-scanbar{position:absolute;top:0;bottom:0;left:-45%;width:45%;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(90deg, transparent, rgba(255,46,60,.22), transparent)}
.cine-scanbar.on{opacity:1;animation:sweep 2.1s linear infinite}
@keyframes sweep{from{left:-45%}to{left:100%}}
.cine-caption{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);z-index:8;text-align:center;
  font-family:var(--mono);color:var(--green);letter-spacing:.16em;font-size:14px;max-width:90vw;
  background:rgba(3,10,9,.55);border:1px solid var(--line);border-radius:6px;padding:9px 18px;
  text-shadow:0 0 12px rgba(57,255,122,.6)}
.cine-caption.crit{color:var(--red);border-color:rgba(255,46,60,.4);text-shadow:0 0 12px rgba(255,46,60,.6)}
.cine-caption .cur{animation:blink 1s steps(1) infinite;margin-left:2px}
.cine-skip{position:absolute;right:22px;bottom:22px;z-index:9}

/* portas pneumáticas industriais */
.blast-doors{position:absolute;inset:0;z-index:4;pointer-events:none}
.blast{position:absolute;top:0;bottom:0;width:51%;overflow:hidden;
  background:linear-gradient(90deg,#232f2c 0%,#141d1c 56%,#090f0e 100%);
  box-shadow:inset 0 0 130px rgba(0,0,0,.92)}
.blast.left{left:0;transform:translateX(-103%)}
.blast.right{right:0;transform:translateX(103%)}
.blast-doors.closing .blast{transition:transform .74s cubic-bezier(.66,0,.18,1)}
.blast-doors.closing .blast.left,.blast-doors.closing .blast.right{transform:translateX(0)}
.blast-doors.sliding .blast{filter:blur(2.5px)}
.panel-lines{position:absolute;inset:0;background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 48px)}
.chevrons{position:absolute;top:37%;left:0;right:0;height:78px;opacity:.92;
  background:repeating-linear-gradient(135deg,var(--amber) 0 26px,#15100a 0 52px);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45)}
.rivets{position:absolute;top:0;bottom:0;width:16px;background-image:radial-gradient(circle,#37443f 36%,transparent 40%);
  background-size:16px 42px;background-repeat:repeat-y;opacity:.8}
.blast.left .rivets{right:30px}.blast.right .rivets{left:30px}
.piston{position:absolute;height:15px;width:48%;background:linear-gradient(180deg,#3c4c47,#19231f);border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.piston::after{content:"";position:absolute;top:4px;bottom:4px;width:42%;background:linear-gradient(180deg,#637a73,#2c3a37)}
.blast.left .piston{right:6px}.blast.left .piston::after{left:0}
.blast.right .piston{left:6px}.blast.right .piston::after{right:0}
.p-top{top:16%}.p-bot{bottom:16%}
.teeth{position:absolute;top:0;bottom:0;width:24px;background:repeating-linear-gradient(180deg,#0a1110 0 32px,transparent 32px 64px)}
.blast.left .teeth{right:0}.blast.right .teeth{left:0;background-position:0 32px}
.blast-seam{position:absolute;top:0;bottom:0;left:50%;width:5px;transform:translateX(-50%);z-index:6;opacity:0;
  background:linear-gradient(180deg,transparent,var(--red),transparent);box-shadow:0 0 24px var(--red)}
.blast-doors.closed .blast-seam{opacity:1;animation:weld 1.8s ease-out}
@keyframes weld{0%{opacity:1;filter:brightness(2.4)}100%{opacity:.55;filter:brightness(1)}}
.bolts{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);z-index:7;opacity:0;
  display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}
.blast-doors.closed .bolts{opacity:1}
.bolts i{width:42px;height:42px;border-radius:50%;border:3px solid #4a5a56;position:relative;
  background:radial-gradient(circle,#1a2422,#0b1211);transition:transform .25s, border-color .25s, box-shadow .25s}
.bolts i::before{content:"";position:absolute;inset:9px;border-radius:2px;background:#5d736c}
.bolts i.locked{border-color:var(--red);box-shadow:0 0 18px rgba(255,46,60,.75);transform:rotate(90deg)}
.impact-dust{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64%;height:52%;z-index:5;opacity:0;
  background:radial-gradient(ellipse at 50% 100%, rgba(205,214,209,.45), transparent 70%)}
.impact-dust.puff{animation:dust 1.2s ease-out}
@keyframes dust{0%{opacity:0;transform:translateX(-50%) scaleY(.15)}18%{opacity:.7}100%{opacity:0;transform:translateX(-50%) scaleY(1.5)}}
.lock-stamp{position:absolute;top:50%;left:50%;z-index:8;opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  color:var(--red);font-family:var(--display);font-weight:900;letter-spacing:.04em;font-size:clamp(15px,2.4vw,24px);
  border:4px solid var(--red);padding:20px 34px;border-radius:8px;background:rgba(12,0,3,.55);
  text-shadow:0 0 16px rgba(255,46,60,.7);box-shadow:0 0 46px rgba(255,46,60,.45),inset 0 0 34px rgba(255,46,60,.22);
  transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}
.lock-ico img{width:46px;height:46px;object-fit:contain}
.lock-stamp .lock-sub2{font-family:var(--mono);font-size:11px;color:var(--amber);font-weight:400;letter-spacing:.14em}
.blast-doors.stamped .lock-stamp{animation:stamp .45s cubic-bezier(.2,1.7,.4,1) both}
@keyframes stamp{from{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}}
.red-flash{position:fixed;inset:0;z-index:60;background:rgba(255,46,60,.5);pointer-events:none;animation:rf .4s ease-out forwards}
@keyframes rf{from{opacity:.8}to{opacity:0}}
.shake-hard{animation:shakeHard .5s}
@keyframes shakeHard{0%,100%{transform:translate(0,0)}12%{transform:translate(-13px,7px)}28%{transform:translate(11px,-9px)}
  44%{transform:translate(-9px,5px)}60%{transform:translate(7px,-5px)}78%{transform:translate(-4px,3px)}}

/* ---------- CENA INTRO ---------- */
.alert-flash{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%, rgba(255,46,60,.22), transparent 60%);
  animation:redpulse 2.4s ease-in-out infinite}
@keyframes redpulse{0%,100%{opacity:.25}50%{opacity:.7}}
.intro-wrap{width:min(820px,92vw);display:flex;flex-direction:column;gap:22px;
  background:rgba(4,10,12,.62);backdrop-filter:blur(7px);border:1px solid var(--line);
  border-radius:14px;padding:24px 30px;box-shadow:0 16px 50px rgba(0,0,0,.5)}
.intro-top{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);
  animation:blink 1s steps(1) infinite}
.rec-label{color:var(--red)}
.waveform{margin-left:auto;display:flex;align-items:flex-end;gap:3px;height:22px}
.waveform i{width:3px;background:var(--green);border-radius:2px;height:30%;opacity:.5}
.waveform.playing i{animation:wave .9s ease-in-out infinite}
.waveform i:nth-child(2n){animation-delay:.15s}
.waveform i:nth-child(3n){animation-delay:.3s}
.waveform i:nth-child(4n){animation-delay:.45s}
@keyframes wave{0%,100%{height:20%}50%{height:100%}}
.narration{font-family:var(--body);font-size:clamp(17px,2.4vw,24px);line-height:1.7;font-weight:500;
  min-height:46vh;color:var(--muted)}
.narration .w{opacity:.28;transition:opacity .25s,color .25s,text-shadow .25s}
.narration .w.spoken{opacity:1;color:var(--text)}
.narration .w.active{opacity:1;color:var(--green);text-shadow:0 0 14px rgba(57,255,122,.6)}
.narration p{margin-bottom:16px}
.intro-controls{display:flex;justify-content:flex-end;gap:12px}

/* ---------- CENA MISSÃO ---------- */
.mission-wrap{width:min(1040px,94vw);display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.mission-wrap{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;
  backdrop-filter:blur(6px);box-shadow:inset 0 0 60px rgba(57,255,122,.05),0 12px 40px rgba(0,0,0,.5);
  animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.panel:nth-child(2){animation-delay:.12s}
.panel-head{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--green);
  display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.dot-row{display:flex;gap:5px}
.dot-row i{width:8px;height:8px;border-radius:50%;background:var(--green-dim)}
.dot-row i:first-child{background:var(--red)}.dot-row i:nth-child(2){background:var(--amber)}
.briefing-list{list-style:none;display:flex;flex-direction:column;gap:14px;counter-reset:b}
.briefing-list li{counter-increment:b;position:relative;padding-left:38px;font-size:15.5px;line-height:1.55;color:var(--text)}
.briefing-list li::before{content:counter(b,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--mono);color:var(--amber);font-size:13px;border:1px solid var(--line);border-radius:5px;
  width:26px;height:26px;display:grid;place-items:center}
.briefing-list strong{color:var(--green)}

/* porta */
.keypad-panel{display:flex;flex-direction:column}
.door-visual{position:relative;height:150px;margin:6px 0 20px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:#04090a}
.door-half{position:absolute;top:0;bottom:0;width:50%;
  background:repeating-linear-gradient(90deg,#0c1517 0 18px,#0a1213 0 20px),linear-gradient(180deg,#11201f,#070d0e);
  border-right:2px solid rgba(0,0,0,.6);transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.door-half.left{left:0}.door-half.right{right:0;transform:scaleX(-1)}
.door-seam{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--green),transparent);opacity:.5;
  box-shadow:0 0 14px var(--green);animation:seam 2.4s ease-in-out infinite}
@keyframes seam{50%{opacity:1}}
.door-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:30px;
  filter:drop-shadow(0 0 10px rgba(255,46,60,.7));transition:opacity .4s}
.door-visual.open .door-half.left{transform:translateX(-101%)}
.door-visual.open .door-half.right{transform:translateX(101%) scaleX(-1)}
.door-visual.open .door-lock{opacity:0}
.door-visual.open{box-shadow:inset 0 0 80px rgba(57,255,122,.4)}

.code-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted);margin-bottom:8px}
.code-field{display:flex;gap:10px}
@media(max-width:480px){.code-field{flex-direction:column}}
#code-input{flex:1;background:#04090a;border:1px solid var(--line);border-radius:6px;color:var(--green);
  font-family:var(--mono);font-size:22px;letter-spacing:.3em;text-align:center;padding:14px 16px;outline:none;
  transition:.2s;text-transform:uppercase}
#code-input:focus{border-color:var(--green);box-shadow:0 0 24px rgba(57,255,122,.3)}
#code-input::placeholder{color:#2a3a37;letter-spacing:.2em}
.code-msg{font-family:var(--mono);font-size:13px;margin-top:14px;min-height:20px;color:var(--muted);transition:.2s}
.code-msg.err{color:var(--red);text-shadow:0 0 10px rgba(255,46,60,.5)}
.code-msg.ok{color:var(--green)}
.attempts{display:flex;gap:6px;margin-top:12px}
.attempts i{width:10px;height:10px;border-radius:50%;border:1px solid var(--line)}
.attempts i.used{background:var(--red);border-color:var(--red);box-shadow:0 0 8px var(--red)}
.shake{animation:shake .42s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}
  60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* ---------- CENA SUCESSO ---------- */
#scene-success{flex-direction:column}
#confetti{position:absolute;inset:0;z-index:0;pointer-events:none}
.success-wrap{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.success-ring{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:160px;height:160px;
  border:2px solid var(--green);border-radius:50%;opacity:0;animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{transform:translateX(-50%) scale(.5);opacity:.8}100%{transform:translateX(-50%) scale(2.2);opacity:0}}
.check-mark{font-size:72px;color:var(--green);text-shadow:0 0 30px rgba(57,255,122,.8);
  animation:pop .6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.success-title{font-family:var(--display);font-weight:900;font-size:clamp(30px,6vw,68px);color:#fff;
  letter-spacing:.05em;text-shadow:0 0 30px rgba(57,255,122,.6)}
.success-sub{color:var(--muted);font-size:18px;max-width:520px}
.success-sub strong{color:var(--green)}
.success-sub.small{font-size:14px;opacity:.8}