/* Shared UI type scale. Each role has a readable floor and a large-screen cap. */
body[data-quest-page]{
  --quest-control-size:clamp(12px,min(1.45vw,3vh),16px);
  --quest-small-size:clamp(11px,min(1.25vw,2.6vh),14px);
  --quest-panel-title-size:clamp(14px,min(2vw,4vh),22px);
  --quest-question-size:clamp(20px,min(4vw,6vh),46px);
  --quest-choice-size:clamp(18px,min(4vw,5vh),46px);
  --quest-reading-size:clamp(11px,min(2vw,2.7vh),22px);
  --quest-guide-name-size:clamp(16px,min(2.4vw,3.6vh),24px);
  --hkt-prompt-row:var(--quest-question-size);
}
body[data-quest-page] > .frame{
  --optKanjiSize:var(--quest-choice-size);
  --optYomiSize:var(--quest-reading-size);
  --answerEnglishSize:var(--quest-choice-size);
}

/* Menus grow with the viewport, and keep the existing button text fitter. */
body[data-quest-page="menu"]{
  --btnFont:clamp(18px,min(2.7vw,5vh),30px);
  --rankFont:clamp(13px,min(1.8vw,3.6vh),22px);
  --timeFont:clamp(11px,min(1.2vw,2.6vh),15px);
  --statFont:clamp(12px,min(1.4vw,2.8vh),17px);
}
body[data-quest-page="menu"] :is(.logo-line,.questline){font-size:clamp(36px,min(8vw,11vh),82px);}
body[data-quest-page="menu"] .jp-title{font-size:clamp(12px,min(2vw,2.5vh),20px);}
body[data-quest-page="menu"] :is(.region-title,.tagline){font-size:clamp(22px,min(4vw,6vh),48px);}
body[data-quest-page="menu"] .btn{font-size:var(--btnFont);}
body[data-quest-page="menu"] .btn.questBtn{font-size:clamp(16px,min(2.4vw,4.8vh),26px);}
/* Keep the group edges fixed while giving half of the old gap to the records. */
body[data-quest-page="menu"] .row > :is(.statBox,.oasisHintBox){
  width:calc(var(--btnW) + var(--gapX) * .5);
  margin-left:calc(var(--gapX) * -.5);
  min-width:0;
}
body[data-quest-page="menu"] .statBox:has(> .statTop){gap:4px;}
body[data-quest-page="menu"] .statBox > .statTop{
  flex:1;min-height:0;align-self:stretch;
  display:grid;grid-template-rows:repeat(2,minmax(0,1fr));
  align-items:stretch;gap:1px;
}
body[data-quest-page="menu"] .statBox > .bar{flex:0 0 var(--barH);}
body[data-quest-page="menu"] .rankLine{font-size:var(--rankFont);white-space:nowrap;overflow:visible;text-overflow:clip;overflow-wrap:normal;}
body[data-quest-page="menu"] .timeLine{font-size:var(--timeFont);white-space:nowrap;overflow-wrap:normal;}
body[data-quest-page="menu"] .statTop > :is(.rankLine,.timeLine){
  display:flex;align-items:center;min-width:0;min-height:0;line-height:1.2;
}
body[data-quest-page="menu"] .statTop .timeLine.has-shower-clear{margin-right:0;}
body[data-quest-page="menu"] .statTop .bestTimeText{flex:none;white-space:nowrap;}
body[data-quest-page="menu"] :is(.oasisDescription,.footer-link){font-size:var(--quest-small-size);}

/* Titles, prompts and controls may use more lines instead of clipping text. */
html body[data-quest-page="game"] :is(.questTitle,.floatTitleBar){
  font-size:var(--quest-panel-title-size) !important;
  height:auto !important;min-height:34px;line-height:1.2;
  white-space:normal;overflow:visible;overflow-wrap:anywhere;
}
html body[data-quest-page="game"] :is(.questStatus,.floatStatus){font-size:clamp(12px,min(1.5vw,3vh),18px) !important;}
body[data-quest-page="game"] :is(.regionalGameHint,.panelActions button,.regionalGameControls button){font-size:var(--quest-control-size);}
html body[data-quest-page="game"] :is(.choiceKanji,.choiceYomi,.promptKanji,.promptYomi){text-overflow:clip;}
html body[data-quest-page="game"] .choice{height:auto;min-height:40px;}
html body[data-quest-page="game"] :is(.choiceKanji,.choiceYomi){max-width:100%;min-width:0;flex-shrink:0;line-height:1.25 !important;}
html body[data-quest-page="game"] :is(.promptKanji,.promptYomi){height:auto !important;line-height:1.25 !important;}
html body[data-quest-page="game"] .promptKanji,
html[lang="en"] body[data-quest-page="game"] .promptYomi{font-size:var(--quest-question-size) !important;}
html body[data-quest-page="game"] .promptYomi{font-size:var(--quest-reading-size) !important;}

html body[data-quest-page="guide"].guide-layout-pilot .modeBar .guideTitle{font-size:clamp(16px,min(2vw,3.5vh),24px);}
html body[data-quest-page="guide"].guide-layout-pilot .modeBar .viewBtn{font-size:var(--quest-control-size);height:auto;min-height:36px;}
html body[data-quest-page="guide"].guide-layout-pilot .modeBar .modeBtn{font-size:clamp(11px,min(1.35vw,2.8vh),15px);height:auto;min-height:34px;}
html body[data-quest-page="guide"] .modeBar :is(.viewBtn,.modeBtn,.guideTitle,.nationalSpringTitle),
html body[data-quest-page="guide"] .guidePilotList #list .item :is(.name,.cap,.yomi,.capYomi){
  white-space:nowrap !important;overflow-wrap:normal !important;
}
html body[data-quest-page="guide"].guide-layout-pilot .guidePilotList #list .item :is(.name,.cap){font-size:var(--quest-guide-name-size);}
html body[data-quest-page="guide"].guide-layout-pilot .guidePilotList #list .item :is(.yomi,.capYomi){font-size:var(--quest-small-size);}
html body[data-quest-page="guide"].guide-layout-pilot .guidePilotQuestionCard .name{font-size:var(--quest-question-size);}
html body[data-quest-page="guide"].guide-layout-pilot .guidePilotQuestionCard .yomi{font-size:var(--quest-reading-size);}

/* Long labels wrap at their readable minimum; the parent panel can scroll. */
body[data-quest-page] [data-quest-wrap]{
  white-space:normal !important;overflow-wrap:anywhere;
  overflow:visible !important;text-overflow:clip;
  height:auto !important;line-height:1.25 !important;
}

body[data-quest-page="info"] .pageHead{font-size:clamp(18px,min(2.2vw,4vh),30px);white-space:normal;overflow-wrap:anywhere;}
body[data-quest-page="info"] h2{font-size:clamp(18px,1.6vw,28px);}
body[data-quest-page="info"] h3{font-size:clamp(16px,1.4vw,24px);}
body[data-quest-page="info"] :is(p,li){font-size:clamp(16px,1.2vw,20px);line-height:1.7;overflow-wrap:anywhere;}

/* The same width/height principle applies to the floating mini-game prompt. */
body[data-quest-page] .questShowerQuestion.is-overlay p{font-size:clamp(18px,min(3.5vw,5.5vh),34px);}