/* =====================================================================
   🖼️ Photo Viewer App
   ===================================================================== */

/* Every photo opens its own window, so this is a class rather than one of the
   id rules in css/main.css. The geometry lives here rather than being written
   onto the element by openPhotoViewer(), because an inline style outranks every
   media query and left each viewer 270px off the side of a phone. The cascade
   offset that keeps stacked viewers from hiding each other is the one genuinely
   per-window value, so it arrives as --pv-cascade the same way the speech
   bubbles receive their tail offsets. */
.photo-viewer-window {
  width: 600px;
  height: 450px;
  top: calc(10% + var(--pv-cascade, 0px));
  left: calc(15% + var(--pv-cascade, 0px));
}

.photo-viewer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #222;
  overflow: hidden;
  box-sizing: border-box;
}
.photo-viewer-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8));
}