/* ───────────────────────────────────────────────────────────
   Mobile responsive — landscape-only optimization.
   The 3-D scene is meant to be viewed in landscape; portrait
   shows a "rotate your device" hint.
   ─────────────────────────────────────────────────────────── */

/* Mobile-only utility class — hidden by default, shown by media query. */
.mobile-only {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────
   Landscape phones / very-short tablets (max-height: 520px)
   ───────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --ab-w: 40px;
    --pw: 240px;
    --rpw: 96px;
  }

  .mobile-only {
    display: flex !important;
  }

  /* ── Activity bar becomes a horizontal bottom dock ─── */
  #toolbar {
    top: auto;
    left: 50%;
    bottom: 10px;
    width: auto;
    height: 40px;
    max-width: calc(100vw - 24px);

    flex-direction: row;
    align-items: center;
    gap: 1px;
    padding: 4px 8px;

    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-right: 1px solid var(--border-strong);
    border-radius: 999px;
    box-shadow: var(--shadow-2);

    transform: translateX(-50%) translateY(calc(100% + 60px));
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--motion-base),
      opacity var(--motion-base);
  }
  #toolbar.tb-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  #toolbar .ab-brand,
  #toolbar .ab-spacer {
    display: none;
  }
  .tbtn-sep {
    width: 1px;
    height: 18px;
    margin: 0 3px;
    background: var(--divider);
  }
  .tseg {
    flex-direction: row;
    width: auto;
    height: 32px;
  }
  .tseg-btn {
    width: 22px;
    padding: 0;
  }
  .tseg-btn + .tseg-btn {
    border-top: 0;
    border-left: 1px solid var(--border);
  }
  .tbtn.on::before {
    /* In a horizontal dock the rail sits along the bottom. */
    top: auto;
    left: 6px;
    right: 6px;
    bottom: -1px;
    width: auto;
    height: 2px;
    border-radius: 2px 2px 0 0;
  }

  /* In-toolbar close (hidden on desktop) appears on mobile */
  #btn-toolbar-close,
  #toolbar-close-sep {
    display: inline-flex !important;
  }

  /* ── Sidebar — slides in from the left edge ────────── */
  /* z-index 50 so the panel overlays the bottom dock (z-index 40) and
     the dock toggle pill (z-index 46). Same idea applies to the right
     dock so its open state covers the bottom dock too. */
  #panel {
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 50;
    border-right: 1px solid var(--border);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.55);
  }
  #panel.collapsed {
    transform: translateX(calc(-1 * var(--pw)));
  }
  #panel-resizer {
    display: none;
  }
  #rpanel-wrap {
    z-index: 50;
  }

  /* Compact header — drop the long subtitle. */
  #panel-head {
    padding: 8px 10px;
    gap: 6px;
  }
  .logo-title {
    font-size: 11.5px;
  }
  .logo-context,
  .logo-lab {
    display: none;
  }

  #ext-links-top {
    flex: 1;
    justify-content: flex-end;
    gap: 4px;
  }
  #ext-links-top a {
    width: 24px;
    height: 24px;
  }
  #ext-links-top a .ti {
    font-size: 13px;
  }

  #mode-bar {
    padding: 6px 10px 4px;
  }
  .mbtn {
    padding: 6px 6px;
    font-size: 11px;
  }

  #statusbar {
    padding: 6px 10px;
    min-height: 26px;
    font-size: 10.5px;
  }

  /* Touch target sizing */
  .tbtn {
    width: 32px;
    height: 32px;
  }
  .tbtn .ti {
    font-size: 16px;
  }
  .icon-btn {
    width: 28px;
    height: 28px;
  }
  .ctrl-btn {
    width: 26px;
    height: 26px;
  }
  .edl {
    width: 26px;
    height: 26px;
  }

  /* ── Right dock ────────────────────────────────────── */
  #rpanel-wrap {
    top: 8px;
    right: 8px;
    gap: 6px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #rpanel-wrap.collapsed {
    transform: translateX(calc(var(--rpw) + 16px));
  }
  #rpanel,
  #rpanel2 {
    max-height: none;
    flex-shrink: 0;
    width: var(--rpw);
  }
  #tab-cluster {
    display: none !important;
  }
  .strak {
    height: 116px;
  }
  .pane-det-name,
  .slbl,
  .sval {
    font-size: 10px;
  }

  /* Hide super-large screenshot resolutions */
  .shot-res[data-w='3840'],
  .shot-res[data-w='7680'],
  .shot-res[data-w='10240'] {
    display: none;
  }

  /* Top-left HUD shifts to avoid the sidebar header */
  body.panel-unpinned #collision-hud {
    left: 12px;
  }
  body:not(.panel-unpinned) #collision-hud {
    left: calc(var(--pw) + 12px);
  }

  /* η×φ minimap — the 342 px-wide widget is too large for a phone, so shrink
     it. transform: scale() is safe: minimap.js maps pointer coordinates
     through getBoundingClientRect(), so hit-testing follows the scale. */
  #minimap-wrap {
    transform: scale(0.78);
    transform-origin: top left;
    left: calc(var(--ab-w) + 14px);
  }
  body:not(.panel-unpinned) #minimap-wrap {
    left: calc(var(--pw) + 12px);
  }

  /* Bigger tap zones */
  #panel-edge,
  #rpanel-edge {
    width: 32px;
    display: block !important;
    touch-action: manipulation;
  }
  body:not(.panel-unpinned) #panel-edge {
    display: none !important;
  }
  body:not(.rpanel-unpinned) #rpanel-edge {
    display: none !important;
  }

  /* Cinema-exit positioning needs to sit above the dock */
  #cinema-exit {
    bottom: 64px;
  }
}

/* Extremely narrow landscape — drop separators inside dock */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 760px) {
  .tbtn-sep {
    display: none;
  }
  #toolbar {
    gap: 1px;
    padding: 3px 6px;
  }
  .tbtn {
    width: 28px;
    height: 28px;
  }
  .tbtn .ti {
    font-size: 14px;
  }
}

/* ─────────────────────────────────────────────────────────
   Portrait hint — phones held vertically see a rotate gif.
   ───────────────────────────────────────────────────────── */
#rotate-hint {
  display: none;
}
@media (orientation: portrait) and (max-width: 700px) {
  #toolbar,
  #panel,
  #rpanel-wrap,
  #btn-toolbar-toggle,
  #layers-panel,
  #particles-panel,
  #helpers-panel,
  #settings-panel,
  #collision-hud,
  #minimap-wrap {
    display: none !important;
  }
  #rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 28px;
    background: var(--bg);
    color: var(--text);
    text-align: center;
  }
  .rotate-hint-gif {
    width: 132px;
    height: 132px;
    background-color: var(--text);
    -webkit-mask: url('../assets/images/rotate_phone.gif') center / contain no-repeat;
    mask: url('../assets/images/rotate_phone.gif') center / contain no-repeat;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
  }
  .rotate-hint-text {
    font: 500 14px/1.5 var(--font);
    letter-spacing: 0.04em;
    max-width: 280px;
    color: var(--muted);
  }
}

/* Touch devices — bigger slider hit area */
@media (pointer: coarse) {
  .strak {
    width: 18px;
    border-radius: 9px;
  }
  .sthumb {
    left: -12px;
    right: -12px;
  }
  .ctrl-btn,
  .edl {
    min-width: 32px;
    min-height: 32px;
  }
}

/* ─────────────────────────────────────────────────────────
   Mobile dock toggle pill — visible only in landscape
   ───────────────────────────────────────────────────────── */
#btn-toolbar-toggle {
  display: none;
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 46;

  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;

  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-1);

  color: var(--text);
  font: 500 11px var(--font);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background var(--motion-fast),
    bottom var(--motion-base),
    transform var(--motion-base);
}
#btn-toolbar-toggle i {
  font-size: 13px;
  transition: transform var(--motion-base);
}
#btn-toolbar-toggle:hover {
  background: var(--surface-3);
}
#btn-toolbar-toggle.tb-open {
  bottom: 60px;
}
#btn-toolbar-toggle.tb-open i.ti-layout-navbar {
  transform: rotate(180deg);
}

/* Default: hide the in-dock close (only visible in landscape) */
#btn-toolbar-close,
#toolbar-close-sep {
  display: none;
}

@media (orientation: landscape) and (max-height: 520px) {
  #btn-toolbar-toggle {
    display: inline-flex;
  }
}