:root{--acid:#a9ff49;--cyan:#70ffe6;--danger:#ff315f;--ink:#020708;--panel:rgba(3,14,16,.82);--line:rgba(112,255,230,.28)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#010405;color:#e9fff8;font-family:Inter,Segoe UI,Arial,sans-serif;touch-action:none}
body{background:radial-gradient(circle at 50% 0,#102624 0,#03090a 46%,#010304 100%)}
button,a{font:inherit}
.game-shell{height:100dvh;min-height:560px;display:grid;grid-template-rows:auto 1fr;padding:10px;gap:8px}
.topbar{height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px;border:1px solid var(--line);background:rgba(0,7,8,.88);box-shadow:0 0 30px rgba(62,255,220,.08)}
.back{justify-self:start;color:var(--cyan);text-decoration:none;font-size:.72rem;font-weight:900;letter-spacing:.16em;border:1px solid var(--line);padding:9px 12px;border-radius:99px}
.identity{text-align:center;line-height:1}.identity span{display:block;font-size:.58rem;letter-spacing:.28em;color:#789b96;margin-bottom:7px}.identity strong{font-size:1rem;letter-spacing:.3em;text-shadow:0 0 15px rgba(112,255,230,.5)}
.signal{justify-self:end;font-size:.62rem;letter-spacing:.13em;color:#aac1bd}.signal span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 12px var(--danger);animation:signal 1.4s infinite}
.viewport{position:relative;min-height:0;overflow:hidden;border:1px solid rgba(112,255,230,.26);border-radius:18px;background:#020708;box-shadow:inset 0 0 90px #000,0 18px 60px rgba(0,0,0,.45);isolation:isolate}
#mazeCanvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#mazeCanvas:active{cursor:grabbing}
.scanlines,.vignette{position:absolute;inset:0;pointer-events:none}.scanlines{z-index:2;opacity:.15;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(112,255,230,.08) 4px)}.vignette{z-index:3;box-shadow:inset 0 0 150px 45px rgba(0,0,0,.88)}
.hud{position:absolute;z-index:5;top:18px;min-width:150px;padding:12px 14px;background:linear-gradient(120deg,rgba(2,13,15,.92),rgba(4,24,24,.62));border:1px solid var(--line);backdrop-filter:blur(8px);pointer-events:none}.left-hud{left:18px;border-radius:4px 18px 18px 4px}.right-hud{right:18px;text-align:right;border-radius:18px 4px 4px 18px}.hud small,.hud span{display:block;font-size:.58rem;letter-spacing:.16em;color:#7fa39e}.hud b{display:block;margin:5px 0;color:var(--acid);font-size:.88rem;letter-spacing:.12em;text-shadow:0 0 12px rgba(169,255,73,.3)}
.objective{position:absolute;z-index:5;left:50%;top:22px;transform:translateX(-50%);padding:8px 18px;font-size:.64rem;letter-spacing:.14em;color:#d7fff8;background:rgba(2,9,10,.72);border-bottom:1px solid var(--cyan);pointer-events:none;white-space:nowrap}
.drag-hint{position:absolute;z-index:5;left:50%;bottom:22px;transform:translateX(-50%);padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:rgba(2,9,10,.78);font-size:.62rem;letter-spacing:.13em;color:#a4c0bb;pointer-events:none;transition:opacity .35s}.drag-hint span{display:inline-block;width:8px;height:8px;background:var(--acid);border-radius:50%;box-shadow:0 0 12px var(--acid);margin-right:7px}
.nerve-meter{position:absolute;z-index:5;left:20px;bottom:22px;width:150px;pointer-events:none}.nerve-meter small{font-size:.55rem;letter-spacing:.2em;color:#91aaa6}.nerve-meter div{height:6px;margin-top:5px;border:1px solid rgba(112,255,230,.25);background:#020708}.nerve-meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--danger),#ffd75e,var(--acid));box-shadow:0 0 12px rgba(169,255,73,.45);transform-origin:left;transition:transform .35s}
.quick-controls{position:absolute;z-index:15;right:20px;bottom:20px;display:flex;gap:7px}.quick-controls button{border:1px solid var(--line);border-radius:99px;padding:9px 11px;background:rgba(2,9,10,.82);color:#9fbab5;font-size:.55rem;font-weight:900;letter-spacing:.1em;cursor:pointer}.quick-controls button[aria-pressed="false"]{opacity:.45;color:#71817e}
.motion-shadow{position:absolute;z-index:4;width:42px;height:88px;left:50%;top:50%;opacity:0;pointer-events:none;border-radius:50% 50% 15% 15%;background:#000;filter:blur(3px);box-shadow:0 0 22px #000;transition:opacity .18s,transform 1.3s cubic-bezier(.1,.7,.2,1)}.motion-shadow i{position:absolute;top:19px;width:5px;height:3px;border-radius:50%;background:var(--danger);box-shadow:0 0 10px var(--danger)}.motion-shadow i:first-child{left:11px}.motion-shadow i:last-child{right:11px}.motion-shadow.show{opacity:.85;transform:translate(var(--shadow-x),var(--shadow-y)) scale(var(--shadow-scale))}.motion-shadow.vanish{opacity:0}
.jump-scare{position:absolute;z-index:30;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;pointer-events:none;background:radial-gradient(circle,rgba(125,0,25,.32),rgba(0,0,0,.98) 72%);transition:opacity .06s}.jump-scare.show{opacity:1;visibility:visible;animation:scareFlash .62s steps(2,end)}.creature{position:relative;width:min(64vw,430px);aspect-ratio:.82;border-radius:47% 47% 35% 35%;background:radial-gradient(circle at 50% 35%,#34433b 0,#111b17 38%,#020403 74%);border:3px solid rgba(169,255,73,.3);box-shadow:inset 0 -50px 80px #000,0 0 100px rgba(169,255,73,.18);animation:creatureLunge .62s cubic-bezier(.05,.85,.15,1)}.creature:before,.creature:after{content:"";position:absolute;top:-24%;width:38%;height:58%;border:8px solid #17241d;border-bottom:0;border-radius:70% 0 0 0;filter:drop-shadow(0 0 8px #000)}.creature:before{left:3%;transform:rotate(-22deg)}.creature:after{right:3%;transform:scaleX(-1) rotate(-22deg)}.creature .eye{position:absolute;top:34%;width:26%;height:11%;border-radius:70% 20%;background:#e9ffb9;box-shadow:0 0 28px var(--acid),inset 0 0 10px #fff}.creature .eye:after{content:"";position:absolute;width:12%;height:130%;left:45%;top:-15%;background:#07100b}.creature .left{left:15%;transform:rotate(10deg)}.creature .right{right:15%;transform:scaleX(-1) rotate(10deg)}.mouth{position:absolute;display:flex;justify-content:center;gap:6px;left:20%;right:20%;bottom:17%;height:25%;padding:8px;border-radius:45% 45% 48% 48%;background:#020202;border:2px solid #4b131e;overflow:hidden}.mouth b{display:block;width:14%;height:72%;background:linear-gradient(#eaffd4,#788b78);clip-path:polygon(0 0,100% 0,50% 100%)}.jump-scare strong{margin-top:22px;color:#ff4a69;font-size:clamp(1.2rem,5vw,3rem);letter-spacing:.3em;text-shadow:0 0 20px #ff315f}
.scare-abduction{background:radial-gradient(ellipse at 50% 20%,rgba(202,255,255,.95),rgba(60,255,222,.24) 34%,rgba(0,7,10,.98) 75%)}.scare-abduction:before{content:"";position:absolute;top:-12%;width:min(92vw,760px);height:45%;border-radius:50%;background:radial-gradient(ellipse,#eaffff 0,#8ffff0 13%,#3b7979 15%,#111f28 36%,#030709 62%);border:4px solid #b7fff6;box-shadow:0 0 80px #70ffe6,0 30vh 100px 25vh rgba(112,255,230,.32);animation:saucerDive .92s cubic-bezier(.12,.8,.2,1)}.scare-abduction .creature{width:min(42vw,270px);aspect-ratio:.72;background:radial-gradient(ellipse at 50% 36%,#8fb5ae,#3d5e59 44%,#101817 76%);border-color:#bafff2;border-radius:48% 48% 42% 42%;box-shadow:0 0 90px #70ffe6;animation:alienRise .92s ease-out}.scare-abduction .creature:before,.scare-abduction .creature:after{display:none}.scare-abduction .creature .eye{top:27%;height:28%;width:30%;border-radius:70% 25%;background:#050909;box-shadow:inset 0 0 12px #70ffe6,0 0 12px rgba(112,255,230,.35)}.scare-abduction .mouth{left:42%;right:42%;bottom:19%;height:4%;padding:0;border-color:#192b29}.scare-abduction strong{color:#d8fffa;text-shadow:0 0 24px #70ffe6;animation:abductionText .16s steps(2) infinite}
.scare-specimen{background:radial-gradient(circle,rgba(94,0,122,.38),rgba(0,0,0,.99) 68%)}.scare-specimen .creature{width:min(78vw,520px);aspect-ratio:1.55;border-radius:50% 50% 18% 18%;transform:rotate(180deg);background:radial-gradient(ellipse at 50% 28%,#513062,#170c1d 48%,#020202 78%);border-color:rgba(221,103,255,.5);box-shadow:0 0 90px rgba(184,45,255,.38);animation:specimenDrop .68s cubic-bezier(.1,.9,.1,1)}.scare-specimen .creature:before,.scare-specimen .creature:after{top:60%;height:70%;width:43%;border-color:#392044;border-width:12px}.scare-specimen .creature .eye{top:23%;height:18%;background:#ffdeff;box-shadow:0 0 30px #d74cff}.scare-specimen .mouth{bottom:14%;height:22%;transform:rotate(180deg);border-color:#7a238f}.scare-specimen strong{color:#e777ff;text-shadow:0 0 24px #bc35e2}
.sector-screen{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:radial-gradient(circle at 50% 42%,rgba(12,49,42,.94),rgba(1,5,6,.98) 62%);transition:opacity .4s,visibility .4s}.sector-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.sector-screen p:first-child{color:var(--acid);font-size:.67rem;font-weight:900;letter-spacing:.3em}.sector-screen h2{max-width:700px;margin:8px 0;font-size:clamp(2rem,6vw,5rem);line-height:.95}.sector-screen p:not(:first-child){max-width:520px;color:#9bb5b0;line-height:1.6}.sector-screen button{margin-top:16px;padding:14px 22px;border:0;border-radius:4px;color:#04100c;background:linear-gradient(100deg,var(--cyan),var(--acid));font-weight:1000;letter-spacing:.12em;cursor:pointer}
.start-screen{position:absolute;z-index:12;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:34px;background:radial-gradient(circle at 50% 40%,rgba(15,49,44,.88),rgba(1,5,6,.97) 58%);transition:opacity .55s,visibility .55s}.start-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.warning-mark{font-size:4rem;color:var(--acid);filter:drop-shadow(0 0 20px rgba(169,255,73,.6));animation:breathe 2.4s infinite}.eyebrow{margin:6px 0 12px;color:var(--cyan);font-size:.67rem;font-weight:800;letter-spacing:.32em}.start-screen h1{font-size:clamp(2.8rem,8vw,7rem);line-height:.78;letter-spacing:.05em;margin:0;text-shadow:0 5px 30px #000}.start-screen h1 span{color:transparent;-webkit-text-stroke:1px var(--acid);font-size:.54em;letter-spacing:.24em}.intro{max-width:620px;color:#a8c0bc;line-height:1.6;font-size:.92rem;margin:25px auto 18px}.control-row{display:grid;grid-template-columns:auto auto;gap:6px 18px;text-align:left;font-size:.62rem;letter-spacing:.12em;color:#718b87;margin-bottom:22px}.control-row b{color:#d9fff8}
#startButton{border:0;border-radius:4px;padding:15px 26px;color:#07100c;background:linear-gradient(100deg,var(--cyan),var(--acid));font-weight:1000;letter-spacing:.13em;box-shadow:0 0 34px rgba(112,255,230,.25);cursor:pointer}.content-note{margin-top:13px;color:#72817f;font-size:.58rem;letter-spacing:.07em}
.feature-strip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:-3px 0 20px}.feature-strip span{padding:6px 8px;border:1px solid rgba(112,255,230,.18);color:#789b96;font-size:.52rem;letter-spacing:.12em}
@keyframes signal{50%{opacity:.2}}@keyframes breathe{50%{transform:scale(1.08);filter:drop-shadow(0 0 32px rgba(169,255,73,.9))}}
@media(max-width:720px){.game-shell{padding:0;gap:0}.topbar{height:52px;border-width:0 0 1px}.identity span{display:none}.identity strong{font-size:.75rem}.signal{font-size:0}.back{font-size:.56rem;padding:7px 9px}.viewport{border:0;border-radius:0}.objective{top:auto;bottom:66px;font-size:.5rem;max-width:86%;white-space:normal;text-align:center}.hud{top:12px;min-width:116px;padding:9px 10px}.left-hud{left:10px}.right-hud{right:10px}.hud b{font-size:.72rem}.hud small,.hud span{font-size:.5rem}.drag-hint{bottom:18px;font-size:.52rem}.start-screen{padding:24px}.intro{font-size:.8rem}.control-row{font-size:.55rem}}
@keyframes creatureLunge{0%{transform:scale(.12) rotate(-8deg)}70%{transform:scale(1.13) rotate(2deg)}100%{transform:scale(1)}}@keyframes scareFlash{0%,40%,80%{filter:brightness(2)}20%,60%,100%{filter:brightness(.7)}}@keyframes saucerDive{0%{transform:translateY(-90%) scale(.35)}100%{transform:none}}@keyframes alienRise{0%{transform:translateY(80vh) scale(.2)}72%{transform:translateY(-3vh) scale(1.08)}100%{transform:none}}@keyframes abductionText{50%{opacity:.48}}@keyframes specimenDrop{0%{transform:translateY(-70vh) rotate(180deg) scale(.4)}75%{transform:translateY(4vh) rotate(180deg) scale(1.08)}100%{transform:rotate(180deg)}}
@media(max-width:720px){.nerve-meter{left:12px;bottom:20px;width:92px}.quick-controls{right:10px;bottom:18px}.quick-controls button{padding:8px;font-size:0}.quick-controls #soundToggle:before{content:'◖))';font-size:.75rem}.quick-controls #scareToggle:before{content:'☠';font-size:.75rem}.feature-strip{max-width:330px}.feature-strip span{font-size:.45rem}}
@media(prefers-reduced-motion:reduce){.jump-scare.show,.creature,.warning-mark{animation:none}.scanlines{display:none}}