/* The title and options share normal grid flow: extra resume rows cannot cover the sign. */
#menu {
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  gap: clamp(10px, 2vh, 24px) 0;
  padding: max(20px, env(safe-area-inset-top)) max(6vw, env(safe-area-inset-left))
    max(14px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
}
#menu .title-scene {
  z-index: -2;
}
.menu-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #05040ff5 0%,
    #05040fda 20%,
    #05040f98 30%,
    #05040f35 38%,
    #05040f00 45%
  );
}
#menu .title-lockup {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: min(360px, 100%);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
#menu .edition-stamp {
  display: inline-flex;
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #c6b7b1;
  font-size: 12px;
}
.title-neon {
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 5;
  display: grid;
  place-items: center;
  isolation: isolate;
  margin-bottom: 24px;
}
.neon-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.neon-frame path {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.neon-hangers {
  stroke: #807276;
  stroke-width: 2;
}
.neon-outer {
  stroke: #f795b6;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px #ff4d9b);
}
.neon-inner {
  stroke: #74dcca;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px #29d7b8);
}
.neon-flourish {
  stroke: #f4c378;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px #ffb45e);
}
#menu .title-neon h1 {
  position: relative;
  margin: 11px 0 0;
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1;
  color: #fff3da;
  text-shadow:
    -2px 0 #e76d9b,
    2px 0 #e76d9b,
    0 -2px #e76d9b,
    0 2px #e76d9b,
    0 0 7px #ff78b3,
    0 0 18px #d43985,
    0 3px 0 #43142d;
}
#menu .neon-english {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 5px;
  color: #adf2d8;
  text-shadow:
    0 0 5px #42bfa3,
    0 0 10px #27695e;
}
#menu .tagline {
  display: block;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #fff1d5;
  text-shadow:
    0 2px 2px #000,
    0 0 8px #000;
}
#menu .start-menu {
  position: relative;
  inset: auto;
  translate: none;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  width: min(330px, 100%);
  margin: 0 0 clamp(0px, 5vh, 46px);
}
#menu .menu-foot {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  grid-row: 3;
  justify-content: flex-end;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}
html:has(#menu:not(.hidden)),
body:has(#menu:not(.hidden)) {
  touch-action: pan-y;
}

@media (orientation: portrait) {
  #menu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(10px, 1fr) auto auto;
    gap: 12px 0;
    padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-left))
      max(12px, env(safe-area-inset-bottom));
  }
  .menu-shade {
    background: linear-gradient(
      180deg,
      #05040ff5 0%,
      #05040fe0 15%,
      #05040f8c 29%,
      #05040f30 39%,
      #05040f00 48%
    );
  }
  #menu .title-lockup {
    justify-self: center;
    width: min(330px, 100%);
  }
  #menu .title-neon h1 {
    font-size: 60px;
  }
  #menu .title-neon h1 span {
    font-size: 18px;
  }
  #menu .start-menu {
    grid-row: 3;
    align-self: start;
    justify-self: center;
    width: min(330px, 100%);
    margin: 0;
  }
  #menu .menu-foot {
    grid-row: 4;
  }
}
@media (orientation: portrait) and (max-height: 700px) {
  #menu {
    gap: 9px 0;
  }
  #menu .title-lockup {
    width: min(270px, 100%);
  }
  #menu .title-neon h1 {
    font-size: 48px;
  }
  #menu .tagline {
    margin-top: 3px;
  }
}
@media (orientation: portrait) and (max-height: 590px) {
  #menu {
    padding-top: max(8px, env(safe-area-inset-top));
    gap: 7px 0;
  }
  #menu .title-lockup {
    width: min(240px, 100%);
  }
  #menu .title-neon h1 {
    font-size: 42px;
  }
  #menu .edition-stamp {
    display: none;
  }
  #menu .start-menu {
    padding: 9px 14px 7px;
  }
  #menu .mode {
    min-height: 48px;
  }
  #menu .mode small {
    display: none;
  }
  #menu .menu-tools {
    margin-top: 5px;
    padding-top: 6px;
  }
  #menu #record {
    margin-bottom: 0;
  }
}
@media (orientation: landscape) and (max-height: 550px) {
  #menu {
    grid-template-columns: minmax(260px, 38%) 1fr;
    gap: 7px 0;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  #menu .title-lockup {
    width: 260px;
  }
  #menu .edition-stamp,
  #menu .tagline {
    display: none;
  }
  #menu .title-neon h1 {
    font-size: 48px;
    margin-top: 8px;
  }
  #menu .title-neon h1 span {
    font-size: 12px;
    margin-top: 5px;
  }
  #menu .start-menu {
    align-self: end;
    width: 290px;
    margin: 0;
  }
}
@media (orientation: landscape) and (max-height: 360px) {
  #menu {
    gap: 5px 0;
  }
  #menu .title-lockup {
    width: 220px;
  }
  #menu .title-neon h1 {
    font-size: 36px;
  }
  #menu .start-menu {
    width: 280px;
    padding: 6px 12px;
  }
  #menu .mode {
    min-height: 40px;
    padding: 2px 0;
  }
  #menu .resume {
    min-height: 40px;
    padding: 4px 8px;
  }
  #menu .menu-tools {
    margin-top: 4px;
    padding-top: 5px;
  }
}

@media (orientation: landscape) and (max-height: 550px) {
  #menu .title-lockup {
    width: 240px;
  }
  #menu .title-neon {
    margin-bottom: 20px;
  }
  #menu .neon-english {
    font-size: 10px;
    line-height: 12px;
    top: calc(100% + 4px);
  }
}
@media (orientation: landscape) and (max-height: 360px) {
  #menu .title-lockup {
    width: 190px;
  }
  #menu .title-neon {
    margin-bottom: 18px;
  }
}