/*
 * rooms.css
 * Fixed fullscreen room backgrounds.
 *
 * Strong blurred-fill strategy:
 * - .room-background receives the current room image as cover fallback.
 * - .room-background::before inherits the same image, enlarges it and blurs it.
 * - .room-background-image shows the same image with object-fit: contain.
 *
 * This ensures that empty areas around a contained 9:16 room image are filled
 * with a blurred enlarged version of the same room image, not black.
 */

.room-background {
  position: fixed;
  inset: 0;
  z-index: var(--z-background);
  width: 100%;
  height: 100dvh;
  min-width: 320px;
  overflow: hidden;
  background-color: var(--color-bg-deep);
  background-image: var(--room-bg-image, none);
  background-size: cover;
  background-position: var(--room-bg-position, center center);
  background-repeat: no-repeat;
  --room-parallax-image-x: 0px;
  --room-parallax-image-y: 0px;
  --room-parallax-backdrop-x: 0px;
  --room-parallax-backdrop-y: 0px;
  --room-image-scale: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-room-fade) var(--ease-standard),
    visibility var(--duration-room-fade) var(--ease-standard);
}

.room-background::before {
  content: "";
  position: absolute;
  inset: -44px;
  z-index: 0;
  background-image: inherit;
  background-size: cover;
  background-position: inherit;
  background-repeat: no-repeat;
  filter: blur(var(--room-backdrop-blur, 22px)) saturate(1.12) brightness(0.8);
  transform:
    translate3d(
      var(--room-parallax-backdrop-x, 0px),
      var(--room-parallax-backdrop-y, 0px),
      0
    )
    scale(var(--room-backdrop-scale, 1.12));
  transform-origin: center center;
  opacity: 1;
}

.room-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 219, 150, 0.06), transparent 34%),
    rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.room-background.is-visible {
  opacity: 1;
  visibility: visible;
}

.room-background.is-changing {
  opacity: 0;
}

.room-background-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform:
    translate3d(
      var(--room-parallax-image-x, 0px),
      var(--room-parallax-image-y, 0px),
      0
    )
    scale(var(--room-image-scale, 1));
  filter: none;
  transition:
    filter var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard),
    opacity var(--duration-slow) var(--ease-standard);
}

.room-background.is-parallax-enabled {
  --room-image-scale: 1.012;
}

.room-background.is-room-blurred {
  --room-image-scale: 1.018;
}

.room-background.is-parallax-enabled.is-room-blurred {
  --room-image-scale: 1.024;
}

.room-background.is-room-blurred .room-background-image {
  filter: blur(var(--room-blur)) saturate(0.92) brightness(0.78);
}

.room-background.is-room-blurred::before {
  filter: blur(calc(var(--room-backdrop-blur, 22px) + 6px)) saturate(1.04) brightness(0.7);
  transform:
    translate3d(
      var(--room-parallax-backdrop-x, 0px),
      var(--room-parallax-backdrop-y, 0px),
      0
    )
    scale(calc(var(--room-backdrop-scale, 1.12) + 0.03));
}

.room-background-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 219, 150, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, var(--room-overlay-opacity)));
  opacity: 1;
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    background var(--duration-slow) var(--ease-standard);
}

.room-background.is-room-blurred .room-background-overlay {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 203, 131, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.58));
}

/*
 * Room atmosphere layer.
 *
 * Chaotic but lightweight mist and wind particles above the clear room image,
 * below all game UI. It is intentionally performance-safe:
 * - 4 DOM layers total
 * - no video/GIF/canvas
 * - no animated blur/filter
 * - only transform + opacity animations
 * - controlled per room from config/game-settings.php
 */
.room-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  contain: layout paint;
}

.room-background.is-atmosphere-enabled .room-atmosphere {
  opacity: var(--room-atmosphere-opacity, 0.92);
}

.room-mist,
.room-particles {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

/*
 * Mist:
 * Large gradient sheets start outside the room image, cross the frame,
 * subtly change direction, then leave the other side. No filter: blur() is used.
 */
.room-mist {
  top: -22%;
  left: -125%;
  width: 250%;
  height: 150%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 12% 40%, rgba(var(--room-mist-color-rgb, 255, 230, 180), 0.34), transparent 25%),
    radial-gradient(ellipse at 34% 63%, rgba(255, 255, 255, 0.18), transparent 24%),
    radial-gradient(ellipse at 58% 34%, rgba(var(--room-mist-color-rgb, 255, 230, 180), 0.24), transparent 30%),
    radial-gradient(ellipse at 82% 67%, rgba(255, 255, 255, 0.12), transparent 26%);
}

.room-background.is-atmosphere-enabled.is-atmosphere-mist-enabled .room-mist {
  opacity: var(--room-mist-opacity, 0.30);
}

.room-background.is-atmosphere-running .room-mist--one {
  animation: roomMistChaosOne var(--room-mist-duration, 26s) ease-in-out infinite;
}

.room-mist--two {
  top: -26%;
  left: -135%;
  width: 270%;
  height: 162%;
  background:
    radial-gradient(ellipse at 16% 70%, rgba(255, 255, 255, 0.15), transparent 24%),
    radial-gradient(ellipse at 43% 38%, rgba(var(--room-mist-color-rgb, 255, 230, 180), 0.25), transparent 34%),
    radial-gradient(ellipse at 76% 54%, rgba(var(--room-mist-color-rgb, 255, 230, 180), 0.20), transparent 28%);
}

.room-background.is-atmosphere-enabled.is-atmosphere-mist-enabled .room-mist--two {
  opacity: calc(var(--room-mist-opacity, 0.30) * 0.72);
}

.room-background.is-atmosphere-running .room-mist--two {
  animation: roomMistChaosTwo calc(var(--room-mist-duration, 26s) * 1.34) ease-in-out infinite;
  animation-delay: calc(var(--room-mist-duration, 26s) * -0.52);
}

/*
 * Particles:
 * Visually many dots, but technically only two moving CSS layers.
 * No individual particle nodes are created.
 */
.room-particles {
  inset: -20%;
  opacity: 0;
  background-repeat: repeat;
}

.room-background.is-atmosphere-enabled.is-atmosphere-particles-enabled .room-particles {
  opacity: var(--room-particle-opacity, 0.42);
}

.room-particles--far {
  background-image:
    radial-gradient(circle, rgba(var(--room-particle-color-rgb, 255, 230, 180), 0.52) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 0.8px, transparent 1.6px);
  background-size: 86px 116px, 138px 174px;
  background-position: 18px 24px, 70px 92px;
}

.room-background.is-atmosphere-running .room-particles--far {
  animation: roomParticlesChaosFar var(--room-particles-duration, 18s) ease-in-out infinite;
}

.room-particles--near {
  inset: -26%;
  background-image:
    radial-gradient(circle, rgba(var(--room-particle-color-rgb, 255, 230, 180), 0.68) 0 1.25px, transparent 2.4px),
    radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 1px, transparent 2px);
  background-size: 156px 210px, 236px 270px;
  background-position: 42px 56px, 128px 92px;
}

.room-background.is-atmosphere-enabled.is-atmosphere-particles-enabled .room-particles--near {
  opacity: calc(var(--room-particle-opacity, 0.42) * 0.62);
}

.room-background.is-atmosphere-running .room-particles--near {
  animation: roomParticlesChaosNear calc(var(--room-particles-duration, 18s) * 1.42) ease-in-out infinite;
  animation-delay: calc(var(--room-particles-duration, 18s) * -0.37);
}

@keyframes roomMistChaosOne {
  0% {
    opacity: 0;
    transform: translate3d(-38%, 10%, 0) scale(1.04) rotate(-0.6deg);
  }

  14% {
    opacity: var(--room-mist-opacity, 0.30);
  }

  32% {
    transform: translate3d(-10%, -4%, 0) scale(1.08) rotate(0.35deg);
  }

  55% {
    transform: translate3d(12%, 7%, 0) scale(1.03) rotate(-0.25deg);
  }

  80% {
    opacity: var(--room-mist-opacity, 0.30);
    transform: translate3d(31%, -8%, 0) scale(1.09) rotate(0.5deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(46%, 4%, 0) scale(1.05) rotate(-0.2deg);
  }
}

@keyframes roomMistChaosTwo {
  0% {
    opacity: 0;
    transform: translate3d(-46%, -4%, 0) scale(1.08) rotate(0.4deg);
  }

  16% {
    opacity: calc(var(--room-mist-opacity, 0.30) * 0.72);
  }

  38% {
    transform: translate3d(-18%, 8%, 0) scale(1.02) rotate(-0.45deg);
  }

  62% {
    transform: translate3d(10%, -7%, 0) scale(1.10) rotate(0.25deg);
  }

  78% {
    opacity: calc(var(--room-mist-opacity, 0.30) * 0.72);
  }

  100% {
    opacity: 0;
    transform: translate3d(42%, 9%, 0) scale(1.03) rotate(-0.35deg);
  }
}

@keyframes roomParticlesChaosFar {
  0% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * -0.62), calc(var(--room-wind-y, -42px) * -0.50), 0);
  }

  24% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * -0.18), calc(var(--room-wind-y, -42px) * 0.38), 0);
  }

  51% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * 0.42), calc(var(--room-wind-y, -42px) * -0.22), 0);
  }

  76% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * 0.88), calc(var(--room-wind-y, -42px) * 0.75), 0);
  }

  100% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * 1.22), calc(var(--room-wind-y, -42px) * 1.18), 0);
  }
}

@keyframes roomParticlesChaosNear {
  0% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * -0.90), calc(var(--room-wind-y, -42px) * -0.76), 0);
  }

  21% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * -0.28), calc(var(--room-wind-y, -42px) * 0.62), 0);
  }

  47% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * 0.30), calc(var(--room-wind-y, -42px) * -0.44), 0);
  }

  72% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * 1.05), calc(var(--room-wind-y, -42px) * 0.40), 0);
  }

  100% {
    transform: translate3d(calc(var(--room-wind-x, 190px) * 1.62), calc(var(--room-wind-y, -42px) * 1.30), 0);
  }
}

.room-screen {
  position: relative;
  min-height: 100dvh;
}

.room-screen .screen-scroll {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.10), transparent 22%, rgba(0, 0, 0, 0.20));
}

.room-intro-screen .screen-inner {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.room-challenge-screen .screen-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-4);
}

.room-challenge-screen .screen-title {
  padding-right: calc(var(--restart-button-size) * 0.62);
  padding-left: calc(var(--restart-button-size) * 0.62);
}

/*
 * Level 2 split layout screens.
 *
 * Requirement:
 * - H1 title and text box stay in the upper part of the room image.
 * - Buttons stay in the lower part.
 * - Applied only to these screens:
 *   1) level2.intro
 *   2) level2.intro.challenge1Completed
 *   3) level2.challenge2.intro
 */
.room-screen[data-screen-id="level2.intro"] .screen-inner,
.room-screen[data-screen-id="level2.intro.challenge1Completed"] .screen-inner,
.room-screen[data-screen-id="level2.challenge2.intro"] .screen-inner {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch !important;
  align-items: start;
  justify-items: center;
  gap: clamp(10px, calc(var(--room-stage-height, 720px) * 0.022), 18px);
  text-align: center;
}

.room-screen[data-screen-id="level2.intro"] .screen-title,
.room-screen[data-screen-id="level2.intro.challenge1Completed"] .screen-title,
.room-screen[data-screen-id="level2.challenge2.intro"] .screen-title {
  grid-row: 1;
  align-self: start;
  margin-top: clamp(14px, calc(var(--room-stage-height, 720px) * 0.055), 48px) !important;
  margin-bottom: 0 !important;
}

.room-screen[data-screen-id="level2.intro"] .text-box,
.room-screen[data-screen-id="level2.intro.challenge1Completed"] .text-box,
.room-screen[data-screen-id="level2.challenge2.intro"] .text-box {
  grid-row: 2;
  align-self: start;
  margin-top: 0 !important;
}

.room-screen[data-screen-id="level2.intro"] .screen-actions,
.room-screen[data-screen-id="level2.intro.challenge1Completed"] .screen-actions,
.room-screen[data-screen-id="level2.challenge2.intro"] .screen-actions {
  grid-row: 4;
  align-self: end;
  width: min(100%, 420px) !important;
  margin-top: clamp(18px, calc(var(--room-stage-height, 720px) * 0.05), 44px) !important;
  margin-bottom: clamp(28px, calc(var(--room-stage-height, 720px) * 0.11), 92px) !important;
}

.room-screen[data-screen-id="level2.intro"] .room-hub-actions {
  grid-row: 4;
  align-self: end;
  width: min(100%, 420px) !important;
  margin-top: clamp(18px, calc(var(--room-stage-height, 720px) * 0.05), 44px) !important;
  margin-bottom: clamp(28px, calc(var(--room-stage-height, 720px) * 0.11), 92px) !important;
}

.room-enter-waiting .screen-inner > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.room-enter-ready .screen-inner > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
}

.room-enter-ready .screen-inner > *:nth-child(2) {
  transition-delay: 70ms;
}

.room-enter-ready .screen-inner > *:nth-child(3) {
  transition-delay: 130ms;
}

.room-enter-ready .screen-inner > *:nth-child(4) {
  transition-delay: 180ms;
}

@media (max-width: 360px) {
  .room-challenge-screen .screen-title {
    padding-right: 34px;
    padding-left: 34px;
  }

  .room-screen[data-screen-id="level2.intro"] .screen-title,
  .room-screen[data-screen-id="level2.intro.challenge1Completed"] .screen-title,
  .room-screen[data-screen-id="level2.challenge2.intro"] .screen-title {
    margin-top: clamp(10px, calc(var(--room-stage-height, 640px) * 0.035), 28px) !important;
  }

  .room-screen[data-screen-id="level2.intro"] .screen-actions,
  .room-screen[data-screen-id="level2.intro.challenge1Completed"] .screen-actions,
  .room-screen[data-screen-id="level2.challenge2.intro"] .screen-actions,
  .room-screen[data-screen-id="level2.intro"] .room-hub-actions {
    margin-bottom: clamp(18px, calc(var(--room-stage-height, 640px) * 0.07), 54px) !important;
  }
}

@media (max-height: 680px) {
  .room-screen[data-screen-id="level2.intro"] .screen-inner,
  .room-screen[data-screen-id="level2.intro.challenge1Completed"] .screen-inner,
  .room-screen[data-screen-id="level2.challenge2.intro"] .screen-inner {
    gap: 9px;
  }

  .room-screen[data-screen-id="level2.intro"] .screen-title,
  .room-screen[data-screen-id="level2.intro.challenge1Completed"] .screen-title,
  .room-screen[data-screen-id="level2.challenge2.intro"] .screen-title {
    margin-top: 12px !important;
  }

  .room-screen[data-screen-id="level2.intro"] .screen-actions,
  .room-screen[data-screen-id="level2.intro.challenge1Completed"] .screen-actions,
  .room-screen[data-screen-id="level2.challenge2.intro"] .screen-actions,
  .room-screen[data-screen-id="level2.intro"] .room-hub-actions {
    margin-bottom: 18px !important;
  }
}

@supports not (height: 100dvh) {
  .room-background,
  .room-screen {
    height: 100vh;
    min-height: 100vh;
  }
}

/*
 * Upper-title / lower-content intro layout.
 *
 * Requirement:
 * - H1 title stays in the upper part of the visible room image.
 * - Text box and Continue button stay together in the lower part.
 * - Applied only to:
 *   1) level4.intro
 *   2) level4.challenge2.intro
 *   3) level5.challenge2.intro
 */
.room-screen[data-screen-id="level4.intro"] .screen-inner,
.room-screen[data-screen-id="level4.challenge2.intro"] .screen-inner,
.room-screen[data-screen-id="level5.challenge2.intro"] .screen-inner {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch !important;
  align-items: start;
  justify-items: center;
  gap: clamp(10px, calc(var(--room-stage-height, 720px) * 0.022), 18px);
  text-align: center;
}

.room-screen[data-screen-id="level4.intro"] .screen-title,
.room-screen[data-screen-id="level4.challenge2.intro"] .screen-title,
.room-screen[data-screen-id="level5.challenge2.intro"] .screen-title {
  grid-row: 1;
  align-self: start;
  margin-top: clamp(14px, calc(var(--room-stage-height, 720px) * 0.055), 48px) !important;
  margin-bottom: 0 !important;
}

.room-screen[data-screen-id="level4.intro"] .text-box,
.room-screen[data-screen-id="level4.challenge2.intro"] .text-box,
.room-screen[data-screen-id="level5.challenge2.intro"] .text-box {
  grid-row: 3;
  align-self: end;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.room-screen[data-screen-id="level4.intro"] .screen-actions,
.room-screen[data-screen-id="level4.challenge2.intro"] .screen-actions,
.room-screen[data-screen-id="level5.challenge2.intro"] .screen-actions {
  grid-row: 4;
  align-self: end;
  width: min(100%, 420px) !important;
  margin-top: clamp(10px, calc(var(--room-stage-height, 720px) * 0.018), 18px) !important;
  margin-bottom: clamp(28px, calc(var(--room-stage-height, 720px) * 0.095), 82px) !important;
}

@media (max-width: 360px) {
  .room-screen[data-screen-id="level4.intro"] .screen-title,
  .room-screen[data-screen-id="level4.challenge2.intro"] .screen-title,
  .room-screen[data-screen-id="level5.challenge2.intro"] .screen-title {
    margin-top: clamp(10px, calc(var(--room-stage-height, 640px) * 0.035), 28px) !important;
  }

  .room-screen[data-screen-id="level4.intro"] .screen-actions,
  .room-screen[data-screen-id="level4.challenge2.intro"] .screen-actions,
  .room-screen[data-screen-id="level5.challenge2.intro"] .screen-actions {
    margin-bottom: clamp(18px, calc(var(--room-stage-height, 640px) * 0.065), 50px) !important;
  }
}

@media (max-height: 680px) {
  .room-screen[data-screen-id="level4.intro"] .screen-inner,
  .room-screen[data-screen-id="level4.challenge2.intro"] .screen-inner,
  .room-screen[data-screen-id="level5.challenge2.intro"] .screen-inner {
    gap: 9px;
  }

  .room-screen[data-screen-id="level4.intro"] .screen-title,
  .room-screen[data-screen-id="level4.challenge2.intro"] .screen-title,
  .room-screen[data-screen-id="level5.challenge2.intro"] .screen-title {
    margin-top: 12px !important;
  }

  .room-screen[data-screen-id="level4.intro"] .screen-actions,
  .room-screen[data-screen-id="level4.challenge2.intro"] .screen-actions,
  .room-screen[data-screen-id="level5.challenge2.intro"] .screen-actions {
    margin-bottom: 18px !important;
  }
}

/*
 * Level 5 top-aligned hub layouts.
 *
 * Requirement:
 * - level5.intro: all UX elements stay in the upper part of the visible room image.
 * - level5.intro.challenge1Completed: all UX elements stay in the upper part.
 * - level5.challenge2.intro is intentionally NOT targeted here; it keeps the
 *   existing upper-title / lower-content layout above.
 */
.room-screen[data-screen-id="level5.intro"] .screen-inner,
.room-screen[data-screen-id="level5.intro.challenge1Completed"] .screen-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  align-items: center !important;
  gap: clamp(10px, calc(var(--room-stage-height, 720px) * 0.022), 18px) !important;
  text-align: center;
  padding-top: clamp(14px, calc(var(--room-stage-height, 720px) * 0.045), 42px) !important;
  padding-bottom: clamp(14px, calc(var(--room-stage-height, 720px) * 0.03), 28px) !important;
}

.room-screen[data-screen-id="level5.intro"] .screen-title,
.room-screen[data-screen-id="level5.intro.challenge1Completed"] .screen-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.room-screen[data-screen-id="level5.intro"] .text-box,
.room-screen[data-screen-id="level5.intro.challenge1Completed"] .text-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.room-screen[data-screen-id="level5.intro"] .screen-actions,
.room-screen[data-screen-id="level5.intro.challenge1Completed"] .screen-actions,
.room-screen[data-screen-id="level5.intro"] .room-hub-actions,
.room-screen[data-screen-id="level5.intro.challenge1Completed"] .room-hub-actions {
  width: min(100%, 420px) !important;
  margin-top: clamp(8px, calc(var(--room-stage-height, 720px) * 0.014), 14px) !important;
  margin-bottom: 0 !important;
}

@media (max-width: 360px) {
  .room-screen[data-screen-id="level5.intro"] .screen-inner,
  .room-screen[data-screen-id="level5.intro.challenge1Completed"] .screen-inner {
    gap: 8px !important;
    padding-top: clamp(10px, calc(var(--room-stage-height, 640px) * 0.028), 24px) !important;
    padding-bottom: 12px !important;
  }

  .room-screen[data-screen-id="level5.intro"] .screen-actions,
  .room-screen[data-screen-id="level5.intro.challenge1Completed"] .screen-actions,
  .room-screen[data-screen-id="level5.intro"] .room-hub-actions,
  .room-screen[data-screen-id="level5.intro.challenge1Completed"] .room-hub-actions {
    margin-top: 7px !important;
  }
}

@media (max-height: 680px) {
  .room-screen[data-screen-id="level5.intro"] .screen-inner,
  .room-screen[data-screen-id="level5.intro.challenge1Completed"] .screen-inner {
    gap: 8px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .room-screen[data-screen-id="level5.intro"] .screen-actions,
  .room-screen[data-screen-id="level5.intro.challenge1Completed"] .screen-actions,
  .room-screen[data-screen-id="level5.intro"] .room-hub-actions,
  .room-screen[data-screen-id="level5.intro.challenge1Completed"] .room-hub-actions {
    margin-top: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-background,
  .room-background::before,
  .room-background-image,
  .room-atmosphere,
  .room-mist,
  .room-particles {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .room-atmosphere {
    opacity: 0 !important;
  }
}