/* Course photos overlay — persistent 2D card fan revealed near a course spot.
   Root is full-viewport + pointer-events:none + z BELOW the HUD band (100002) so
   the HUD always wins any overlap; the reveal opacity lives on .cp-stack (never the
   root) so body.tiles-loading can hide the whole layer during tile loads. */
#course-photos { position: fixed; inset: 0; z-index: 100001; pointer-events: none; }
body.tiles-loading #course-photos { opacity: 0; }

/* Desktop: fanned polaroids, centered on screen (moved from screen-right in the
   intro-tuning pass; note card and chapters sit clear above/below). */
/* top 44% (not 50%): the bigger cards are height ≈ width/1.5 — a dead-center stack
   on a short viewport (~550-700px sales-embed iframe) would cover the bottom-anchored
   .dg-card note; lifting the center keeps the bottom band clear. */
.cp-stack { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  display: flex; align-items: flex-end; justify-content: center; max-width: 60%;
  opacity: 0; transition: opacity .4s; }
.cp-card { position: relative; flex: none; width: min(34vh, 320px); border: 7px solid #fff;
  border-radius: 5px; background: #15171c; box-shadow: 0 16px 44px #000c;
  transform-origin: bottom center; }
.cp-card + .cp-card { margin-left: -96px; }
.cp-card img { display: block; width: 100%; border-radius: 1px; }
.cp-cap { position: absolute; left: 8px; bottom: 8px; font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; color: #fff; background: #000a; padding: 3px 9px; border-radius: 4px;
  letter-spacing: .04em; }

/* Mobile portrait: centered fan near the runner (mirrors desktop), so it clears the
   Variant-A demo note card that now sits in the bottom band. */
body.mob .cp-stack { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%);
  max-width: 92vw; justify-content: center; }
body.mob .cp-card { width: clamp(64px, 22vw, 96px); border-width: 3px; }
body.mob .cp-card + .cp-card { margin-left: -28px; }

/* Narrow-landscape: little vertical room → a single compact card, bottom-left. */
@media (orientation: landscape) {
  body.mob .cp-stack { right: auto; left: 12px; transform: none;
    bottom: calc(76px + env(safe-area-inset-bottom)); justify-content: flex-start; }
  body.mob .cp-card:nth-child(n+2) { display: none; }
}