*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#04060f;--panel:rgba(10,16,32,.92);--accent:#38e1ff;--accent2:#a78bfa;--txt:#e8f1ff}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,10,.55) 100%)}
#hit-flash{position:fixed;inset:0;pointer-events:none;z-index:60;background:rgba(255,77,109,0);transition:background-color .12s;display:none}
#hit-flash.active{display:block;background:rgba(255,77,109,.45)}
#warp-lines{position:fixed;inset:0;pointer-events:none;opacity:0;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(120,220,255,.25) 46px 48px);transition:opacity .3s}
#warp-lines.on{opacity:1;animation:warp .4s linear infinite}
@keyframes warp{to{transform:scaleX(1.4)}}
#hud-top{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:linear-gradient(180deg,rgba(0,0,10,.75),transparent);z-index:20;font-size:14px;flex-wrap:wrap}
.hud-brand b{color:var(--accent)}
.hud-stats{display:flex;gap:12px;background:rgba(0,10,25,.55);padding:6px 12px;border-radius:20px;border:1px solid rgba(56,225,255,.25)}
.hud-btns{display:flex;gap:6px}
.hud-btns button,.warp-btn,#btn-boost,#btn-warpdrive,#pp-warp,#pp-refuel,#btn-stop-nav,#btn-launch,#help-close{background:#0c1830;color:var(--txt);border:1px solid rgba(56,225,255,.4);border-radius:10px;padding:7px 11px;cursor:pointer;font-size:14px}
.hud-btns button:hover,.warp-btn:hover,#btn-boost:hover,#btn-warpdrive:hover{border-color:var(--accent);box-shadow:0 0 12px rgba(56,225,255,.4)}
.warp-btn.active{background:var(--accent);color:#00131c;font-weight:700}
.warp-btn:disabled{opacity:.42;cursor:not-allowed;border-style:dashed;box-shadow:none}
#hud-bottom{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:linear-gradient(0deg,rgba(0,0,10,.8),transparent);z-index:20;font-size:13px;flex-wrap:wrap}
#hull-wrap{min-width:160px;flex:1;max-width:240px}
#hull-bar{height:10px;background:#180d16;border-radius:6px;overflow:hidden;border:1px solid rgba(255,107,74,.4)}
#hull-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff4d6d,#ffb648,#38e1ff);transition:width .2s}
#hull-wrap.hit #hull-fill{background:#ff4d6d!important;box-shadow:0 0 16px #ff4d6d}
#hull-wrap.hit{outline:3px solid #ff4d6d;outline-offset:-2px}
#fuel-wrap{min-width:200px;flex:1;max-width:300px}
#fuel-bar{height:10px;background:#122;border-radius:6px;overflow:hidden;border:1px solid rgba(56,225,255,.3)}
#fuel-fill{height:100%;width:100%;background:linear-gradient(90deg,#22c55e,#38e1ff);transition:width .2s}
#respawn-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:70;pointer-events:none;background:radial-gradient(circle,rgba(255,60,90,.16),rgba(2,4,12,.38))}
.respawn-card{background:linear-gradient(180deg,rgba(30,8,18,.96),rgba(8,6,18,.96));border:1px solid rgba(255,77,109,.65);border-radius:18px;padding:22px 30px;text-align:center;box-shadow:0 0 50px rgba(255,77,109,.28);max-width:92vw}
.respawn-card h2{color:#ff8aa0;font-size:clamp(20px,5vw,30px);margin-bottom:8px;letter-spacing:.5px}
.respawn-card p{font-size:clamp(15px,3.6vw,20px);margin-bottom:6px}
.respawn-card b{color:#ffd166;font-size:1.35em}
.respawn-card small{opacity:.7}
#warp-wrap{display:flex;gap:6px;align-items:center}
#btn-warpdrive.on,#btn-boost.on{background:var(--accent2);color:#0b0618;font-weight:700}
#ctrl-hint{opacity:.7}
#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;color:rgba(255,255,255,.8);z-index:15;pointer-events:none;text-shadow:0 0 6px #000;transition:color .12s,transform .12s}
#crosshair.locked{color:#ff4d6d;text-shadow:0 0 10px #ff4d6d}
#crosshair.hit{color:#ffe066;transform:translate(-50%,-50%) scale(1.45)}
#aim-hud{position:fixed;left:50%;top:calc(50% + 24px);transform:translateX(-50%);min-width:180px;max-width:240px;background:rgba(4,12,26,.82);border:1px solid rgba(56,225,255,.45);border-radius:9px;padding:6px 9px;z-index:15;pointer-events:none;text-align:center;font-size:12px}
#aim-name{display:block;font-weight:700;color:#dff6ff;margin-bottom:4px}
#aim-bar{height:5px;background:rgba(255,255,255,.14);border-radius:4px;overflow:hidden}
#aim-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff4d6d,#ffb648);transition:width .12s}
#aim-hp{display:block;margin-top:3px;opacity:.75;font-size:10px;letter-spacing:.5px}
#planet-list button:disabled{opacity:.45;cursor:not-allowed;border-style:dashed}
#toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--accent);padding:8px 16px;border-radius:12px;z-index:40;display:none;max-width:calc(100vw - 24px);width:max-content;text-align:center;line-height:1.4}
@media (pointer:coarse){#toast{top:126px;font-size:13px;max-width:calc(100vw - 20px)}}
#prompt-info{position:fixed;top:64px;left:12px;max-width:min(46vw,340px);background:rgba(20,40,80,.9);padding:8px 16px;border-radius:12px;border:1px solid var(--accent);z-index:25;display:none;box-shadow:0 0 14px rgba(56,225,255,.2)}
@media (pointer:coarse){ #prompt-info{top:80px;left:10px;max-width:52vw;font-size:12px;padding:6px 12px} }
.hidden{display:none!important}
#planet-panel,#map-panel{position:fixed;right:12px;top:60px;width:330px;max-width:92vw;max-height:82vh;overflow:auto;background:var(--panel);border:1px solid rgba(56,225,255,.4);border-radius:16px;padding:16px;z-index:50;backdrop-filter:blur(8px)}
#planet-panel h2,#map-panel h2{color:var(--accent)}
#pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0;font-size:13px}
#pp-grid div{background:rgba(255,255,255,.06);padding:6px 8px;border-radius:8px}
#pp-desc{font-size:14px;opacity:.9;margin:6px 0}
#pp-facts{margin:8px 0 8px 18px;font-size:13px}
.pp-actions{display:flex;gap:8px;margin:8px 0}
#planet-list{display:grid;gap:6px;margin:8px 0}
#planet-list button{text-align:left;background:#0c1830;color:var(--txt);border:1px solid rgba(167,139,250,.4);border-radius:10px;padding:8px;cursor:pointer}
#planet-list button.visited{border-color:#22c55e}
#planet-list button.target{border-color:var(--accent);background:#123}
#planet-list h4.planet-group{margin:10px 0 2px;font-size:12px;letter-spacing:.5px;color:#9fb6d8;text-transform:uppercase}
#minimap{background:#02040c;border:1px solid rgba(56,225,255,.3);border-radius:12px;width:100%}
#splash,#help-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,4,12,.72);z-index:100;padding:16px;overflow:auto}
.splash-card{background:linear-gradient(180deg,#0a1330,#060a1c);border:1px solid rgba(56,225,255,.45);border-radius:20px;padding:26px;max-width:620px;width:100%;box-shadow:0 0 60px rgba(56,225,255,.15)}
.splash-card h1{color:var(--accent);margin-bottom:8px}
.splash-card p{margin:8px 0;font-size:15px}
.splash-card label{display:block;margin:12px 0 6px;font-weight:700}
.small{font-size:12px;opacity:.7}
.pilot-fields{display:grid;gap:5px;margin:10px 0 4px}
.pilot-fields label{margin-top:6px}
.pilot-fields input{width:100%;background:#071226;color:var(--txt);border:1px solid rgba(56,225,255,.35);border-radius:10px;padding:10px 12px;font:inherit;outline:none}
.pilot-fields input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,225,255,.12)}
.pilot-fields input::placeholder{color:#7d90ab}
@media (pointer:coarse){.pilot-fields input{font-size:16px}}
#room-select{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:6px;background:rgba(255,255,255,.04);border:1px solid rgba(56,225,255,.2);border-radius:12px}
#room-select .room-btn{min-width:0;min-height:42px;background:transparent;color:#cfe6ff;border:1px solid transparent;border-radius:9px;padding:8px 4px;cursor:pointer;font:inherit;font-weight:700;font-size:13px;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
#room-select .room-btn:hover{background:rgba(56,225,255,.1);border-color:rgba(56,225,255,.4)}
#room-select .room-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#room-select .room-btn.active{background:linear-gradient(180deg,#12314f,#0d2440);border-color:var(--accent);color:#fff;box-shadow:0 0 14px rgba(56,225,255,.25)}
@media (max-width:480px){#room-select{gap:3px;padding:4px}#room-select .room-btn{min-height:40px;font-size:11px;padding:6px 1px;white-space:nowrap;letter-spacing:-.2px}}
@media (pointer:coarse){#room-select .room-btn{font-size:12px;white-space:nowrap}}
@media (max-width:380px){#room-select{grid-template-columns:repeat(3,minmax(0,1fr))}}
.field-hint{font-size:11px;opacity:.62}
.req{color:#ff6b8a}
.optional{font-weight:400;opacity:.6}
.lobby-note{margin-top:7px;padding:8px 10px;border-radius:9px;background:rgba(56,225,255,.08);border:1px solid rgba(56,225,255,.25);font-size:12px;line-height:1.4}
.lobby-note.online{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.45);color:#b6ffd0}
.lobby-note.offline{background:rgba(255,182,72,.1);border-color:rgba(255,182,72,.45);color:#ffd899}
#btn-launch:disabled{opacity:.45;cursor:not-allowed;filter:none}
#rocket-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#rocket-select button{min-width:0;min-height:46px;background:#0c1830;color:var(--txt);border:1px solid rgba(56,225,255,.35);border-radius:12px;padding:10px 6px;cursor:pointer;font:inherit;line-height:1.2}
#rocket-select button.active{border-color:var(--accent);background:#12314f;box-shadow:0 0 12px rgba(56,225,255,.2)}
@media (max-width:480px){#rocket-select{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#rocket-select button{font-size:12px;padding:9px 4px}}
#btn-launch{width:100%;margin-top:14px;font-size:18px;font-weight:800;background:linear-gradient(90deg,#0891b2,#7c3aed);border:none;padding:14px;border-radius:14px}
#btn-launch:not(:disabled):hover{filter:brightness(1.2)}
#mobile-controls{display:none}
@media (pointer:coarse){
 #mobile-controls{display:block}
 #ctrl-hint{display:none}
 #hud-bottom{gap:6px;padding:6px 10px;font-size:12px}
 #hull-wrap,#fuel-wrap{min-width:120px;max-width:none}
 #joy-left{position:fixed;left:16px;bottom:90px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(56,225,255,.4);z-index:30}
 #joy-right{position:fixed;right:16px;bottom:90px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(167,139,250,.55);z-index:30}
 #joy-knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(56,225,255,.5)}
 #joy-knob2{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(167,139,250,.55)}
 #mobile-btns{position:fixed;right:8px;bottom:380px;display:flex;flex-direction:column;gap:22px;z-index:30}
 #mobile-btns button{width:56px;height:56px;border-radius:50%;font-size:20px;background:rgba(12,24,48,.85);color:#fff;border:1px solid var(--accent);touch-action:none}
 #m-fire{position:fixed;right:150px;bottom:190px;width:64px;height:64px;border-radius:50%;font-size:26px;background:radial-gradient(circle,#ff4d6d,#7c1d3a);color:#fff;border:2px solid #ffb648;z-index:31;touch-action:none;box-shadow:0 0 18px rgba(255,77,109,.5)}
}
