/* Pilot scope is added only to Hokkaido / Tohoku's learning guide. */
html body.guide-layout-pilot{
  --pilot-list-width:clamp(180px,27vw,280px);
  --pilot-controls-width:188px;
}
html body.guide-layout-pilot > .frame{
  display:block;padding:0;position:relative;overflow:hidden;
}
html body.guide-layout-pilot .stage{
  position:absolute;inset:0 auto 0 0;width:100%;height:100%;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  transition:width .6s cubic-bezier(.22,.61,.36,1);
}
html body.guide-layout-pilot.guide-pilot-list-open .stage{
  width:calc(100% - var(--pilot-list-width) - 18px);
}
html body.guide-layout-pilot .side{display:none;}
html body.guide-layout-pilot .modeBar{
  position:fixed;left:calc(14px + var(--safeL,0px));
  top:calc(62px + var(--safeT,0px));width:var(--pilot-controls-width);
  display:flex;flex-direction:column;gap:8px;z-index:80;
  margin:0;padding:0;box-sizing:border-box;
}
html body.guide-layout-pilot .guidePilotQuestion[hidden]{display:none;}
html body.guide-layout-pilot .modeBar > .guidePilotQuestion.is-inline-question{
  position:static;width:100%;min-width:0;flex:0 0 auto;overflow:hidden;
}
html body.guide-layout-pilot .guidePilotQuestion.is-inline-question .guidePilotQuestionCard{
  min-width:0;width:100%;
}
html body.guide-layout-pilot .guidePilotQuestion.is-inline-question .left{
  width:100%;min-width:0;
}
html body.guide-layout-pilot .guidePilotInstruction{
  display:block;min-width:0;max-width:100%;margin:0;
  color:#ffe76b;font:700 clamp(11px,min(1.5vw,3dvh),16px)/1.3 system-ui;
  text-align:center;white-space:nowrap;overflow-wrap:normal;
}
html body.guide-layout-pilot .guidePilotInstruction[hidden]{display:none;}
html body.guide-layout-pilot .guidePilotQuestion > .guidePilotInstruction{margin-bottom:6px;}
html body.guide-layout-pilot .guidePilotList.has-instruction{
  display:flex;flex-direction:column;gap:6px;
}
html body.guide-layout-pilot .guidePilotList.has-instruction > .guidePilotInstruction{flex:0 0 auto;}
html body.guide-layout-pilot .guidePilotList.has-instruction #list{
  flex:1;min-height:0;height:auto;
}
html body.guide-layout-pilot .guidePilotQuestionCard{
  width:100%;box-sizing:border-box;min-height:70px;padding:8px;
  display:flex;align-items:center;justify-content:center;
}
html body.guide-layout-pilot .guidePilotQuestionCard .left,
html body.guide-layout-pilot .guidePilotQuestionCard .right{text-align:center;align-items:center;}
html body.guide-layout-pilot .guidePilotQuestionCard .name{font-size:24px;}
html body.guide-layout-pilot .modeBar > .instr{
  position:static;white-space:normal;overflow-wrap:anywhere;
  margin:0;width:100%;box-sizing:border-box;text-align:center;font-size:12px;
}
html body.guide-layout-pilot .guidePilotList{
  position:fixed;right:calc(10px + var(--safeR,0px));
  top:calc(62px + var(--safeT,0px));bottom:calc(12px + var(--safeB,0px));
  width:var(--pilot-list-width);padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;z-index:70;
  opacity:0;visibility:hidden;transform:translateX(20px);pointer-events:none;
  transition:opacity .4s,transform .6s cubic-bezier(.22,.61,.36,1),visibility 0s .6s;
}
html body.guide-layout-pilot.guide-pilot-list-open .guidePilotList{
  opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;
  transition:opacity .4s .1s,transform .6s cubic-bezier(.22,.61,.36,1),visibility 0s;
}
html body.guide-layout-pilot .guidePilotList #list{
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-content:start;width:100%;max-width:none;max-height:100%;overflow:auto;
  box-sizing:border-box;gap:7px;padding:0 2px 4px;margin:0;
}
html body.guide-layout-pilot .guidePilotList #list .item{
  min-width:0;min-height:64px;padding:6px;white-space:normal;
}
html body.guide-layout-pilot .guidePilotList #list .item .name{font-size:18px;overflow-wrap:anywhere;}
html body.guide-layout-pilot .guidePilotList #list .item .right{display:none;}
html body.guide-layout-pilot .guidePilotList #list .blockTitle{display:none;}
@media(max-width:600px){
  html body.guide-layout-pilot{--pilot-list-width:126px;--pilot-controls-width:144px;}
  html body.guide-layout-pilot .modeBar .guideTitle{font-size:16px;height:40px;min-height:40px;}
  html body.guide-layout-pilot .modeBar .viewBtn{white-space:normal;font-size:11px;}
  html body.guide-layout-pilot .modeBar .modeBtn{white-space:normal;font-size:10px;}
  html body.guide-layout-pilot .guidePilotList #list{grid-template-columns:minmax(0,1fr) !important;}
  html body.guide-layout-pilot .guidePilotList #list .item{grid-column:1 !important;grid-row:auto !important;width:100% !important;}
}
@media(prefers-reduced-motion:reduce){
  html body.guide-layout-pilot :is(.stage,.guidePilotList){transition:none;}
}

html body.guide-layout-pilot > .cardHead{
  position:fixed;width:0;height:0;padding:0;border:0;background:transparent;overflow:visible;
}

/* Lists belong on the right in landscape and below the map in portrait. */
@media(orientation:landscape){
  html body.guide-layout-pilot .guidePilotList #list{
    display:flex !important;flex-direction:column;
  }
  html body.guide-layout-pilot .guidePilotList #list .item{
    width:100% !important;box-sizing:border-box;flex:0 0 auto;
  }
  html body.guide-layout-pilot .guidePilotList #list .blockTitle{display:block;}
}
@media(orientation:portrait){
  html body.guide-layout-pilot .stage{
    width:100%;height:100%;
    transition:height .6s cubic-bezier(.22,.61,.36,1);
  }
  html body.guide-layout-pilot.guide-pilot-list-open .stage{
    width:100%;height:60%;
  }
  html body.guide-layout-pilot .guidePilotList{
    left:calc(14px + var(--safeL,0px));right:calc(14px + var(--safeR,0px));
    top:60%;bottom:calc(12px + var(--safeB,0px));width:auto;
    transform:translateY(20px);padding-top:8px;
  }
  html body.guide-layout-pilot.guide-pilot-list-open .guidePilotList{transform:translateY(0);}
  html body.guide-layout-pilot .guidePilotList #list{
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100%;max-width:440px;margin-left:auto;margin-right:auto;
  }
  html body.guide-layout-pilot .guidePilotList #list .item{
    grid-row:auto !important;grid-column:auto !important;
    width:100% !important;box-sizing:border-box;
  }
  html body.guide-layout-pilot .guidePilotList #list .item[data-code="1"]{
    grid-row:1 !important;grid-column:1 / span 2 !important;
    width:calc((100% - 7px) / 2) !important;justify-self:center;
  }
  html body.guide-layout-pilot .guidePilotList #list .item[data-code="2"]{grid-row:2 !important;grid-column:1 !important;}
  html body.guide-layout-pilot .guidePilotList #list .item[data-code="3"]{grid-row:2 !important;grid-column:2 !important;}
  html body.guide-layout-pilot .guidePilotList #list .item[data-code="5"]{grid-row:3 !important;grid-column:1 !important;}
  html body.guide-layout-pilot .guidePilotList #list .item[data-code="4"]{grid-row:3 !important;grid-column:2 !important;}
  html body.guide-layout-pilot .guidePilotList #list .item[data-code="6"]{grid-row:4 !important;grid-column:1 !important;}
  html body.guide-layout-pilot .guidePilotList #list .item[data-code="7"]{grid-row:4 !important;grid-column:2 !important;}
}

@media(orientation:portrait){html body.guide-layout-pilot .guidePilotList #list .item .name{font-size:20px;}}
@media(prefers-reduced-motion:reduce){html body.guide-layout-pilot :is(.stage,.guidePilotList){transition:none !important;}}

html body.guide-layout-pilot .modeBar > .instr{white-space:pre-line;}

/* Hide the source question list immediately while the map expands. */
html body.guide-layout-pilot:is([data-practice-mode="where"],[data-practice-mode="capital"]) .guidePilotList #list{
  visibility:hidden !important;
}

/* Guide modes also display the learning instruction beneath the controls. */
html body.guide-layout-pilot[data-practice-mode="view"] .modeBar > .instr{display:block;}

html body.guide-layout-pilot .modeBar > #instr{display:block !important;flex:0 0 auto;min-height:1.5em;color:#ffd400;}

/* Match the actual game's readable question panel. */
html body.guide-layout-pilot .guidePilotQuestionCard{
  padding:12px 12px 10px;border-radius:16px;
  background:rgba(17,45,88,.84);
  border:2px solid rgba(246,251,255,.78);
  box-shadow:0 10px 24px rgba(7,24,55,.28);
  color:rgba(246,251,255,.98);text-align:center;
}
html body.guide-layout-pilot .guidePilotQuestionCard .name{
  font-size:clamp(22px,4vw,44px);font-weight:600;line-height:1.06;color:inherit;
}
html body.guide-layout-pilot .guidePilotQuestionCard .yomi{
  font-size:clamp(13px,2vw,22px);font-weight:600;line-height:1.05;
  color:rgba(246,251,255,.92);margin-bottom:4px;
}
html body.guide-layout-pilot .guidePilotQuestionCard .right{display:none;}
html[lang="en"] body.guide-layout-pilot .guidePilotQuestionCard .name{
  font-size:24px;overflow-wrap:anywhere;
}

/* Language lives below the left menu/question stack. */
html body.guide-layout-pilot .modeBar > #allLangToggle{
  position:static !important;inset:auto !important;align-self:flex-start;
  flex:0 0 auto;margin:2px 0 0;min-height:32px;padding:0 12px;
}

html body.guide-layout-pilot .modeBar .guideTitle{
  height:auto;min-height:36px;padding:4px 2px;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#f2f8ff;font-size:20px;cursor:default;
}

/* Left controls, question, instruction, and language sit above the Okinawa inset. */
html body.guide-layout-pilot > .cardHead{z-index:100;}
html body.guide-layout-pilot .modeBar{z-index:100;}
html body.guide-layout-pilot #okinawaInset{z-index:20;}

/* Portrait uses each region's natural list height, with a softly overlapping map. */
@media(orientation:portrait){
  html body.guide-layout-pilot .guidePilotList{
    top:auto;height:var(--pilot-bottom-list-height,300px);
    bottom:calc(12px + var(--safeB,0px));padding-top:8px;
  }
  html body.guide-layout-pilot.guide-pilot-list-open .stage{
    height:calc(100% - var(--pilot-bottom-reserve,312px) + 48px);
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 48px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 48px),transparent 100%);
  }
  html body.guide-layout-pilot .guidePilotList #list{height:100%;}
}

/* A reduced map stays aligned with the soft lower edge, rather than floating above it. */
@media(orientation:portrait){
  html body.guide-layout-pilot.guide-pilot-list-open #svgHost > svg{
    transform-origin:50% 100%;
  }
}

/* Kanto: center the mainland through Oshima in portrait; nudge landscape right. */
@media(orientation:portrait){
  html body.guide-layout-pilot[data-region-id="02kan"] #svgHost > svg{
    transform:translate(min(12vw,100px),0px) scale(.95) !important;
    transform-origin:50% 50% !important;
  }
}
@media(orientation:landscape){
  html body.guide-layout-pilot[data-region-id="02kan"] #svgHost > svg{
    transform:translate(calc(var(--mapShiftX) + 100px),var(--mapShiftY)) scale(calc(var(--mapScale) * .90)) !important;
    transform-origin:50% 50%;
  }
}

/* Keep surrounding geography visible beyond the regional SVG viewport. */
html body.guide-layout-pilot .stage,
html body.guide-layout-pilot #svgHost,
html body.guide-layout-pilot #svgHost > svg{
  overflow:visible !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* Use the quiz panel palette for readable controls over the complete map. */
html body.guide-layout-pilot .modeBar .knowledgeGroup,
html body.guide-layout-pilot .guidePilotList #list .item{
  background:rgba(17,45,88,.94);
  border:2px solid rgba(246,251,255,.78);
  box-shadow:0 10px 24px rgba(7,24,55,.28);
  color:rgba(246,251,255,.98);
}
html body.guide-layout-pilot .guidePilotList #list .item .name,
html body.guide-layout-pilot .guidePilotList #list .item .yomi{
  color:inherit;
}

/* Preserve kanji alongside English names and the existing two-way selection. */
html[lang="en"] body.guide-layout-pilot .guidePilotList #list .item,
html[lang="en"] body.guide-layout-pilot .guidePilotQuestionCard{
  flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
html[lang="en"] body.guide-layout-pilot .guidePilotList #list .item .right,
html[lang="en"] body.guide-layout-pilot .guidePilotQuestionCard .right{
  display:flex;align-items:center;justify-content:center;width:100%;text-align:center;
}
html[lang="en"] body.guide-layout-pilot .guidePilotList #list .item .right .name{
  font-size:18px;line-height:1.15;
}
html body.guide-layout-pilot .guidePilotList #list .item.is-active{
  background:var(--selBg);color:var(--selText);
  border-color:rgba(190,235,255,.95);
  box-shadow:0 0 14px rgba(190,235,255,.5),inset 0 1px 0 rgba(255,255,255,.24);
}
html body.guide-layout-pilot .guidePilotList #list .blockTitle{
  font-size:18px;font-weight:700;color:#fff1a8;
  text-shadow:0 2px 4px rgba(7,24,55,.6);
}

/* Keep Kyushu's geographic button arrangement, aligned to the left in portrait. */
@media(orientation:portrait){
  html body.guide-layout-pilot[data-region-id="06kyu"] .guidePilotList #list{
    margin-left:0;margin-right:auto;align-self:flex-start;
  }
}

/* Lift Chugoku/Shikoku by one return-button height. */
html body.guide-layout-pilot[data-region-id="05chs"] #svgHost > svg{
  transform:translate(calc(var(--mapShiftX) + var(--guide-map-offset-x,0px)),calc(var(--mapShiftY) - 40px)) scale(var(--mapScale)) !important;
}
/* Begin both learning lists nearer the top in landscape, across all regions. */
@media(orientation:landscape){
  html body.guide-layout-pilot[data-practice-mode="view"] .guidePilotList{
    top:calc(20px + var(--safeT,0px));
  }
}

/* Kinki: reduce the map to 90% of its existing size in both orientations. */
html body.guide-layout-pilot[data-region-id="04kin"] #svgHost > svg{
  transform:translate(calc(var(--mapShiftX) + var(--guide-map-offset-x,0px) + min(12vw,100px)),var(--mapShiftY)) scale(calc(var(--mapScale) * .90)) !important;
}

/* Lighter learning choices, while keeping the map/list selection clear. */
html body.guide-layout-pilot .guidePilotList #list .item{
  background:rgba(34,67,108,.88);
  border:1px solid rgba(246,251,255,.48);
  box-shadow:none;
}
html body.guide-layout-pilot .guidePilotList #list .item.is-active{
  background:var(--selBg);color:var(--selText);
  border-color:rgba(190,235,255,.95);
  box-shadow:0 0 10px rgba(190,235,255,.4);
}

/* Narrow landscape choices and give the map the recovered width. */
@media(orientation:landscape){
  html body.guide-layout-pilot{
    --pilot-list-width:clamp(180px,22vw,230px);
  }
  @media(max-width:600px){
    html body.guide-layout-pilot{--pilot-list-width:126px;}
  }
}

/* Long English place names must fit the narrower choices without hiding kanji. */
html[lang="en"] body.guide-layout-pilot .guidePilotList #list .item .left{
  width:100%;min-width:0;align-items:center;text-align:center;
}
html[lang="en"] body.guide-layout-pilot .guidePilotList #list .item .left .name{
  width:100%;min-width:0;box-sizing:border-box;
  font-size:16px;line-height:1.15;white-space:normal;
  overflow:visible;text-overflow:clip;overflow-wrap:anywhere;
}

/* Match the left menu's navy transparency to the learning choices. */
html body.guide-layout-pilot .modeBar .knowledgeGroup{
  background:rgba(34,67,108,.88);
}

/* Kanto portrait: spread the two columns apart to reveal the islands between them. */
@media(orientation:portrait){
  html body.guide-layout-pilot[data-region-id="02kan"] .guidePilotList #list{
    max-width:none;margin-left:0;margin-right:0;
    grid-template-columns:repeat(2,minmax(0,214px)) !important;
    justify-content:space-between;column-gap:24px;
  }
}

@media(orientation:portrait){
  html body.guide-layout-pilot[data-region-id="04kin"] #svgHost > svg{
    transform:translate(calc(var(--mapShiftX) + var(--guide-map-offset-x,0px) + min(12vw,100px) - 5px),var(--mapShiftY)) scale(calc(var(--mapScale) * .90)) !important;
  }
}

/* Keep the two Chugoku/Shikoku section headings visible in either orientation. */
html body.guide-layout-pilot[data-region-id="05chs"] .guidePilotList #list .blockTitle{
  display:flex !important;visibility:visible !important;opacity:1 !important;
  align-items:center;min-height:26px;flex:0 0 auto;
  color:#fff1a8;font-size:18px;font-weight:700;
}

/* These map-only exercises must not retain the portrait list slot.
   Set its final height directly so switching modes cannot leave a partial
   height transition behind on a tablet browser. */
@media(orientation:portrait){
  html body.guide-layout-pilot:is([data-region-id="01hkt"],[data-region-id="02kan"])[data-practice-mode="where"] .stage{
    height:100%;transition:none;
  }
  html body.guide-layout-pilot:is([data-region-id="01hkt"],[data-region-id="02kan"])[data-practice-mode="where"] .guidePilotList{
    display:none;
  }
}

/* Compact the right-hand learning list to the guide-button height. */
@media(orientation:landscape){
  html body.guide-layout-pilot .guidePilotList #list{gap:6px;}
  html body.guide-layout-pilot .guidePilotList #list .item{
    min-height:36px;height:auto;padding:7px 8px;border-radius:8px;
    align-items:center;
  }
  html:not([lang="en"]) body.guide-layout-pilot .guidePilotList #list .item .left:only-child{
    display:flex;flex-direction:row-reverse;align-items:center;
    justify-content:space-between;gap:8px;width:100%;
  }
  html body.guide-layout-pilot .guidePilotList #list .item .name{
    font-size:18px;line-height:1.2;white-space:nowrap;
  }
  html body.guide-layout-pilot .guidePilotList #list .item .yomi{
    font-size:11px;line-height:1.2;min-height:0;flex-shrink:0;
    white-space:nowrap;text-align:right;letter-spacing:0;
  }
  html body.guide-layout-pilot .guidePilotList #list .blockTitle{
    min-height:24px;margin:2px 0;font-size:17px;
  }
}

/* A small horizontal adjustment for the Chubu and Chugoku/Shikoku guides. */
html body.guide-layout-pilot[data-region-id="03chu"],
html body.guide-layout-pilot[data-region-id="05chs"]{
  --mapShiftX:clamp(16px,2.5vw,28px);
}

/* Flush the Okinawa inset with the bottom edge of the guide map. */
html body.guide-layout-pilot[data-region-id="06kyu"] #okinawaInset{
  bottom:0!important;
}