/* Main menu: the original photograph and palette, with a quiet central menu. */
#menu {
  height:100vh;height:100dvh;min-height:0;max-height:100dvh;
  display:grid;grid-template-rows:44px minmax(0,1fr) auto;gap:14px;
  padding:max(22px,env(safe-area-inset-top)) max(4.5vw,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(4.5vw,env(safe-area-inset-left));
  overflow:hidden;background:#031713;
}
#menu .menu-photo {
  position:absolute;background-position:center center;background-size:cover;
  opacity:.86;animation:photoIn 1.4s ease-out;
}
#menu .menu-shade {
  position:absolute;
  background:radial-gradient(ellipse at 50% 48%,#020d0cb8 0%,#020d0c80 28%,#020d0c26 67%),linear-gradient(0deg,#020d0ce6 0%,#020d0c26 28%,#020d0c40 72%,#020d0cbd 100%);
}
#menu .masthead {padding:0;min-width:0;gap:16px;align-items:center}
#menu .wordmark {font-size:9px;letter-spacing:1.7px;gap:10px;color:#b9d3c5}
#menu .mark {font-size:27px}
#menu .mark span {font-size:34px}
#menu .sound-toggle {min-width:56px;height:44px;padding:0 8px;background:transparent;border:0;border-radius:0;color:#b9d3c5}
#menu .sound-toggle:hover {color:var(--green);background:#02140e80}
#menu .menu-center {
  min-height:0;min-width:0;width:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  justify-items:center;gap:16px;padding:clamp(0px,1.5dvh,18px) 0 clamp(8px,3dvh,28px);
}
#menu .menu-brand {text-align:center;align-self:start}
#menu h1 {
  display:block;transform:none;font-size:clamp(78px,min(14dvh,26vw),146px);line-height:.9;
  margin:0 0 14px;letter-spacing:.035em;font-weight:900;color:#e3f1e8;
  text-shadow:0 2px 24px #020d0c80;
}
#menu .subtitle {margin:0;font:10px/1.5 var(--mono);letter-spacing:.42em;color:var(--green)}
#menu .menu-navigation {
  position:relative;isolation:isolate;align-self:center;width:min(390px,100%);
  display:flex;flex-direction:column;gap:clamp(5px,1.2dvh,12px);
}
#menu .menu-orbit {
  position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:116%;aspect-ratio:1;
  transform:translate(-50%,-50%);border:1px solid #49f6bd1c;border-radius:50%;
  box-shadow:0 0 0 14px #49f6bd05,0 0 0 15px #49f6bd0b;
}
#menu .menu-orbit::before,#menu .menu-orbit::after {content:"";position:absolute;inset:10%;border:1px solid #49f6bd12;border-radius:50%}
#menu .menu-orbit::after {inset:22%;border-color:#49f6bd0a}
#menu .menu-link {
  position:relative;display:flex;align-items:center;justify-content:center;width:100%;
  min-height:clamp(48px,7.6dvh,68px);padding:9px 20px;border:0;border-radius:0;
  background:transparent;color:#c3dfce;font:400 clamp(20px,3dvh,28px)/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.12em;text-align:center;text-shadow:0 2px 10px #020d0ce6;
  transition:color .18s ease,background .18s ease;
}
#menu .menu-link::before,#menu .menu-link::after {
  content:"";position:absolute;left:4%;right:4%;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--green) 23%,var(--green) 77%,transparent);
  transition:opacity .18s ease;
}
#menu .menu-link::before {top:0}#menu .menu-link::after {bottom:0}
#menu .menu-play {color:var(--green);font-size:clamp(29px,4.5dvh,43px);letter-spacing:.18em;font-weight:500;min-height:clamp(56px,9dvh,82px);background:linear-gradient(90deg,transparent,#02140e59,transparent)}
#menu .menu-play::before,#menu .menu-play::after {opacity:.68}
#menu .menu-play-arrow {position:absolute;right:11%;font:20px var(--mono);letter-spacing:0;opacity:.7}
#menu .menu-link:hover,#menu .menu-link:focus-visible {color:var(--green);background:#02140e66}
#menu .menu-link:hover::before,#menu .menu-link:hover::after,#menu .menu-link:focus-visible::before,#menu .menu-link:focus-visible::after {opacity:.8}
#menu .menu-link:focus-visible {outline:1px solid #effff9;outline-offset:4px}
#menu .menu-link:active {background:#1e523d80}
#menu .menu-mission {margin:0;font:10px/1.6 var(--mono);letter-spacing:1px;text-align:center;color:#8da69d}
#menu .menu-mission span {color:#b9d3c5}
#menu .menu-footer {position:static;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0;gap:15px;background:none;font:8px/1.5 var(--mono);letter-spacing:1px;color:#86a094}
#menu .slash {padding:0 9px;opacity:.6}
#menu #menu-record {white-space:nowrap}

/* Settings retain the same controls and values as character selection. */
#menu-settings-dialog {width:min(460px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:30px;background:#031710;border:1px solid #357655}
#menu-settings-dialog h2 {font-size:35px;line-height:1.08;margin:17px 0 26px}
#menu-settings-dialog .close-help {min-width:44px;height:44px;top:8px;right:8px}
#menu-settings-dialog .menu-settings-level>.eyebrow {display:block;color:#91bfaa;font-size:9px;letter-spacing:1.5px;margin-bottom:10px}
#menu-settings-dialog .difficulty-switch {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}
#menu-settings-dialog .difficulty-switch button {min-width:0;min-height:62px;padding:10px 4px}
#menu-settings-dialog .difficulty-switch strong {font-size:11px;letter-spacing:.5px}
#menu-settings-dialog .difficulty-switch small {font-size:8px;margin-top:7px}
#menu-settings-dialog [data-difficulty-description] {font:10px/1.5 var(--mono);color:#a4c3af;margin:12px 0 20px;min-height:30px}
#menu-settings-dialog .assault-toggle {width:100%;min-width:0;min-height:55px;padding:10px 12px}
#menu-settings-dialog .assault-toggle strong {font-size:10px}
#menu-settings-dialog .assault-toggle small {font-size:8px}
#menu-settings-dialog .settings-audio {display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;min-height:55px;padding:12px;margin-top:10px;border:1px solid var(--line);background:#071e19;text-align:left;color:#b9d3c5}
#menu-settings-dialog .settings-audio strong {display:block;font:700 10px var(--mono);letter-spacing:.5px}
#menu-settings-dialog .settings-audio small {display:block;font:8px var(--mono);color:#8da69d;margin-top:5px}
#menu-settings-dialog .settings-audio .sound-state {font-size:9px;border:1px solid var(--line);padding:5px 6px;min-width:30px;text-align:center}
#menu-settings-dialog .settings-done {display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;margin-top:22px;padding:8px 0;border:0;border-top:1px solid var(--line);background:none;color:var(--green);font:11px var(--mono);letter-spacing:1px}
#menu-settings-dialog .settings-done span {font-size:22px}

@media(max-width:700px) {
  #menu {padding:max(14px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));gap:10px}
  #menu .masthead {gap:12px}
  #menu .wordmark {font-size:8px;letter-spacing:1.4px}
  #menu .menu-photo {background-position:50% center;opacity:.8}
  #menu .menu-center {padding:2dvh 0 3dvh;gap:12px}
  #menu h1 {font-size:clamp(74px,min(14dvh,26vw),118px);margin:0 0 12px}
  #menu .subtitle {font-size:9px;letter-spacing:.3em}
  #menu .menu-navigation {width:min(330px,100%);gap:7px}
  #menu .menu-link {min-height:52px;font-size:22px;letter-spacing:.1em;padding:8px 10px}
  #menu .menu-play {font-size:35px;min-height:65px;letter-spacing:.16em}
  #menu .menu-play-arrow {right:10%;font-size:18px}
  #menu .menu-mission {font-size:9px;letter-spacing:.4px}
  #menu .menu-footer {flex-direction:row;gap:10px;font-size:6px;letter-spacing:.5px}
  #menu .menu-footer .slash {padding:0 4px}
  #menu-settings-dialog {padding:26px 20px}
}
@media(max-width:700px) and (max-height:620px) {
  #menu {gap:8px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  #menu .menu-center {padding:0;gap:8px}
  #menu h1 {font-size:clamp(64px,13dvh,80px);margin-bottom:9px}
  #menu .menu-navigation {width:min(300px,100%);gap:4px}
  #menu .menu-link {min-height:44px;font-size:20px}
  #menu .menu-play {font-size:29px;min-height:54px}
  #menu .menu-mission {font-size:8px}
}
/* In short landscape windows the title sits beside the same vertical menu. */
@media(orientation:landscape) and (max-height:560px) {
  #menu {grid-template-rows:40px minmax(0,1fr) auto;padding:8px max(22px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));gap:8px}
  #menu .menu-center {grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:30px;row-gap:8px;padding:0 3vw}
  #menu .menu-brand {grid-column:1;grid-row:1;align-self:center}
  #menu .menu-navigation {grid-column:2;grid-row:1/3;width:min(310px,100%);gap:3px}
  #menu .menu-mission {grid-column:1;grid-row:2;align-self:end;font-size:8px}
  #menu h1 {font-size:clamp(62px,min(20dvh,17vw),110px);margin:0 0 12px}
  #menu .subtitle {font-size:9px;letter-spacing:.26em}
  #menu .menu-link {min-height:44px;font-size:20px;letter-spacing:.08em;padding:8px 5px}
  #menu .menu-play {font-size:28px;min-height:50px;letter-spacing:.15em}
  #menu .menu-play-arrow {font-size:17px;right:8%}
  #menu .menu-footer {font-size:6px}
  #menu .menu-orbit {width:88%}
}
@media(prefers-reduced-motion:reduce) {
  #menu .menu-photo {animation:none}
  #menu .menu-link,#menu .menu-link::before,#menu .menu-link::after {transition:none}
}