:root.dashboard-room { --yuan-wallpaper:url('/assets/wallpapers/personal-room.webp'); }
.room-arrival { position:fixed; inset:0; z-index:1000; overflow:hidden; pointer-events:none; background:#281006; animation:room-arrival-dismiss 1800ms linear both; }
.room-arrival-room { position:absolute; width:var(--room-side); height:var(--room-side); left:var(--room-left); top:var(--room-top); background-position:center; background-size:cover; background-image:url('/assets/wallpapers/personal-room.webp'); transform-origin:50% 46%; animation:room-camera-back 1550ms cubic-bezier(.38,.08,.22,1) both; }
/* The same meadow remains anchored inside the same window at every frame.
   No image substitution, opacity trick or extra full-screen grass texture. */
@keyframes room-camera-back { from { transform:translateY(var(--room-start-y)) scale(var(--room-start-scale)); } to { transform:translateY(0) scale(1); } }
@keyframes room-arrival-dismiss { 0%,86% { opacity:1; } 100% { opacity:0; } }
@media (max-width:650px) {
  :root.dashboard-room { --yuan-wallpaper:url('/assets/wallpapers/personal-room-mobile.webp'); }
  .room-arrival-room { background-image:url('/assets/wallpapers/personal-room-mobile.webp'); }
}
@media (prefers-reduced-motion:reduce) { .room-arrival { display:none; animation:none; } .room-arrival * { animation:none; } }

/* The first destination paint and departing dialog share the exact camera pose. */
html.room-preparing body { visibility:hidden; }
html.room-preparing::before { content:""; position:fixed; z-index:1000; pointer-events:none; width:var(--room-side); height:var(--room-side); left:var(--room-left); top:var(--room-top); background:center/cover url('/assets/wallpapers/personal-room.webp'); transform-origin:50% 46%; transform:translateY(var(--room-start-y)) scale(var(--room-start-scale)); }
.room-held,.room-held .room-arrival-room { animation-play-state:paused; }
.room-departure { animation:room-departure-cover 140ms ease-out both; }
.room-departure .room-arrival-room { animation-play-state:paused; }
@keyframes room-departure-cover { from { opacity:0; } to { opacity:1; } }
@media (max-width:650px) { html.room-preparing::before { background-image:url('/assets/wallpapers/personal-room-mobile.webp'); } }
@media (prefers-reduced-motion:reduce) { html.room-preparing body { visibility:visible; } html.room-preparing::before { display:none; } }