*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#a8d8ed;color:#f5f3df;font-family:"PingFang SC",sans-serif}#world{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:absolute;top:30px;left:34px;pointer-events:none;text-shadow:0 2px 10px #17251e66}.tag{font:11px Menlo,monospace;letter-spacing:3px;color:#e0edb6}h1{margin:8px 0;font-size:26px;letter-spacing:4px}header span{font-size:12px;opacity:.9}#stats{position:absolute;right:32px;top:30px;padding:15px 20px;background:#17251ecc;border-left:3px solid #d8e6a5;font:12px Menlo,monospace;line-height:2}#stats small{opacity:.65}#menu{position:absolute;left:7%;top:30%;padding:30px 38px;background:#17251ee8;border-left:4px solid #cfe28c;max-width:440px}h2{font-size:44px;line-height:1.3;margin:20px 0;font-weight:600;letter-spacing:2px}p{font-size:14px;line-height:1.9;opacity:.8}button{cursor:pointer;font:inherit;border:0}#start{display:block;background:#d9e9a3;color:#17251e;padding:15px 25px;width:100%;margin:24px 0 15px;font-weight:600;font-size:16px}button:hover{filter:brightness(1.12)}#menu small{font-size:11px;opacity:.55}footer{position:absolute;bottom:25px;left:32px;right:32px;display:flex;align-items:center;gap:20px;padding:15px 20px;background:#17251ed9;font-size:11px;flex-wrap:wrap}kbd{font:11px Menlo,monospace;background:#ffffff17;padding:5px 7px;margin-right:5px;border-bottom:2px solid #ffffff36}#reset{margin-left:auto;background:transparent;color:#e0edb6;font-size:12px}#hint{position:absolute;bottom:100px;right:34px;font-size:11px;letter-spacing:2px;text-shadow:0 1px 5px #17251e}.hidden{display:none}@media(max-width:700px){header{left:20px;top:20px}#stats{right:15px;top:20px;padding:8px 12px}#menu{left:20px;right:20px;top:28%;padding:25px}h2{font-size:34px}footer{left:15px;right:15px;bottom:15px;gap:12px}#hint{display:none}}

/* The viewport owns the canvas layout; gameplay owns pointer-lock state. */
html,body{width:100%;height:100%}
#world canvas{width:100%;height:100%}
body.is-playing #world canvas{cursor:none}
button:focus-visible{outline:3px solid #f5f3df;outline-offset:4px}
#look-hint{line-height:1.65;max-width:240px}
#menu{max-height:calc(100dvh - 180px);overflow:auto}
@media(max-width:700px){
  header h1{font-size:21px;letter-spacing:2px}
  header span{display:block;max-width:150px;line-height:1.6}
  #stats{font-size:11px}
  #menu{max-width:none;max-height:calc(100dvh - 220px)}
  footer{gap:8px 12px;line-height:1.8;padding:12px}
  #look-hint{max-width:none}
  #reset{min-height:36px;padding:5px 8px}
}
@media(max-height:540px){
  #menu{top:20%;padding:18px 25px;max-height:calc(100dvh - 165px)}
  #menu h2{font-size:28px;margin:10px 0}
  #menu p{margin:8px 0}
  #start{margin:12px 0}
}
/* Keep pointer-lock feedback above the WebGL canvas and clear of controls. */
#look-hint{position:absolute;right:32px;bottom:105px;z-index:2;padding:9px 12px;background:#17251ed9;color:#f5f3df;font-size:11px;pointer-events:none}
@media(max-width:700px){#look-hint{top:120px;bottom:auto;left:20px;right:20px;max-width:none}}

/* Workshop UI sits above the scene while keeping exploration feedback visible. */
#lab-prompt{position:absolute;left:50%;bottom:108px;transform:translateX(-50%);z-index:3;max-width:calc(100% - 40px);padding:12px 18px;background:#111d27ed;border:1px solid #7ddbe580;color:#e8fcff;font-size:13px;line-height:1.8;white-space:nowrap;pointer-events:none;box-shadow:0 8px 24px #0003}
#lab-panel{position:absolute;z-index:10;right:28px;top:22px;bottom:22px;width:380px;max-width:calc(100vw - 40px);padding:26px;background:linear-gradient(150deg,#192630f5,#101821fa);border:1px solid #7ddbe559;border-top:3px solid #7ddbe5;box-shadow:0 16px 60px #00101866;overflow:auto;color:#edf6f8}
.lab-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.lab-heading .tag{color:#7ddbe5;letter-spacing:2px;font-size:10px}.lab-heading h2{font-size:25px;letter-spacing:1px;line-height:1.4;margin:12px 0 0}#lab-close{flex-shrink:0;width:36px;height:36px;background:#ffffff0c;color:#d8faff;font-size:25px;line-height:1}.lab-intro{font-size:13px;margin:18px 0 22px;color:#b6c9d1}
.armor-card{display:flex;align-items:center;gap:13px;width:100%;padding:17px 14px;text-align:left;background:#26323c;color:#edf6f8;border:1px solid #4e6878;position:relative}.armor-card.selected{border-color:#7ddbe5;background:#19343e;box-shadow:inset 3px 0 #7ddbe5}.armor-card-mark{display:grid;place-items:center;flex-shrink:0;width:43px;height:52px;background:linear-gradient(120deg,#b73b32 58%,#d8b961 59%);font:bold 18px Menlo,monospace;color:#fff4d8;border:1px solid #e6ba6d66}.armor-card strong{display:block;font-size:15px;line-height:1.5}.armor-card small{display:block;font-size:10px;margin-top:4px;color:#a8c3cb}.selected-label{margin-left:auto;font-size:10px;color:#91e7ed;white-space:nowrap}
.armor-specs{margin:22px 0;display:grid;gap:0}.armor-specs>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff12;font-size:12px}.armor-specs dt{color:#9cafb9}.armor-specs dd{margin:0;color:#e6f1f4}
#armor-build{width:100%;padding:15px;background:#7ddbe5;color:#10242d;font-weight:600;font-size:15px}#armor-build:disabled{cursor:default;opacity:.6;filter:none}#build-status{margin:13px 0 0;min-height:24px;font-size:12px;color:#a4edf2;opacity:1}.lab-scope{font-size:11px;line-height:1.8;color:#9eb1bc;margin:16px 0 20px}#lab-return{width:100%;padding:12px;border:1px solid #526572;background:transparent;color:#d9e5e9;font-size:13px}#lab-panel button:focus-visible{outline-color:#aaf4ff}#lab-panel:focus-visible{outline:2px solid #aaf4ff;outline-offset:2px}
#hint{bottom:150px}body:has(#lab-panel:not(.hidden)) #look-hint{visibility:hidden}.hidden{display:none!important}
@media(max-width:800px){#lab-prompt{bottom:140px;font-size:12px}#lab-panel{right:20px;width:340px;padding:22px}}
@media(max-width:700px){#lab-prompt{bottom:160px;white-space:normal;text-align:center;width:max-content}#lab-panel{inset:16px;width:auto;max-width:none;padding:22px}.lab-heading h2{font-size:24px}}
@media(max-height:600px){#lab-panel{top:12px;bottom:12px;padding:18px}.lab-intro{margin:12px 0}.armor-specs{margin:12px 0}.armor-specs>div{padding:8px 0}.lab-scope{margin:10px 0}.lab-heading h2{font-size:22px}#lab-prompt{bottom:110px}}

#visit-lab{display:block;width:100%;padding:10px 15px;margin:0 0 15px;background:#ffffff0d;border:1px solid #77d6e780;color:#c0f1f9;font-size:13px}

body.is-lab #stats,body.is-lab #hint,body.is-lab #look-hint{display:none}
.armor-view-controls{display:flex;gap:8px;margin:0 0 18px}
.armor-view-controls button{flex:1;padding:9px 6px;background:#ffffff08;border:1px solid #74ceda4d;color:#c5eff5;font-size:12px}
@media(max-width:760px){
  #lab-panel{top:auto;bottom:12px;left:12px;right:12px;max-height:46dvh;overflow-y:auto;padding:18px}
  #lab-panel h2{font-size:22px}
}

button:disabled{cursor:wait;opacity:.55;filter:none}

#armor-store{width:100%;padding:12px;margin-top:10px;border:1px solid #74ceda80;background:#17313b;color:#c5eff5;font-size:13px}

#armor-take{width:100%;padding:14px;margin-top:10px;background:#d9e9a3;color:#17251e;font-weight:600}
#armor-inventory{color:#bde8e7;font-size:11px}

#game-error{position:fixed;z-index:100;inset:0;background:#17251ef5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
#game-error h2{font-size:28px}#game-error p{max-width:420px}#game-reload{padding:14px 28px;background:#d9e9a3;color:#17251e;font-weight:600}

/* Suit transitions keep the scene visible and put attention on the animation. */
#armor-wear-state{color:#91e7ed}
#wear-prompt{position:absolute;left:50%;bottom:108px;transform:translateX(-50%);z-index:3;max-width:calc(100% - 40px);padding:12px 18px;background:#111d27ed;border:1px solid #7ddbe580;color:#e8fcff;font-size:13px;line-height:1.8;white-space:nowrap;pointer-events:none;box-shadow:0 8px 24px #0003}
#wear-progress{position:absolute;left:50%;top:34px;transform:translateX(-50%);z-index:6;max-width:calc(100% - 40px);padding:14px 24px;background:#111d27ed;border:1px solid #7ddbe580;border-bottom:3px solid #7ddbe5;color:#e8fcff;font-size:14px;letter-spacing:1px;line-height:1.8;text-align:center;pointer-events:none;box-shadow:0 8px 24px #0003}
body.is-suiting footer,body.is-suiting #hint,body.is-suiting #look-hint,body.is-suiting #lab-prompt,body.is-suiting #wear-prompt{visibility:hidden}
@media(max-width:800px){#wear-prompt{bottom:140px;font-size:12px}#wear-progress{top:160px}}
@media(max-width:700px){#wear-prompt{bottom:160px;white-space:normal;text-align:center;width:max-content}#wear-progress{top:172px;padding:12px 18px;font-size:13px}}
@media(max-height:600px){#wear-prompt{bottom:110px}#wear-progress{top:110px}}

#aim-reticle{position:fixed;left:50%;top:38%;width:16px;height:16px;transform:translate(-50%,-50%);border:1px solid #c3f5ff99;border-radius:50%;pointer-events:none;z-index:2;box-shadow:0 0 8px #49d7ff55}
#aim-reticle:after{content:"";position:absolute;left:6px;top:6px;width:2px;height:2px;background:#e6fbff}

#helmet-hud{position:fixed;inset:0;pointer-events:none;z-index:3;color:#9aefff;font:12px Menlo,monospace;text-shadow:0 0 8px #23c9ff;background:linear-gradient(180deg,#06335344,transparent 25%,transparent 75%,#06335355);box-shadow:inset 0 0 100px #007bc066,inset 0 0 0 14px #002d4b66;clip-path:polygon(2% 0,98% 0,100% 3%,100% 97%,98% 100%,2% 100%,0 97%,0 3%)}
.helmet-top{position:absolute;left:7%;right:7%;top:6%;display:flex;justify-content:space-between;border-bottom:1px solid #51d9ff88;padding:14px;letter-spacing:3px}.helmet-top span{font-size:11px}
.helmet-left,.helmet-right{position:absolute;top:28%;padding:18px;border-top:2px solid #62dcff;border-bottom:1px solid #62dcff77;background:#00284044;line-height:2.1}.helmet-left{left:5%;border-left:1px solid #62dcff77}.helmet-right{right:5%;border-right:1px solid #62dcff77}.helmet-left strong,.helmet-right strong{display:block;font-size:16px}.helmet-bars{font-size:26px;letter-spacing:6px}.helmet-left code{opacity:.6;letter-spacing:5px}.helmet-bottom{position:absolute;bottom:9%;left:8%;right:8%;display:flex;justify-content:space-between;border-top:1px solid #62dcff88;padding-top:14px;letter-spacing:2px}.helmet-radar{width:90px;height:90px;margin-top:18px;border:1px solid #63ddff;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 13px,#63ddff44 14px 15px),conic-gradient(from 0deg,#52eaff66,transparent 80deg);animation:radar-sweep 5s linear infinite}@keyframes radar-sweep{to{transform:rotate(360deg)}}
.helmet-view header,.helmet-view #stats,.helmet-view #hint{display:none}.helmet-view footer{background:#002943b3;color:#a8eeff}.helmet-view #aim-reticle{top:50%;width:28px;height:28px;border-radius:0;border:0;background:linear-gradient(#9af2ff,#9af2ff) center/1px 100% no-repeat,linear-gradient(#9af2ff,#9af2ff) center/100% 1px no-repeat;box-shadow:none;z-index:4}.helmet-view #aim-reticle:after{left:8px;top:8px;width:12px;height:12px;border:1px solid #b9f6ff;border-radius:50%;background:#00466b44}
@media(max-width:700px){.helmet-top{left:3%;right:3%;letter-spacing:1px}.helmet-top span{display:none}.helmet-left,.helmet-right{font-size:9px;padding:8px;top:25%}.helmet-left{left:3%}.helmet-right{right:3%}.helmet-left strong,.helmet-right strong{font-size:11px}.helmet-bottom{font-size:9px;letter-spacing:0}.helmet-radar{width:60px;height:60px}}

#green-panel{position:fixed;right:3%;top:12%;width:360px;max-width:94vw;padding:28px;background:#082b20ed;border:1px solid #61ffa488;box-shadow:0 0 40px #34ff7c22;z-index:8;color:#c5ffdd}#green-panel h2{font-size:28px}#green-panel button,#visit-green{display:block;width:100%;padding:14px;margin:12px 0;background:#57d98b;color:#092c1c}#green-panel button:disabled{opacity:.35;cursor:default}#green-return{background:#244c3a!important;color:#c5ffdd!important}

/* Enhanced helmet instrumentation keeps the central aiming area clear. */
#helmet-hud{background:repeating-linear-gradient(0deg,transparent 0 3px,#31c9ff06 3px 4px),linear-gradient(180deg,#032b4966,transparent 28%,transparent 72%,#032b4977);box-shadow:inset 0 0 120px #006fac88,inset 0 0 0 10px #002d4b88}
.helmet-top{top:3%;left:4%;right:4%;font-size:12px;align-items:center}.helmet-top b small{display:block;font-size:9px;opacity:.6;margin-top:7px}.hud-live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8dffc0;box-shadow:0 0 10px #8dffc0;animation:hud-pulse 1.5s ease-in-out infinite}
.helmet-left,.helmet-right{top:21%;width:240px;padding:15px 20px;background:linear-gradient(90deg,#002537bb,#00253733);border-color:#4be1ff88;box-shadow:0 0 22px #008bc722;clip-path:polygon(0 0,90% 0,100% 20px,100% 100%,0 100%)}.helmet-right{background:linear-gradient(270deg,#002537bb,#00253733)}.helmet-left{left:4%}.helmet-right{right:4%}.helmet-left p,.helmet-right p{margin:8px 0;font-size:10px;opacity:.9}.helmet-left small,.helmet-right small{font-size:9px;letter-spacing:1px}.helmet-compass{position:absolute;top:13%;left:30%;right:30%;text-align:center;border-top:1px solid #5ddaff66;padding-top:9px}.helmet-compass span{display:block;font-size:9px;letter-spacing:2px;white-space:nowrap;overflow:hidden;opacity:.65}.helmet-compass strong{display:block;font-size:18px;letter-spacing:4px;margin-top:5px}
.hud-energy{position:relative;width:140px;height:140px;border-radius:50%;margin:12px auto;border:3px solid #5cecff;box-shadow:0 0 22px #20caff44,inset 0 0 22px #20caff22;display:flex;align-items:center;justify-content:center;text-align:center}.hud-energy:before{content:"";position:absolute;inset:-9px;border:2px dashed #6defff77;border-radius:50%;animation:radar-sweep 20s linear infinite}.hud-energy:after{content:"";position:absolute;inset:7px;border:1px solid #6defff66;border-radius:50%}.hud-energy strong{font-size:35px;line-height:1.2}.hud-energy strong span{font-size:13px}.hud-energy small{font-size:8px!important;letter-spacing:1px}.hud-green{color:#99ffc6;letter-spacing:1px;text-align:center}.hud-divider{height:1px;margin:12px 0;background:linear-gradient(90deg,#55dfff88,transparent)}.hud-system{font-size:9px;line-height:2.3;letter-spacing:.5px}.hud-system span{float:right;color:#b1ffdb}.hud-integrity{font-size:9px;margin-top:10px}.hud-integrity b{float:right}.hud-integrity div{height:4px;margin-top:6px;background:repeating-linear-gradient(90deg,#74eaff 0 12px,transparent 12px 15px);box-shadow:0 0 8px #39d2ff66}.helmet-bars{font-size:18px;margin-top:9px}.helmet-left code{font-size:8px;letter-spacing:1px}.helmet-radar{margin:14px auto;width:105px;height:105px}.hud-target{position:absolute;left:50%;top:55%;transform:translateX(-50%);text-align:center;opacity:.7;font-size:9px;letter-spacing:2px}.hud-target small{display:block;font-size:7px;margin-top:5px;opacity:.6}.hud-log{position:absolute;bottom:16%;left:35%;right:35%;font-size:8px;letter-spacing:1px;line-height:1.9;opacity:.65}.hud-log span{display:block}.helmet-bottom{bottom:10%;font-size:10px}.helmet-view #aim-reticle{width:36px;height:36px}.helmet-view #aim-reticle:after{left:12px;top:12px}.helmet-view #aim-reticle:before{content:"";position:absolute;inset:-10px;border:1px solid #61dcff55;border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:radar-sweep 8s linear infinite}@keyframes hud-pulse{50%{opacity:.4}}
@media(max-width:900px){.helmet-left,.helmet-right{width:180px;padding:10px}.hud-energy{width:100px;height:100px}.hud-energy strong{font-size:28px}.helmet-top span{display:none}.hud-log{left:30%;right:30%;font-size:7px}.helmet-compass{left:28%;right:28%}.helmet-left,.helmet-right{top:20%}}@media(max-height:700px){.helmet-left,.helmet-right{top:20%}.hud-energy{width:85px;height:85px;margin:6px auto}.helmet-bars,.helmet-left code,.hud-log{display:none}.helmet-radar{width:70px;height:70px;margin:8px auto}.hud-divider{margin:6px 0}.hud-system{line-height:1.7}}
#mobile-controls{display:none}
body.mobile-mode{touch-action:none;overscroll-behavior:none}
.mobile-mode canvas{touch-action:none}
.mobile-mode footer{display:none}
.mobile-mode #mobile-controls:not([hidden]){display:block;position:fixed;inset:0;z-index:6;pointer-events:none}
#mobile-stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:118px;height:118px;border:2px solid #7ce5ffa0;border-radius:50%;background:#06253988;pointer-events:auto;touch-action:none;box-shadow:inset 0 0 20px #38d3ff33}
#mobile-stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:#85eaffaa;border:2px solid #d4faff;transform:translate(-50%,-50%)}
#mobile-buttons{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,64px);gap:7px;pointer-events:auto}
#mobile-buttons button,#mobile-pause{min-height:44px;border:1px solid #76dfff88;border-radius:12px;background:#07344ddb;color:#d6f7ff;font-size:11px;padding:6px;touch-action:none;user-select:none;-webkit-user-select:none}
#mobile-buttons button:disabled{opacity:.35}#mobile-buttons .pressed,#mobile-buttons .selected{background:#187fa4;color:white;box-shadow:0 0 12px #5edaff}
#mobile-pause{position:absolute;right:12px;top:max(12px,env(safe-area-inset-top));pointer-events:auto;width:58px}
#mobile-look-tip{position:absolute;right:16px;top:68px;color:#b5edff;font-size:10px;opacity:.7}
.mobile-mode #look-hint,.mobile-mode #hint{bottom:216px;max-width:90vw;font-size:11px}.mobile-mode #wear-prompt,.mobile-mode #lab-prompt{bottom:230px}
.mobile-mode #menu{max-height:85dvh;overflow:auto}.mobile-mode #lab-panel,.mobile-mode #green-panel{max-height:85dvh;overflow:auto;top:6%;padding:16px}
.mobile-mode #stats{top:80px;padding:9px;font-size:10px;right:10px}.mobile-mode header{padding:15px}.mobile-mode header h1{font-size:21px}
.mobile-mode .helmet-left,.mobile-mode .helmet-right{width:105px;padding:5px;font-size:8px;top:25%}.mobile-mode .helmet-left{left:2%}.mobile-mode .helmet-right{right:2%}.mobile-mode .hud-energy{width:60px;height:60px}.mobile-mode .hud-energy strong{font-size:20px}.mobile-mode .hud-divider,.mobile-mode .helmet-radar,.mobile-mode .hud-log,.mobile-mode .helmet-bars,.mobile-mode .hud-integrity,.mobile-mode .helmet-left code{display:none}.mobile-mode .hud-system{font-size:7px;line-height:1.6}.mobile-mode .helmet-top{font-size:9px;right:78px}.mobile-mode .helmet-bottom{bottom:220px;font-size:8px}.mobile-mode .helmet-compass{top:16%}
@media(max-height:500px){.mobile-mode #mobile-buttons{grid-template-columns:repeat(4,60px);gap:5px}.mobile-mode #look-hint,.mobile-mode #hint{bottom:160px}.mobile-mode .helmet-bottom{bottom:165px}.mobile-mode #stats{display:none}}
/* Mobile status is a single top strip, never stretched between top and bottom. */
.mobile-mode #look-hint{position:fixed;top:calc(env(safe-area-inset-top) + 8px);bottom:auto;left:10px;right:80px;width:auto;max-width:none;height:28px;padding:5px 10px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px;background:#092333a6;font-size:10px;z-index:7}
.mobile-mode #mobile-look-tip{display:none}
#multiplayer-open{display:block;width:100%;padding:14px;background:#58bcd2;color:#082c39;margin:12px 0}
#multiplayer-panel{position:fixed;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);width:360px;max-width:92vw;max-height:90dvh;overflow:auto;padding:22px;background:#0c2839f5;border:1px solid #7bdefc;border-radius:16px;box-shadow:0 0 80px #04141dcc}#multiplayer-panel h2{font-size:28px;margin:0 0 12px}#multiplayer-panel p{font-size:12px}#multiplayer-panel button,#room-code{display:block;width:100%;margin:10px 0;padding:12px;border-radius:8px}#multiplayer-panel button{background:#6ed4ef;color:#102f3b}#room-code{background:#051b2c;border:1px solid #78ceec;color:white;font:20px monospace;letter-spacing:5px;text-transform:uppercase}#multiplayer-panel label{font-size:12px}#room-leave,#multiplayer-close{background:#254254!important;color:#c9e5f0!important}#room-badge{position:fixed;top:42px;left:10px;z-index:7;padding:5px 10px;background:#102e42bd;border:1px solid #66c9f477;border-radius:8px;color:#d9f7ff;font-size:11px;pointer-events:none;max-width:85vw}
#menu{z-index:5;max-height:80dvh;overflow:auto}
@media(max-height:600px){#menu{top:8%;max-height:76dvh;padding:18px 24px}#menu h2{font-size:27px;margin:8px 0}#menu #start{margin:14px 0 10px}}