:root{
  --bg:#070a12; --hud:#e7f0ff; --muted:#9db3d1;
}
html,body{height:100%;margin:0;background:var(--bg);color:var(--hud);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
body{overflow:hidden;}
#game{position:fixed;inset:0;display:grid;place-items:stretch;}
canvas{width:100%;height:100%;display:block;
  background:radial-gradient(1100px 700px at 20% 25%, #0b1222, #060910 60%);}

/* HUD */
.hud{position:fixed;inset:0;pointer-events:none;}
.top{position:absolute;top:12px;left:12px;display:flex;gap:10px;}
.panel{pointer-events:auto;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);padding:8px 12px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.3);}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.label{color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;}
.value{font-variant-numeric:tabular-nums;font-weight:700;}
.bar{width:160px;height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;}
.bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#84cc16);transition:background .25s ease,box-shadow .25s ease;}
.bar i.fuel-hot{background:linear-gradient(90deg,#fb923c,#f97316);box-shadow:0 0 12px rgba(249,115,22,.55);}

.right{position:absolute;top:12px;right:12px;display:grid;gap:10px;}
.mini{width:200px;height:140px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.2);overflow:hidden;}
.legend{display:flex;gap:8px;font-size:12px;color:var(--muted);justify-content:flex-end;align-items:center;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}

.bottom{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;text-align:center;}
.hint{font-size:13px;opacity:.9;}
kbd{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-bottom-width:2px;
  padding:2px 6px;border-radius:6px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.3);}
.lore-indicator{position:absolute;top:12px;left:50%;transform:translate(-50%,-10px);padding:6px 14px;
  background:rgba(15,23,42,.78);border:1px solid rgba(147,197,253,.45);border-radius:999px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#dbeafe;box-shadow:0 8px 24px rgba(15,23,42,.45);
  opacity:0;pointer-events:auto;cursor:pointer;transition:opacity .25s ease,transform .25s ease;}
.lore-indicator.show{opacity:1;transform:translate(-50%,0);}
.lore-indicator:focus-visible{outline:2px solid #38bdf8;outline-offset:2px;}

/* overlay */
.overlay{position:fixed;top:18px;left:50%;transform:translate(-50%,-12px);display:flex;
  justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  background:none;z-index:40;}
.overlay.show{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.overlay .card{width:min(420px,calc(100vw - 32px));background:rgba(8,12,16,.85);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 20px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);animation:pop .14s ease-out;pointer-events:auto;}
@keyframes pop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}
.overlay .card h1{margin:0 0 6px;font-size:clamp(18px,2.6vw,28px);}
.overlay .card p{margin:6px 0 12px;color:var(--muted);}
.btns{display:flex;gap:10px;flex-wrap:wrap;}
.btn{pointer-events:auto;user-select:none;background:#101823;color:var(--hud);
  border:1px solid rgba(255,255,255,.12);padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#1f7ae0,#2650b6);border-color:rgba(255,255,255,.18);}

/* touch */
.touch{position:fixed;inset:0;pointer-events:none;}
.stick{position:absolute;width:110px;height:110px;border-radius:50%;border:1px dashed rgba(255,255,255,.2);
  left:18px;bottom:18px;display:grid;place-items:center;pointer-events:auto;}
.stick i{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);}
.thrust{position:absolute;right:18px;bottom:18px;width:120px;height:120px;border-radius:50%;
  display:grid;place-items:center;pointer-events:auto;}
.thrust button{width:92px;height:92px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(circle at 40% 35%, #2a3a55, #0f1623);color:var(--hud);font-weight:900;letter-spacing:.06em;}
.thrust button.active{background:radial-gradient(circle at 40% 35%, #facc15, #b45309);
  box-shadow:0 0 16px rgba(250,204,21,.7), inset 0 0 14px rgba(250,204,21,.35);color:#111;border-color:rgba(250,204,21,.9);}
@media (hover:none) and (pointer:coarse){.panel.hide-on-mobile{display:none}}

/* start screen */
.start-screen{position:fixed;inset:0;display:flex;justify-content:center;align-items:flex-start;
  padding-top:clamp(48px,12vh,180px);background:url('astro.bmp') center/cover no-repeat;
  color:#fff;text-shadow:0 0 20px rgba(0,0,0,.75);z-index:1000;transition:opacity .3s ease;
  cursor:pointer;}
.start-screen.hidden{opacity:0;pointer-events:none;}
.start-screen h1{margin:0;font-size:clamp(32px,7vw,96px);letter-spacing:.08em;}

/* escape dialog */
.esc-dialog{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1010;}
.esc-dialog.show{opacity:1;pointer-events:auto;}
.esc-dialog .dialog-card{width:min(420px,calc(100vw - 40px));background:rgba(8,12,16,.92);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;box-shadow:0 22px 60px rgba(0,0,0,.45);}
.esc-dialog p{margin:0;color:var(--hud);line-height:1.6;}
.esc-dialog .dialog-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}

/* menus */
.menu-panel{width:min(680px,calc(100vw - 40px));margin:0 auto;background:rgba(8,12,16,.9);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px 28px;
  box-shadow:0 26px 70px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:18px;}
.menu-panel h2{margin:0;font-size:clamp(24px,4vw,36px);letter-spacing:.04em;}
.menu-panel .menu-small{color:var(--muted);line-height:1.6;margin:0;}
.menu-panel button{align-self:flex-end;background:linear-gradient(180deg,#1f7ae0,#2650b6);
  border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 18px;color:var(--hud);
  font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.menu-panel button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,99,235,.35);}
.menu-panel button:focus-visible{outline:2px solid #38bdf8;outline-offset:3px;}

.guide-panel{gap:20px;}
.guide-panel .lead{font-size:15px;letter-spacing:.02em;}
.guide-layout{display:flex;gap:20px;flex-wrap:wrap;}
.guide-steps{flex:1 1 280px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.guide-steps li{background:rgba(15,23,42,.65);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 16px;box-shadow:0 12px 32px rgba(8,12,16,.5);}
.guide-steps h3{margin:0 0 6px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#dbeafe;}
.guide-steps p{margin:0;color:var(--muted);line-height:1.55;font-size:14px;}

.guide-card{flex:1 1 220px;background:rgba(15,23,42,.7);border:1px solid rgba(147,197,253,.25);
  border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 14px 36px rgba(8,12,16,.48);}
.guide-card h3{margin:0;font-size:17px;color:#f8fafc;letter-spacing:.04em;}
.guide-card dl{margin:0;display:grid;gap:10px;}
.guide-card dl div{display:grid;grid-template-columns:88px 1fr;gap:8px;color:var(--muted);font-size:14px;}
.guide-card dt{font-weight:600;color:#dbeafe;}
.guide-card dd{margin:0;}
.guide-card .menu-small{font-size:13px;}

.guide-callouts{display:flex;flex-wrap:wrap;gap:12px;}
.guide-callout{flex:1 1 180px;background:rgba(15,23,42,.58);border:1px solid rgba(148,163,184,.22);
  border-radius:12px;padding:12px 16px;color:var(--muted);font-size:14px;line-height:1.55;}
.guide-callout h4{margin:0 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#bfdbfe;}
.guide-callout p{margin:0;}

.guide-back{align-self:flex-end;background:linear-gradient(180deg,#2563eb,#1d4ed8);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 20px;color:#f8fafc;
  font-weight:700;cursor:pointer;box-shadow:0 12px 28px rgba(37,99,235,.35);}
.guide-back:hover{box-shadow:0 16px 32px rgba(37,99,235,.45);}
.guide-back:focus-visible{outline:2px solid #38bdf8;outline-offset:3px;}

@media (max-width:640px){
  .menu-panel{padding:20px;gap:16px;}
  .guide-layout{flex-direction:column;}
  .guide-card dl div{grid-template-columns:1fr;}
  .guide-back{align-self:stretch;text-align:center;}
}