/* Three-character visual-novel blocking. Loaded after story.css. */
.vn-stage {
  inset: 68px 0 clamp(182px, 24vh, 250px);
  overflow: hidden;
  isolation: isolate;
}

.vn-sprite {
  bottom: 0;
  width: min(36vw, 520px);
  height: 100%;
  max-width: 38%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  animation: none;
  transition: opacity .24s ease, filter .24s ease;
  will-change: opacity, filter;
}

.vn-sprite.left {
  left: clamp(0px, 2vw, 34px);
  right: auto;
  transform: none;
  transform-origin: bottom left;
}

.vn-sprite.center {
  left: 50%;
  right: auto;
  z-index: 2;
  transform: translateX(-50%);
  transform-origin: bottom center;
}

.vn-sprite.right {
  left: auto;
  right: clamp(0px, 2vw, 34px);
  transform: scaleX(-1);
  transform-origin: bottom right;
}

.vn-sprite.speaking {
  z-index: 4;
  opacity: 1;
  filter: saturate(1.08) brightness(1.06) drop-shadow(0 22px 30px #000) drop-shadow(0 0 42px rgba(199,167,107,.32));
}

.vn-sprite.listening {
  z-index: 1;
  opacity: .38;
  filter: saturate(.38) brightness(.48) drop-shadow(0 18px 26px #000);
}

@media (max-width: 900px) {
  .vn-stage { bottom: 226px; }
  .vn-sprite { width: 46vw; max-width: 46%; }
  .vn-sprite.left { left: -4%; }
  .vn-sprite.right { right: -4%; }
}

@media (max-width: 780px) {
  .vn-stage { inset: 62px 0 250px; }
  .vn-sprite { width: 58vw; max-width: 58%; }
  .vn-sprite.left { left: -13%; }
  .vn-sprite.right { right: -13%; }
  .vn-sprite.listening { opacity: .25; }
}