#menus {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#menus .menu,
#menus .menu * {
  touch-action: manipulation;
}

/* every menu stays laid out and fades, so a change of menu never blinks; the one coming waits a
   moment for the one going to thin out, so their words never sit on top of each other, and the one
   going lets taps through at once */
.menu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab))
    calc(16px + var(--sal));
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--duration-fast) var(--easing-out),
    visibility 0s var(--easing-linear) var(--duration-fast);
}

.menu.open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-normal) var(--easing-out) var(--duration-instant);
}

/* only the panel moves as it comes; the painting and the dim behind it hold still */
.menu.sub.open .box,
.menu.enter .mlist,
.menu.enter .mtitle,
.menu.enter .mnote,
.menu.enter .stats {
  animation: menu-rise var(--duration-normal) var(--easing-standard) var(--duration-instant) both;
}

@keyframes menu-rise {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

.menu-scene,
.menu-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.menu-dim {
  background-color: var(--color-clear);
  transition: background-color var(--duration-normal) var(--easing-out);
}

#menus[data-dim='light'] .menu-dim {
  background-color: var(--color-backdrop-light);
}

#menus[data-dim='menu'] .menu-dim {
  background-color: var(--color-backdrop);
}

#menus[data-dim='panel'] .menu-dim {
  background-color: var(--color-backdrop-strong);
}

.logo {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-game-logo);
  line-height: var(--leading-logo);
  margin: 0;
  text-align: center;
  letter-spacing: var(--tracking-slight);
  color: var(--color-accent);
  text-shadow: var(--text-shadow-logo);
}

.menu.enter .logo {
  animation: logo-in var(--duration-logo) var(--easing-overshoot) both;
}

.logo span {
  display: block;
  font-size: var(--font-size-logo-tagline);
  color: var(--color-text);
  letter-spacing: var(--tracking-widest);
  text-shadow: var(--text-shadow-pixel-sm);
  margin-top: 0.35em;
}

@keyframes logo-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.mtitle {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-game-title);
  margin: 0 0 6px;
  text-align: center;
  color: var(--color-text);
  text-shadow: var(--text-shadow-pixel-md);
}

.mtitle.bad {
  color: var(--color-danger);
}

.mtitle.good {
  color: var(--color-accent);
}

.mlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(300px, 82vw);
  margin-top: 8px;
}

.mbtn {
  font-family: var(--font-display);
  font-size: var(--font-size-game-button);
  letter-spacing: var(--tracking-wide);
  padding: 11px 16px;
  color: var(--color-text);
  background: var(--color-panel);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-pixel-md);
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  transition: transform var(--duration-instant);
}

.mbtn:hover,
.mbtn.sel {
  background: var(--color-accent);
  color: var(--color-ink);
  border-color: var(--color-accent-strong);
}

.mbtn:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-pixel-sm);
}

.mbtn.primary {
  background: var(--color-amber-deep);
  border-color: var(--color-accent);
}

.mbtn.primary:hover,
.mbtn.primary.sel {
  background: var(--color-accent);
}

.mbtn:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu.open,
  .menu-scene,
  .menu-dim {
    transition: none;
  }

  .menu.sub.open .box,
  .menu.enter .logo,
  .menu.enter .mlist,
  .menu.enter .mtitle,
  .menu.enter .mnote,
  .menu.enter .stats {
    animation: none;
  }
}