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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Courier New", ui-monospace, monospace;
}

#viewport {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* HUD layer — never intercepts pointer input, the canvas needs it for steering. */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  user-select: none;
  color: #eaf6ff;
  text-shadow: 0 2px 0 rgba(0, 20, 40, 0.65);
}

#hud-debug {
  position: absolute;
  top: 12px;
  left: 14px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

#hud-debug .label {
  color: #9fd2ef;
  text-transform: uppercase;
}

#hud-score[hidden] { display: none; }

#hud-score {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: clamp(22px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff6e6;
}

/* Sits over the world, so it needs its own scrim to stay readable against terrain. */
#hud-message {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(6, 26, 40, 0.55) 0%, rgba(6, 26, 40, 0) 65%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

#hud-message[hidden] { display: none; }

/* On the menu the logo is the title, and the real ship idles at screen centre in
   attract mode — anchor the card low so the two never fight for the same pixels. */
#hud-message:has(#hud-logo:not([hidden])) {
  justify-content: flex-end;
  padding-bottom: 6vh;
  background: radial-gradient(ellipse at 50% 78%, rgba(6, 26, 40, 0.55) 0%, rgba(6, 26, 40, 0) 65%);
}

#hud-logo[hidden] { display: none; }

#hud-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#hud-logo svg {
  width: clamp(96px, 15vw, 160px);
  height: auto;
  filter: drop-shadow(0 4px 0 rgba(90, 20, 10, 0.5));
}

/* The wordmark is the menu's title, so it borrows the title's scale and shadow.
   letter-spacing trails the last glyph; the padding recentres the word. */
#hud-logo-word {
  font-size: clamp(34px, 7vw, 76px);
  font-weight: 700;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  color: #ffe2d8;
  text-shadow: 0 4px 0 rgba(90, 20, 10, 0.5);
}

#hud-message-title:empty { display: none; }

#hud-message-title {
  font-size: clamp(34px, 7vw, 76px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffe2d8;
  text-shadow: 0 4px 0 rgba(90, 20, 10, 0.5);
}

#hud-message-detail {
  font-size: clamp(15px, 2.2vw, 24px);
  letter-spacing: 0.18em;
  color: #ffe9c9;
}

#hud-message-detail:empty { display: none; }

#hud-message-sub {
  font-size: clamp(13px, 1.8vw, 19px);
  letter-spacing: 0.22em;
  opacity: 0.9;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.95; }
}