[hidden] { display: none !important; }

.mobile-tour-toggle { display: none; }

@media (max-width: 640px) {
  #info:not(.mobile-open), #views:not(.mobile-open) { display: none !important; }

  .mobile-tour-toggle {
    position: fixed;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(243,239,232,.25);
    border-radius: 999px;
    background: rgba(28,25,22,.82);
    color: #f3efe8;
    box-shadow: 0 6px 20px #0003;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: 600 13px "Hanken Grotesk", system-ui, sans-serif;
    cursor: pointer;
  }

  .mobile-tour-toggle[aria-expanded="true"] { background: #d9a45b; color: #1c1916; }
  #mobile-info-toggle { top: calc(12px + env(safe-area-inset-top, 0px)); left: 16px; }
  #mobile-views-toggle { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; }

  #info.mobile-open {
    z-index: 30;
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 16px;
    width: min(320px, calc(100vw - 32px));
    max-width: none;
    max-height: min(42vh, 300px);
    overflow: auto;
    padding-right: 40px;
  }
  #info .meta { overflow-wrap: anywhere; }
  #hideInfo { min-width: 44px; min-height: 44px; top: 0; right: 0; }

  #views.mobile-open {
    z-index: 30;
    left: 16px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    width: min(360px, calc(100vw - 32px));
    max-width: none;
    max-height: min(39vh, 330px);
    overflow-y: auto;
    padding: 10px;
  }
  #views button { min-height: 44px; padding: 9px 13px; }

  #map { z-index: 20; right: 16px; padding: 7px; }
  #mini { width: 105px; height: 105px; }
  #map .peg-hint { display: none; }
  #mini-pegman { min-width: 44px; min-height: 44px; }
  #joy { left: 22px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) and (max-height: 500px) {
  #info.mobile-open { max-height: 55vh; }
  #views.mobile-open { max-height: 56vh; }
  #joy { width: 86px; height: 86px; }
}