/* LIFE — artwork menus with overlay buttons */

.menu-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #05080c;
  z-index: 5;
  user-select: none;
  -webkit-user-select: none;
}

.art-backdrop {
  position: absolute;
  inset: -60px;
  background: center / cover no-repeat;
  filter: blur(28px) brightness(0.8);
  transition: background-image 0.5s;
}

.art-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 1672px;
  height: 941px;
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

.art-layer.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease, visibility 0s;
}

.art-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.letterboxed .art-image {
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
}

/* Invisible real buttons sitting exactly on the painted ones.
   Sizes are in artwork pixels; the layer scale handles the screen. */
.hotspot {
  position: absolute;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition:
    background 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.12s ease;
}

.menu-stage .hotspot:hover,
.menu-stage .hotspot:focus-visible {
  border: 0;
  background: rgba(255, 244, 225, 0.07);
  box-shadow:
    0 0 0 3px rgba(255, 236, 205, 0.85),
    0 0 42px rgba(255, 200, 120, 0.42),
    inset 0 0 26px rgba(255, 220, 170, 0.12);
}

.menu-stage .hotspot:active {
  background: rgba(255, 240, 220, 0.14);
  transform: scale(0.985);
}

/* Touch screens: no sticky hover, but a clear press flash. */
@media (hover: none) {
  .menu-stage .hotspot:hover {
    background: transparent;
    box-shadow: none;
  }

  .menu-stage .hotspot:active {
    background: rgba(255, 244, 225, 0.12);
    box-shadow:
      0 0 0 3px rgba(255, 236, 205, 0.85),
      0 0 42px rgba(255, 200, 120, 0.42);
  }
}