:root{--ink:#081521;--paper:#f5f3ed;--signal:#ff4b36;--blue:#6dd7ff;--line:rgba(255,255,255,.18);--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;--serif:"Songti SC","STSong",Georgia,serif;color-scheme:dark}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#07131d;font-family:var(--sans)}button,input{font:inherit}button{cursor:pointer}canvas#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}.lobby{position:fixed;inset:0;z-index:20;color:var(--ink);background:linear-gradient(115deg,rgba(239,244,245,.96) 0 49%,rgba(6,20,31,.32) 49.1% 100%),radial-gradient(circle at 78% 32%,#94d7ee,#1e566f 50%,#07131d 100%);overflow:auto}.lobby:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,21,33,.055) 1px,transparent 1px),linear-gradient(rgba(8,21,33,.055) 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(90deg,#000,transparent 73%);pointer-events:none}.lobby-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}.lobby-sky:after{content:"";position:absolute;width:58vw;height:14vw;right:-5vw;bottom:16vh;background:linear-gradient(165deg,transparent 0 47%,rgba(255,255,255,.13) 48% 52%,transparent 53%);transform:rotate(-7deg)}.lobby-sky i{position:absolute;display:block;border:1px solid rgba(255,255,255,.25);border-radius:50%;right:10vw;top:15vh;width:38vw;height:38vw}.lobby-sky i:nth-child(2){right:-10vw;top:-25vw;width:75vw;height:75vw}.lobby-sky i:nth-child(3){right:25vw;top:48vh;width:18vw;height:18vw}
.lobby-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid rgba(8,21,33,.16);position:relative;z-index:2}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none}.brand>span{display:grid;place-items:center;width:38px;height:38px;background:var(--ink);color:#fff;font:bold 13px var(--mono)}.brand b{font-size:15px;letter-spacing:.12em}.brand small{display:block;font:7px var(--mono);letter-spacing:.25em;margin-top:4px;color:#62717d}.server-state{display:flex;align-items:center;gap:10px;color:#fff;font:600 10px var(--mono);letter-spacing:.08em}.server-state i,.room i{width:7px;height:7px;border-radius:50%;background:#51d39a;box-shadow:0 0 0 5px rgba(81,211,154,.13)}
.lobby-main{min-height:calc(100vh - 148px);display:grid;grid-template-columns:1fr 1fr;position:relative;z-index:2}.hero-copy{padding:clamp(55px,8vh,110px) 7vw 45px 4vw;display:flex;flex-direction:column;align-items:flex-start}.hero-copy>p:first-child{font:700 9px var(--mono);letter-spacing:.24em;color:#1c668c}.hero-copy h1{font:500 clamp(58px,7.5vw,118px)/.92 var(--serif);letter-spacing:-.085em;margin:clamp(35px,7vh,80px) 0 30px}.hero-copy h1 em{font-style:normal;color:var(--signal)}.hero-rule{width:92px;height:2px;background:var(--ink);margin-bottom:25px}.hero-desc{max-width:580px;color:#52626f;font-size:clamp(13px,1.1vw,17px);line-height:1.9;margin:0}.hero-copy ul{list-style:none;padding:0;margin:auto 0 0;display:flex;gap:22px;font:700 9px var(--mono);letter-spacing:.08em;color:#546571}.hero-copy li:before{content:"+";color:var(--signal);margin-right:8px}
.join-panel{align-self:center;justify-self:center;width:min(620px,83%);background:rgba(5,19,30,.92);color:#fff;border:1px solid rgba(255,255,255,.18);padding:clamp(24px,3vw,46px);box-shadow:0 35px 100px rgba(0,0,0,.32);backdrop-filter:blur(12px)}.join-index{display:flex;align-items:baseline;gap:15px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:28px}.join-index span{font:700 10px var(--mono);color:var(--signal)}.join-index p{margin:0;font:500 25px var(--serif)}.join-panel label>span,.craft-label>span{display:block;font:700 8px var(--mono);letter-spacing:.17em;color:#9eabb4;margin-bottom:9px}.join-panel input{width:100%;height:53px;border:1px solid #41505b;background:#0d202e;color:#fff;padding:0 16px;outline:0;font-size:15px;border-radius:0}.join-panel input:focus{border-color:var(--blue)}.craft-label{display:flex;justify-content:space-between;align-items:center;margin:24px 0 9px}.craft-label>span{margin:0}.craft-label small{font-size:8px;color:#5fcf9b}.crafts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.craft{min-width:0;height:143px;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;background:#0d202e;border:1px solid #344550;color:#fff;padding:13px;text-align:left;overflow:hidden}.craft:hover,.craft.active{border-color:var(--blue);background:#112938}.craft.active:after{content:"✓";position:absolute;right:9px;top:8px;color:var(--blue);font:700 12px var(--mono)}.craft b{font-size:11px;margin-top:8px;white-space:nowrap}.craft span{font-size:8px;color:#8998a3;margin-top:3px;white-space:nowrap}.craft em{position:absolute;right:10px;bottom:9px;font:700 8px var(--mono);font-style:normal;color:#546673}.craft-drawing{position:absolute;left:50%;top:33%;width:58px;height:16px;background:#dce7ed;clip-path:polygon(0 45%,38% 38%,47% 0,55% 0,62% 38%,100% 45%,100% 60%,62% 61%,56% 100%,47% 100%,38% 61%,0 60%);transform:translate(-50%,-50%)}.craft-drawing.interceptor{width:65px;background:#ff6d55;clip-path:polygon(0 45%,35% 34%,43% 4%,57% 4%,65% 34%,100% 45%,100% 58%,61% 58%,56% 96%,44% 96%,39% 58%,0 58%)}.craft-drawing.spaceplane{width:68px;background:#6dd7ff;clip-path:polygon(0 54%,36% 39%,45% 0,55% 0,64% 39%,100% 54%,98% 68%,60% 63%,57% 100%,43% 100%,40% 63%,2% 68%)}.join-button{width:100%;height:58px;margin-top:18px;border:0;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-weight:800}.join-button:hover{background:#ff644f}.join-button b{font-size:22px}.terms{color:#6f808c;font-size:8px;line-height:1.6;margin:13px 0 0}.lobby footer{height:60px;border-top:1px solid rgba(8,21,33,.17);padding:0 4vw;display:flex;align-items:center;justify-content:space-between;font:600 8px var(--mono);letter-spacing:.06em;position:relative;z-index:2}.lobby footer a{color:var(--ink);text-decoration:none}
.hud{position:fixed;inset:0;z-index:10;color:#fff;pointer-events:none}.game-topbar{height:58px;display:flex;align-items:center;padding:0 24px;background:linear-gradient(180deg,rgba(2,11,18,.8),rgba(2,11,18,.14));border-bottom:1px solid rgba(255,255,255,.12);pointer-events:auto}.game-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}.game-brand span{display:grid;place-items:center;width:27px;height:27px;background:#fff;color:var(--ink);font:bold 9px var(--mono)}.game-brand b{font:700 9px var(--mono);letter-spacing:.16em}.room{margin-left:35px;display:flex;align-items:center;gap:9px;font:700 8px var(--mono);letter-spacing:.09em}.room span{color:#8294a1}.online{margin-left:auto;display:flex;align-items:baseline;gap:5px}.online b{font:500 20px var(--mono)}.online span{font-size:8px;color:#a2b0ba}.game-topbar button{margin-left:20px;border:1px solid rgba(255,255,255,.28);background:rgba(5,20,30,.5);color:#fff;padding:7px 11px;font:700 8px var(--mono)}
.flight-data{position:absolute;top:90px;display:grid;gap:9px}.left-data{left:24px}.right-data{right:24px}.flight-data>div{width:128px;display:grid;grid-template-columns:34px 1fr 29px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.22);padding:0 0 6px}.flight-data span{font:700 8px var(--mono);color:#70d8ff}.flight-data b{font:500 25px var(--mono);letter-spacing:-.06em}.flight-data small{font:600 7px var(--mono);color:#94a4af}.reticle{position:absolute;left:50%;top:50%;width:118px;height:118px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.55);border-radius:50%;opacity:.76}.reticle:before,.reticle:after{content:"";position:absolute;background:#fff}.reticle:before{width:36px;height:1px;left:-18px;top:58px;box-shadow:118px 0 #fff}.reticle:after{width:1px;height:20px;top:-10px;left:58px;box-shadow:0 118px #fff}.reticle i{position:absolute;inset:43px;border:1px solid rgba(255,92,70,.9);border-radius:50%}.reticle span{position:absolute;width:4px;height:4px;background:#ff5c46;left:56px;top:56px;border-radius:50%}.warning{position:absolute;top:27%;left:50%;transform:translateX(-50%);font:800 12px var(--mono);letter-spacing:.14em;color:#ff6a55;text-shadow:0 2px 12px #000}.toast{position:absolute;top:75px;left:50%;transform:translateX(-50%) translateY(-20px);background:rgba(5,19,30,.88);border:1px solid rgba(255,255,255,.24);padding:10px 15px;font:700 9px var(--mono);opacity:0;transition:.25s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.radar-panel,.score-panel{position:absolute;bottom:65px;background:rgba(4,16,25,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(5px)}.radar-panel{right:24px;width:220px;padding:12px 14px}.score-panel{left:24px;width:220px;padding:12px 14px;max-height:230px;overflow:hidden}.panel-title{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px;font:700 7px var(--mono);letter-spacing:.11em;color:#8fa1ad}.panel-title b{color:#6dd7ff}.radar-panel canvas{display:block;width:190px;height:190px;margin:auto}.score-panel ol{list-style:none;margin:7px 0 0;padding:0}.score-panel li{display:grid;grid-template-columns:18px 1fr 24px;gap:5px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);font:600 8px var(--mono)}.score-panel li span:first-child{color:#647784}.score-panel li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-panel li em{font-style:normal;text-align:right;color:#ff806d}
.feed{position:absolute;left:24px;top:230px;width:310px;display:flex;flex-direction:column;gap:6px}.feed p{margin:0;font:600 8px var(--mono);text-shadow:0 1px 5px #000;color:#d8e1e6}.feed p b{color:#ff6e58}.chat{position:absolute;left:24px;bottom:310px;width:320px;pointer-events:auto}.chat>div{max-height:108px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;margin-bottom:6px}.chat p{font-size:9px;margin:0;text-shadow:0 1px 5px #000}.chat p b{color:#6dd7ff}.chat form{display:none;grid-template-columns:1fr auto}.chat.open form{display:grid}.chat input{height:36px;background:rgba(4,16,25,.84);border:1px solid rgba(255,255,255,.25);color:#fff;padding:0 10px;outline:0}.chat button{border:0;background:var(--signal);color:#fff;padding:0 14px;font-size:9px}.help{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font:600 7px var(--mono);color:#adbac2;white-space:nowrap}.help span{display:inline-block;border:1px solid rgba(255,255,255,.25);padding:3px 5px;margin:0 4px 0 9px;color:#fff;background:rgba(0,0,0,.24)}
.mobile-controls{display:none}.disconnect{position:fixed;z-index:30;left:50%;top:18px;transform:translateX(-50%);background:#071722;color:#fff;border:1px solid #42535f;padding:13px 22px;display:grid;grid-template-columns:12px auto;gap:2px 10px;box-shadow:0 15px 50px rgba(0,0,0,.3)}.disconnect i{width:8px;height:8px;border:2px solid #ff5b45;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;grid-row:1/3}.disconnect b{font-size:10px}.disconnect span{font-size:8px;color:#8fa0aa}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.lobby-main{grid-template-columns:1fr}.hero-copy{padding:45px 6vw 30px;min-height:auto}.hero-copy h1{font-size:70px;margin:35px 0 24px}.hero-copy ul{margin-top:28px}.join-panel{width:88%;margin:20px auto 70px}.server-state{color:var(--ink)}.lobby footer{color:#fff;background:#07131d}.lobby footer a{color:#fff}.score-panel{display:none}.chat{bottom:240px}.help{display:none}.mobile-controls{display:flex;position:absolute;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom));align-items:flex-end;justify-content:space-between;padding:0 22px;pointer-events:none}.joystick{width:116px;height:116px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(2,12,19,.18);position:relative;pointer-events:auto;touch-action:none}.joystick:before,.joystick:after{content:"";position:absolute;background:rgba(255,255,255,.18)}.joystick:before{width:1px;height:100%;left:50%}.joystick:after{height:1px;width:100%;top:50%}.joystick i{position:absolute;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.65);left:36px;top:36px;z-index:2}.joystick span{position:absolute;left:50%;transform:translateX(-50%);bottom:-17px;font:600 7px var(--mono);white-space:nowrap}.mobile-buttons{display:flex;flex-direction:column;gap:8px;pointer-events:auto}.mobile-buttons button{width:64px;height:35px;border:1px solid rgba(255,255,255,.45);background:rgba(5,19,30,.58);color:#fff;font:700 8px var(--mono)}.mobile-buttons #fireButton{background:rgba(255,75,54,.7)}.radar-panel{right:10px;bottom:auto;top:70px;width:150px;padding:8px}.radar-panel canvas{width:132px;height:132px}.right-data{display:none}.left-data{top:72px;left:12px}.flight-data>div{width:108px}.flight-data b{font-size:21px}.game-topbar{padding:0 12px}.room{margin-left:14px}.online span,.game-topbar button{display:none}.reticle{width:88px;height:88px}.reticle:before{width:24px;left:-12px;top:43px;box-shadow:88px 0 #fff}.reticle:after{height:16px;top:-8px;left:43px;box-shadow:0 88px #fff}.reticle i{inset:32px}.reticle span{left:41px;top:41px}.feed{left:12px;top:190px;width:220px}.chat{left:12px;bottom:190px;width:calc(100% - 24px)} }
@media(max-width:560px){.lobby{overflow-x:hidden}.lobby-header{height:70px;padding:0 20px}.brand b{font-size:12px}.server-state span{display:none}.lobby-main{min-height:calc(100vh - 120px)}.hero-copy{padding:32px 20px 14px;overflow:hidden}.hero-copy h1{font-size:51px}.hero-desc{font-size:12px;max-width:100%}.hero-copy ul{gap:10px;flex-wrap:wrap}.join-panel{width:calc(100% - 24px);padding:20px;margin:8px 12px 55px;overflow:hidden}.crafts{gap:4px}.craft{height:120px;padding:8px}.craft b{font-size:8px;letter-spacing:-.05em}.craft span{font-size:6px}.craft-drawing{transform:translate(-50%,-50%) scale(.68)}.lobby footer{height:50px;padding:0 14px}.lobby footer span{display:none}.game-brand b{display:none}.room span{display:none}.online{margin-left:auto}.radar-panel{width:120px}.radar-panel canvas{width:102px;height:102px}.panel-title b{display:none}}