/* The guide has a readable label below the world, away from the island HUD. */
#islandGuideBtn {
  position: fixed; z-index: 43; right: 14px;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px);
  min-height: 44px; padding: 0 17px; border-radius: 24px;
  border: 1px solid rgba(186, 215, 226, .55); color: #f4f9fc;
  background: rgba(19, 43, 60, .93); box-shadow: 0 3px 12px #05121a40;
  font: 750 13px/1.2 system-ui; cursor: pointer;
}
body.panelOpen #islandGuideBtn, body.panelOpen #islandGuideCue,
body.scene-loading #islandGuideBtn, body.scene-loading #islandGuideCue,
body:has(#iglooTray:not(.hidden)) #islandGuideBtn,
body:has(#iglooTray:not(.hidden)) #islandGuideCue,
body:has(#emoteWheel:not(.hidden)) #islandGuideBtn,
body:has(#emoteWheel:not(.hidden)) #islandGuideCue,
body:has(#quickChat:not(.hidden)) #islandGuideBtn,
body:has(#quickChat:not(.hidden)) #islandGuideCue { display: none; }
#islandGuideCue {
  position: fixed; z-index: 43; right: 14px;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 130px);
  width: min(270px, calc(100vw - 28px)); box-sizing: border-box;
  border: 1px solid #a9c9d4; border-radius: 17px; padding: 16px 18px;
  background: #eef7f8; color: #19384b; box-shadow: 0 6px 24px #07182430;
  font: 14px/1.45 system-ui;
}
#islandGuideCue strong { display: block; padding-right: 26px; font-size: 15px; }
#islandGuideCue p { margin: 7px 0 11px; }
#islandGuideCue .guideCueDismiss { position: absolute; right: 3px; top: 3px; width: 44px; height: 44px; border: 0; background: transparent; color: #335266; cursor: pointer; }
.guideCueOpen { min-height: 38px; border: 0; border-bottom: 1px solid #486b80; padding: 4px 0; background: transparent; color: #214d66; font: 750 13px system-ui; cursor: pointer; }
#islandGuidePanel {
  /* Town announcements can arrive after opening this reading surface. Keep
     them below the guide rather than across its controls. Age gates are 340+. */
  position: fixed; z-index: 270; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 28px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  padding: 23px; border: 1px solid #88a7b9; border-radius: 24px;
  background: #f1f7f7; color: #18374a; box-shadow: 0 18px 60px #06142070;
  font-family: system-ui;
}
#islandGuidePanel .panelHead { align-items: flex-start; margin: 0 0 12px; }
#islandGuidePanel .panelHead h2 { color: #17394c; font-size: 23px; line-height: 1.18; letter-spacing: -.5px; margin: 5px 0 0; }
#islandGuidePanel .closeX { flex-shrink: 0; background: #dde9ec; color: #315164; width: 44px; height: 44px; }
.guideEyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: #507386; }
.guideIntro { font-size: 14px; line-height: 1.5; margin: 0 0 13px; }
.guideProgress { color: #426a67; font-size: 12px; font-weight: 700; margin: 0 0 15px; }
.guideSteps { list-style: none; padding: 0; margin: 0; }
.guideSteps li { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid #d3e1e4; }
.guideStepState { flex: 0 0 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #dcebef; color: #315d73; font-size: 11px; font-weight: 850; }
.guideSteps .is-complete .guideStepState { background: #cce4da; color: #255f4e; font-size: 9px; }
.guideSteps h3 { font-size: 15px; line-height: 1.3; margin: 1px 0 5px; color: #183c50; }
.guideSteps p, .guideControls p { font-size: 12px; line-height: 1.5; margin: 0 0 9px; color: #496475; }
.guideSteps button, .guideControls button { min-height: 40px; padding: 8px 13px; border-radius: 10px; border: 1px solid #b4ced6; color: #234f65; background: #e1eef0; font: 750 12px system-ui; cursor: pointer; }
.guideControls { border-top: 1px solid #d3e1e4; padding-top: 14px; }
.guideControls strong { display: block; font-size: 13px; margin-bottom: 8px; }
#islandGuidePanel button:focus-visible, #islandGuideBtn:focus-visible, #islandGuideCue button:focus-visible { outline: 3px solid #348aa6; outline-offset: 3px; }
@media (max-width: 430px) {
  #islandGuidePanel { padding: 18px; border-radius: 20px; }
  #islandGuidePanel .panelHead h2 { font-size: 21px; }
  .guideSteps li { gap: 10px; padding: 12px 0; }
}
@media (max-height: 480px) {
  #islandGuideCue { display: none; }
}