:root{--cy:#00f0ff;--mg:#ff2bd6;--gd:#ffd23f;--bg:#05040c}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:#e8f8ff;font-family:'Space Mono',monospace;touch-action:none;user-select:none;-webkit-user-select:none}
#canvas{position:fixed;inset:0;display:block;cursor:crosshair}
.panel{background:rgba(10,14,30,.55);backdrop-filter:blur(8px);border:1px solid rgba(0,240,255,.35);box-shadow:0 0 18px rgba(0,240,255,.15),inset 0 0 20px rgba(255,43,214,.05);border-radius:10px}
.hud{position:fixed;padding:8px 12px;font-size:13px;z-index:5;pointer-events:none}
.lbl{display:block;font-size:9px;letter-spacing:3px;color:var(--cy);opacity:.8}
#hud-credits{top:12px;left:12px}
#credits{font-family:Orbitron;font-weight:900;font-size:26px;color:var(--gd);text-shadow:0 0 12px rgba(255,210,63,.6)}
#hud-cargo{top:12px;right:12px;width:180px}
#hud-cargo.full{border-color:#ff3b3b;animation:wob .3s infinite}
@keyframes wob{0%,100%{transform:rotate(0)}50%{transform:rotate(1.5deg)}}
.bar{height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin:4px 0}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy),var(--mg));transition:width .2s}
#hud-cargo.full .bar i{background:#ff3b3b}
#hud-fuel{bottom:12px;left:12px;width:200px}
#fuelBar{background:linear-gradient(90deg,#ff7a00,var(--gd))!important}
#minimap{position:fixed;bottom:12px;right:12px;z-index:5;border-radius:50%}
#dockBtn{position:fixed;bottom:170px;left:50%;transform:translateX(-50%);z-index:6;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 30px var(--cy)}}
#muteBtn{position:fixed;top:80px;left:12px;z-index:6}
.iconbtn{background:rgba(0,0,0,.4);border:1px solid rgba(0,240,255,.3);color:var(--cy);font:10px 'Space Mono';padding:4px 8px;border-radius:6px;cursor:pointer;letter-spacing:2px}
.glowbtn{font-family:Orbitron;font-weight:900;letter-spacing:3px;background:transparent;color:var(--cy);border:2px solid var(--cy);padding:12px 26px;border-radius:8px;cursor:pointer;box-shadow:0 0 14px rgba(0,240,255,.4);font-size:14px}
.glowbtn:hover{background:rgba(0,240,255,.12)}
.hidden{display:none!important}
#joy{position:fixed;width:120px;height:120px;border-radius:50%;border:2px solid rgba(0,240,255,.35);z-index:4;pointer-events:none;transform:translate(-50%,-50%)}
#joyKnob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(0,240,255,.35)}
#toasts{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{padding:8px 16px;background:rgba(255,43,214,.18);border:1px solid var(--mg);border-radius:8px;font-size:12px;animation:tin .4s ease,tout .5s ease 3s forwards;text-align:center}
.toast b{font-family:Orbitron;color:var(--gd)}
@keyframes tin{from{opacity:0;transform:translateY(-20px)}}
@keyframes tout{to{opacity:0;transform:translateY(-20px)}}
#auth-status{position:fixed;top:12px;left:50%;transform:translateX(-50%);font-size:10px;opacity:.6;z-index:5}
#auth-status a{color:var(--cy)}
#remix{position:fixed;bottom:4px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(255,255,255,.4);z-index:30;text-decoration:none}
#remix:hover{color:var(--mg)}

#shop,#intro{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(2,0,10,.7);padding:12px}
#shop::after,#intro::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.shop-inner{width:min(860px,100%);max-height:92vh;overflow:auto;padding:22px;animation:tin .35s}
.shop-inner h1{font-family:Orbitron;font-weight:900;font-size:clamp(20px,4vw,34px);color:var(--cy);letter-spacing:4px}
.shop-inner h1 small{font:10px 'Space Mono';color:var(--mg);letter-spacing:1px}
.shop-inner h2{font-family:Orbitron;font-size:12px;letter-spacing:3px;color:var(--mg);margin:18px 0 8px}
.qm{display:flex;gap:12px;align-items:center;margin:14px 0}
.bot{font-family:Orbitron;font-size:18px;color:var(--gd);background:#111;border:2px solid var(--gd);border-radius:8px;padding:8px 10px;flex-shrink:0}
.bubble{position:relative;background:rgba(255,210,63,.08);border:1px solid rgba(255,210,63,.4);border-radius:10px;padding:10px 14px;font-size:13px;font-style:italic}
.sellrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.sell{font-family:Orbitron;font-weight:900;font-size:16px;letter-spacing:2px;padding:16px 22px;border-radius:10px;border:none;cursor:pointer;color:#120a00;background:linear-gradient(135deg,var(--gd),#ff9d00);box-shadow:0 0 22px rgba(255,210,63,.5)}
.sell:disabled{filter:grayscale(1);opacity:.5;cursor:default}
.wallet b{font-family:Orbitron;color:var(--gd);font-size:20px}
#upgrades{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.card{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px;background:rgba(255,255,255,.03);cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:5px}
.card.can{border-color:var(--cy);box-shadow:0 0 12px rgba(0,240,255,.3)}
.card.can:hover{transform:translateY(-2px);background:rgba(0,240,255,.08)}
.card.no{opacity:.45;cursor:not-allowed}
.card.max{border-color:var(--mg);cursor:default}
.card .t{font-family:Orbitron;font-weight:900;font-size:13px;letter-spacing:1px;display:flex;justify-content:space-between}
.card .t span{color:var(--mg);font-size:11px}
.card .d{font-size:11px;opacity:.7;flex:1}
.card .c{font-family:Orbitron;color:var(--gd);font-size:14px}
.pips{display:flex;gap:3px}.pips i{flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:2px}.pips i.on{background:var(--cy)}
#board{padding-left:22px;font-size:12px;line-height:1.8}
#board li b{color:var(--gd)}
.shopfoot{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.ghost{background:none;border:none;color:rgba(255,255,255,.4);font:11px 'Space Mono';cursor:pointer;text-decoration:underline}
.intro-inner{max-width:480px;padding:30px;text-align:center}
.intro-inner h1{font-family:Orbitron;font-weight:900;font-size:clamp(34px,9vw,56px);line-height:.95;color:var(--cy);text-shadow:0 0 24px rgba(0,240,255,.5)}
.intro-inner h1 span{color:var(--mg);font-weight:400;letter-spacing:12px;font-size:.5em}
.intro-inner p{margin:16px 0;font-size:13px;opacity:.85}
.keys{font-size:11px!important;color:var(--gd)}
@media(max-width:600px){#hud-cargo{width:130px}#hud-fuel{width:140px}#minimap{width:100px;height:100px}#credits{font-size:20px}#dockBtn{bottom:130px}}