/* Rara Pixel Office v50 — natural walking sprites on approved table-office artwork */
.rpo-sprite-layer{
  position:absolute;
  inset:0;
  z-index:11;
  display:block!important;
  pointer-events:none;
  overflow:hidden;
}
.rpo-actor{
  --rpo-w:9.4%;
  position:absolute;
  width:var(--rpo-w);
  aspect-ratio:1/1.16;
  transform:translate(-50%,-100%);
  transform-origin:50% 100%;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:left 1.08s cubic-bezier(.22,.72,.28,1),top 1.08s cubic-bezier(.22,.72,.28,1),opacity .10s ease;
  filter:drop-shadow(0 3px 4px rgba(139,59,102,.16));
}
.rpo-actor.is-active{opacity:1}
.rpo-actor canvas{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  pointer-events:none;
}
.rpo-actor[data-state="walk1"],.rpo-actor[data-state="walk2"]{z-index:6}
.rpo-actor[data-state="stand"],.rpo-actor[data-state="action"],.rpo-actor[data-state="drink"]{z-index:5}

/* The old opaque/blurred seat cover made large grey blobs.
   Keep only a tiny feathered veil behind the enlarged sprite so the baked sitter
   does not read as a second person, while desks/chairs remain visible. */
.rpo-seat-mask{
  position:absolute;
  transform:translateX(-50%);
  z-index:2;
  opacity:0;
  pointer-events:none;
  border-radius:50%;
  background:rgba(255,241,248,.18);
  backdrop-filter:blur(1.5px) saturate(.96);
  -webkit-backdrop-filter:blur(1.5px) saturate(.96);
  transition:opacity .10s ease;
  box-shadow:none;
  clip-path:ellipse(44% 48% at 50% 50%);
}
.rpo-seat-mask.is-active{opacity:1}

.rpo-speech{
  position:absolute;
  left:50%;
  bottom:92%;
  transform:translateX(-50%);
  max-width:160px;
  min-width:72px;
  padding:7px 9px;
  border:1.5px solid #df6aa2;
  border-radius:12px;
  background:#fff8fc;
  color:#71324f;
  font-size:clamp(9px,.72vw,12px);
  font-weight:850;
  line-height:1.25;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 3px 8px rgba(128,42,84,.10);
  pointer-events:none;
  animation:rpoBubbleIn .18s ease-out both;
}
.rpo-speech::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:9px;
  height:9px;
  background:#fff8fc;
  border-right:1.5px solid #df6aa2;
  border-bottom:1.5px solid #df6aa2;
  transform:translateX(-50%) rotate(45deg)
}
@keyframes rpoBubbleIn{
  from{opacity:0;transform:translate(-50%,5px) scale(.97)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}
}

/* Old character engines stay retired. */
.v8-staff-layer,.v7-motion-layer,.v12-native-motion-layer,.v46-sprite-layer{display:none!important;pointer-events:none!important}

@media(prefers-reduced-motion:reduce){.rpo-actor{transition:none!important}.rpo-sprite-layer{display:none!important}}
@media(max-width:1050px){
  .rpo-actor{--rpo-w:10.2%}
  .rpo-speech{font-size:8px;padding:5px 7px}
}