/* The title illustration and its lettering are one native PNG composition. */
.stage-wrap.is-title {
  container-type: inline-size;
  border-color: rgba(235, 205, 138, .5);
  background: #1c1027;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .52), 0 0 0 5px rgba(235, 205, 138, .04);
}

.stage-wrap.is-title .screen-overlay {
  align-items: end;
  justify-items: start;
  padding: 5.5% 5.5% 8%;
  background: none;
}

.stage-wrap.is-title .screen-panel {
  display: flex;
  flex-direction: column;
  width: 34%;
  min-width: 290px;
  max-width: 400px;
  padding: 18px;
  border: 1px solid rgba(237, 204, 143, .48);
  border-radius: 10px;
  color: #fff6db;
  background: rgba(28, 16, 39, .84);
  box-shadow: 0 8px 28px rgba(18, 7, 29, .2);
  text-align: center;
}

/* Keep a real accessible heading; the painting already includes its logo. */
.stage-wrap.is-title #overlayTitle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stage-wrap.is-title #overlayKicker,
.stage-wrap.is-title #overlayBody { display: none; }

.stage-wrap.is-title #overlayStats {
  order: 2;
  min-height: 0;
  margin: 14px 0 0;
  font-size: clamp(10px, .95cqw, 12px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .025em;
  color: #f2dfbd;
}

.stage-wrap.is-title .overlay-actions {
  order: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.stage-wrap.is-title .overlay-actions button {
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 5px;
  border-color: rgba(231, 211, 183, .38);
  background: linear-gradient(180deg, #49304f, #291b37);
  color: #fff1d7;
  font-size: clamp(12px, 1.2cqw, 14px);
  font-weight: 650;
  box-shadow: none;
  transition: border-color 150ms ease, filter 150ms ease;
}

.stage-wrap.is-title .overlay-actions button:hover {
  filter: brightness(1.15);
  border-color: #f1d18a;
}

.stage-wrap.is-title .overlay-actions #primaryButton {
  grid-column: 1 / -1;
  min-height: 50px;
  border-color: #f6d890;
  background: linear-gradient(180deg, #ffe7a9, #d9b566);
  color: #38243f;
  font-size: clamp(17px, 1.8cqw, 21px);
  font-weight: 800;
  letter-spacing: .035em;
  box-shadow: inset 0 1px rgba(255, 255, 255, .6);
}

.stage-wrap.is-title .overlay-actions #bossTestMenuButton {
  grid-column: 1 / -1;
  min-height: 32px;
  padding: 6px 12px;
  color: #f2d18d;
  font-size: 12px;
}

.stage-wrap.is-title .overlay-actions button[hidden] { display: none; }

.stage-wrap.is-title .overlay-actions button:focus-visible,
.stage-wrap.is-title .overlay-actions button.gamepad-selected {
  outline: 3px solid #fff0b9;
  outline-offset: 3px;
}

.stage-wrap.is-title .master-volume {
  background: rgba(28, 16, 39, .92);
}

.stage-wrap.is-title .recorder-widget {
  bottom: max(18px, env(safe-area-inset-bottom));
}

@media (max-width: 760px), (max-height: 600px) {
  /* Generic pause/settings overlays become viewport dialogs on small screens.
     The title menu stays inside its own game aperture above the volume strip. */
  .stage-wrap.is-title .screen-overlay.visible {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 3% 4.5% max(9%, 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .stage-wrap.is-title .screen-overlay.visible .screen-panel {
    width: 34%;
    min-width: 230px;
    max-width: 310px;
    max-height: none;
    padding: 12px;
    overflow: visible;
  }
  .stage-wrap.is-title .overlay-actions { gap: 6px; }
  .stage-wrap.is-title .overlay-actions button { min-height: 34px; padding: 7px 10px; font-size: 12px; }
  .stage-wrap.is-title .overlay-actions #primaryButton { min-height: 40px; font-size: 17px; }
  .stage-wrap.is-title .overlay-actions #bossTestMenuButton { min-height: 28px; padding: 4px 10px; font-size: 11px; }
  .stage-wrap.is-title #overlayStats { margin-top: 10px; font-size: 10px; }
}

@media (max-width: 760px) and (orientation: portrait) {
  .game-shell:has(.stage-wrap.is-title) { padding: 8px; }
  .stage-wrap.is-title {
    width: calc(100vw - 16px);
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
    min-height: 460px;
    aspect-ratio: auto;
  }
  /* Show the complete illustration and lettering above the touch-sized menu. */
  .stage-wrap.is-title #gameCanvas {
    height: auto;
    aspect-ratio: 1280 / 800;
    object-fit: contain;
    object-position: center top;
  }
  .stage-wrap.is-title .screen-overlay.visible {
    align-items: end;
    padding: 12px 6% 70px;
    background: none;
  }
  .stage-wrap.is-title .screen-overlay.visible .screen-panel { width: 100%; max-width: none; min-width: 0; padding: 14px; }
  .stage-wrap.is-title .overlay-actions { gap: 8px; }
  .stage-wrap.is-title .overlay-actions button { min-height: 44px; font-size: 14px; }
  .stage-wrap.is-title .overlay-actions #primaryButton { min-height: 50px; font-size: 20px; }
  .stage-wrap.is-title .overlay-actions #bossTestMenuButton { min-height: 36px; font-size: 12px; }
  .stage-wrap.is-title #overlayStats { margin-top: 12px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-wrap.is-title .overlay-actions button { transition: none; }
}