/* Learning guide: intrinsic headings/captions, fitted media, remaining space for text.
   Scoped to map-symbol modes so the compass layout keeps its own rules. */
body.mode-kigo .viewer > .panelHead{
  position:relative;
  padding:6px 64px;
  min-height:44px;
}
.guideHome{display:none !important;}
body.mode-kigo .viewer .guideHome,
body.mode-kigo .nameCard > .viewerSound{
  position:absolute !important;
  left:6px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:40px;
  z-index:2 !important;
}
body.mode-kigo .viewer .guideHome{display:flex !important;}
body.mode-kigo .guideHome .homeCircle,
body.mode-kigo .viewerSound .soundCircle{
  width:26px;
  height:26px;
  border-width:1px;
}
body.mode-kigo .guideHome .homeIcon,
body.mode-kigo .viewerSound .soundIcon{width:22px;height:22px;}
body.mode-kigo .guideHome .homeLabel,
body.mode-kigo .viewerSound .soundLabel{
  min-width:38px;
  margin-top:-2px;
  padding:1px 3px;
  border-width:1px;
  font-size:9px;
  line-height:1.1;
  white-space:nowrap;
}
body.mode-kigo .viewer .bigTitle{
  font-size:clamp(16px, 2vw, 22px);
  line-height:1.25;
}
html body:not(.dice-record) .viewer #pageTitle{
  font-size:20px !important;
  line-height:1.25;
}
body.mode-kigo .viewerBody{
  padding:6px;
  overflow:auto;
}
body.mode-kigo .kigoViewer{
  --guide-image-height:120px;
  flex:1 0 auto;
  height:100% !important;
  min-height:0;
  grid-template-rows:max-content max-content minmax(72px, 1fr) !important;
  gap:6px !important;
}
body.mode-kigo .nameCard{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:44px !important;
  height:auto !important;
  padding:5px 8px 5px 58px !important;
}
body.mode-kigo .currentName{
  min-width:0;
  font-size:clamp(18px, 2.4vw, 30px) !important;
  line-height:1.65 !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
}
body.mode-kigo .nameVideoBtn:not(.is-hidden){
  position:static !important;
  transform:none !important;
  width:auto !important;
  min-width:0 !important;
  max-width:80px !important;
  height:auto !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  line-height:1.2 !important;
  overflow:hidden !important;
}
body.mode-kigo .nameVideoBtn:not(.is-hidden)::before,
body.mode-kigo .nameVideoBtn:not(.is-hidden)::after{content:none !important;display:none !important;}
body.mode-kigo .nameVideoBtn:not(.is-hidden) .nameVideoThumb{
  display:block !important;
  width:64px !important;
  height:36px !important;
  aspect-ratio:16 / 9 !important;
  object-fit:contain !important;
  border-radius:6px !important;
  box-shadow:none !important;
}
body.mode-kigo .nameVideoBtn:not(.is-hidden) .nameVideoLabel{display:none !important;}
body.mode-kigo .imageInfoCard,
body.mode-kigo .imageInfoCard .infoCardBody,
body.mode-kigo .mapInner,
body.mode-kigo .imagePair,
body.mode-kigo .imageBox{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
body.mode-kigo .imageInfoCard .infoCardBody{
  flex:0 0 auto;
  padding:0 !important;
}
body.mode-kigo .imagePair{
  align-items:start;
  border-radius:0;
}
body.mode-kigo .imageBox{
  grid-template-rows:var(--guide-image-height) auto !important;
  align-content:start;
}
body.mode-kigo #mapImg,
body.mode-kigo #photoImg{
  width:100% !important;
  height:var(--guide-image-height) !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center !important;
}
body.mode-kigo .imageCaption{
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:3px 5px !important;
  font-size:clamp(10px, 1.2vw, 12px) !important;
  line-height:1.35 !important;
  white-space:pre-line !important;
  overflow:visible !important;
  overflow-wrap:anywhere;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  text-overflow:clip !important;
}
body.mode-kigo .textBody{
  height:100% !important;
  min-height:0 !important;
  padding:6px 8px !important;
  gap:5px !important;
  overflow:hidden !important;
}
body.mode-kigo #textExplain{flex:1 1 0;min-height:0;overflow:auto;}
@media (max-height:520px), (max-width:700px){
  body.mode-kigo .nameCard{gap:4px;min-height:44px !important;padding:3px 5px 3px 48px !important;}
  body.mode-kigo .currentName{font-size:18px !important;line-height:1.6 !important;}
  body.mode-kigo .nameVideoBtn:not(.is-hidden) .nameVideoThumb{width:48px !important;height:27px !important;}
  body.mode-kigo .viewerBody{padding:4px;}
  body.mode-kigo .kigoViewer{gap:4px !important;}
}

/* Join paired media and retain every part of composite photos. */
body.mode-kigo .imagePair{gap:0 !important;}
body.mode-kigo .imageBox{border:0 !important;box-shadow:none !important;}
body.mode-kigo #mapImg{object-position:right center !important;}
body.mode-kigo #photoImg{object-position:left center !important;}

/* A folded bottom-right corner invites turning to the next photo. */
body.mode-kigo .textBody{position:relative;}
body.mode-kigo #explanationActions{
  justify-content:flex-start;min-height:38px;padding-right:72px;box-sizing:border-box;
}
body.mode-kigo #explanationActions .variantNextHint{
  position:absolute;right:0;bottom:0;width:70px;height:64px;min-height:0;
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#17345c;cursor:pointer;isolation:isolate;overflow:visible;
  transition:filter .16s ease;
}
body.mode-kigo #explanationActions .variantNextHint::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#b4c4d8 46%,#fff3c4 49%,#fffdf1 68%,#d5c59b 100%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  filter:drop-shadow(-2px -2px 3px rgba(0,0,0,.3));
}
body.mode-kigo #explanationActions .variantNextHint::after{content:none;}
body.mode-kigo #explanationActions .variantNextMain{
  position:absolute;right:7px;bottom:9px;margin:0;font:600 14px/1.2 system-ui,sans-serif;
}
body.mode-kigo #explanationActions .variantNextHint:hover{filter:brightness(1.12);}
body.mode-kigo #explanationActions .variantNextHint:focus-visible{outline:2px solid #ffe078;outline-offset:-3px;}

/* Tile badges: video at left, photo count inside a folded right corner. */
html body.mode-kigo .tile .videoBadge{
  left:5px !important;right:auto !important;bottom:5px !important;
}
html body.mode-kigo .tile .photoCount{
  left:auto !important;right:0 !important;bottom:0 !important;
  width:28px;height:26px;box-sizing:border-box;padding:12px 4px 2px 0;
  text-align:right;font-size:11px;font-weight:600;line-height:1;
  color:#365477;isolation:isolate;z-index:2;
}
html body.mode-kigo .tile .photoCount::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#a9bed5 44%,#edf5ff 49%,#d3e2f0 85%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  border-bottom-right-radius:9px;
}

html[lang="ja"] body.mode-kigo #explanationActions .variantNextMain{font-size:22px;}

/* Let the NHK thumbnail fill the name card's height, retaining its proportions. */
html body.mode-kigo .nameCard{
  position:relative;
  grid-template-columns:minmax(0,1fr) auto;
}
html body.mode-kigo .nameVideoBtn:not(.is-hidden){
  width:calc(var(--guide-video-height,44px) * 16 / 9) !important;
  max-width:none !important;height:var(--guide-video-height,44px) !important;
  min-height:0 !important;align-self:center;
  margin-top:-5px !important;margin-bottom:-5px !important;
}
html body.mode-kigo .nameVideoBtn:not(.is-hidden) .nameVideoThumb{
  width:100% !important;height:100% !important;object-fit:contain !important;
}

/* Match both folded corners and keep the visited blue rim above tile badges. */
html body.mode-kigo #explanationActions .variantNextHint::before{
  background:linear-gradient(135deg,#a9bed5 44%,#edf5ff 49%,#d3e2f0 85%);
}
html body.mode-kigo .tile.is-visited::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 2px #39a9ff;
  z-index:4;pointer-events:none;
}

/* Curved SVG paper fold, shared by the Next corner and photo-count corners. */
html body.mode-kigo #explanationActions .variantNextHint::before,
html body.mode-kigo .tile .photoCount::before{
  background:transparent url("../../icons/page-curl.svg?v=20261005-2") center / 100% 100% no-repeat;
  clip-path:none;filter:none;
}
html body.mode-kigo #explanationActions .variantNextMain{right:16px;bottom:17px;}
html body.mode-kigo .tile .photoCount{
  width:34px;height:32px;padding:16px 9px 3px 0;
}

/* Anchor the paper fold to the panel corner, with labels on its broad surface. */
html body.mode-kigo #explanationActions .variantNextHint{width:70px;height:64px;}
html body.mode-kigo #explanationActions .variantNextMain{right:9px;bottom:10px;}
html body.mode-kigo .tile .photoCount{padding:16px 5px 3px 0;}

html body.mode-kigo #explanationActions .variantNextMain{right:11px;bottom:12px;}
html body.mode-kigo .tile .photoCount{padding:15px 6px 4px 0;}

/* Viewed symbols share the selected mode's gold, blue, or green palette. */
html body.mode-basic{--guide-seen-rim:#e5af31;--guide-seen-fill:#fff0bc;--guide-active-fill:#ffe293;}
html body.mode-jissen{--guide-seen-rim:#39a9ff;--guide-seen-fill:#d9efff;--guide-active-fill:#b9e2ff;}
html body.mode-world{--guide-seen-rim:#43b86a;--guide-seen-fill:#dff5e3;--guide-active-fill:#bdecc9;}
html body.mode-kigo .tile.is-visited{
  background:var(--guide-seen-fill) !important;
  border-color:var(--guide-seen-rim) !important;
  box-shadow:inset 0 0 0 2px var(--guide-seen-rim) !important;
}
html body.mode-kigo .tile:is(.is-active,:active,:focus-visible){
  background:var(--guide-active-fill) !important;
  border-color:var(--guide-seen-rim) !important;
}
html body.mode-kigo .tile.is-visited::after{
  box-shadow:inset 0 0 0 2px var(--guide-seen-rim);
}

/* Viewed state uses only a thin mode-colored rim. */
html body.mode-kigo .tile.is-visited:not(.is-active){background:#fff !important;}
html body.mode-kigo .tile.is-visited{
  border-width:1px !important;
  box-shadow:inset 0 0 0 1px var(--guide-seen-rim) !important;
}
html body.mode-kigo .tile.is-visited::after{
  box-shadow:inset 0 0 0 1px var(--guide-seen-rim);
}

/* The current symbol also stays white: all selection marks are rim-only. */
html body.mode-kigo .tile:is(.is-visited,.is-active,:active,:focus-visible){
  background:#fff !important;
  border:1px solid var(--guide-seen-rim) !important;
  box-shadow:inset 0 0 0 1px var(--guide-seen-rim) !important;
  transform:none !important;outline:none !important;
}

/* One 1px rim, matching the mode tabs, without a second inset line. */
html body.mode-kigo .tile:is(.is-visited,.is-active,:active,:focus-visible){
  border-width:1px !important;box-shadow:none !important;
}
html body.mode-kigo .tile.is-visited::after{
  inset:-1px;
  border:1px solid var(--guide-seen-rim);
  box-shadow:none;
}

/* The exposed page keeps its original color; Next is printed underneath the fold. */
html body.mode-kigo #explanationActions .variantNextHint{right:-6px;}
html body.mode-kigo #explanationActions .variantNextMain{
  right:4px;bottom:7px;color:#fff;
  text-shadow:0 1px 2px rgba(12,32,60,.2);
}

/* Keep labels in the exposed corner, clear of the white folded underside. */
html[lang="ja"] body.mode-kigo #explanationActions .variantNextMain{font-size:18px;}
html body.mode-kigo .tile .photoCount{padding-top:18px;padding-bottom:1px;}

/* Only the currently displayed symbol receives the mode-colored fill. */
html body.mode-kigo .tile.is-active{
  background:var(--guide-active-fill) !important;
}

html body.mode-kigo .viewer .nameCard,
html body.mode-kigo .viewer .infoCard{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body.mode-kigo .viewer .mapInner,
html body.mode-kigo .viewer .imagePair,
html body.mode-kigo .viewer .imageBox{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body.mode-kigo .nameVideoBtn:not(.is-hidden){
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
html body.mode-kigo .nameVideoBtn:not(.is-hidden) .nameVideoThumb{
  border-radius:6px !important;
}
/* Give symbol names a stronger heading, shrinking only when a name is long. */
html body.mode-kigo .currentName{
  --guide-name-max:clamp(28px,3.2vw,42px);
  font-size:var(--guide-name-size,var(--guide-name-max)) !important;
  line-height:1.5 !important;
  white-space:nowrap !important;
  overflow-wrap:normal;
}
@media(orientation:portrait){
  html body.mode-kigo .nameCard{
    min-height:clamp(72px,9vh,100px) !important;
  }
  html body.mode-kigo .currentName{--guide-name-max:clamp(36px,5vw,54px);}
  html body.mode-kigo .nameVideoBtn:not(.is-hidden){max-width:clamp(64px,24vw,120px) !important;}
}