.rooftop-room {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #208cd7;
  transform-origin: 50% 50%;
  transition: transform 2.2s cubic-bezier(.2,.72,.2,1), filter .5s;
}

.rooftop-background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.rooftop-background { z-index: 0; }
.rooftop-foreground {
  position: absolute;
  z-index: 6;
  left: 81.84%;
  top: 30.21%;
  display: block;
  width: 12.7%;
  height: 69.79%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.rooftop-hiding-character{position:absolute;z-index:5;right:calc(7.9% - 2px);top:calc(29.4% - 6px);display:block;width:40.5%;height:auto;aspect-ratio:1;object-fit:contain;opacity:0;cursor:pointer;user-select:none;transition:opacity .25s ease,transform .65s cubic-bezier(.2,.72,.2,1)}
.rooftop-scene.active.rooftop-zoomed .rooftop-room{transform:none}
.rooftop-scene.active.rooftop-character-playing .rooftop-hiding-character{opacity:1}
.rooftop-scene.rooftop-character-stepped .rooftop-hiding-character{transform:none}
#scene-rooftop.roof-conversation .rooftop-hiding-character{z-index:17;left:48.5%;right:auto;top:auto;bottom:-33%;width:60%;height:120%;transform:scale(1.24);transform-origin:center bottom;object-position:center bottom;opacity:1;visibility:visible}
.rooftop-curator{opacity:0!important;pointer-events:none!important}
.rooftop-ui,.rooftop-entry{position:absolute;z-index:10;width:var(--corner-icon-size);height:auto;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:transform .2s ease}
.rooftop-ui img,.rooftop-entry img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.rooftop-ui:hover,.rooftop-ui:focus-visible,.rooftop-entry:hover,.rooftop-entry:focus-visible{transform:scale(1.08);outline:0}
.rooftop-return{left:var(--corner-icon-left);top:var(--corner-icon-top)}
.rooftop-sound{right:var(--corner-sound-right);top:var(--corner-icon-top)}
.rooftop-voice{right:var(--corner-settings-right);top:var(--corner-icon-top)}
.rooftop-entry{top:43.23%;width:4.54%}.rooftop-prev{left:2.95%}
.rooftop-sound[aria-pressed="true"]{filter:drop-shadow(0 0 10px #fff)}
.game:has(#scene-rooftop.active)>.hud,.game:has(#scene-rooftop.active)>.dialogue,.game:has(#scene-rooftop.active)>.hint{display:none}