/* Mobile overrides */
@media (max-width: 900px) {
  /* Full-screen map mode */
  .topbar {
    display: none;
  }

  .layout {
    display: block;
    height: 100vh;
    height: 100dvh;
  }

  .board {
    height: 100vh;
    height: 100dvh;
  }

  .hud {
    top: calc(12px + env(safe-area-inset-top));
  }

  /* Make HUD compact */
  .resources--hud .resources__vals {
    gap: 10px;
    font-size: 13px;
  }

  /* Panel becomes a bottom sheet (hidden unless user opens Details) */
  .panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 44vh;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px 18px 0 0;
    transform: translateY(110%);
    transition: transform 220ms ease;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }

  .panel.open {
    transform: translateY(0);
  }

  .backdrop[hidden] {
    display: none;
  }

  .fleets {
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(320px, calc(100vw - 24px));
  }
}