:root {
  --hud: #39ff14;       /* phosphor green */
  --hud-dim: #1f8a0f;
  --hud-bg: rgba(0, 12, 0, 0.28);
  --warn: #ff3b30;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #87b7e8;
  font-family: "Consolas", "Menlo", "Roboto Mono", monospace;
  color: var(--hud);
  user-select: none;
}

#scene {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block;
}

/* ===== HUD ===== */
#hud {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 10;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.hud-block { position: absolute; display: flex; gap: 14px; padding: 10px 14px; }
.hud-tl { top: 14px; left: 14px; }
.hud-tr { top: 14px; right: 14px; flex-direction: column; align-items: flex-end; gap: 8px; }

.gauge {
  background: var(--hud-bg);
  border: 1px solid var(--hud-dim);
  border-radius: 6px;
  padding: 6px 12px;
  min-width: 84px;
  text-align: center;
}
.gauge-label { font-size: 10px; color: var(--hud-dim); letter-spacing: 1px; }
.gauge-value { font-size: 24px; font-weight: bold; line-height: 1.1; }
.gauge-value.small { font-size: 16px; }

.bar {
  width: 110px; height: 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--hud-dim);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 4px;
}
.bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--hud-dim), var(--hud));
  transition: width 0.08s linear;
}

/* heading tape */
#hud-top {
  position: absolute; top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 360px; height: 30px;
  background: var(--hud-bg);
  border: 1px solid var(--hud-dim);
  border-radius: 6px;
  overflow: hidden;
}
#heading-tape { position: relative; width: 100%; height: 100%; }
#heading-tape::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 2px; height: 100%;
  background: var(--warn);
  transform: translateX(-50%);
  z-index: 2;
}

/* attitude indicator + minimap */
#attitude, #minimap-wrap {
  position: absolute;
  background: var(--hud-bg);
  border: 1px solid var(--hud-dim);
  border-radius: 8px;
  padding: 4px;
}
#attitude { bottom: 14px; left: 14px; }
#minimap-wrap { bottom: 14px; right: 14px; }
#attitude-canvas, #minimap { display: block; border-radius: 4px; }

/* flight path marker (center crosshair) */
#crosshair {
  position: fixed; top: 50%; left: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
  z-index: 11; pointer-events: none;
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: var(--hud);
  box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
#crosshair::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
#crosshair::after  { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }

/* warning */
#warning {
  position: fixed; top: 38%; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  font-size: 30px; font-weight: bold;
  color: var(--warn);
  text-shadow: 0 0 10px rgba(0,0,0,0.9);
  opacity: 0;
  transition: opacity 0.15s;
  letter-spacing: 2px;
}
#warning.show { opacity: 1; animation: blink 0.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ===== Help / start panel ===== */
#help {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(10,20,40,0.55), rgba(0,0,0,0.82));
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
  color: #e8f4ff;
}
#help.visible { opacity: 1; pointer-events: auto; }
.help-inner {
  background: rgba(8, 16, 30, 0.92);
  border: 1px solid #2a4a7a;
  border-radius: 14px;
  padding: 30px 40px;
  max-width: 520px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.6);
}
.help-inner h1 { font-size: 26px; margin-bottom: 4px; color: #7fc8ff; }
.tag { color: #8aa6c2; font-size: 13px; margin-bottom: 18px; }
.help-inner table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.help-inner td { padding: 5px 6px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.help-inner td:first-child { width: 42%; color: #cfe3ff; }
kbd {
  display: inline-block;
  background: #1c2c44; border: 1px solid #3a5a8a;
  border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 7px; font-size: 12px;
  font-family: inherit; color: #eaf3ff;
  margin: 0 1px;
}
.hint { font-size: 12px; color: #7fc8ff; margin-bottom: 18px; line-height: 1.6; }
#start-btn {
  width: 100%; padding: 12px; font-size: 16px; font-weight: bold;
  font-family: inherit; cursor: pointer;
  background: linear-gradient(180deg, #2b6fc0, #1a4a8a);
  color: #fff; border: none; border-radius: 8px;
  transition: transform 0.1s, filter 0.15s;
}
#start-btn:hover { filter: brightness(1.15); }
#start-btn:active { transform: scale(0.98); }