/*
  Start menu (Bach.StartMenu): the title-card panel with two choices, and a
  level list behind "Load game". Builds on title-card.css (same panel, title
  and subtitle); only the menu parts are here.
*/

/* Both views share one grid cell, so the panel is as tall as the taller view
   and never changes height when switching. The hidden one is out of the tab
   order (visibility), not just out of sight. */
.start-menu__views {
  width: 100%;
  display: grid;
  justify-items: center;
}

.start-menu__view {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  visibility: hidden;
  pointer-events: none;
}

.start-menu__view.is-active {
  visibility: visible;
  pointer-events: auto;
  animation: start-menu-view-in 260ms ease;
}

.start-menu__view .btn {
  width: 100%;
}

/* The new-game button breathes like the old PRESS START did. */
.start-menu__main-btn {
  animation: title-card-glow 2400ms ease-in-out infinite;
}

.start-menu__levels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* One row per listed level: "LEVEL 1" and its status tag. (No place name:
   those stay a surprise.) Each row wears its own level accent (set inline),
   like the level pages do. */
.start-menu__level {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  text-align: left;
}

.start-menu__level-num {
  font-size: 12px;
}

.start-menu__level-status {
  justify-self: end;
  padding: 2px var(--space-2);
  font-size: 8px;
  letter-spacing: 1px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

.start-menu__level--complete .start-menu__level-status {
  color: var(--color-accent-gold);
}

@keyframes start-menu-view-in {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Short screens (a phone on its side): tighter, so the list isn't cut off. */
@media (max-height: 560px) {
  .start-menu .title-card__panel {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .start-menu .title-card__title {
    font-size: calc(clamp(22px, 8vh, 36px) * var(--font-title-scale));
  }

  .start-menu__levels,
  .start-menu__view {
    gap: var(--space-2);
  }

  .start-menu__view .btn {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
}