/* The stage owns geometry; mode-specific styles own the artwork. */
.visual-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.visual-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 8 / 5;
  overflow: hidden;
}

.visual-frame .park-map {
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}

.visual-wrap:is([data-mode="sailing"], [data-mode="cycling"]) .visual-frame {
  height: 70svh;
  max-height: 60rem;
  aspect-ratio: auto;
}

.visual-wrap[data-mode="sailing"] .visual-metrics {
  min-height: 0;
  border: 0;
}

.sailing-home {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: 0.75rem var(--font-mono);
  cursor: pointer;
}

#sailingVisual,
#cyclingVisual,
#archeryVisual {
  overflow: hidden;
  contain: paint;
  transform-style: flat;
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

/* Keep the interactive map free of per-frame procedural texture and shadow paints. */
#sailingVisual .paper-grain,
#cyclingVisual .paper-grain {
  display: none;
}

#sailingVisual .sail-path,
#cyclingVisual .ride-ghost,
#cyclingVisual .ride-path,
#cyclingVisual .ride-replay-base,
#cyclingVisual .ride-point {
  filter: none;
}

#archeryVisual .archery-face,
#archeryVisual .archery-shot {
  filter: none;
}

#sailingWorld,
#cyclingWorld,
#archeryWorld {
  pointer-events: none;
}

#sailingVisual.is-dragging,
#cyclingVisual.is-dragging,
#archeryVisual.is-dragging {
  cursor: grabbing;
}

#sailingVisual:focus-visible,
#cyclingVisual:focus-visible,
#archeryVisual:focus-visible {
  outline: 2px solid var(--deep-harbor-blue);
  outline-offset: -2px;
}

.visual-metrics {
  display: grid;
  align-items: center;
  min-height: 4.5rem;
  border-bottom: 1px solid var(--line);
}

.visual-metrics > div {
  position: static;
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.65rem 0;
  border: 0;
  transform: none;
  gap: 0.75rem;
}

.visual-metrics .ride-live-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.visual-metrics .archery-ticker {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.visual-metrics strong {
  width: auto;
  font-size: 1rem;
}

.visual-wrap figcaption {
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.visual-wrap .legend {
  padding-left: 0;
  border-left: 0;
}

@media (max-width: 980px) {
  .visual-wrap:is([data-mode="sailing"], [data-mode="cycling"]) .visual-frame {
    height: 55svh;
    max-height: 38rem;
  }
  .visual-wrap {
    box-sizing: border-box;
    padding: 0 1.25rem;
  }

  .visual-wrap figcaption {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .visual-wrap {
    padding: 0 1rem;
  }
}

#archeryVisual .archery-shot.is-photo {
  opacity: 0.9;
  animation: none;
}

#archeryVisual .archery-shot.is-uncertain {
  fill: #b54378;
}
.video-stage{position:absolute;inset:0;background:#161c19;overflow:hidden}
.event-media{min-width:0;border-bottom:1px solid var(--line, #aaa69b);padding-bottom:12px}
.event-media[hidden],.event-media [hidden]{display:none}
.event-media header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.event-media h3{margin:0;font:inherit;font-size:12px;text-transform:uppercase}
.event-media-placeholder,.event-media-caption,.event-media-count{font-size:11px;color:var(--muted, #77776f)}
.event-media-frame{position:relative;width:100%;aspect-ratio:4/3;background:#e1e3dd;overflow:hidden}
.event-media-frame>img,.event-media-frame video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.event-media-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:12px;color:#666}
.event-media-footer{display:flex;align-items:center;justify-content:center;gap:12px;min-height:32px}
.event-media-footer button{width:32px;height:32px;padding:0;border:0;background:none;font-size:20px;color:inherit;cursor:pointer}
.event-media-caption{margin:0;overflow-wrap:anywhere}
.event-media .video-controls{bottom:8px;right:8px;gap:4px}
.sail-event-details[hidden],.sail-event-details div[hidden]{display:none}
.sail-event-details strong{overflow-wrap:anywhere}
body.sailing-mode .detail-card,body.sailing-mode .detail-links{display:none}
.region-link{display:inline;background:none;border:0;border-radius:0;padding:0;min-height:32px;font:inherit;letter-spacing:0;color:var(--muted, #77776f);cursor:pointer;text-align:left}
.region-link[aria-pressed="true"]{color:var(--ink, #242521)}
.region-link:hover{text-decoration:underline;text-underline-offset:4px}
.region-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.video-stage[hidden]{display:none}
.video-stage video{width:100%;height:100%;display:block;object-fit:cover}
.video-controls{position:absolute;bottom:16px;right:16px;display:flex;gap:8px;z-index:1}
.video-controls[hidden]{display:none}
.video-controls button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff60;border-radius:4px;background:#161c19cc;color:white;cursor:pointer}
.video-controls button:hover{background:#161c19}
.video-controls button:focus-visible{outline:2px solid white;outline-offset:3px}
.video-controls button:disabled{opacity:.45;cursor:default}
.video-controls svg{width:20px;height:20px}
body.scene-mode .activity-meta,body.scene-mode .detail-card,body.scene-mode .detail-links,body.scene-mode .trace-controls [data-action="all"]{display:none}
.video-stage video[hidden]{display:none}
.video-stage p{position:absolute;inset:40% 0 auto;text-align:center;color:#d7e1da;font-size:1rem;pointer-events:none}
.visual-wrap[data-mode="video"] .visual-metrics{display:none}