.frame-animation {
  background-repeat: no-repeat;
  background-size: 300% 200%;
  image-rendering: pixelated;
}

.intro-scene .intro-animation {
  position: absolute;
  inset: 76px 16px 178px;
  z-index: 1;
  border: 4px solid #f1dfbd;
  box-shadow: 6px 6px 0 #17383b;
  background-image: url("assets/prologue-animation-v4.png");
}

.replay-animation {
  width: 100%;
  height: 100%;
  background-image: url("assets/prologue-animation-v4.png");
  background-position: 100% 100%;
}

.handshake-guide {
  position: relative;
  width: 100%;
  height: 55%;
  border: 5px solid #17383b;
  box-shadow: 7px 7px 0 #d68576;
  overflow: hidden;
}

.touch-ring {
  position: absolute;
  left: 32%;
  top: 46%;
  width: 28%;
  aspect-ratio: 1.45;
  border: 4px solid #fff7e8;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #d68576, 0 0 18px 5px #fff7e899;
  animation: touch-pulse 1.5s ease-in-out infinite;
}

.touch-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff7e8ee;
  border: 3px solid #17383b;
  color: #17383b;
  box-shadow: 3px 3px 0 #d68576;
  font-size: 11px;
  line-height: 1.25;
}

.touch-label b { color: #2e6663; letter-spacing: .12em; }

.hand-moment .success-animation {
  width: 100%;
  height: 100%;
  background-image: url("assets/level01-hand-animation-v8.png");
  background-size: 200% 200%;
}

.screen.active .success-animation {
  animation: none;
}

@keyframes touch-pulse {
  50% { transform: scale(1.08); box-shadow: 0 0 0 3px #d68576, 0 0 25px 8px #fff7e8bb; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active .success-animation {
    animation: none;
    background-position: 100% 100%;
  }
  .touch-ring { animation: none; }
}