/* Main menus use viewport-aware sizing directly; gameplay keeps its HUD scale. */
#menu.homeMenu {
  --home-size: clamp(16px, 1.65vmin, 34px);
  --home-top: max(13vh, calc(110px * var(--ui)));
  zoom: 1; position: fixed; box-sizing: border-box;
  top: var(--home-top); left: clamp(16px, 5vw, 220px); right: auto;
  width: min(32em, calc(100vw - 32px));
  max-height: calc(100vh - var(--home-top) - 20px);
  max-height: calc(100dvh - var(--home-top) - max(20px, env(safe-area-inset-bottom)));
  overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  padding: 1.6em; font-size: var(--home-size); color: #e9f0eb;
  border: 1px solid #c5d4cd38; border-radius: 20px;
  background: linear-gradient(135deg,#102e36f5,#09242ef0);
  box-shadow: 0 20px 80px #00131b55; backdrop-filter: blur(18px);
}
#menu.homeMenu[hidden] { display:none; }
#menu.homeMenu h1 { font-size: 2.7em; line-height: 1.07; letter-spacing: -.05em; margin: .35em 0; font-weight: 500; }
#menu.homeMenu .eyebrow { font-size: .65em; letter-spacing: .18em; color: #d9bc87; }
#menu.homeMenu .intro { font-size: .94em; line-height: 1.55; margin: 0 0 1.4em; color: #b9cecd; }
#menu.homeMenu #homePlay { margin: 0; font-size: 1em; padding: 1em 1.25em; border-radius: 10px; min-height: 52px; letter-spacing: .05em; }
#menu.homeMenu #homePlay:disabled { opacity: .6; cursor: progress; }
#menu.homeMenu .homeSelection { margin: .65em 0 1.5em; font-size: .72em; color: #a4bdbe; text-align: center; }
#menu.homeMenu .homeDisclosure { display: block; margin: .7em 0 0; color: inherit; font-size: 1em; border: 1px solid #c3d4d530; border-radius: 10px; background: #c0e1df06; }
#menu.homeMenu .homeDisclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1em; min-height: 64px; list-style: none; }
#menu.homeMenu summary::-webkit-details-marker { display:none; }
#menu.homeMenu summary b { font-weight: 500; font-size: 1.05em; }
#menu.homeMenu summary small { display:block; font-size: .73em; color: #a4bdbe; margin-top: .25em; }
#menu.homeMenu .disclosurePlus { font-size: 1.4em; color: #e9c88f; }
#menu.homeMenu details[open] > summary .disclosurePlus { transform: rotate(45deg); }
#menu.homeMenu details[open] > summary { border-bottom: 1px solid #c3d4d523; }
#menu.homeMenu .disclosureBody { padding: 1em; }
#menu.homeMenu h2 { font-size: .8em; text-transform: uppercase; letter-spacing: .08em; margin: 1.5em 0 .8em; color:#c5d7d2; }
#menu.homeMenu .modeCards { display:grid; gap:.5em; }
#menu.homeMenu .modeCards a { display:flex; align-items:center; gap:.75em; padding:.85em; border:1px solid #c3d4d52a; border-radius:8px; text-decoration:none; min-height:60px; }
#menu.homeMenu .modeCards a[aria-current] { border-color:#e3c38d; background:#e3c38d10; }
#menu.homeMenu .modeCards b { font-size:.94em; font-weight:500; }
#menu.homeMenu .modeCards small { display:block; font-size:.68em; color:#b4c9ca; margin-top:.2em; }
#menu.homeMenu .modeCards a > span:last-child { margin-left:auto; color:#e3c38d; }
#menu.homeMenu .modeNumber { font-size:.68em; color:#d6b67e; }
#menu.homeMenu .boats { gap:.6em; }
#menu.homeMenu .boat { min-width:0; border-radius:8px; padding:.8em; }
#menu.homeMenu .boat span { font-size:.6em; }
#menu.homeMenu .boat strong { font-size:1.7em; }
#menu.homeMenu .boat small { font-size:.65em; }
#menu.homeMenu #handling { font-size:.73em; margin:.8em 0; }
#menu.homeMenu .controlChoice { margin:1em 0; padding:.7em; border-radius:8px; font-size:.9em; }
#menu.homeMenu .controlChoice label { min-height:44px; display:flex; align-items:center; flex-wrap:wrap; gap:.4em; }
#menu.homeMenu .controlChoice small { font-size:.7em; }
#menu.homeMenu .settingSound { display:flex; align-items:center; justify-content:space-between; gap:1em; width:100%; min-height:48px; padding:.8em; border-radius:8px; font-size:.85em; }
#menu.homeMenu .settingSound span { font-size:.8em; color:#a4bdbe; }
#menu.homeMenu .controlGuide p { display:grid; gap:.25em; font-size:.78em; line-height:1.5; }
#menu.homeMenu .controlGuide span { color:#b4c9ca; }
#menu.homeMenu .missions button { min-height:48px; padding:.8em; font-size:.8em; flex-wrap:wrap; border-radius:6px; }
#menu.homeMenu .missions small, #menu.homeMenu .missions b { font-size:.75em; }
#menu.homeMenu .raceInstructions, #menu.homeMenu #raceStatus { font-size:.8em; }
#menu.homeMenu .raceInstructions small { font-size:.85em; }
#menu.homeMenu input { font-size:max(16px,.9em); max-width:100%; }
#menu.homeMenu .raceOptions, #menu.homeMenu .joinRow { flex-wrap:wrap; }
#menu.homeMenu #raceMenu button { font-size:.75em; min-height:44px; }
#menu.homeMenu .raceBoard, #menu.homeMenu .disclosureBody > details { font-size:.8em; }
#menu.homeMenu .disclosureBody > details p { font-size:1em; }
#menu.homeMenu .homeFooter { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75em; margin-top:1.6em; font-size:.7em; color:#a4bdbe; }
#menu.homeMenu .homeFooter a { display:inline-flex; align-items:center; min-height:44px; gap:.5em; text-decoration:none; }
#menu.homeMenu :is(a,button,summary,input):focus-visible { outline:3px solid #f0ce92; outline-offset:3px; }
#menu.homeMenu :is(a,button,summary):hover { background-color:#d2e4e00c; }
body.challengeMode #menu.homeMenu .dockingOptions { display:none; }
#menu.homeMenu .legacyStart[hidden] { display:none; }
body:has(#menu:not([hidden])) #sceneCaption { display:none; }
body:has(#menu:not([hidden])) #pause { visibility:hidden; }
@media (max-width:600px) {
  #menu.homeMenu { --home-top:72px; left:max(12px,env(safe-area-inset-left)); width:calc(100vw - 24px); padding:1.15em; border-radius:14px; }
  #menu.homeMenu h1 { font-size:2.2em; }
}
@media (orientation:portrait) and (min-width:601px) {
  #menu.homeMenu { --home-size:clamp(18px,2.3vw,46px); left:50%; transform:translateX(-50%); width:min(32em,88vw); --home-top:18vh; }
}
@media (max-height:540px) and (orientation:landscape) {
  #menu.homeMenu { --home-top:64px; left:3vw; width:min(620px,94vw); padding:1em; }
  #menu.homeMenu .homeHeading h1 { font-size:1.7em; margin:.2em 0; }
  #menu.homeMenu .intro { margin-bottom:.65em; font-size:.8em; }
  #menu.homeMenu .homeSelection { margin:.4em 0 .6em; }
  #menu.homeMenu .homeDisclosure > summary { min-height:54px; padding:.6em 1em; }
}
@media (prefers-reduced-motion:reduce) { #menu.homeMenu * { scroll-behavior:auto; transition:none; } }