.character-idle, .character-expression {
  position: absolute;
  inset: 0;
  background: url('assets/rei-banner-scene.png') center 45% / cover no-repeat;
  pointer-events: none;
}
.character-idle {
  display: none;
}
.character-expression {
  clip-path: var(--face-clip);
  opacity: 0;
  transition: opacity 160ms ease;
}
.character-expression.visible { opacity: 1; }
.limb-window, .limb-image { position:absolute; inset:0; pointer-events:none; }
.limb-image { background:url('assets/rei-banner-scene.png') center 45% / cover no-repeat; }
.limb-sleeve .limb-image { animation:sleeve-breathe 5s ease-in-out infinite; }
.limbs-paused .limb-image { animation-play-state:paused; }
@keyframes sleeve-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-.65px); } }
.character-target {
  position: absolute;
  z-index: 1;
  background: transparent;
  border: 0;
  border-radius: 40%;
  cursor: pointer;
}
.character-target:focus-visible { outline: 2px dashed white; outline-offset: -5px; }
.dialogue { z-index: 4; }
.room-title, .location, .scene-note { pointer-events: none; }
.spot-talk { left: 68%; top: 30%; }
.reaction-bubble {
  position: absolute;
  z-index: 5;
  width: 220px;
  padding: 18px 20px;
  border: 2px solid #111;
  border-radius: 50% 45% 48% 12%;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 5px 18px #0003;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity 160ms ease, transform 200ms ease;
  pointer-events: none;
}
.reaction-bubble.visible { opacity: 1; transform: translateY(0) scale(1); }
[data-reaction] .character-idle { animation-play-state: paused; }
@keyframes character-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.0025); }
}
@media(max-width:640px) {
  .character-idle, .character-expression { background-position: 59% center; }
  .limb-image { background-position:59% center; }
  .spot-talk { display: none; }
  .reaction-bubble { width: 200px; font-size: 12px; padding: 14px 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .character-idle { animation: none; }
  .limb-image { animation:none!important; }
  .reaction-bubble, .character-expression { transition: none; }
}