#vn-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 2;
  --vn-slide-distance: 6vw;
  --vn-slide-distance-stack: 3vw;
  --vn-slide-distance-spotlight: 2.4vw;
  --vn-slide-base: 0vw;
}

#vn-scene.active {
  opacity: 0.28;
}

body.scene-dark #vn-scene.active {
  opacity: 0.14;
}

#vn-scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.8) brightness(0.9);
  transform: scale(1.04);
  transition: opacity 0.3s ease;
}

#vn-scene.vn-intro #vn-scene-bg {
  transform-origin: 0 0;
}

#vn-scene.vn-intro .vn-sprite {
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.35)) brightness(0) saturate(0);
}

#vn-scene.vn-intro .vn-sprite::after {
  opacity: 0;
}

@keyframes vnSceneIntro {
  0% {
    transform: translate(-160vw, 0) scale(2.6);
  }
  45% {
    transform: translate(-120vw, 0) scale(2.6);
  }
  55% {
    transform: translate(-120vw, 0) scale(2.6);
  }
  56% {
    transform: translate(0, -160vh) scale(2.6);
  }
  85% {
    transform: translate(-40vw, -160vh) scale(2.6);
  }
  95% {
    transform: translate(-40vw, -160vh) scale(2.6);
  }
  96%,
  100% {
    transform: translate(0, 0) scale(1.04);
  }
}

#vn-scene-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
  opacity: 0;
  transition: opacity 0.35s ease, background 0.35s ease;
  pointer-events: none;
}

#vn-scene-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#vn-scene .vn-spotlight {
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  opacity: 0;
  transition: opacity 0.2s ease;
  --vn-lane-slide-amount: var(--vn-slide-distance-spotlight, 2.4vw);
  background:
    radial-gradient(circle at 28% 42%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.2) 18%, rgba(0, 0, 0, 0) 48%);
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(2px);
  z-index: 0;
}

#vn-scene.vn-focus-mode .vn-spotlight {
  opacity: 1;
  animation: focusLaneSlide 5s ease-out 1 forwards;
  animation-delay: 0s;
}

#vn-scene.spotlight-paused .vn-spotlight {
  opacity: 0;
  animation: none;
}


#vn-scene-characters {
  position: absolute;
  inset: 0;
}

.vn-scene-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vn-scene-pov-layer {
  z-index: 3;
  --vn-lane-slide-amount: var(--vn-slide-distance);
}

.vn-scene-stack-layer {
  z-index: 2;
  --vn-lane-slide-amount: calc(-1 * var(--vn-slide-distance-stack));
}

.vn-sprite {
  position: absolute;
  bottom: 0;
  height: clamp(260px, 68vh, 620px);
  width: auto;
  max-width: 70vw;
  opacity: 0;
  --vn-sprite-scale: 0.98;
  --vn-sprite-shift: 14px;
  transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  transition: opacity 0.35s ease, transform 0.55s ease, left 0.55s ease, filter 0.6s ease;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.35));
  will-change: transform, opacity, left;
}

.vn-sprite::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-color, #00aaff);
  opacity: 0;
  -webkit-mask-image: var(--vn-sprite-mask);
  mask-image: var(--vn-sprite-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.vn-sprite-flat {
  position: absolute;
  inset: 0;
  background: var(--accent-color, #00aaff);
  opacity: 0;
  -webkit-mask-image: var(--vn-sprite-mask);
  mask-image: var(--vn-sprite-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.vn-sprite-img {
  height: 100%;
  width: auto;
  display: block;
  transition: opacity 0.35s ease;
}

.vn-sprite.show {
  opacity: 1;
  --vn-sprite-scale: 1;
  --vn-sprite-shift: 0px;
}

.vn-sprite.exit {
  opacity: 0;
  --vn-sprite-scale: 0.97;
  --vn-sprite-shift: 18px;
}

@keyframes povEnterLeft {
  from {
    opacity: 0;
    transform: translateX(calc(-50% - 120vw)) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
}

@keyframes povEnterRight {
  from {
    opacity: 0;
    transform: translateX(calc(-50% + 120vw)) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
}

@keyframes povExitLeft {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  80% {
    opacity: 1;
    transform: translateX(calc(-50% - 120vw)) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  to {
    opacity: 0;
    transform: translateX(calc(-50% - 120vw)) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
}

@keyframes povExitRight {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  80% {
    opacity: 1;
    transform: translateX(calc(-50% + 120vw)) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  to {
    opacity: 0;
    transform: translateX(calc(-50% + 120vw)) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
}

@keyframes focusSwapEnterLeft {
  from {
    transform: translateX(calc(-50% - 120vw)) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  to {
    transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
}

@keyframes focusSwapEnterRight {
  from {
    transform: translateX(calc(-50% + 120vw)) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  to {
    transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
}

@keyframes vnSpriteFloat {
  0%,
  100% {
    transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  12.5% {
    transform: translateX(calc(-50% + calc(var(--vn-sprite-float-x) * 0.6))) translateY(calc(var(--vn-sprite-shift) - calc(var(--vn-sprite-float-y) * 0.35))) scale(var(--vn-sprite-scale));
  }
  25% {
    transform: translateX(calc(-50% + var(--vn-sprite-float-x))) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  37.5% {
    transform: translateX(calc(-50% + calc(var(--vn-sprite-float-x) * 0.6))) translateY(calc(var(--vn-sprite-shift) + calc(var(--vn-sprite-float-y) * 0.6))) scale(var(--vn-sprite-scale));
  }
  50% {
    transform: translateX(-50%) translateY(calc(var(--vn-sprite-shift) + var(--vn-sprite-float-y))) scale(var(--vn-sprite-scale));
  }
  62.5% {
    transform: translateX(calc(-50% - calc(var(--vn-sprite-float-x) * 0.6))) translateY(calc(var(--vn-sprite-shift) + calc(var(--vn-sprite-float-y) * 0.6))) scale(var(--vn-sprite-scale));
  }
  75% {
    transform: translateX(calc(-50% - var(--vn-sprite-float-x))) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale));
  }
  87.5% {
    transform: translateX(calc(-50% - calc(var(--vn-sprite-float-x) * 0.6))) translateY(calc(var(--vn-sprite-shift) - calc(var(--vn-sprite-float-y) * 0.35))) scale(var(--vn-sprite-scale));
  }
}

.vn-sprite.pov-enter-left {
  animation: povEnterLeft 0.45s ease both;
}

.vn-sprite.pov-enter-right {
  animation: povEnterRight 0.45s ease both;
}

.vn-sprite.pov-exit-left {
  animation: povExitLeft 0.5s ease both;
}

.vn-sprite.pov-exit-right {
  animation: povExitRight 0.5s ease both;
}

body.debate-active #vn-scene {
  opacity: 0;
}

body.free-time-selecting #vn-scene {
  pointer-events: auto;
}

body.free-time-selecting #vn-scene.active {
  opacity: 1;
}

body.free-time-selecting #vn-scene .vn-sprite {
  cursor: pointer;
}

body.free-time-selecting #vn-scene-bg {
  filter: none;
}

body.free-time-selecting #vn-scene-bg::before {
  opacity: 0;
}

body.free-time-selecting #vn-scene.vn-focus-mode #vn-scene-bg {
  opacity: 1;
}

body.free-time-selecting #vn-scene.vn-focus-mode #vn-scene-bg::before {
  opacity: 0;
}

#vn-scene.vn-focus-mode #vn-scene-bg {
  filter: saturate(0.6) brightness(0.7);
  opacity: 0;
}

#vn-scene.vn-focus-mode #vn-scene-bg::before {
  opacity: 1;
}

#vn-scene.vn-focus-mode #vn-scene-bg::after {
  opacity: 1;
  background: radial-gradient(circle at 28% 42%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.85) 100%);
}

#vn-scene.vn-focus-mode .vn-sprite {
  --vn-sprite-scale: 1;
  --vn-sprite-shift: 0px;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.45)) brightness(1.05) saturate(1.05);
  animation: none;
}

#vn-scene.vn-focus-mode.vn-float-ready .vn-sprite {
  animation: vnSpriteFloat 5s linear infinite;
  animation-delay: var(--vn-sprite-float-delay, 0s);
  --vn-sprite-float-x: 4px;
  --vn-sprite-float-y: 6px;
}

#vn-scene.vn-focus-mode.vn-float-ready .vn-sprite.focus-swap {
  animation: none;
}

#vn-scene.vn-focus-mode .vn-sprite.focus-swap {
  animation: none;
}

#vn-scene.vn-focus-mode .vn-scene-stack-layer,
#vn-scene.vn-focus-mode .vn-scene-pov-layer {
  animation: focusLaneSlide 5s ease-out 1 forwards;
  animation-direction: normal;
}

#vn-scene.slide-reverse .vn-scene-stack-layer,
#vn-scene.slide-reverse .vn-scene-pov-layer {
  animation-name: focusLaneSlideReverse;
}

#vn-scene.slide-reverse .vn-spotlight {
  animation-name: focusLaneSlideReverse;
}

#vn-scene.slide-restart .vn-scene-stack-layer,
#vn-scene.slide-restart .vn-scene-pov-layer,
#vn-scene.slide-restart .vn-spotlight {
  animation: none;
}


*** End Patch Block

#vn-scene.pov-slide-right .vn-scene-pov-layer {
  --vn-lane-slide-amount: var(--vn-slide-distance);
}

#vn-scene.pov-slide-left .vn-scene-pov-layer {
  --vn-lane-slide-amount: calc(-1 * var(--vn-slide-distance));
}

#vn-scene.pov-slide-right .vn-scene-stack-layer {
  --vn-lane-slide-amount: calc(-1 * var(--vn-slide-distance-stack));
}

#vn-scene.pov-slide-left .vn-scene-stack-layer {
  --vn-lane-slide-amount: var(--vn-slide-distance-stack);
}

#vn-scene.pov-slide-right .vn-spotlight {
  --vn-lane-slide-amount: var(--vn-slide-distance-spotlight, 2.4vw);
}

#vn-scene.pov-slide-left .vn-spotlight {
  --vn-lane-slide-amount: calc(-1 * var(--vn-slide-distance-spotlight, 2.4vw));
}

#vn-scene.vn-focus-mode .vn-sprite:not(.focus-swap).pov-enter-left,
#vn-scene.vn-focus-mode .vn-sprite:not(.focus-swap).pov-enter-right,
#vn-scene.vn-focus-mode .vn-sprite:not(.focus-swap).pov-exit-left,
#vn-scene.vn-focus-mode .vn-sprite:not(.focus-swap).pov-exit-right {
  animation: none;
}

#vn-scene.vn-focus-mode .vn-sprite.focus-swap.pov-enter-left {
  animation: focusSwapEnterLeft 0.3s ease both;
}

#vn-scene.vn-focus-mode .vn-sprite.focus-swap.pov-enter-right {
  animation: focusSwapEnterRight 0.3s ease both;
}

#vn-scene.vn-focus-mode .vn-sprite.focus-swap.pov-exit-left {
  animation: povExitLeft 0.32s ease both;
}

#vn-scene.vn-focus-mode .vn-sprite.focus-swap.pov-exit-right {
  animation: povExitRight 0.32s ease both;
}

#vn-scene.vn-focus-mode .vn-sprite-flat {
  opacity: 1;
}

#vn-scene.vn-focus-mode .vn-sprite.focus-pov {
  --vn-sprite-scale: 1.35;
  --vn-sprite-shift: -12px;
  filter: drop-shadow(0 0 36px rgba(0, 0, 0, 0.35));
}

#vn-scene.vn-focus-mode .vn-sprite.focus-pov .vn-sprite-flat {
  opacity: 0.4;
  mix-blend-mode: color;
  background: var(--accent-color, #00aaff);
}

#vn-scene.vn-focus-mode .vn-sprite.focus-pov::after {
  opacity: 0;
  mix-blend-mode: normal;
}

#vn-scene.vn-focus-mode .vn-sprite.focus-pov .vn-sprite-img {
  filter: grayscale(1) url(#vn-accent-tint) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.7));
}

#vn-scene.vn-focus-mode .vn-sprite.focus-pov::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0.9) 100%);
  opacity: 0.8;
  -webkit-mask-image: var(--vn-sprite-mask);
  mask-image: var(--vn-sprite-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  pointer-events: none;
}

#vn-scene.vn-focus-mode .vn-sprite.focus-stack {
  --vn-sprite-scale: 0.62;
  --vn-sprite-shift: 18px;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)) saturate(0.75) brightness(0.7);
}

#vn-scene.vn-focus-mode .vn-sprite:not(.focus-pov) {
  opacity: 0.65;
}

#vn-scene.vn-focus-scaled .vn-sprite {
  --vn-sprite-scale: 0.92;
  --vn-sprite-shift: -10px;
}

#vn-scene.vn-focus-mode .vn-sprite::after {
  opacity: 0;
}

#vn-scene.vn-focus-mode .vn-sprite.vn-sprite-mask .vn-sprite-img {
  opacity: 0;
}

#vn-scene.vn-focus-mode .vn-sprite.focus-pov.vn-sprite-mask .vn-sprite-img {
  opacity: 1;
}

#vn-scene.vn-focus-returning .vn-sprite {
  --vn-sprite-scale: 1;
  --vn-sprite-shift: 0px;
}

@keyframes focusSpriteFloat {
  0% {
    transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale)) rotate(-0.3deg);
  }
  35% {
    transform: translateX(calc(-50% + 0.7vw)) translateY(calc(var(--vn-sprite-shift) + 0.9vh)) scale(calc(var(--vn-sprite-scale) * 1.02)) rotate(0.2deg);
  }
  70% {
    transform: translateX(calc(-50% - 0.6vw)) translateY(calc(var(--vn-sprite-shift) - 0.7vh)) scale(calc(var(--vn-sprite-scale) * 0.98)) rotate(-0.25deg);
  }
  100% {
    transform: translateX(-50%) translateY(var(--vn-sprite-shift)) scale(var(--vn-sprite-scale)) rotate(0deg);
  }
}

@keyframes focusLaneSlide {
  0% {
    transform: translateX(var(--vn-slide-base, 0vw));
  }
  100% {
    transform: translateX(calc(var(--vn-slide-base, 0vw) + var(--vn-lane-slide-amount, 0vw)));
  }
}

@keyframes focusLaneSlideReverse {
  0% {
    transform: translateX(calc(var(--vn-slide-base, 0vw) + var(--vn-lane-slide-amount, 0vw)));
  }
  100% {
    transform: translateX(var(--vn-slide-base, 0vw));
  }
}


@media (max-width: 600px) {
  #vn-scene {
    opacity: 0.22;
  }

  body.scene-dark #vn-scene {
    opacity: 0.1;
  }

  .vn-sprite {
    height: clamp(200px, 52vh, 460px);
    max-width: 76vw;
  }

  #vn-scene.vn-focus-mode .vn-sprite.focus-pov {
    --vn-sprite-scale: 1.2;
    --vn-sprite-shift: -6px;
  }

  #vn-scene.vn-focus-mode .vn-sprite.focus-stack {
    --vn-sprite-scale: 0.72;
    --vn-sprite-shift: 12px;
  }
}