:root {
  --cyan: #00ffe1;
  --violet: #9d4dff;
  --pink: #ff4fd8;
  --bg: #02030a;
  --panel: rgba(3, 10, 24, .58);
  --line: rgba(0, 255, 225, .45);
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: 'Share Tech Mono', monospace;
  color: var(--cyan);
  background: radial-gradient(circle at 50% 30%, #101948 0%, #050713 38%, #000 100%);
  touch-action: none;
  user-select: none;
}
#container { position: fixed; inset: 0; }
#container canvas { display: block; width: 100% !important; height: 100% !important; }
.glass-panel {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(0, 255, 225, .10), rgba(157, 77, 255, .10)), var(--panel);
  box-shadow: 0 0 22px rgba(0,255,225,.24), inset 0 0 28px rgba(157,77,255,.10);
  backdrop-filter: blur(12px);
  border-radius: 18px;
}
#hud {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px;
  width: min(370px, calc(100vw - 28px)); padding: 16px; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px;
  font: 800 28px Orbitron, sans-serif; color: #00110f; background: var(--cyan);
  box-shadow: 0 0 22px var(--cyan);
}
h1, h2, p { margin: 0; }
h1 { font: 800 24px Orbitron, sans-serif; letter-spacing: 3px; }
h2 { font: 600 14px Orbitron, sans-serif; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
#statusLine { color: #b8fff8; font-size: 12px; }
#coordinates { margin: 10px 0; color: #eaffff; }
#userCoordinates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#userCoordinates label { font-size: 11px; color: #b8fff8; }
#userCoordinates button { grid-column: 1 / -1; }
input, button {
  min-height: 40px; border-radius: 12px; border: 1px solid var(--line);
  color: white; background: rgba(0,0,0,.35); font-family: inherit; padding: 10px;
  box-shadow: inset 0 0 18px rgba(0,255,225,.08);
}
button { cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: .2s ease; }
button:hover, button.active { background: linear-gradient(135deg, rgba(0,255,225,.38), rgba(157,77,255,.42)); box-shadow: 0 0 22px rgba(0,255,225,.45); }
#modePanel {
  position: fixed; right: 14px; top: max(14px, env(safe-area-inset-top)); z-index: 10;
  width: min(230px, calc(100vw - 28px)); padding: 12px; display: grid; gap: 9px;
}
#planetPanel {
  position: fixed; right: 14px; bottom: 14px; z-index: 10;
  width: min(270px, calc(100vw - 28px)); padding: 14px;
}
#planetList { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 34vh; overflow: auto; }
.planet-chip { min-height: 34px; padding: 7px; font-size: 12px; }
#helpPanel {
  position: fixed; left: 14px; bottom: 14px; z-index: 10; width: min(480px, calc(100vw - 28px));
  padding: 12px; display: grid; gap: 4px; color: #dff;
}
#helpPanel span { font-size: 12px; opacity: .9; }
#mobileControls { display: none; position: fixed; inset: auto 0 max(18px, env(safe-area-inset-bottom)) 0; z-index: 15; pointer-events: none; }
.joystick {
  pointer-events: auto; position: absolute; bottom: 0; width: 128px; height: 128px; border-radius: 50%;
  border: 1px solid rgba(0,255,225,.55); background: rgba(0, 255, 225, .08); box-shadow: 0 0 26px rgba(0,255,225,.28);
}
.joystick span {
  position: absolute; left: 42px; top: 42px; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--cyan)); box-shadow: 0 0 18px var(--cyan);
}
.joystick small { position: absolute; width: 160px; left: -16px; bottom: -22px; text-align: center; color: white; opacity: .8; }
#moveJoystick { left: 24px; }
#lookJoystick { right: 24px; }
@media (max-width: 820px) {
  #hud { padding: 12px; }
  #userCoordinates { display: none; }
  #modePanel { top: auto; bottom: 168px; right: 10px; width: 162px; padding: 8px; }
  #planetPanel { left: 10px; right: auto; bottom: 168px; width: min(210px, calc(100vw - 190px)); padding: 10px; }
  #planetList { grid-template-columns: 1fr; max-height: 26vh; }
  #helpPanel { display: none; }
  #mobileControls { display: block; }
  button { min-height: 36px; font-size: 12px; }
  h1 { font-size: 20px; }
}
@media (max-width: 520px) {
  #hud { width: calc(100vw - 20px); left: 10px; }
  #planetPanel { display: none; }
}