/* the title and the hero select stand in front of Angkor Wat at dusk, on one layer shared by both
   (`menuBackdrop`); it fills the tallest the screen gets, since iPhone Safari leaves a strip at the
   bottom unpainted under a page that is only as tall as its smallest viewport */
.menu-scene {
  position: fixed;
  height: 100lvh;
  background: url('../assets/ui/select/bg-landscape.png') center / cover no-repeat
    var(--color-night);
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-out);
}

#menus[data-scene='on'] .menu-scene {
  opacity: 1;
}

/* the canvas draws the same painting with its life over it, cropped and scaled exactly as the
   background is, so each effect lies on its own pixel; until its first frame it is blank and the
   background shows through */
.menu-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

/* the moat and the ruins in the front of the painting are bright; the menus stand on them */
.menu-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--color-clear) 15%,
    var(--color-backdrop) 45%,
    var(--color-backdrop-strong)
  );
}

/* a notch on one side of a phone leaves the full-width row of hero cards a little past the other edge */
#m-title,
.menu.heroes {
  overflow-x: hidden;
}

.heroes .box {
  position: relative;
  width: min(1240px, 100%);
}

.heroes .box header {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 14px 6px;
  border-bottom: 0;
}

.heroes .box header::before,
.heroes .box header::after {
  content: '';
  background-size: 100% 100%;
}

.heroes .box header::before {
  width: 106px;
  height: 58px;
  background-image: url('../assets/ui/kit/title-crest.png');
}

.heroes .box header::after {
  width: min(324px, 100%);
  height: 22px;
  background-image: url('../assets/ui/kit/title-rule.png');
}

.heroes .box h2 {
  color: var(--color-gold);
  text-align: center;
}

.heroes .box .xbtn {
  position: absolute;
  top: 8px;
  right: 14px;
}

@media (orientation: portrait) {
  .menu-scene {
    background-image: url('../assets/ui/select/bg-portrait.png');
  }
}

/* a phone on its side is too short for the crest over the title as well as the middle card */
@media (max-height: 420px) {
  .heroes .box header::before {
    display: none;
  }

  .heroes .box header::after {
    width: 162px;
    height: 11px;
  }

  .heroes .box .xbtn {
    top: 0;
  }
}