/* Concepto: terminal de laboratorio clandestino sobre noche de granja. Un solo mundo oscuro, cinta de peligro como único rasgo gráfico. */
:root{--ink:#080a09;--ink2:#121613;--panel:rgba(10,13,11,.82);--bone:#ddd6c3;--dim:#8c8b7d;--line:#2d342e;--blood:#b3261e;--sick:#a5c63a;--amber:#e2a52e;--tape:#d8a21d;
 --display:'Anton','Impact','Arial Narrow',sans-serif;--type:'Special Elite','Courier New',monospace;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--type);overflow:hidden;user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;height:100%;overflow:hidden;background:var(--ink)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;background:#04070b}
.ov{position:absolute;inset:0;display:none;pointer-events:none}.ov.on{display:block}
#ovDmg,#ovInf,#ovFlash{display:block;opacity:0;pointer-events:none}
#ovDmg{background:radial-gradient(ellipse at center,transparent 35%,rgba(150,10,8,.95) 100%)}
#ovInf{background:radial-gradient(ellipse at center,rgba(40,70,10,0) 25%,rgba(70,110,12,.75) 100%)}
#ovFlash{background:#cfe0ff;mix-blend-mode:screen}
#ovHide{background:linear-gradient(90deg,#000 0 30%,transparent 30% 33%,#000 33% 67%,transparent 67% 70%,#000 70%);opacity:.88}
/* menú */
#menu,#loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-block:24px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));background:linear-gradient(90deg,rgba(4,6,5,.96) 0%,rgba(4,6,5,.82) 45%,rgba(4,6,5,.25) 100%);overflow-y:auto}
#menu.off,#loading.off,#menuFx.off{display:none}
#menu{background:none;z-index:4}
#menuShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,4,.97) 0%,rgba(3,4,4,.8) 40%,rgba(3,4,4,.08) 72%,rgba(3,4,4,.3) 100%)}
#menuFx{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
#menuFx>*{position:absolute}#menuFx>#menuShade{inset:0}
#bloodCv{inset:0;width:100%;height:100%}
#menuVig{inset:0;background:radial-gradient(ellipse at 62% 50%,transparent 36%,rgba(115,6,4,.6) 100%);animation:beat 1.7s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.5}10%{opacity:1}22%{opacity:.6}34%{opacity:.95}50%{opacity:.5}}
.tdrip{position:absolute;top:0;width:var(--w,9px);background:linear-gradient(#6e0a07,#a8160f);border-radius:0 0 8px 8px;transform-origin:50% 0;animation:dripA var(--t,7s) ease-in-out infinite alternate}
.tdrip::after{content:'';position:absolute;left:-15%;bottom:-5px;width:130%;aspect-ratio:1;border-radius:50%;background:#a8160f}
@keyframes dripA{0%{transform:scaleY(.62)}100%{transform:scaleY(1)}}
h1{padding-bottom:.2em}
h1 .ch{text-shadow:0 3px 0 #000,0 0 30px rgba(0,0,0,.8)}
h1 .pn{color:var(--blood);position:relative;display:inline-block;text-shadow:0 0 26px rgba(179,38,30,.55),0 3px 0 #430604;animation:flick 6s steps(1) infinite}
@keyframes flick{0%,91%,100%{opacity:1}92%{opacity:.2}93%{opacity:1}95%{opacity:.35}96%{opacity:1}}
.dr{position:absolute;top:82%;width:.075em;background:linear-gradient(#7d0c09,#b31a12);border-radius:0 0 .05em .05em;transform-origin:top;animation:dripT 5s ease-in infinite}
.dr::after{content:'';position:absolute;bottom:-.06em;left:-.012em;width:.1em;height:.1em;border-radius:50%;background:#b31a12}
@keyframes dripT{0%{transform:scaleY(.25)}72%,100%{transform:scaleY(1)}}
.warn{font-size:11px;letter-spacing:.2em;color:#e0594e;text-transform:uppercase}
#loading{align-items:center;text-align:center;background:var(--ink);z-index:9}
#loading .bar{width:min(320px,70vw);height:6px;background:var(--line);margin-top:18px;overflow:hidden}#loading .bar i{display:block;height:100%;width:40%;background:var(--tape);animation:ld 1.1s ease-in-out infinite}
@keyframes ld{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.wrap{max-width:640px;width:100%;display:flex;flex-direction:column;gap:clamp(8px,1.8vh,14px);min-width:0}
.eyebrow{font-size:12px;letter-spacing:.28em;color:var(--tape);text-transform:uppercase}
h1{font-family:var(--display);font-weight:400;font-size:clamp(50px,min(11vw,14vh),118px);line-height:.9;margin:0;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance;color:var(--bone)}
h1 b{color:var(--blood);font-weight:400}
.sub{font-family:var(--display);font-size:clamp(17px,2.6vw,24px);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.tape{align-self:flex-start;font-family:var(--display);letter-spacing:.22em;font-size:15px;color:#111;padding:6px 14px;background:repeating-linear-gradient(-45deg,var(--tape) 0 14px,#17130a 14px 28px);}
.tape span{background:var(--tape);padding:3px 10px}
.story{max-width:52ch;font-size:15px;line-height:1.55;color:var(--bone)}
#btnStart,.btn{font-family:var(--display);letter-spacing:.2em;font-size:20px;text-transform:uppercase;color:#120c04;background:var(--tape);border:0;padding:14px 26px;cursor:pointer;align-self:flex-start;min-height:48px}
#btnStart:hover:not(:disabled),.btn:hover{background:#f0bc34}#btnStart:disabled{opacity:.45;cursor:wait}
#btnStart:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 22px;font-size:13px;color:var(--dim);margin:0;padding:0;list-style:none}
.keys li{display:flex;gap:10px;align-items:baseline}.keys kbd{font-family:var(--type);color:var(--bone);border:1px solid var(--line);padding:1px 7px;background:var(--ink2);white-space:nowrap}
.note{font-size:12px;color:var(--dim)}
/* HUD */
#hud{position:absolute;inset:0;display:none;pointer-events:none;padding-block:calc(14px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#hud.on{display:block}
.stats{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:calc(14px + env(safe-area-inset-top,0px));width:min(260px,52vw);display:flex;flex-direction:column;gap:7px;background:var(--panel);padding:10px 12px;border:1px solid var(--line)}
.m{display:grid;grid-template-columns:78px 1fr 38px;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;color:var(--dim)}
.m .t{height:9px;background:#000;border:1px solid var(--line);overflow:hidden}.m .t i{display:block;height:100%;width:100%}
.m output{text-align:right;color:var(--bone);font-size:11px}
#barHp{background:var(--blood)}#barInf{background:var(--sick)}#barBat{background:var(--amber)}#barSta{background:#8aa0a8}
.m.bad .t{animation:bad .7s steps(2) infinite}@keyframes bad{50%{border-color:var(--blood)}}
.axe{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;color:var(--dim)}.axe div{display:flex;gap:2px;flex-wrap:wrap}.axe i{width:6px;height:12px;background:#2a2d28;transform:skewX(-14deg)}.axe i.on{background:#b9a27a}
.inv{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 32px)}
.slot{background:var(--panel);border:1px solid var(--line);padding:6px 10px;font-size:12px;display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.slot kbd{font-family:var(--type);color:var(--tape);font-size:11px}.slot b{font-family:var(--display);font-weight:400;font-size:18px;color:var(--bone)}
.flag{display:none;background:var(--tape);color:#150f03;border:0;font-family:var(--display);letter-spacing:.12em;padding:6px 10px;font-size:13px;white-space:nowrap}.flag.on{display:block}
#kCure{background:var(--sick)}
.right{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(14px + env(safe-area-inset-top,0px));width:min(210px,40vw);display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#mini{width:min(190px,36vw);height:auto;aspect-ratio:1;border-radius:50%;border:2px solid #3a423a;background:#000;box-shadow:0 0 0 4px rgba(0,0,0,.5)}
#sectorTag{font-size:10px;letter-spacing:.2em;color:var(--dim);text-align:right}
#objs{list-style:none;margin:0;padding:8px 10px;background:var(--panel);border:1px solid var(--line);font-size:12px;line-height:1.35;display:flex;flex-direction:column;gap:6px;width:100%}
#objs li{color:var(--dim);padding-left:16px;position:relative}#objs li::before{content:'';position:absolute;left:0;top:.35em;width:8px;height:8px;border:1px solid var(--dim)}
#objs li.cur{color:var(--bone)}#objs li.cur::before{border-color:var(--tape);background:var(--tape)}#objs li.done{color:#5d6a5a;text-decoration:line-through}#objs li.done::before{background:var(--sick);border-color:var(--sick)}
#cross{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2px 0 0 -2px;background:rgba(240,235,215,.55);border-radius:50%}#cross.act{width:9px;height:9px;margin:-4px 0 0 -4px;background:transparent;border:1px solid var(--tape)}
#prompt{position:absolute;left:50%;top:60%;transform:translateX(-50%);background:var(--panel);padding:8px 16px;border:1px solid var(--line);font-size:14px;max-width:min(92vw,560px);text-align:center;display:none}#prompt.on{display:block}
#toast{position:absolute;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:rgba(8,10,9,.92);border-left:4px solid var(--tape);padding:10px 16px;font-size:14px;line-height:1.35;max-width:min(92vw,620px);opacity:0;transition:opacity .35s;pointer-events:none}#toast.on{opacity:1}
#hold{position:absolute;left:50%;top:calc(18px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(440px,60vw);display:none;text-align:center;font-family:var(--display);letter-spacing:.2em;color:var(--tape)}#hold.on{display:block}
#hold .t{height:10px;background:#000;border:1px solid var(--tape);margin-top:6px}#holdFill{height:100%;width:0;background:var(--tape)}
/* pantallas */
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;background:rgba(5,6,5,.88);pointer-events:auto}.screen.on{display:flex}
.screen h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,9vw,96px);margin:0;letter-spacing:.04em;text-transform:uppercase;line-height:1}
#ovDead{background:rgba(40,2,2,.9)}#ovDead h2{color:var(--blood)}#ovWin h2{color:var(--sick)}
.screen p{max-width:52ch;margin:0;font-size:16px;line-height:1.5}
#ovPause{cursor:pointer}
.panel{position:absolute;inset:0;display:none;pointer-events:auto;background:rgba(4,6,5,.9);padding-block:calc(18px + env(safe-area-inset-top,0px)) 18px;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));overflow:auto}.panel.on{display:block}
.panel header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.panel h3{font-family:var(--display);font-weight:400;letter-spacing:.16em;font-size:26px;margin:0;color:var(--tape);text-transform:uppercase}
.panel .btn{font-size:14px;padding:8px 16px;min-height:0}
.cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px}@media(max-width:760px){.cols{grid-template-columns:minmax(0,1fr)}}
.paper{background:#cfc6a8;color:#1d1a12;padding:14px 16px;margin-bottom:12px;transform:rotate(-.3deg);box-shadow:0 2px 0 #000}.paper:nth-child(even){transform:rotate(.35deg)}.paper h4{margin:0 0 6px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#4a1a14}.paper p{margin:0;font-size:14px;line-height:1.5}.paper.lab{background:#aebfae;color:#0e1d10}.paper.lab h4{color:#1b4a22}
.dim{color:var(--dim);font-size:13px}
.egg{border:1px solid var(--line);background:var(--ink2);padding:10px 12px;margin-bottom:10px}.egg.out{opacity:.45}.egg.out .eh b{text-decoration:line-through}.egg.sus{border-color:var(--tape)}
.eh{display:flex;justify-content:space-between;gap:8px;font-size:13px}.eh b{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.08em}.eh span{color:var(--dim)}
.egg ul{margin:8px 0;padding-left:18px;font-size:13px;line-height:1.5}.egg em{color:var(--tape);font-style:normal}
.mk{display:flex;gap:6px;flex-wrap:wrap}.mk button{font-family:var(--type);font-size:11px;background:transparent;color:var(--bone);border:1px solid var(--line);padding:4px 8px;cursor:pointer}.mk button:hover{border-color:var(--tape)}
#bmCv{display:block;margin:0 auto;width:min(86vh,100%);max-width:100%;height:auto;aspect-ratio:1;border:1px solid var(--line);background:#000;image-rendering:pixelated}
@media(prefers-reduced-motion:reduce){#menuVig,.tdrip,.dr,h1 .pn{animation:none}#loading .bar i{animation:none}.m.bad .t{animation:none}}