#mobileSections{display:none}
@media(max-width:900px){
  #mobileSections{position:absolute;z-index:1201;display:flex;align-items:center;justify-content:center;top:max(12px,env(safe-area-inset-top));right:12px;min-height:42px;padding:0 16px;border:1px solid rgba(255,248,233,.86);border-radius:28px;background:rgba(20,17,14,.91);color:#fff8eb;box-shadow:0 4px 16px #0008;backdrop-filter:blur(10px);font:700 10px/1 Arial,sans-serif;letter-spacing:.1em;cursor:pointer;touch-action:manipulation}
  #mobileSections:focus-visible{outline:2px solid #fff;outline-offset:3px}
  body:has(#infoOverlay.open) #mobileSections,
  body:has(#composeOverlay.open) #mobileSections,
  body:has(#viewer.open) #mobileSections,
  body:has(#cabinetOverlay:not([hidden])) #mobileSections,
  body:has(#dayJourney:not([hidden])) #mobileSections{display:none}
}
@media(max-width:700px){
  #landing #brandMark{top:66px!important}
  #mobileLandingControls .mobileQuickLinks{justify-content:flex-end}
  #infoOverlay:has(.worldGrid) .panel{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:65px 22px 24px}
  #infoOverlay:has(.worldGrid) #panelTitle{font-size:clamp(29px,8vw,37px);line-height:1.05;margin:8px 0 18px}
  #infoOverlay:has(.worldGrid) #panelBody>p{display:none}
  #infoOverlay:has(.worldGrid) .worldGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
  #infoOverlay:has(.worldGrid) .worldTile{min-height:92px;padding:12px 11px;justify-content:flex-start;gap:8px}
  #infoOverlay:has(.worldGrid) .worldTile span{font-size:8px;line-height:1.25;letter-spacing:.1em}
  #infoOverlay:has(.worldGrid) .worldTile strong{font-size:17px;line-height:1.12;margin:0}
  #infoOverlay:has(.worldGrid) .worldTile small{display:none}
  #infoOverlay:has(.worldGrid) #panelActions{display:none}
}
@media(max-width:370px){
  #infoOverlay:has(.worldGrid) .worldTile{min-height:86px;padding:10px 8px}
  #infoOverlay:has(.worldGrid) .worldTile strong{font-size:15px}
}
