/* EDIT global image presentation here. Per-round overrides live in questions.json or the Content.py fallback. */
.round-image {
  width: 100%;
  max-height: 420px;       /* CHANGE image height on laptop/projector. */
  min-height: 180px;
  object-fit: contain;    /* contain = entire image; cover = crop to fill. */
  object-position: center;
  background: #f5f7fc;
  border-radius: 12px;    /* CHANGE corner rounding. */
  display: block;
}
.round-audio { width: 100%; margin: 16px 0; }
.round-video { display: block; width: 100%; max-height: 420px; margin: 16px 0; background: #171215; border-radius: 12px; }
.youtube-player { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; }
.image-error { color: #ba1823; font-size: 14px; }
@media (max-width: 760px) {
  .round-image { max-height: 300px; min-height: 140px; }
  .round-video { max-height: 300px; }
}
@media (min-width: 1600px) {
  .presenter-page .round-image { max-height: 580px; }
  .presenter-page .round-video { max-height: 580px; }
}

/* The presenter has no sidebar; use the available projector area. */
.presenter-playing .round-image{width:100%;max-height:64vh;min-height:0;background:white}
.presenter-playing .round-audio{width:min(900px,100%)}

/* The SVG uses the same contain/cover geometry as the image. Reveal only. */
.image-frame{position:relative;width:100%;margin:0;line-height:0}
.image-highlight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.image-frame .image-error{line-height:1.4}

/* Phone/player inspection: only the image and its reveal overlay move. */
.image-viewport{overflow:hidden;position:relative;border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:zoom-in}
.image-viewport:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.image-viewport .image-frame{transform-origin:center;will-change:transform}
.image-viewport img{-webkit-user-drag:none}
.image-viewport.is-zoomed{cursor:grab}
.image-viewport.is-dragging.is-zoomed{cursor:grabbing}
.image-zoom-controls{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px;line-height:1.2}
.image-zoom-button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--red);font-size:18px;font-weight:700;touch-action:manipulation}
.image-zoom-button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.image-zoom-level{min-width:52px;text-align:center;font-size:14px;color:var(--muted)}