.photo-win .win-body {
  padding: 0;
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  gap: 0;
  background: #06070b;
}

/* ══════════════════════════════════════════════════════ stage */
.pv-stage {
  display: grid;
  place-items: center;
  height: min(54vh, 430px);
  padding: 12px;
  background:
    radial-gradient(ellipse at 50% 40%, #14161d 0%, #06070b 72%);
  box-shadow: var(--bev-in);
  overflow: hidden;
}

.pv-frame {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 100%;
  max-height: 100%;
}

.pv-media {
  max-width: 100%;
  max-height: min(48vh, 380px);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ══════════════════════════════════════════════════════ interfaces */

/* ---- coffin: hexagonal box with a chrome edge */
[data-frame="coffin"] .pv-media {
  clip-path: polygon(30% 0%, 70% 0%, 100% 22%, 82% 100%, 18% 100%, 0% 22%);
  filter: contrast(1.12) saturate(.88);
}
[data-frame="coffin"]::before {
  content: '';
  position: absolute;
  inset: -6px;
  clip-path: polygon(30% 0%, 70% 0%, 100% 22%, 82% 100%, 18% 100%, 0% 22%);
  background: var(--chrome);
  z-index: -1;
}

/* ---- CRT: curved glass, scanlines, power LED */
[data-frame="crt"] {
  padding: 14px;
  background: var(--metal-lit);
  box-shadow: var(--bev-out), 0 0 0 2px #05060a;
  border-radius: 16px / 22px;
}
[data-frame="crt"] .pv-media {
  border-radius: 9px / 14px;
  filter: saturate(.82) contrast(1.16) brightness(1.02);
}
.crt-glass {
  position: absolute;
  inset: 14px;
  border-radius: 9px / 14px;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 32% 18%, rgba(255,255,255,.20), transparent 46%),
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.6) 100%);
}
.crt-led {
  position: absolute;
  right: 20px;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rad);
  box-shadow: 0 0 8px var(--rad);
}

/* ---- camcorder: the diamond mask plus a viewfinder overlay */
[data-frame="camcorder"] .pv-media { filter: saturate(1.05) contrast(1.05); }
[data-frame="camcorder"] .osd-cam { padding: 4px 6px; }

/* ---- halo: circular, ringed, softly lit */
[data-frame="halo"] .pv-media { border-radius: 50%; }
.halo-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(233,238,246,.45);
  box-shadow:
    0 0 30px rgba(233,238,246,.22),
    inset 0 0 40px rgba(107,63,160,.35);
  pointer-events: none;
  animation: pv-ring 5s ease-in-out infinite;
}
@keyframes pv-ring { 50% { transform: scale(calc(1 + .03 * var(--chaos))); opacity: .65; } }

/* ---- gothic arch: the mask carries the shape, we add the chrome halo */
[data-frame="arch"]::before {
  content: '';
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: conic-gradient(from 200deg,
    rgba(233,238,246,.20) 0 2deg, transparent 2deg 14deg,
    rgba(160,111,224,.18) 14deg 16deg, transparent 16deg 30deg);
  border-radius: 50%;
  animation: halo-turn 60s linear infinite;
}
body.reduce-chaos [data-frame="arch"]::before,
body.reduce-chaos .halo-ring { animation-play-state: paused; }

/* ---- polaroid: taped to the glass, slightly crooked */
[data-frame="polaroid"] {
  padding: 12px 12px 40px;
  background: linear-gradient(180deg, #dfe0d8, #b9bab2);
  box-shadow: 0 14px 30px rgba(0,0,0,.8), var(--bev-thin);
  rotate: -2.4deg;
}
[data-frame="polaroid"] .pv-media { filter: saturate(.92) contrast(1.05); }
.tape {
  position: absolute;
  width: 54px;
  height: 20px;
  background: rgba(226,230,214,.42);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.tape-a { top: -9px; left: -14px; rotate: -34deg; }
.tape-b { bottom: -9px; right: -14px; rotate: -34deg; }

/* ---- VHS: video with a deck overlay */
[data-frame="vhs"] { width: 100%; }
[data-frame="vhs"] .pv-media { width: 100%; filter: saturate(.9) contrast(1.1); }
.osd-vhs {
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr auto;
  align-content: start;
  gap: 8px;
  font-size: 16px;
  letter-spacing: .12em;
}
.osd-vhs span:nth-child(2) { justify-self: center; }
.osd-vhs span:nth-child(3) { justify-self: end; }

/* ---- corrupt: torn scan bands over a failing read */
[data-frame="corrupt"] .pv-media { filter: saturate(1.1) contrast(1.2); }
.glitch-slice {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
  clip-path: polygon(0 18%, 100% 18%, 100% 26%, 0 26%,
                     0 52%, 100% 52%, 100% 57%, 0 57%,
                     0 74%, 100% 74%, 100% 81%, 0 81%);
  animation: slice-shift .9s steps(4, end) infinite;
}
@keyframes slice-shift {
  0%   { transform: translateX(0); filter: hue-rotate(0deg); }
  25%  { transform: translateX(-9px); filter: hue-rotate(90deg); }
  50%  { transform: translateX(6px); filter: hue-rotate(-70deg); }
  75%  { transform: translateX(-3px); filter: hue-rotate(30deg); }
}
body.reduce-chaos .glitch-slice { animation-play-state: paused; }
.osd-err {
  align-content: end;
  font-size: 14px;
  color: var(--blood-lt);
  letter-spacing: .08em;
}

/* ══════════════════════════════════════════════════════ transitions */
.t-fade     { animation: tr-fade .32s var(--ease-out); }
.t-crt      { animation: tr-crt .5s var(--ease-hard); }
.t-glitch   { animation: tr-glitch .42s steps(4, end); }
.t-iris     { animation: tr-iris .46s var(--ease-out); }
.t-dissolve { animation: tr-dissolve .5s steps(6, end); }
.t-roll     { animation: tr-roll .5s var(--ease-hard); }
.t-drop     { animation: tr-drop .44s var(--ease-hard); }

@keyframes tr-fade { from { opacity: 0; } }
@keyframes tr-crt {
  0%   { transform: scale(1.5, .004); filter: brightness(6); opacity: 1; }
  45%  { transform: scale(1.02, .06); filter: brightness(3); }
  70%  { transform: scale(1, .9); filter: brightness(1.5); }
  100% { transform: scale(1, 1); filter: none; }
}
@keyframes tr-glitch {
  0%   { transform: translateX(-14px) skewX(9deg); filter: invert(1) hue-rotate(90deg); }
  30%  { transform: translateX(11px) skewX(-6deg); filter: contrast(3) saturate(0); }
  60%  { transform: translateX(-5px); filter: invert(1); }
  100% { transform: none; filter: none; }
}
@keyframes tr-iris {
  from { clip-path: circle(0% at 50% 50%); filter: brightness(2.4); }
  to   { clip-path: circle(78% at 50% 50%); filter: none; }
}
@keyframes tr-dissolve {
  from { opacity: 0; filter: blur(7px) contrast(2.4) brightness(1.8); }
  to   { opacity: 1; filter: none; }
}
@keyframes tr-roll {
  0%   { transform: translateY(-100%); filter: brightness(3) blur(2px); }
  60%  { transform: translateY(7%); filter: brightness(1.4); }
  100% { transform: none; filter: none; }
}
@keyframes tr-drop {
  from { transform: translateY(-26px) rotate(-9deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ══════════════════════════════════════════════════════ chrome around it */
.pv-meta {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  background: #04060a;
  box-shadow: var(--bev-in);
}
.pv-title {
  font: 700 10px/1 var(--f-pixel);
  letter-spacing: .1em;
  color: var(--cold);
}
.pv-line {
  font: 400 15px/1 var(--f-term);
  letter-spacing: .06em;
  color: var(--bruise-lt);
}

.pv-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  background: var(--metal-lit);
  box-shadow: var(--bev-thin);
}
.pv-btn {
  padding: 6px 12px;
  font: 700 9px/1 var(--f-pixel);
  letter-spacing: .06em;
  color: var(--silver-lt);
  background: var(--chrome-bar-dim);
  box-shadow: var(--bev-out);
  border: 1px solid #05060a;
}
.pv-btn:hover { background: var(--chrome-bar); color: #06070a; }
.pv-btn:active { box-shadow: var(--bev-in); }
.pv-count {
  flex: 1 1 auto;
  text-align: center;
  font: 400 15px/1 var(--f-term);
  color: var(--silver);
  letter-spacing: .1em;
}

.pv-strip {
  display: flex;
  gap: 3px;
  padding: 5px;
  overflow-x: auto;
  background: #04060a;
  box-shadow: var(--bev-in);
  scrollbar-width: thin;
}
.pv-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 2px;
  background: var(--metal);
  box-shadow: var(--bev-out);
  border: 1px solid #05060a;
  filter: grayscale(.7) brightness(.7);
  transition: filter .2s var(--ease-out);
}
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pv-thumb:hover { filter: none; }
.pv-thumb.is-on {
  filter: none;
  box-shadow: var(--bev-in), 0 0 0 1px var(--rad);
}