/* ---------- Lightbox ---------- */
.lightbox { width: min(760px, 94vw); }

#lightbox-media { text-align: center; }

#lightbox-media img, #lightbox-media video {
  max-width: 100%;
  max-height: 62vh;
  border-radius: 8px;
}

#lightbox-media audio { width: min(420px, 100%); margin: 2rem 0 1rem; }

.lightbox-caption {
  margin-top: 0.9rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lightbox-meta {
  margin-top: 0.4rem;
  text-align: right;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  .center-stack { padding-bottom: 21vh; }

  /* insignia above the name, memorial-card style */
  .masthead h1 { flex-direction: column; gap: 0.3em; }
  .rank { height: 1.15em; }

  .portrait { flex-basis: clamp(200px, 36vh, 380px); }

  .actions { gap: 0.45rem 0.5rem; }
  #btn-light { flex: 1 1 100%; }
  .btn.secondary, .btn.ghost { flex: 1 1 40%; padding: 0.6rem 0.6rem; font-size: 0.86rem; }
}

/* ---------- Short windows (small laptops, half-height windows) ---------- */
@media (max-height: 740px) {
  .center-stack { gap: clamp(0.5rem, 1.6vh, 1rem); }
  .portrait { flex-basis: clamp(150px, 34vh, 360px); }
  .masthead .pre { font-size: 0.8rem; }
  .masthead h1 { font-size: clamp(1.2rem, 3.6vw, 2rem); }
  .masthead .dates { font-size: 0.85rem; }
  .masthead .unit { font-size: 0.75rem; }
}

@media (max-height: 520px) {
  .masthead .unit, .verse { display: none; }
  .portrait { flex-basis: clamp(120px, 30vh, 300px); min-height: 100px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .flame, .glow, .ripple, #place-candle.setting-down, #place-candle.fresh, .strike-spark {
    animation: none;
  }
  .big-candle.lit .big-flame { animation: ignite 0.01s forwards; }
  .big-candle.lit .big-glow { animation: glow-in 0.01s forwards; }
  .candle { transition: none; }
}

/* ---------- Controls feel like controls ---------- */
/* No mobile tap flash — it only ever painted over clickable things. */
html { -webkit-tap-highlight-color: transparent; }

/* No text selection on buttons and clickable surfaces. Letters, the verse and
   every input keep normal selection — this is only the UI. */
button, .btn,
.portrait, .candle, .sw-step,
.pt-page, .pt-photo, .gal-photo,
.book-nav, .album-views, .lang-toggle,
.dropzone, .attach-chip, .voice-row,
.strike-area, #place-layer, #place-candle {
  -webkit-user-select: none;
  user-select: none;
}

/* Long-pressing a mounted thumbnail is a page action, not an image save (the
   full-size viewer keeps the native callout, so photos can still be saved
   from there), and dragging one shouldn't ghost the image on desktop. */
.pt-photo img, .pt-photo video,
.gal-photo img, .gal-photo video,
.step-photo img, #portrait-img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}