/* hud.css — the 2D overlay above the WebGL canvas: crosshair, interaction
   prompt, key inventory, subtitle/verdict, and the full-screen flash. */

.hud {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  font-family: var(--mono);
}

/* Crosshair — a faint dot at screen center; grows when looking at something. */
.crosshair {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(210, 200, 195, 0.35);
  box-shadow: 0 0 4px #000;
  transition: width 0.15s, height 0.15s, background 0.15s, margin 0.15s;
}
.crosshair.hot {
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: rgba(230, 180, 160, 0.8);
  box-shadow: 0 0 10px #a11e1e;
}

/* "Press E" interaction prompt, just under the crosshair. */
.prompt {
  position: absolute;
  left: 50%; top: calc(50% + 28px);
  transform: translateX(-50%);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--bone);
  text-shadow: 0 0 8px #000;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.prompt.show { opacity: 1; }

/* Key inventory — minimal glyph row, bottom-left. */
.inventory {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: flex;
  gap: 0.6rem;
  font-size: 1.4rem;
  filter: drop-shadow(0 0 6px #000);
}
.inventory .key {
  opacity: 0.25;
  transition: opacity 0.4s, filter 0.4s, transform 0.4s;
  filter: grayscale(1);
}
.inventory .key.owned {
  opacity: 1;
  filter: grayscale(0) drop-shadow(0 0 8px #a11e1e);
  transform: scale(1.1);
}

/* Subtitle / verdict — bottom center. */
.subtitle {
  position: absolute;
  left: 50%; bottom: clamp(1.5rem, 8vh, 4rem);
  transform: translateX(-50%);
  max-width: min(90vw, 60ch);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(0.9rem, 2.4vw, 1.15rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow: 0 0 12px #000, 0 0 3px #000;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.6s;
}
.subtitle.show { opacity: 1; }
.subtitle.verdict { font-size: clamp(1.1rem, 3.4vw, 1.8rem); color: #e8e0da; letter-spacing: 0.08em; }

/* Full-screen flash (blinding light, glitch flashes). */
.flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

/* Pointer-lock lost hint reuses .subtitle. */