:root{--deep:#021724;--navy:#04283a;--sea:#08728b;--cyan:#3df6e7;--ice:#c9fff8;--cream:#f2f2df;--orange:#ff6a3c;--yellow:#ffe05d;--line:rgba(201,255,248,.22)}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:#061c29;color:var(--cream);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.app{width:min(1540px,100%);height:100svh;min-height:600px;margin:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;grid-template-rows:58px minmax(0,1fr) 18px;gap:9px;background:radial-gradient(circle at 50% -20%,#124960,#061c29 50%)}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);padding-bottom:9px}.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font-size:17px;font-weight:1000;letter-spacing:-.04em}.brand small{color:var(--cyan);font-size:9px;margin-left:5px;letter-spacing:.1em}.brand-sigil{display:grid;place-items:center;width:39px;height:39px;border:1px solid var(--cyan);border-radius:50%;color:var(--cyan);font-size:20px;box-shadow:inset 0 0 18px rgba(61,246,231,.22)}
.mission{justify-self:center;display:flex;align-items:center;gap:10px;color:var(--ice);font-size:9px;font-weight:900;letter-spacing:.16em}.mission i{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(255,106,60,.12),0 0 14px var(--orange)}
.restart{justify-self:end;min-width:138px;min-height:42px;border:1px solid var(--line);background:rgba(4,40,58,.7);color:var(--ice);font-size:9px;font-weight:900;letter-spacing:.1em}.restart span{font-size:18px;vertical-align:-2px;margin-right:6px}.restart:hover{border-color:var(--cyan);color:white}
.game-shell{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 42px;border:1px solid rgba(61,246,231,.4);box-shadow:0 0 40px rgba(0,0,0,.25)}.stage{position:relative;min-height:0;overflow:hidden;background:var(--deep);isolation:isolate;touch-action:none;user-select:none}canvas{display:block;width:100%;height:100%;touch-action:none}.scanlines{position:absolute;z-index:2;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.018) 4px);mix-blend-mode:screen}
.hud{position:absolute;z-index:5;display:flex;gap:6px;pointer-events:none}.top-left{top:13px;left:13px}.hud>div{min-width:94px;padding:8px 10px;border:1px solid var(--line);background:rgba(2,23,36,.72);backdrop-filter:blur(8px)}.hud span{display:block;color:var(--cyan);font-size:7px;font-weight:900;letter-spacing:.16em}.hud strong{font-size:17px}.hud small{font-size:9px;color:var(--ice)}
.vitals{right:13px;top:13px;display:grid;gap:5px}.vital{display:grid!important;grid-template-columns:46px 100px 30px;align-items:center;gap:8px;min-width:0!important;padding:7px 9px!important}.vital>div{height:6px;background:rgba(255,255,255,.13);overflow:hidden}.vital i{display:block;height:100%;width:100%;background:var(--cyan);transition:.3s width}.vital.hunger i{background:var(--yellow)}.vital strong{font-size:11px;text-align:right}
.crosshair{position:absolute;z-index:4;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%);pointer-events:none}.crosshair:before,.crosshair:after,.crosshair i,.crosshair b{content:"";position:absolute;background:rgba(201,255,248,.72)}.crosshair:before{left:0;top:15px;width:9px;height:1px}.crosshair:after{right:0;top:15px;width:9px;height:1px}.crosshair i{left:15px;top:0;width:1px;height:9px}.crosshair b{left:15px;bottom:0;width:1px;height:9px}.crosshair.target{filter:drop-shadow(0 0 5px var(--yellow))}.crosshair.target:before,.crosshair.target:after,.crosshair.target i,.crosshair.target b{background:var(--yellow)}
.prompt{position:absolute;z-index:6;left:50%;bottom:112px;transform:translateX(-50%);min-height:24px;padding:6px 11px;color:var(--ice);background:rgba(2,23,36,.72);font-size:10px;font-weight:900;letter-spacing:.08em;text-align:center;pointer-events:none;opacity:0;transition:.2s}.prompt.show{opacity:1}.toast{position:absolute;z-index:8;left:50%;top:28%;transform:translate(-50%,-50%);font-size:clamp(18px,3vw,32px);font-weight:1000;letter-spacing:-.03em;color:white;text-shadow:0 3px 0 #03202f;opacity:0;pointer-events:none;white-space:nowrap}.toast.pop{animation:toast .9s ease}@keyframes toast{0%{opacity:0;transform:translate(-50%,-25%) scale(.8)}20%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1.05)}}
.inventory{position:absolute;z-index:6;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:5px}.inventory button{position:relative;width:92px;height:60px;border:1px solid var(--line);background:rgba(2,23,36,.82);color:white;text-align:left;padding:8px 7px}.inventory button.selected{border-color:var(--yellow);box-shadow:inset 0 -3px 0 var(--yellow)}.inventory span{position:absolute;right:5px;top:4px;color:rgba(255,255,255,.45);font-size:8px}.inventory b{display:block;margin-top:20px;font-size:7px;letter-spacing:.08em}.inventory em{position:absolute;left:8px;top:6px;color:var(--cyan);font-size:16px;font-style:normal}.inventory button:disabled{opacity:.35}
.mobile-controls{display:none}.overlay{position:absolute;z-index:12;inset:0;padding:clamp(24px,6vw,86px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:linear-gradient(90deg,rgba(2,23,36,.97) 0%,rgba(2,23,36,.88) 42%,rgba(2,23,36,.18) 100%);color:white}.overlay[hidden]{display:none}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--cyan);font-size:9px;font-weight:1000;letter-spacing:.2em}.eyebrow:before{content:"";width:31px;height:3px;background:var(--orange)}.overlay h1,.overlay h2{margin:10px 0 14px;font-size:clamp(44px,8.5vw,104px);line-height:.82;letter-spacing:-.075em;text-transform:uppercase}.overlay h1 span,.overlay h2 span{color:var(--cyan)}.overlay p{margin:0 0 24px;color:rgba(220,255,250,.75);font-size:clamp(13px,1.5vw,17px);line-height:1.5;font-weight:600}.primary{min-height:51px;border:0;background:var(--yellow);color:var(--deep);padding:0 21px;font-weight:1000;text-transform:uppercase;letter-spacing:.05em;box-shadow:4px 4px 0 var(--orange)}.primary span{margin-left:18px}.primary:hover{background:white}.text-button{min-height:44px;border:0;background:transparent;color:white;text-decoration:underline;text-underline-offset:5px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.help{background:rgba(2,23,36,.98)}.help h2{font-size:clamp(40px,6vw,76px)}.help-grid{width:min(760px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 18px}.help-grid div{display:flex;align-items:center;gap:10px;min-height:55px;border:1px solid var(--line);padding:9px 11px;background:rgba(255,255,255,.03)}.help-grid b{min-width:58px;color:var(--yellow);font-size:11px}.help-grid span{font-size:10px;color:var(--ice)}
.cutscene{align-items:center;text-align:center;background:radial-gradient(circle at 50% 45%,#163e4e,#020d14 68%)}.cutscene h2{font-size:clamp(34px,6vw,74px);letter-spacing:-.05em}.cutscene p{margin-bottom:20px}.cut-mark{width:82px;height:82px;border:1px solid var(--cyan);border-radius:50%;display:grid;place-items:center;color:var(--cyan);font-size:11px;font-weight:1000;box-shadow:0 0 36px rgba(61,246,231,.2)}.cut-progress{width:min(420px,70vw);height:3px;background:rgba(255,255,255,.15)}.cut-progress i{display:block;width:0;height:100%;background:var(--orange)}
.end{background:linear-gradient(90deg,rgba(2,23,36,.98),rgba(4,65,82,.8))}.end h2{font-size:clamp(40px,7vw,88px)}.stats{display:flex;gap:6px;margin:0 0 24px}.stats div{min-width:104px;border:1px solid var(--line);padding:10px}.stats span{display:block;color:var(--cyan);font-size:7px;font-weight:900;letter-spacing:.14em}.stats strong{font-size:25px}
.desktop-guide{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,28px);background:#03151f;color:rgba(201,255,248,.65);font-size:8px;font-weight:900;letter-spacing:.09em}.desktop-guide b{display:inline-grid;place-items:center;min-width:27px;height:23px;margin-right:5px;border:1px solid rgba(201,255,248,.35);color:var(--cyan)}footer{display:flex;justify-content:space-between;color:rgba(201,255,248,.43);font-size:8px;font-weight:900;letter-spacing:.16em}
@media(max-width:720px){
  .app{height:100svh;min-height:0;padding:0;gap:0;grid-template-rows:55px minmax(0,1fr) 0;overflow:hidden}.topbar{padding:6px 8px;background:#041b28}.brand{font-size:12px}.brand-sigil{width:34px;height:34px}.mission{display:none}.restart{min-width:48px;min-height:44px;font-size:0}.restart span{font-size:20px;margin:0}.game-shell{border:0;grid-template-rows:minmax(0,1fr)}.desktop-guide,footer{display:none}.top-left{top:7px;left:7px}.hud>div{min-width:76px;padding:6px 7px}.hud span{font-size:6px}.hud strong{font-size:14px}.vitals{right:7px;top:7px}.vital{grid-template-columns:35px 54px 22px;gap:5px;padding:5px 6px!important}.inventory{bottom:max(8px,env(safe-area-inset-bottom));gap:3px}.inventory button{width:55px;height:48px;padding:5px}.inventory b{display:none}.inventory em{top:16px;font-size:15px}.prompt{bottom:128px;width:max-content;max-width:80%;font-size:8px}.overlay{padding:22px 18px;background:linear-gradient(0deg,rgba(2,23,36,.98),rgba(2,23,36,.66))}.overlay h1,.overlay h2{font-size:clamp(40px,14vw,64px)}.overlay p br{display:none}.help-grid{grid-template-columns:repeat(2,1fr);max-height:42vh;overflow:auto}.help-grid div{min-height:48px}.help-grid b{min-width:43px}.mobile-controls{display:block;position:absolute;z-index:7;inset:0;pointer-events:none}.joystick{position:absolute;pointer-events:auto;left:max(14px,env(safe-area-inset-left));bottom:max(72px,calc(env(safe-area-inset-bottom) + 68px));width:104px;height:104px;border:1px solid rgba(201,255,248,.42);border-radius:50%;background:rgba(2,23,36,.42);touch-action:none}.joystick:before,.joystick:after{content:"";position:absolute;background:rgba(201,255,248,.13)}.joystick:before{left:50%;top:8px;bottom:8px;width:1px}.joystick:after{top:50%;left:8px;right:8px;height:1px}.joystick>span{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);color:rgba(201,255,248,.55);font-size:7px;font-weight:900;letter-spacing:.12em}.stick{position:absolute;left:31px;top:31px;width:42px;height:42px;border-radius:50%;background:rgba(61,246,231,.88);box-shadow:0 0 20px rgba(61,246,231,.35)}.use-button,.pick-button{position:absolute;pointer-events:auto;right:max(14px,env(safe-area-inset-right));width:72px;height:72px;border-radius:50%;border:1px solid rgba(201,255,248,.6);background:rgba(2,23,36,.72);color:var(--yellow);font-size:24px;font-weight:1000;touch-action:none}.use-button{bottom:max(112px,calc(env(safe-area-inset-bottom) + 108px))}.pick-button{bottom:max(194px,calc(env(safe-area-inset-bottom) + 190px));width:58px;height:58px;right:max(21px,calc(env(safe-area-inset-right) + 7px));font-size:18px}.use-button small,.pick-button small{display:block;color:var(--ice);font-size:6px;letter-spacing:.06em}.crosshair{top:44%}.stats{flex-wrap:wrap}.stats div{min-width:88px}.cut-mark{width:66px;height:66px}
}
@media(max-height:580px) and (orientation:landscape){.app{grid-template-rows:0 minmax(0,1fr) 0}.topbar{display:none}.overlay{padding:15px 34px}.overlay h1,.overlay h2{font-size:44px;margin:7px 0}.overlay p{margin-bottom:12px}.help-grid{grid-template-columns:repeat(3,1fr);max-height:none}.inventory{bottom:5px}.joystick{bottom:58px;width:88px;height:88px}.stick{left:27px;top:27px;width:34px;height:34px}.use-button{bottom:74px}.pick-button{bottom:150px}}
@media(prefers-reduced-motion:reduce){.toast.pop{animation:none;opacity:1}}