:root{--cyan:#55eaff;--pink:#ff64da;--gold:#ffd467;--ink:#05091d;--glass:rgba(4,10,30,.72)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#02040d;color:#fff;font-family:Inter,system-ui,sans-serif;touch-action:none}canvas#game{display:block;width:100%;height:100%}.hidden{display:none!important}.screen{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:20px;background:radial-gradient(circle at 70% 10%,rgba(88,77,255,.18),transparent 38%),linear-gradient(rgba(1,3,13,.35),rgba(1,3,13,.88));backdrop-filter:blur(6px)}.screen.active{display:grid}.card{width:min(760px,94vw);padding:32px;border:1px solid rgba(108,228,255,.35);border-radius:30px;background:linear-gradient(145deg,rgba(9,17,47,.94),rgba(5,8,24,.9));box-shadow:0 28px 90px #000;text-align:center}.eyebrow{font-size:12px;letter-spacing:.18em;color:#9defff;font-weight:900}.dangerText{color:#ff778e}h1{font-size:clamp(52px,10vw,105px);line-height:.82;margin:10px 0 22px;letter-spacing:-.07em}h1 span{color:var(--cyan);text-shadow:0 0 25px rgba(85,234,255,.5)}h2{font-size:40px}.card p{color:#c9dded;line-height:1.55;font-size:17px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.features div{padding:12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}button{border:0;border-radius:15px;padding:14px 20px;font-weight:900;background:linear-gradient(135deg,var(--cyan),#8c89ff,var(--pink));color:#04111b;cursor:pointer}.card a{display:block;color:#bdefff;margin-top:18px;text-decoration:none}.hudblock{position:fixed;top:max(10px,env(safe-area-inset-top));z-index:20;background:var(--glass);border:1px solid rgba(117,227,255,.22);border-radius:16px;padding:10px 12px;backdrop-filter:blur(8px);font-size:12px}.hudblock.left{left:max(10px,env(safe-area-inset-left));width:min(320px,42vw)}.hudblock.right{right:max(10px,env(safe-area-inset-right));line-height:1.7}.brand{font-weight:900;letter-spacing:.08em;color:#c8f8ff;margin-bottom:7px}.brand b{color:var(--cyan)}.meter{display:grid;grid-template-columns:36px 1fr 44px;gap:7px;align-items:center;margin-top:5px}.meter i{height:7px;background:#172037;border-radius:99px;overflow:hidden}.meter i b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4fffc8,#65dcff)}.meter.air i b{background:linear-gradient(90deg,#74e8ff,#9b9aff)}.meter.suit i b{background:linear-gradient(90deg,#ffde65,#ff778e)}#radar{position:fixed;z-index:20;right:max(10px,env(safe-area-inset-right));top:112px;width:150px;height:150px;border-radius:50%;background:rgba(4,15,31,.75);border:1px solid rgba(90,238,255,.35)}#danger{position:fixed;z-index:25;top:18%;left:50%;transform:translateX(-50%);padding:9px 14px;border-radius:99px;background:rgba(145,12,36,.86);font-weight:900;opacity:0;transition:.15s}#danger.show{opacity:1}#toast{position:fixed;z-index:25;left:50%;bottom:25%;transform:translateX(-50%);background:rgba(5,12,30,.88);border:1px solid rgba(100,233,255,.3);padding:10px 15px;border-radius:99px;opacity:0;transition:.2s}#toast.show{opacity:1}#controls{position:fixed;inset:0;z-index:15;pointer-events:none}.stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:130px;height:130px;border-radius:50%;border:2px solid rgba(145,235,255,.3);background:rgba(4,18,42,.48);pointer-events:auto}.stick:before,.stick:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.09)}.stick:before{width:2px;height:75%}.stick:after{height:2px;width:75%}.stick i{position:absolute;width:56px;height:56px;left:35px;top:35px;border-radius:50%;background:radial-gradient(circle at 30% 25%,white,var(--cyan) 32%,#735fff 75%);box-shadow:0 0 24px rgba(85,234,255,.45)}.stick span{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:10px;letter-spacing:.16em}.look{position:absolute;right:0;top:90px;width:48%;height:calc(100% - 180px);pointer-events:auto}.look span{position:absolute;right:24px;bottom:115px;color:rgba(255,255,255,.28);font-size:10px;letter-spacing:.13em}#actions{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,72px);gap:7px;pointer-events:auto}#actions button{padding:10px 4px;font-size:10px;background:rgba(7,20,44,.82);color:#fff;border:1px solid rgba(104,226,255,.28)}@media(max-width:700px){.hudblock.left{width:52vw}.hudblock.right{font-size:10px;top:88px}.features{grid-template-columns:repeat(2,1fr)}#radar{width:115px;height:115px;top:190px}.stick{width:112px;height:112px}.stick i{left:30px;top:30px;width:50px;height:50px}#actions{grid-template-columns:repeat(2,64px)}#actions button{font-size:9px}}

/* V12.7 console-simple mobile controls */
#controls{pointer-events:none}
#moveBase,#lookBase{bottom:max(52px,calc(env(safe-area-inset-bottom) + 34px));width:124px;height:124px}
#moveBase{left:max(16px,env(safe-area-inset-left))}
#lookBase{left:auto;right:max(16px,env(safe-area-inset-right));pointer-events:auto}
#moveBase i,#lookBase i{left:34px;top:34px;width:56px;height:56px}
#actions{
  bottom:max(60px,calc(env(safe-area-inset-bottom) + 42px));
  grid-template-columns:repeat(4,64px);gap:7px;z-index:30
}
#actions button{height:44px;padding:6px 3px;font-size:9px;border-radius:13px}
.lookStick span{bottom:-18px}
@media(max-width:700px){
  #moveBase,#lookBase{width:106px;height:106px;bottom:max(50px,calc(env(safe-area-inset-bottom) + 34px))}
  #moveBase i,#lookBase i{left:29px;top:29px;width:48px;height:48px}
  #actions{grid-template-columns:repeat(2,62px);bottom:max(58px,calc(env(safe-area-inset-bottom) + 42px));gap:6px}
  #actions button{height:40px;font-size:8.5px}
  #radar{top:178px}
}
@media(orientation:landscape) and (max-height:600px){
  #moveBase,#lookBase{width:94px;height:94px;bottom:max(28px,calc(env(safe-area-inset-bottom) + 22px))}
  #moveBase i,#lookBase i{left:26px;top:26px;width:42px;height:42px}
  #actions{bottom:max(30px,calc(env(safe-area-inset-bottom) + 22px));grid-template-columns:repeat(4,54px)}
  #actions button{height:36px;font-size:8px}
}