/* css/landmarks.css — story-landmark bubble chrome (designs/plan-parts/
   15-landmark-ux-spec.md §3). Loaded after css/style.css; follows the .toast
   conventions (same fill / border / outline / hard shadow). The bubble is the
   one reader in the game, so story text gets the HUD font FLOOR (14 px at
   --hud 0.5; the toasts run 10–12 px) — it is the one thing that must be
   *read*. Fixed + pointer-events:none + z-40: above the canvas, below the
   toasts (#toasts z-46) and every panel. */

#lm-bubble {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  background: #162110ee;
  border: 2px solid #0a0d07;
  outline: 2px solid #7a5f14;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  padding: calc(7px * var(--hud)) calc(10px * var(--hud));
  width: max-content;
  /* ≈316 px @360 px phone, 420 px @--hud 1 desktop */
  max-width: min(88vw, calc(180px + 240px * var(--hud)));
  opacity: 0;
  transition: opacity 0.25s;
  margin-left: 0;
}

#lm-bubble.show { opacity: 1; }

/* The auto-fade out-phase: the spec's 600 ms fadeOutMs (the show phase keeps
   the snappy 0.25 s). */
#lm-bubble.fade { opacity: 0; transition: opacity 0.6s; }

/* Hard dismiss (tap-elsewhere / map change): kill the transition for one
   frame so the bubble vanishes instantly, then restore it for the next show. */
#lm-bubble.hide-now { transition: none !important; opacity: 0 !important; }

/* Kicker: gold small-caps prop name — answers "what am I looking at" cold. */
.lm-kicker {
  color: #ffd23f;
  font-size: max(10px, calc(11px * var(--hud)));
  letter-spacing: 1px;
  font-weight: 900;
  margin-bottom: 3px;
}

/* Body: 14 px floor at --hud 0.5, 16 px at --hud 1. Wrap bounded by the
   ≤70-word copy cap — no scrolling, ever. */
.lm-body {
  color: #ffe9a0;
  font-size: max(14px, calc(16px * var(--hud)));
  line-height: 1.45;
  text-align: left;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  white-space: normal;
}

/* Reduced motion: show/hide are instant, the FULL hold time still applies. */
@media (prefers-reduced-motion: reduce) {
  #lm-bubble { transition: none !important; }
}
/* Test/runtime seam (hooks.reducedMotion) mirrors the media query. */
#lm-bubble.rm { transition: none !important; }