:root {
  --bg: #050b16;
  --panel: rgba(10, 18, 34, 0.76);
  --line: rgba(148, 163, 184, 0.24);
  --text: #e5eefb;
  --muted: #c4d3ea;
  --focus: #38bdf8;
  --sync: #10b981;
  --noise: #fb7185;
  --integration: #a78bfa;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(circle at top, #12284a 0%, #081321 40%, #02060d 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: none;
}
canvas { display: block; }
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud-card {
  pointer-events: none;
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
}
.top-card {
  left: 14px; top: calc(env(safe-area-inset-top) + 14px);
  width: min(520px, calc(100vw - 28px));
  padding: 14px;
}
.eyebrow { font-size: 12px; letter-spacing: 0.14em; color: #7dd3fc; margin-bottom: 6px; }
h1 { margin: 0; font-size: 26px; }
#missionText { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 8px; }
.meter-group { margin-top: 12px; display: grid; gap: 8px; }
.meter label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; color: var(--muted); }
.bar { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); }
.bar > i { display: block; height: 100%; width: 0%; border-radius: inherit; transition: width 100ms linear; }
.bar.focus > i { background: linear-gradient(90deg, #0ea5e9, #7dd3fc); }
.bar.sync > i { background: linear-gradient(90deg, #059669, #34d399); }
.bar.noise > i { background: linear-gradient(90deg, #f97316, #fb7185); }
.bar.integration > i { background: linear-gradient(90deg, #8b5cf6, #c4b5fd); }
.side-card {
  right: 14px; top: calc(env(safe-area-inset-top) + 14px);
  width: min(340px, calc(100vw - 28px));
  padding: 14px;
}
.section-title { font-size: 12px; color: #7dd3fc; margin-bottom: 8px; letter-spacing: 0.12em; }
#stageList { margin: 0 0 12px 18px; padding: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
#stageList li.active { color: white; font-weight: 700; }
#statusLine { margin: 0; font-size: 13px; line-height: 1.5; color: #fde68a; }
#touchControls { position: absolute; inset: 0; }
#joystickZone, .action-btn { pointer-events: auto; user-select: none; touch-action: none; }
#joystickZone {
  position: absolute; left: 16px; bottom: calc(env(safe-area-inset-bottom) + 16px);
  width: 164px; height: 164px; border-radius: 50%;
  border: 1px solid rgba(125,211,252,0.2);
  background: radial-gradient(circle, rgba(56,189,248,0.08), rgba(56,189,248,0.02));
}
#joystickBase, #joystickKnob {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;
}
#joystickBase {
  width: 94px; height: 94px; background: rgba(255,255,255,0.04); border: 1px solid rgba(148,163,184,0.2);
}
#joystickKnob {
  width: 58px; height: 58px; background: rgba(125,211,252,0.9); box-shadow: 0 8px 18px rgba(56,189,248,0.35);
}
#actionButtons {
  position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 16px);
  display: grid; grid-template-columns: repeat(3, 88px); gap: 10px;
}
.action-btn {
  min-height: 76px; border-radius: 18px; border: 1px solid var(--line);
  background: rgba(10,18,34,0.82); color: white; font-size: 15px; font-weight: 700;
  box-shadow: 0 12px 20px rgba(0,0,0,0.26);
}
.action-btn small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.action-btn.active.focusBtn { background: rgba(56,189,248,0.24); border-color: rgba(56,189,248,0.5); }
.action-btn.active.syncBtn { background: rgba(16,185,129,0.24); border-color: rgba(16,185,129,0.5); }
.action-btn.active.pulseBtn { background: rgba(245,158,11,0.24); border-color: rgba(245,158,11,0.45); }
@media (max-width: 960px) {
  .side-card { display: none; }
  .top-card { width: calc(100vw - 28px); }
}
@media (max-width: 720px) {
  h1 { font-size: 21px; }
  #missionText { font-size: 12px; }
  #actionButtons { grid-template-columns: repeat(3, 80px); gap: 8px; }
  .action-btn { min-height: 68px; font-size: 14px; }
  #joystickZone { width: 148px; height: 148px; }
}