/* The four-button national menu has its own layout file.
   Its complete group centers when it fits and scrolls at its natural height. */
body.national-title-menu {
  min-height:var(--sg-app-height,100dvh);
  touch-action:pan-y pinch-zoom;
  --btnH:clamp(60px,min(8.8vw,9vh),78px);
  --gapY:clamp(10px,1.6vh,16px);
  --barH:clamp(10px,1.5vh,12px);
}
body.national-title-menu > .frame {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:none;
  min-height:var(--sg-app-height,100dvh);
  height:auto;
  margin:0;
  padding:var(--title-top-space,calc(76px + var(--safeT))) calc(14px + var(--safeR))
    var(--title-bottom-space,calc(88px + var(--safeB))) calc(14px + var(--safeL));
}
body.national-title-menu .nationalTitleGroup {
  width:min(100%,600px);
  min-width:0;
  flex:none;
  container-type:inline-size;
}
body.national-title-menu :is(.logo-line,.questline) {
  font-size:clamp(36px,min(8vw,9vh),82px);
  line-height:1;
}
body.national-title-menu .jp-title {
  margin-top:clamp(6px,1.2vh,10px);
  letter-spacing:.24em;
}
body.national-title-menu .region-title {
  font-size:min(clamp(22px,min(4vw,6vh),44px),6.6cqw);
  white-space:nowrap;
  letter-spacing:.1em;
}
body.national-title-menu .hero {margin-bottom:clamp(16px,2.8vh,26px);}
body.national-title-menu .rows {width:100%;gap:var(--gapY);}
body.national-title-menu .row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(10px,2.6vw,24px);
  width:100%;
}
body.national-title-menu .row > :is(.btn,.statBox) {
  width:100%;
  min-width:0;
  height:var(--btnH);
  margin:0;
}
body.national-title-menu .btn.questBtn {
  min-width:0;
  padding-left:clamp(12px,2vw,18px);
  padding-right:clamp(12px,2vw,18px);
}
body.national-title-menu .btn.questBtn .label {min-width:0;flex:1 1 auto;}
body.national-title-menu .btn.questBtn.shower-mastered {padding-left:42px;padding-right:14px;}
body.national-title-menu .oasisIcon {
  width:clamp(24px,4vw,32px);
  height:clamp(24px,4vw,32px);
  flex-basis:clamp(24px,4vw,32px);
}
body.national-title-menu .oasisDescription {line-height:1.3;}
/* Fixed controls retain their corner positions while the menu scrolls. */
body.national-title-menu #titleFooter {
  right:calc(14px + var(--safeR));
  bottom:calc(10px + var(--safeB));
  transform:none;
}
body.national-title-menu .soundCircle {width:52px;height:52px;}
body.national-title-menu .soundIcon {width:28px;height:28px;}
body.national-title-menu .soundLabel {min-width:78px;font-size:12px;}