:root{--cyan:#3ae4ff;--orange:#ff8a2a;--red:#ff2d55;--line:#3ae4ff47;--text:#e9f6ff;--dim:#8fb3c9;--mono:"Orbitron", "Rajdhani", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;color:var(--text);-webkit-user-select:none;user-select:none;background:#05070a;font-family:Rajdhani,PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden}#game{width:100vw;height:100vh;display:block;position:fixed;inset:0}.hidden{display:none!important}.num{font-family:var(--mono)}#hud{pointer-events:none;position:fixed;inset:0;overflow:hidden}.hud-panel{border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));-webkit-backdrop-filter:blur(3px);background:linear-gradient(135deg,#08101aa8,#08101a4d);padding:10px 14px 12px;position:absolute}.row{letter-spacing:.06em;align-items:baseline;gap:10px;font-size:15px;font-weight:600;display:flex}.row .num{margin-left:auto;font-size:15px}.row.small{color:var(--dim);margin-top:8px;font-size:13px}.warn-text{color:var(--red);font-family:var(--mono);letter-spacing:.15em;margin-left:auto;font-size:11px}.tag{font-family:var(--mono);color:#ff8aa0;background:#ff2d552e;border:1px solid #ff2d5573;padding:1px 6px;font-size:11px}.tag.cyan{color:var(--cyan);background:#3ae4ff24;border-color:#3ae4ff73}.bar{background:#ffffff0f;border:1px solid #ffffff1f;height:10px;margin-top:6px;position:relative;overflow:hidden}.bar.hp{height:14px}.bar.thin{height:6px}.bar i{transform-origin:0;position:absolute;inset:0}.bar .fill{background:linear-gradient(90deg, #1fb8ff, var(--cyan));box-shadow:0 0 12px #3ae4ffb3}.bar .lag{background:#fffc}.bar.hp:after{content:"";background:repeating-linear-gradient(90deg,#0000 0 9.6%,#00000073 9.6% 10%);position:absolute;inset:0}#enemy-panel{width:min(520px,62vw);top:22px;left:50%;transform:translate(-50%)}#enemy-panel .fill{background:linear-gradient(90deg,#ff2d55,#ff6a3d);box-shadow:0 0 12px #ff2d55b3}#player-panel{width:340px;bottom:28px;left:28px}#player-panel.low .bar.hp{animation:.6s infinite lowhp}#player-panel.low .bar.hp .fill{background:linear-gradient(90deg,#ff2d55,#ff8a2a)}.bar.en .fill{background:linear-gradient(90deg,#6ff3ff,#e8fdff);box-shadow:0 0 10px #a0faff99}.bar.en.over .fill{background:linear-gradient(90deg,#ff2d55,#ff8a2a);animation:.25s infinite blink}#weapon-panel{width:300px;bottom:28px;right:28px}.weapon+.weapon{margin-top:10px}.key{font-family:var(--mono);color:var(--dim);border:1px solid #ffffff38;padding:0 4px;font-size:10px}#heat.fill{background:linear-gradient(90deg,#ffd23a,#ff6a1a);box-shadow:0 0 10px #ff8c28b3}.weapon.over #heat{background:var(--red);animation:.2s infinite blink}.pips{gap:6px;margin-top:7px;display:flex}.pips i{background:var(--orange);clip-path:polygon(0 0,85% 0,100% 50%,85% 100%,0 100%);flex:1;height:8px;box-shadow:0 0 10px #ff8a2acc}.pips i.off{box-shadow:none;background:#ffffff1f}#crosshair{width:0;height:0;position:absolute;top:50%;left:50%}#crosshair .tick{background:#e9f6ffeb;position:absolute;box-shadow:0 0 6px #3ae4ffd9}#crosshair .t,#crosshair .b{width:2px;height:10px;left:-1px}#crosshair .t{top:-22px}#crosshair .b{top:12px}#crosshair .l,#crosshair .r{width:10px;height:2px;top:-1px}#crosshair .l{left:-22px}#crosshair .r{left:12px}#crosshair .dot{background:#fff;border-radius:50%;width:4px;height:4px;position:absolute;top:-2px;left:-2px}#crosshair.on-target .tick{background:var(--red);box-shadow:0 0 8px var(--red)}#hitmarker{opacity:0;position:absolute;top:0;left:0}#hitmarker i{background:#fff;width:12px;height:2px;position:absolute;top:-1px;left:-6px;box-shadow:0 0 6px #fff}#hitmarker i:first-child{transform:rotate(45deg)translate(15px)}#hitmarker i:nth-child(2){transform:rotate(135deg)translate(15px)}#hitmarker i:nth-child(3){transform:rotate(225deg)translate(15px)}#hitmarker i:nth-child(4){transform:rotate(315deg)translate(15px)}#hitmarker.big i{background:var(--red);box-shadow:0 0 8px var(--red)}#hitmarker.show{animation:.24s ease-out hit}#lock-ring{border:1px dashed #3ae4ff38;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#lock-box{opacity:0;will-change:transform;width:80px;height:80px;transition:opacity .15s;position:absolute;top:0;left:0}#lock-box.visible{opacity:1}#lock-box .c{border:2px solid var(--orange);width:14px;height:14px;position:absolute}#lock-box .tl{border-bottom:none;border-right:none;top:0;left:0}#lock-box .tr{border-bottom:none;border-left:none;top:0;right:0}#lock-box .bl{border-top:none;border-right:none;bottom:0;left:0}#lock-box .br{border-top:none;border-left:none;bottom:0;right:0}#lock-box.idle .c{border-color:#ffffff73}#lock-box.locked .c{border-color:var(--red);box-shadow:0 0 10px var(--red)}#lock-label{font-family:var(--mono);letter-spacing:.2em;color:var(--orange);white-space:nowrap;font-size:11px;position:absolute;top:100%;left:50%;transform:translate(-50%,6px)}#lock-box.idle #lock-label{color:#fff9}#lock-box.locked #lock-label{color:var(--red)}#offscreen{opacity:0;width:0;height:0;position:absolute;top:0;left:0}#offscreen i{border-left:26px solid var(--red);width:0;height:0;filter:drop-shadow(0 0 6px var(--red));border-top:10px solid #0000;border-bottom:10px solid #0000;position:absolute;top:-10px;left:-13px}#offscreen.visible{opacity:.9}.readout{font-family:var(--mono);color:var(--dim);letter-spacing:.1em;font-size:11px;line-height:1.8;position:absolute;top:50%;transform:translateY(-50%)}.readout b{color:var(--text);font-weight:500}#readout-l{text-align:right;right:calc(50% + 74px)}#readout-r{left:calc(50% + 74px)}#heat-warn{color:var(--red);opacity:0}#heat-warn.on{opacity:1;animation:.3s infinite blink}#missile-warning{font-family:var(--mono);letter-spacing:.22em;color:var(--red);opacity:0;white-space:nowrap;background:#ff2d551f;border:1px solid #ff2d5599;padding:6px 18px;font-size:17px;font-weight:700;position:absolute;top:22%;left:50%;transform:translate(-50%)}#missile-warning.on{opacity:1;animation:.35s infinite blink}#vignette-dmg{opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 180px 40px #ff1428d9}#dmg-arcs{width:0;height:0;position:absolute;top:50%;left:50%}.arc{filter:drop-shadow(0 0 8px #ff2840);border-top:5px solid #ff283cf2;border-radius:50%;width:240px;height:240px;animation:1.1s ease-out forwards fade;position:absolute;top:-120px;left:-120px}#center-msg{font-family:var(--mono);letter-spacing:.12em;color:#fff;text-shadow:0 0 30px #3ae4ffe6;opacity:0;white-space:nowrap;font-size:88px;font-weight:900;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}#center-msg.show{animation:.95s ease-out forwards pop}#center-msg.fight{color:var(--orange);text-shadow:0 0 40px #ff8a2af2}#center-msg.win{color:var(--cyan);font-size:54px;animation:2.8s ease-out forwards pophold}#center-msg.lose{color:var(--red);text-shadow:0 0 40px #ff2d55f2;font-size:54px;animation:2.8s ease-out forwards pophold}#fps{font-family:var(--mono);color:#ffffff59;font-size:10px;position:absolute;top:8px;right:10px}@keyframes blink{50%{opacity:.35}}@keyframes fade{0%{opacity:1}to{opacity:0}}@keyframes lowhp{50%{box-shadow:0 0 0 1px var(--red), 0 0 18px var(--red)}}@keyframes hit{0%{opacity:1;transform:scale(1.45)}to{opacity:0;transform:scale(1)}}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(1.8)}15%{opacity:1;transform:translate(-50%,-50%)scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(.96)}}@keyframes pophold{0%{opacity:0;letter-spacing:.5em;transform:translate(-50%,-50%)scale(1.6)}12%{opacity:1;letter-spacing:.14em;transform:translate(-50%,-50%)scale(1)}85%{opacity:1}to{opacity:0}}#overlay{background:radial-gradient(#05080c59,#05080ccc);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}#overlay.menu-mode{background:linear-gradient(90deg,#04060ae0 0%,#04060a73 42%,#04060a00 68%);justify-content:flex-start;padding-left:max(16px,6vw)}.panel{border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));-webkit-backdrop-filter:blur(8px);background:linear-gradient(160deg,#0a1420cc,#060a10a8);width:min(540px,100vw - 32px);max-height:calc(100vh - 32px);padding:32px 36px;overflow:auto}.kicker{font-family:var(--mono);letter-spacing:.35em;color:var(--orange);font-size:11px}h1{font-family:var(--mono);letter-spacing:.05em;color:#fff;text-shadow:0 0 30px #3ae4ff59;margin-top:12px;font-size:62px;font-weight:900;line-height:1}h1 span{color:var(--cyan);margin-left:14px}h2{letter-spacing:.3em;margin-top:10px;font-size:44px;font-weight:700}.subtitle{letter-spacing:.7em;color:var(--dim);margin-top:8px;font-size:22px}.block{margin-top:26px}.label{letter-spacing:.2em;color:var(--dim);font-size:14px}button{cursor:pointer;font-family:inherit}.diff-buttons{gap:8px;margin-top:8px;display:flex}.diff-buttons button{letter-spacing:.2em;color:var(--dim);background:#ffffff0a;border:1px solid #ffffff24;flex:1;padding:9px 0;font-size:16px;font-weight:600;transition:all .15s}.diff-buttons button:hover{color:var(--text);border-color:#ffffff59}.diff-buttons button.active{color:var(--cyan);border-color:var(--cyan);background:#3ae4ff1a;box-shadow:inset 0 0 14px #3ae4ff33}.primary,.secondary{letter-spacing:.3em;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));border:none;padding:14px 18px;font-size:19px;font-weight:700;transition:filter .15s,transform .15s}.primary{color:#061019;background:linear-gradient(90deg, var(--cyan), #a6f5ff)}.secondary{color:var(--text);background:#ffffff14;border:1px solid #fff3}.primary:hover,.secondary:hover{filter:brightness(1.15);transform:translateY(-1px)}#start-btn{margin-top:14px}#online-btn{margin-top:24px}.wide{width:100%;display:block}.small{letter-spacing:.15em;padding:8px 14px;font-size:14px}.field{width:100%;color:var(--text);-webkit-user-select:text;user-select:text;background:#ffffff0d;border:1px solid #ffffff2e;outline:none;margin-top:8px;padding:11px 12px;font-family:inherit;font-size:17px;font-weight:600}.field:focus{border-color:var(--cyan);box-shadow:0 0 0 1px #3ae4ff4d}.field.code{text-transform:uppercase;letter-spacing:.35em;text-align:center;font-family:var(--mono);margin-top:0}#online-home{margin-top:22px}.divider{color:var(--dim);letter-spacing:.2em;align-items:center;gap:12px;margin:18px 0 14px;font-size:13px;display:flex}.divider:before,.divider:after{content:"";background:#ffffff1f;flex:1;height:1px}.join-row{grid-template-columns:1fr .9fr auto;align-items:stretch;gap:8px;display:grid}.join-row .secondary{letter-spacing:.15em;padding:11px 14px;font-size:16px}#online-wait{margin-top:22px}#room-code{font-family:var(--mono);letter-spacing:.25em;color:var(--cyan);text-shadow:0 0 30px #3ae4ff8c;-webkit-user-select:text;user-select:text;margin:4px 0 10px;font-size:64px;font-weight:900}.wait-row{letter-spacing:.08em;align-items:center;gap:12px;margin-top:18px;font-size:18px;font-weight:600;display:flex}.spinner{border:2px solid #3ae4ff40;border-top-color:var(--cyan);border-radius:50%;width:18px;height:18px;animation:.9s linear infinite spin}#cancel-btn{margin-top:16px}.status{min-height:22px;color:var(--cyan);letter-spacing:.05em;word-break:break-all;margin-top:14px;font-size:15px}.status.error{color:var(--red)}@keyframes spin{to{transform:rotate(360deg)}}#toast{letter-spacing:.1em;color:var(--text);border:1px solid var(--line);opacity:0;pointer-events:none;z-index:10;background:#08101ad9;padding:10px 22px;font-size:17px;font-weight:600;transition:opacity .25s,transform .25s;position:fixed;top:92px;left:50%;transform:translate(-50%,-10px)}#toast.on{opacity:1;transform:translate(-50%)}.btn-row{gap:10px;margin-top:24px;display:flex}.btn-row>*{flex:1}.controls{color:var(--dim);grid-template-columns:1fr 1fr;gap:9px 18px;margin-top:22px;font-size:15px;display:grid}kbd{font-family:var(--mono);color:var(--text);background:#ffffff0d;border:1px solid #ffffff40;border-bottom-width:2px;margin-right:7px;padding:2px 6px;font-size:10px;display:inline-block}.tip{color:#7f9db1;margin-top:18px;font-size:14px;line-height:1.6}.stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;display:grid}.stats div{border-left:2px solid var(--line);background:#ffffff0a;padding:10px 12px}.stats span{color:var(--dim);letter-spacing:.1em;font-size:13px;display:block}.stats b{font-family:var(--mono);font-size:20px;font-weight:500}#result.win h2{color:var(--cyan);text-shadow:0 0 24px #3ae4ff99}#result.lose h2{color:var(--red);text-shadow:0 0 24px #ff2d5599}#loading{font-family:var(--mono);letter-spacing:.3em;color:var(--dim);font-size:13px;animation:1s infinite blink}#loading.error{color:var(--red);letter-spacing:0;max-width:640px;font-family:inherit;font-size:16px;line-height:1.6;animation:none}@media (max-width:760px){.controls{grid-template-columns:1fr}h1{font-size:42px}#player-panel,#weapon-panel{width:calc(50vw - 24px);bottom:12px}#player-panel{left:12px}#weapon-panel{right:12px}#center-msg{font-size:56px}}
