/* One moving screen inside the existing, stationary spotlight frame. */
body.halloween.overhaul.worlds #spotlight {
  perspective:1000px;
  perspective-origin:50% 50%;
  transform-style:flat;
  touch-action:pan-y pinch-zoom;
}
body.halloween.overhaul.worlds #spotlight:focus-visible {
  outline:2px solid var(--world-accent,var(--lime));
  outline-offset:4px;
}
body.halloween.overhaul.worlds #spotlight-slide {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  border-radius:inherit;
  isolation:isolate;
  overflow:hidden;
  transform:none;
  transform-origin:50% 50%;
  transform-style:flat;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  opacity:1;
}
/* The image now belongs to the single slide, rather than the frame itself. */
body.halloween.overhaul.worlds #spotlight-slide>#spotlight-image {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  transform:none;
  transform-style:flat;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:none;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
body.halloween.overhaul.worlds #spotlight-swipe-hint {
  display:none;
  position:absolute;
  right:18px;
  bottom:37px;
  z-index:6;
  max-width:calc(100% - 180px);
  padding:4px 0;
  color:var(--xg-soft);
  font:500 8px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.05px;
  white-space:nowrap;
  text-align:right;
  text-shadow:0 1px 7px #000c;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  animation:none;
}
@media(max-width:900px) {
  body.halloween.overhaul.worlds #spotlight-swipe-hint {display:block}
}
@media(max-width:600px) {
  body.halloween.overhaul.worlds #spotlight-swipe-hint {bottom:33px}
}
@media(max-width:360px) {
  body.halloween.overhaul.worlds #spotlight-swipe-hint {right:16px;bottom:31px}
}
html.motion-paused body.halloween.overhaul.worlds #spotlight,
body.halloween.overhaul.worlds.motion-paused #spotlight {perspective:none}
html.motion-paused body.halloween.overhaul.worlds #spotlight-slide,
body.halloween.overhaul.worlds.motion-paused #spotlight-slide {
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
@media(prefers-reduced-motion:reduce) {
  body.halloween.overhaul.worlds #spotlight {perspective:none}
  body.halloween.overhaul.worlds #spotlight-slide {
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
}