/* One layout for every viewport: controls, centered menu, then site links.
   When the content needs more height, the document grows and scrolls. */
body.quest-title-menu {
  display:grid;
  grid-template-rows:auto minmax(min-content,1fr) auto;
  min-height:var(--appH,100vh);
}

body.quest-title-menu .questMenuControls {
  position:relative;
  z-index:1001;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  min-height:calc(clamp(0px,calc(var(--appH,100vh) * .2 - 80px),44px) + clamp(12px,2vh,22px) + var(--safeT));
  padding:calc(clamp(12px,2vh,22px) + var(--safeT))
    calc(clamp(14px,2vw,24px) + var(--safeR)) 0
    calc(clamp(14px,2vw,24px) + var(--safeL));
}
body.quest-title-menu .home-nav {height:auto;}
body.quest-title-menu .world-link {
  position:fixed;
  left:calc(clamp(14px,2vw,24px) + var(--safeL));
  top:calc(clamp(12px,2vh,22px) + var(--safeT));
  width:clamp(88px,15vw,112px);
  min-height:0;
}
body.quest-title-menu .lang-toggle {
  position:fixed;
  right:calc(clamp(14px,2vw,24px) + var(--safeR));
  top:calc(clamp(12px,2vh,22px) + var(--safeT));
  flex:0 0 auto;
  margin-left:auto;
  height:34px;
  padding:0 14px;
  font-size:clamp(12px,1.6vw,15px);
}

body.quest-title-menu > .frame {
  display:grid;
  place-items:center;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  padding:clamp(8px,2vh,24px) calc(16px + var(--safeR))
    clamp(8px,2vh,24px) calc(16px + var(--safeL));
}
body.quest-title-menu .questMenuGroup {
  width:min(100%,560px);
  min-width:0;
  container-type:inline-size;
  --title-density:1;
  --btnH:calc(clamp(44px,min(15vw,11vh),78px) * var(--title-density));
  --btnFont:calc(clamp(18px,min(4vw,5vh),28px) * var(--title-density));
  --gapX:calc(clamp(12px,4vw,28px) * var(--title-density));
  --gapY:calc(clamp(8px,2vh,18px) * var(--title-density));
  --title-button-height:min(var(--btnH),calc((100cqw - var(--gapX)) / 6.8));
}
body.quest-title-menu :is(.logo-line,.questline) {
  font-size:calc(clamp(32px,min(8vw,8vh),78px) * var(--title-density));
  line-height:1;
}
body.quest-title-menu .questline {margin-top:calc(2px * var(--title-density));}
body.quest-title-menu .jp-title {
  margin-top:calc(5px * var(--title-density));
  font-size:calc(clamp(12px,min(2vw,2.5vh),20px) * var(--title-density));
}
body.quest-title-menu .tagline {
  margin-top:calc(clamp(6px,1.5vh,13px) * var(--title-density));
  font-size:calc(clamp(22px,min(4vw,5.5vh),48px) * var(--title-density));
  line-height:1.1;
}
body.quest-title-menu .hero {margin-bottom:calc(clamp(8px,2.5vh,26px) * var(--title-density));}
/* All seven buttons keep the same width/height ratio in the actual space. */
body.quest-title-menu .row > .btnWrap {
  flex:0 1 auto;
  min-width:0;
  width:calc(var(--title-button-height) * 3.4);
}
body.quest-title-menu .btn {
  width:100%;
  height:var(--title-button-height);
  font-size:min(var(--btnFont),calc(var(--title-button-height) * .4));
}
body.quest-title-menu .bolt-divider {
  width:calc(var(--title-button-height) * 6.8 + var(--gapX));
  max-width:none;
  height:calc(clamp(12px,2vh,18px) * var(--title-density));
  margin:calc(clamp(6px,1.2vh,12px) * var(--title-density)) auto;
}
body.quest-title-menu .center-row {margin-top:calc(clamp(6px,1.2vh,12px) * var(--title-density));}
body.quest-title-menu #allWrap {width:calc(var(--title-button-height) * 3.4);}

body.quest-title-menu > .footer-link {
  position:relative;
  left:auto;right:auto;bottom:auto;
  min-width:0;
  margin:0;
  padding:12px calc(22px + var(--safeR))
    calc(clamp(14px,2vh,24px) + var(--safeB)) calc(22px + var(--safeL));
  gap:5px 10px;
  font-size:clamp(11px,min(1.4vw,2.8vh),14px);
}

body.quest-title-menu::after {
  top:calc(clamp(6px,1vw,10px) + var(--safeT));
  right:clamp(6px,1vw,10px);
  bottom:clamp(6px,1vw,10px);
  left:clamp(6px,1vw,10px);
  border-width:clamp(2px,.22vw,3px);
  border-radius:clamp(18px,3vw,26px);
}