:root{
  --bg:#05070f; --panel:rgba(10,16,30,0.86); --panel-solid:#0a1020;
  --border:#1d3a63; --accent:#7fdfff; --accent2:#ffd27f; --danger:#ff6b6b;
  --good:#7fffa0; --text:#cfe4ff; --dim:#7f94b5; --font:'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden;user-select:none;}
canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5;}
#hud .panel,#hud button,#hud input,#hud .win{pointer-events:auto;}

.topbar{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:12px;display:flex;gap:6px;align-items:center;backdrop-filter:blur(4px);}
.stat b{color:var(--accent);font-variant-numeric:tabular-nums;}
.bar{width:70px;height:8px;background:#12203a;border-radius:4px;overflow:hidden;position:relative;}
.bar>i{display:block;height:100%;transition:width .15s;}
.bar.fuel>i{background:linear-gradient(90deg,#ffd27f,#ff9d5c);}
.bar.armour>i{background:linear-gradient(90deg,#7fffa0,#5ce0ff);}
.bar.boost>i{background:linear-gradient(90deg,#c79fff,#7fdfff);}
.sector{font-weight:700;color:var(--accent2);letter-spacing:1px;}

.btnrow{position:absolute;top:8px;right:8px;display:flex;gap:6px;flex-wrap:wrap;max-width:60vw;justify-content:flex-end;}
button.hbtn{background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:7px 11px;font-size:12px;cursor:pointer;backdrop-filter:blur(4px);}
button.hbtn:hover{border-color:var(--accent);color:#fff;}
button.hbtn.on{border-color:var(--accent);background:rgba(40,90,150,.5);}

/* ---------- Windows ---------- */
.win{position:absolute;background:var(--panel);border:1px solid var(--border);border-radius:10px;
  min-width:240px;max-width:min(92vw,440px);max-height:70vh;display:none;flex-direction:column;
  box-shadow:0 8px 40px rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:10;}
.win.show{display:flex;}
.win .wh{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);cursor:move;}
.win .wh h3{margin:0;font-size:13px;color:var(--accent);letter-spacing:.5px;}
.win .wh .x{cursor:pointer;color:var(--dim);font-size:18px;line-height:1;padding:0 4px;}
.win .wh .x:hover{color:var(--danger);}
.win .wb{padding:10px;overflow:auto;font-size:13px;}

#winServer{top:56px;left:8px;width:230px;}
#winChat{bottom:8px;left:8px;width:300px;height:280px;}
#winMap{top:56px;left:50%;transform:translateX(-50%);width:min(90vw,560px);}
#winMarket,#winShip,#winBase{top:56px;right:8px;width:300px;}

.plist{list-style:none;margin:0;padding:0;}
.plist li{display:flex;align-items:center;gap:8px;padding:4px 2px;border-bottom:1px solid rgba(29,58,99,.4);font-size:12px;}
.dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 6px currentColor;}
.plist .sec{margin-left:auto;color:var(--dim);font-size:11px;}
.grp-tag{font-size:10px;background:#243a5e;padding:1px 5px;border-radius:4px;color:var(--accent2);}

/* chat */
#chatlog{flex:1;overflow:auto;font-size:12px;line-height:1.4;}
#chatlog .m{margin:2px 0;word-wrap:break-word;}
#chatlog .m b{font-weight:600;}
.chatinput{display:flex;gap:5px;margin-top:6px;}
.chatinput input{flex:1;background:#0a1526;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 8px;font-size:12px;}
.chatinput button{background:#1d3a63;border:none;color:#fff;border-radius:6px;padding:0 10px;cursor:pointer;}
.tabs{display:flex;gap:4px;margin-bottom:6px;}
.tabs button{flex:1;background:#0a1526;border:1px solid var(--border);color:var(--dim);border-radius:6px;padding:4px;font-size:11px;cursor:pointer;}
.tabs button.on{color:#fff;border-color:var(--accent);background:#12294a;}

/* market/ship tables */
table{width:100%;border-collapse:collapse;font-size:12px;}
th,td{text-align:left;padding:4px 5px;border-bottom:1px solid rgba(29,58,99,.4);}
th{color:var(--dim);font-weight:600;}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;}
.mini{background:#1d3a63;border:none;color:#fff;border-radius:5px;padding:3px 7px;cursor:pointer;font-size:11px;margin:1px;}
.mini:hover{background:#2a5590;}
.mini.sell{background:#5e3a3a;} .mini.sell:hover{background:#8a5555;}
.mini.buy{background:#3a5e42;} .mini.buy:hover{background:#55895f;}

/* map canvas */
#mapCanvas{width:100%;background:#03050c;border-radius:6px;display:block;image-rendering:pixelated;}
.maplegend{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--dim);margin-top:6px;}
.maplegend span{display:flex;align-items:center;gap:3px;}

/* ---------- mobile touch controls ---------- */
#touch{position:absolute;inset:0;z-index:4;display:none;pointer-events:none;}
#touch.on{display:block;}
#joy{position:absolute;left:20px;bottom:20px;width:120px;height:120px;border-radius:50%;
  background:rgba(30,58,99,.25);border:2px solid var(--border);pointer-events:auto;}
#joy .nub{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(127,223,255,.4);border:2px solid var(--accent);}
.tbtn{position:absolute;width:66px;height:66px;border-radius:50%;background:rgba(30,58,99,.35);border:2px solid var(--border);
  color:var(--text);font-size:11px;display:flex;align-items:center;justify-content:center;pointer-events:auto;text-align:center;}
#tFire{right:24px;bottom:96px;background:rgba(94,58,58,.4);border-color:#8a5555;}
#tBoost{right:100px;bottom:32px;background:rgba(94,58,94,.4);border-color:#8a55a0;}
#tZoomIn{right:24px;bottom:170px;width:50px;height:50px;font-size:20px;}
#tZoomOut{right:24px;bottom:24px;width:50px;height:50px;font-size:20px;}

/* ---------- login / start overlay ---------- */
#overlay{position:absolute;inset:0;z-index:50;background:radial-gradient(ellipse at center,#0a1430 0%,#03050c 100%);
  display:flex;align-items:center;justify-content:center;}
.card{background:var(--panel-solid);border:1px solid var(--border);border-radius:14px;padding:22px;width:min(94vw,380px);
  box-shadow:0 10px 60px rgba(0,0,0,.7);}
.card h1{margin:0 0 4px;font-size:26px;letter-spacing:3px;color:var(--accent);text-align:center;text-shadow:0 0 20px rgba(127,223,255,.4);}
.card .sub{text-align:center;color:var(--dim);font-size:12px;margin-bottom:16px;letter-spacing:1px;}
.card label{display:block;font-size:11px;color:var(--dim);margin:10px 0 3px;text-transform:uppercase;letter-spacing:.5px;}
.card input{width:100%;background:#0a1526;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 11px;font-size:14px;}
.card .colors{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px;}
.card .colors .c{width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid transparent;}
.card .colors .c.sel{border-color:#fff;}
.card button.go{width:100%;margin-top:16px;background:linear-gradient(90deg,#1d5a8a,#2a8aa0);border:none;color:#fff;
  border-radius:8px;padding:12px;font-size:15px;font-weight:600;cursor:pointer;letter-spacing:1px;}
.card button.go:hover{filter:brightness(1.15);}
.card .alt{text-align:center;margin-top:12px;font-size:12px;color:var(--dim);}
.card .alt a{color:var(--accent);cursor:pointer;}
.card .err{color:var(--danger);font-size:12px;margin-top:8px;text-align:center;min-height:14px;}
.hidden{display:none!important;}

.toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(10,16,30,.95);
  border:1px solid var(--accent);color:#fff;padding:14px 22px;border-radius:10px;z-index:40;font-size:14px;
  opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;max-width:80vw;}
.toast.show{opacity:1;}

.ctxhint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:var(--panel);
  border:1px solid var(--accent);border-radius:8px;padding:7px 14px;font-size:12px;z-index:6;display:none;}
.ctxhint.show{display:block;}

@media (max-width:640px){
  #winChat{width:calc(100vw - 16px);height:200px;}
  #winServer{width:180px;}
  .btnrow{max-width:100vw;}
  button.hbtn{padding:6px 8px;font-size:11px;}
  .stat{font-size:11px;padding:4px 7px;}
}
.small{font-size:11px;color:var(--dim);}
.creditline{color:var(--accent2);font-weight:600;}