:root{
  --bg:#07070b;
  --fg:#e7e7ff;
  --muted:#a2a2c7;
  --panel:#101024;
  --accent:#7af0ff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 800px at 50% 30%, #14143a 0%, var(--bg) 55%, #050509 100%);
  color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.wrap{ max-width: 740px; margin: 0 auto; padding: 14px 14px 26px; }

.topbar{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
.brand{ font-weight:800; letter-spacing:0.16em; color:var(--accent); }
.help{ font-size:12px; color:var(--muted); text-align:right; }

.hud{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.panel{
  background: rgba(16,16,36,0.85);
  border: 1px solid rgba(122,240,255,0.25);
  padding:10px 12px;
  border-radius:10px;
}
.panel.center{ text-align:center; }
.label{ font-size:12px; color:var(--muted); }
.value{ font-size:18px; font-weight:800; letter-spacing:0.1em; }
.sub{ font-size:12px; color:var(--muted); margin-top:4px; }

#game{
  display:block;
  width: 100%;
  height: auto;
  background: #000;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  image-rendering: pixelated;
}

.footer{ margin-top:10px; color:var(--muted); font-size:12px; text-align:center; }