/* ==========================================================================
   Exit strip: the only way out of a flight besides the browser's back button.
   Sits above the HUD canvas but below the DOM overlays, and stays out of the
   way of flight input.
   ========================================================================== */

.exit-bar {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 18;
  /* The strip itself must not block the canvas underneath: only the button
     inside it is interactive. Without this, the empty part of the row would
     swallow clicks meant for the HUD. */
  pointer-events: none;
}

.exit-bar--hidden { display: none !important; }

.exit-bar__btn {
  pointer-events: auto;
  font: inherit;
  font-size: 12px;
  color: var(--ink-dim);
  background: rgba(8, 12, 22, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.exit-bar__btn:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* ==========================================================================
   hud.css - flight overlay: instrument strips drawn on #hud canvas are
   rendered by JS; this file styles the DOM chrome around them (stage banner,
   key hints, alarm list, throttle bar labels, pause overlay).
   ========================================================================== */

.hud-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.hud-layer--hidden { display: none; }

/* ------------------------------------------------------- stage / alarms */

.hud-top {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stage-banner {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(5, 7, 13, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 18px;
  text-shadow: var(--hud-glow);
}

.stage-banner--warn { color: var(--warn); border-color: rgba(251, 191, 36, 0.4); }
.stage-banner--crit { color: var(--bad); border-color: rgba(248, 113, 113, 0.5); }

.alarm-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.alarm {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  background: rgba(24, 10, 12, 0.82);
  border: 1px solid rgba(248, 113, 113, 0.55);
  color: #fecaca;
  animation: alarmPulse 1.1s ease-in-out infinite;
}

.alarm--warn {
  background: rgba(28, 22, 6, 0.82);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fde68a;
  animation: none;
}

@keyframes alarmPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ------------------------------------------------------- coaching layer */

/*
  Single positioned wrapper for the whole onboarding overlay. It covers the
  viewport but never intercepts input - every child re-declares pointer-events:
  none for the same reason. Keeping one wrapper means the tutorial and the key
  legend cannot drift apart in z-order.
*/
.tutorial-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

/* ----------------------------------------------------- bottom-left hints */

.hud-hints {
  position: absolute;
  left: 16px;
  bottom: 14px;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.65;
  text-shadow: 0 1px 3px #000;
  max-width: 40ch;
}

/*
  One group per flight phase. Dimmed groups stay legible but visibly secondary,
  so the legend reads as "here is what matters now" rather than a wall of keys.
*/
.hud-hints__group {
  margin-bottom: 7px;
  opacity: 0.42;
  transition: opacity 180ms ease;
}

.hud-hints__group--on { opacity: 1; }

.hud-hints__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
  opacity: 0.9;
}

.hud-hints__group:not(.hud-hints__group--on) .hud-hints__label {
  color: var(--ink-faint);
}

.hud-hints__keys { padding-left: 2px; }

.hud-hints b {
  color: var(--ink-dim);
  font-weight: 600;
  display: inline-block;
  min-width: 7.5ch;
}

.hud-hints__group--on b { color: var(--accent); }

/* ------------------------------------------------------- tutorial toasts */

.tutorial {
  position: absolute;
  right: 16px;
  bottom: 16px;
  pointer-events: none;
  width: min(340px, 34vw);
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  animation: tutorialIn 260ms ease both;
  /* Long coaching copy must wrap rather than widen the card off-screen. */
  overflow-wrap: anywhere;
}

.tutorial__title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.tutorial--hidden { display: none; }

@keyframes tutorialIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ mission briefing */

/*
  The contract, stated on the pad before ignition.

  Top-left rather than the bottom corners: the key legend owns bottom-left and
  the coaching card owns bottom-right, and the briefing is the one panel the
  player must be able to read while also reading the pad. It uses the same
  card idiom as the coaching toast (same fill, border, radius, shadow) so the
  two read as one layer rather than two competing ones - the accent stripe is
  the only difference, which is what marks it as the primary, blocking item.
*/
.mission-brief {
  position: absolute;
  left: 16px;
  top: 16px;
  pointer-events: none;
  width: min(360px, 36vw);
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--warn, #fbbf24);
  border-radius: var(--r-md);
  padding: 12px 15px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  animation: briefIn 300ms ease both;
  /* Mission copy is prose and must wrap, not widen the panel off-screen. */
  overflow-wrap: anywhere;
}

.mission-brief--hidden { display: none; }

.mission-brief__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.mission-brief__tier {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn, #fbbf24);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.mission-brief__name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-weight: 600;
}

.mission-brief__goal {
  color: var(--ink-dim);
  margin-bottom: 7px;
}

.mission-brief__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
  Each objective gets a small marker so the list scans as a checklist rather
  than a paragraph. It is a bullet, not a checkbox - these are terms to fly by,
  and the session tracks completion separately in the mission panel.
*/
.mission-brief__item {
  position: relative;
  padding-left: 14px;
  color: var(--ink);
  margin-bottom: 3px;
}

.mission-brief__item::before {
  content: '▸';
  position: absolute;
  left: 2px;
  color: var(--warn, #fbbf24);
}

.mission-brief__hint {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

@keyframes briefIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- pause menu */

.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: rgba(5, 7, 13, 0.66);
  backdrop-filter: blur(4px);
}

.pause-overlay--hidden { display: none; }

.pause-overlay__box {
  width: min(460px, 90vw);
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
}

.pause-overlay__box h2 {
  margin: 0 0 4px;
  font-size: 17px;
  letter-spacing: 0.06em;
}

.pause-overlay__box p {
  margin: 0 0 16px;
  color: var(--ink-faint);
  font-size: 12px;
}

.keymap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  font-size: 12px;
  margin-bottom: 18px;
}

.keymap kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 7px;
  color: var(--accent);
}

.keymap span { color: var(--ink-dim); }

/* --------------------------------------------------------- quality menu */

.quality-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quality-row .btn--on {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3);
}