/* Return and sound effects share the existing title bar in every mode. */
#guideTitleBar{
  position:relative !important;display:flex;align-items:center;justify-content:center;
  height:48px;min-height:48px;flex:0 0 48px;padding:0 !important;
  background:var(--qBg);overflow:hidden;
}
#guideToolbar{
  position:absolute;inset:4px 6px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;width:auto;height:40px;
  pointer-events:none;
}
#guideTitleBar > .bigTitle{
  position:static !important;inset:auto !important;transform:none !important;
  width:100%;min-width:0;margin:0;padding:0 100px;text-align:center;white-space:nowrap;
  font-size:clamp(16px, 2vw, 22px);line-height:1.25;
}
#guideToolbar .homeFloat{
  position:static !important;inset:auto !important;transform:none !important;
  display:flex !important;flex-direction:row;align-items:center;justify-content:center;
  flex:0 0 88px;width:88px;height:40px;margin:0;padding:0;gap:0;
  border:0;background:transparent;box-shadow:none;
  pointer-events:auto;
}
#guideToolbar .homeFloat img{display:block;width:88px;height:40px;object-fit:contain;}
#guideToolbar .homeFloat img.guide-return--en{display:none;}
html[lang="en"] #guideToolbar .homeFloat img.guide-return--ja{display:none;}
html[lang="en"] #guideToolbar .homeFloat img.guide-return--en{display:block;}
#guideToolbar .guideToolbarSound{
  position:static !important;inset:auto !important;transform:none !important;
  display:inline-flex !important;flex-direction:row;align-items:center;justify-content:center;
  width:90px;height:44px;flex:0 0 90px;gap:4px;margin:0;padding:0;
  border:0;border-radius:10px;background:transparent;color:#315c88;
  font:600 12px system-ui,sans-serif;cursor:pointer;touch-action:manipulation;
  pointer-events:auto;
}
#guideToolbar .guideToolbarSound .soundLabel{
  position:static;min-width:0;margin:0;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;text-shadow:none;font:inherit;line-height:1;
}
#guideToolbar .guideToolbarSound .soundCircle{
  display:grid;place-items:center;width:44px;height:44px;
  flex:0 0 44px;border:0;border-radius:0;
  background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
#guideToolbar .guideToolbarSound .soundIcon{display:block;width:44px;height:44px;}
#guideToolbar .guideToolbarSound:hover{background:rgba(110,178,219,.12);}
#guideToolbar .guideToolbarSound:active .soundCircle{transform:scale(.92);}
#guideToolbar a:focus-visible,#guideToolbar button:focus-visible{
  outline:2px solid #fff;outline-offset:3px;border-radius:6px;
}

body .viewer > .panelHead{padding:4px 6px;min-height:48px;}

body.mode-kigo .nameCard{padding:5px 8px !important;}

@media(max-width:1000px){
  #guideToolbar{gap:6px;}
  #guideToolbar .homeFloat{width:70px;flex-basis:70px;}
  #guideToolbar .homeFloat img{width:70px;height:32px;}
  #guideTitleBar > .bigTitle{padding:0 100px;white-space:normal;}
}

/* Tab labels are white until the selected tab turns gold. */
html body :is(.modeTab,.kigoModeHead){color:#fff !important;}
html body :is(.modeTab,.kigoModeHead).is-gold:not(.is-current){color:#fff !important;}
html body .modeTab.is-current{color:#111 !important;}
html body.mode-kigo .kigoModeHead{
  color:#111 !important;
  background:linear-gradient(180deg,#fff7b0,#ffd36b,#ffb000) !important;
}

/* Selected map-symbol modes each have their own color. */
html body #tabBasic.is-current{
  background:linear-gradient(180deg,#fff7b0,#ffd36b,#ffb000) !important;
  border-color:#ffd36b !important;
  box-shadow:0 0 18px rgba(255,210,70,.35),inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html body #tabJissen.is-current{
  background:linear-gradient(180deg,#d9f1ff,#79c5ff,#3999eb) !important;
  border-color:#79c5ff !important;
  box-shadow:0 0 18px rgba(75,165,255,.35),inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html body #tabWorld.is-current{
  background:linear-gradient(180deg,#def9dd,#8bdf9a,#43b86a) !important;
  border-color:#8bdf9a !important;
  box-shadow:0 0 18px rgba(75,205,120,.35),inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html body.mode-jissen .kigoModeHead{background:linear-gradient(180deg,#d9f1ff,#79c5ff,#3999eb) !important;}
html body.mode-world .kigoModeHead{background:linear-gradient(180deg,#def9dd,#8bdf9a,#43b86a) !important;}

/* Portrait: the map-symbol heading and its mode tabs have equal heights. */
@media(orientation:portrait){
  html body:is(.mode-kigo,.mode-houi){--guide-mode-row:42px;--guide-mode-extra:20px;}
  html body:is(.mode-kigo,.mode-houi) .frame{
    grid-template-rows:minmax(0,calc(70% - var(--guide-mode-extra))) minmax(0,1fr) !important;
  }
  html body:is(.mode-kigo,.mode-houi) .modeTabs,
  html body:is(.mode-kigo,.mode-houi) .kigoModeBox,
  html body:is(.mode-kigo,.mode-houi) .modeTab.modeTabHoui{
    height:calc(var(--guide-mode-row) * 2) !important;
    min-height:calc(var(--guide-mode-row) * 2) !important;
    max-height:calc(var(--guide-mode-row) * 2) !important;
  }
  html body:is(.mode-kigo,.mode-houi) .kigoModeBox{
    grid-template-rows:repeat(2,var(--guide-mode-row)) !important;
  }
  html body:is(.mode-kigo,.mode-houi) .kigoModeHead,
  html body:is(.mode-kigo,.mode-houi) .kigoModeGroup,
  html body:is(.mode-kigo,.mode-houi) .kigoModeGroup .modeTab{
    height:var(--guide-mode-row) !important;
    min-height:var(--guide-mode-row) !important;
    max-height:var(--guide-mode-row) !important;
  }
  html body.mode-houi .sideBody{
    grid-template-rows:calc(var(--guide-mode-row) * 2) minmax(0,1fr) !important;
  }
}
@media(orientation:portrait) and (max-width:700px){
  html body:is(.mode-kigo,.mode-houi){--guide-mode-row:29px;--guide-mode-extra:12px;}
}

/* The selected symbol group heading uses black text with each mode's highlight. */
html body:is(.mode-basic,.mode-jissen,.mode-world) .kigoModeHead,
html body.mode-kigo .kigoModeHead.is-gold{
  color:#111 !important;
}