.battle-space-background {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  aspect-ratio: 6 / 11;
  overflow: hidden;
  background: #01030a;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.battle-space-background,
.battle-space-background * {
  box-sizing: border-box;
}

.battle-space-background__base,
.battle-space-background__layer,
.battle-space-background__canvas {
  position: absolute;
  display: block;
  pointer-events: none;
}

.battle-space-background__base {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.battle-space-background__base,
.battle-space-background__layer-image {
  object-fit: fill;
  -webkit-user-drag: none;
}

.battle-space-background__layer {
  overflow: visible;
}

.battle-space-background__layer-image {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}

.battle-space-background__layer--right-middle {
  z-index: 1;
  left: 72.222222%;
  top: 37.424243%;
  width: 27.777778%;
  height: 36.818182%;
}

.battle-space-background__layer--right-upper {
  z-index: 2;
  left: 74.444444%;
  top: 31.060606%;
  width: 25.555556%;
  height: 27.272727%;
}

.battle-space-background__layer--bottom {
  z-index: 3;
  left: 44.444445%;
  top: 75.303030%;
  width: 33.888889%;
  height: 21.515152%;
}

.battle-space-background__layer--right-middle .battle-space-background__layer-image {
  animation: battleSpaceDriftMiddle 27s ease-in-out -7s infinite alternate;
}

.battle-space-background__layer--right-upper .battle-space-background__layer-image {
  animation: battleSpaceDriftUpper 35s ease-in-out -19s infinite alternate;
}

.battle-space-background__layer--bottom .battle-space-background__layer-image {
  animation: battleSpaceDriftBottom 33s ease-in-out -11s infinite alternate;
}

.battle-space-background__canvas {
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
}

@keyframes battleSpaceDriftMiddle {
  from {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  to {
    transform: translate3d(-3%, 0.823045%, 0) scale(1.005) rotate(-0.22deg);
  }
}

@keyframes battleSpaceDriftUpper {
  from {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  to {
    transform: translate3d(2.173913%, -1.666667%, 0) scale(1.007) rotate(0.25deg);
  }
}

@keyframes battleSpaceDriftBottom {
  from {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  to {
    transform: translate3d(1.639344%, -2.112676%, 0) scale(1.006) rotate(0.18deg);
  }
}

.battle-space-background.is-reduced-motion .battle-space-background__layer-image {
  animation: none;
  transform: none;
  will-change: auto;
}

.battle-space-battle-layer {
  display: none;
}

@media (max-width: 620px) and (orientation: portrait) {
  body.page-match {
    background-color: #01030a;
    background-image: var(--battle-space-base-image, url("../../assets/ui/scene-base.jpg"));
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  body.page-match::before,
  body.page-match::after {
    display: none;
  }

  body.page-match .battle-space-battle-layer {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
      #01030a
      var(--battle-space-base-image, url("../../assets/ui/scene-base.jpg"))
      center / min(100vw, 430px) auto
      no-repeat;
    pointer-events: none;
  }

  body.page-match #app {
    position: relative;
    isolation: isolate;
    background: #01030a;
  }

  body.page-match #app > .battle-space-battle-layer {
    position: absolute;
  }

  body.page-match #app > .game {
    position: relative;
    z-index: 1;
    isolation: isolate;
    background:
      #01030a
      var(--battle-space-base-image, url("../../assets/ui/scene-base.jpg"))
      center / min(100vw, 430px) auto
      no-repeat;
  }

  body.page-match #app > .game > .battle-space-battle-layer {
    position: absolute;
    z-index: 0;
  }

  /* Fixed dialogs must stay outside the battle layout and above its content. */
  body.page-match #app > .game > :not(.battle-space-battle-layer):not(.modal-backdrop):not(.mobile-log-modal):not(.mobile-discard-modal):not(.defense-detail-modal) {
    position: relative;
    z-index: 1;
  }

  .battle-space-battle-layer .battle-space-background {
    width: min(100vw, 54.545455vh);
    width: min(100vw, 54.545455dvh);
    max-width: 430px;
    height: auto;
    flex: none;
    background: transparent;
  }
}

.battle-space-preview {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #01030a;
}

.battle-space-preview-frame {
  width: min(100vw, 54.545455vh);
  width: min(100vw, 54.545455dvh);
  max-width: 430px;
  aspect-ratio: 6 / 11;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .battle-space-background__layer-image {
    animation: none;
    transform: none;
    will-change: auto;
  }
}