.reaction-portrait {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: cover;
}

.reaction-portrait[hidden] {
  display: none;
}

.novel-stage[data-shot] .scene-caption {
  z-index: 5;
}

.novel-stage[data-shot]:not([data-shot="medium"]) .stage-image.is-character-backdrop {
  filter: brightness(0.72) saturate(0.76) contrast(1.06);
  object-position: center 38%;
  transform: scale(1.035);
}

.novel-stage[data-shot="close"] .mood-portrait,
.novel-stage[data-shot="close-secret"] .mood-portrait,
.novel-stage[data-shot="close-angry"] .mood-portrait,
.novel-stage[data-shot="extreme"] .mood-portrait {
  z-index: 3;
  right: auto;
  bottom: auto;
  border-radius: 1px;
  background: var(--paper-deep);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.46);
  transform: none;
  animation: comic-close-in 280ms cubic-bezier(0.22, 0.75, 0.28, 1) both;
}

.novel-stage[data-shot="close"] .mood-portrait {
  top: calc(112px + env(safe-area-inset-top));
  left: 50%;
  width: min(78vw, 320px);
  height: min(78vw, 320px);
  border: 2px solid rgba(243, 238, 226, 0.92);
  object-position: center 22%;
  transform: translateX(-50%);
}

.novel-stage[data-shot="close-secret"] .mood-portrait {
  top: calc(122px + env(safe-area-inset-top));
  left: 8%;
  width: min(76vw, 308px);
  height: min(76vw, 308px);
  border: 1px solid rgba(243, 238, 226, 0.82);
  border-left: 5px solid var(--mustard);
  object-position: center 22%;
  transform: rotate(-1.2deg);
}

.novel-stage[data-shot="close-angry"] .mood-portrait {
  top: calc(104px + env(safe-area-inset-top));
  left: 6%;
  width: min(88vw, 350px);
  height: min(78vw, 320px);
  border: 2px solid rgba(154, 48, 42, 0.95);
  border-right-width: 6px;
  object-position: center 18%;
  transform: rotate(0.6deg);
}

.novel-stage[data-shot="extreme"] .mood-portrait {
  top: calc(84px + env(safe-area-inset-top));
  left: 12px;
  width: calc(100% - 24px);
  height: min(49dvh, 410px);
  border: 1px solid rgba(243, 238, 226, 0.9);
  border-bottom: 6px solid var(--brick);
  object-position: center 16%;
}

.novel-stage[data-shot="duel"] .mood-portrait,
.novel-stage[data-shot="duel"] .reaction-portrait {
  right: auto;
  bottom: auto;
  width: min(57vw, 238px);
  height: min(57vw, 238px);
  border-radius: 1px;
  background: var(--paper-deep);
  object-fit: cover;
  object-position: center 20%;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

.novel-stage[data-shot="duel"] .mood-portrait {
  z-index: 4;
  top: calc(104px + env(safe-area-inset-top));
  left: 13px;
  border: 2px solid rgba(243, 238, 226, 0.94);
  border-left: 6px solid var(--brick);
  transform: rotate(-1.2deg);
  animation: duel-left-in 280ms ease-out both;
}

.novel-stage[data-shot="duel"] .reaction-portrait {
  z-index: 3;
  top: calc(268px + env(safe-area-inset-top));
  right: 13px;
  border: 2px solid rgba(243, 238, 226, 0.88);
  border-right: 6px solid var(--mustard);
  transform: rotate(1.2deg);
  animation: duel-right-in 320ms 40ms ease-out both;
}

.novel-stage[data-shot="close-secret"] .dialogue-panel {
  border-left-color: var(--mustard);
}

.novel-stage[data-shot="close-angry"] .dialogue-panel,
.novel-stage[data-shot="extreme"] .dialogue-panel {
  border-left-color: var(--brick);
}

.novel-stage[data-shot="duel"] .dialogue-panel {
  border-top-color: rgba(233, 199, 118, 0.68);
  border-left-color: var(--brick);
}

@keyframes comic-close-in {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

@keyframes duel-left-in {
  from {
    opacity: 0;
    transform: translateX(-18px) rotate(-1.2deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(-1.2deg);
  }
}

@keyframes duel-right-in {
  from {
    opacity: 0;
    transform: translateX(18px) rotate(1.2deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(1.2deg);
  }
}

@media (max-height: 690px) {
  .novel-stage[data-shot="close"] .mood-portrait,
  .novel-stage[data-shot="close-secret"] .mood-portrait,
  .novel-stage[data-shot="close-angry"] .mood-portrait {
    top: calc(82px + env(safe-area-inset-top));
    width: min(62dvh, 280px);
    height: min(62dvh, 280px);
  }

  .novel-stage[data-shot="extreme"] .mood-portrait {
    top: calc(76px + env(safe-area-inset-top));
    height: 42dvh;
  }

  .novel-stage[data-shot="duel"] .mood-portrait,
  .novel-stage[data-shot="duel"] .reaction-portrait {
    width: min(45dvh, 210px);
    height: min(45dvh, 210px);
  }

  .novel-stage[data-shot="duel"] .mood-portrait {
    top: calc(76px + env(safe-area-inset-top));
  }

  .novel-stage[data-shot="duel"] .reaction-portrait {
    top: calc(210px + env(safe-area-inset-top));
  }
}

@media (prefers-reduced-motion: reduce) {
  .novel-stage[data-shot] .mood-portrait,
  .novel-stage[data-shot] .reaction-portrait {
    animation: none;
  }
}