@media (max-width: 720px) {
  #panel {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%;
    clip-path: none;
    border: none;
    border-radius: 18px 18px 0 0;
    padding: 0 16px 12px;
    overflow: visible;
    overflow-y: auto !important;
    max-height: min(65vh, 480px); overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(.32,0.72,.37,1.12);
    will-change: transform;
    /* Transparent panel — map shows through */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  /* Give each section its own glass background */
  .panel-status-bar,
  #loc-wrap,
  .gauge-wrap,
  .cond-box,
  .foot {
    background: var(--glass);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
  }
  .panel-status-bar { border-bottom: none; }
  .hr { display: none; } /* replaced by card spacing */
  .grid2 {
    gap: 6px;
    margin-bottom: 8px;
  }
  .metric {
    background: var(--glass);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 10px 8px;
  }
  #no-location-msg {
    background: var(--glass);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
  }
  /* Hide the desktop shimmer bar; drag handle replaces it */
  #panel::before { display: none; }
  #panel-toggle  { display: none; }

  /* Completely off-screen when dismissed */
  #panel.sheet-closed { transform: translateY(100%); }

  /* Backdrop dim behind open sheet */
  #sheet-backdrop {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(0,0,0,0.35);
    opacity: 1; transition: opacity 0.4s cubic-bezier(.32,0.72,.37,1.12);
    pointer-events: none;
  }
  #sheet-backdrop.hidden { opacity: 0; }

  /* Drag handle at top of sheet */
  #sheet-handle {
    display: flex; align-items: center; justify-content: center;
    padding: 16px 0 12px; cursor: grab; touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  #sheet-handle::after {
    content: '';
    display: block; width: 48px; height: 5px;
    background: rgba(57,255,20,0.45); border-radius: 3px;
    transition: background 0.2s;
  }
  #sheet-handle:active::after {
    background: rgba(57,255,20,0.70);
  }

  /* Pull tab -- visible only when sheet is closed */
  #sheet-tab {
    display: flex; align-items: center; gap: 6px;
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
    z-index: 102;
    background: var(--glass); border: 1px solid var(--border); border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 14px 30px 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--teal); cursor: pointer;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(.32,0.72,.37,1.12);
  }
  #sheet-tab.visible { transform: translateX(-50%) translateY(0); pointer-events: all; }
  #sheet-tab::before {
    content: '\25B2'; font-size: 8px; opacity: 0.7;
  }

  #mobile-restore { display: none; }
  #coord-bar { display: none; }
  #panel-mini { width: 80px; height: 80px; left: auto; right: 12px; top: 80px; bottom: auto; transform: none; box-shadow: none; }
  .logo  { position: fixed; top: -8px; left: -8px; bottom: auto; right: auto; z-index: 200; pointer-events: none !important; }
  .logo img { pointer-events: none !important; }
  .logo .logo-desktop { display: none; }
  .logo .logo-mobile { display: block; height: 160px; }
  /* -- Search field -- */
  #search-input { font-size: 11px; }
  #search-wrap { margin-top: 6px; }
  #search-results { max-height: 160px; }

  /* -- Map controls -- */
  #map-controls { top: 12px; right: 12px; }
  .ctrl-btn { padding: 10px 12px; font-size: 10px; }
  .ctrl-btn svg { width: 16px; height: 16px; }
  .ctrl-sep { height: 18px; }

  /* -- Location -- */
  #loc-text { font-size: 17px; }
  #loc-refresh span { display: none; }  /* icon-only on mobile */
  #loc-refresh { padding: 6px 8px; }

  /* -- Gauge -- */
  .gauge-wrap { margin-bottom: 6px; }
  #verdict { font-size: 15px; }

  /* -- Conditions -- */
  .cond-box { padding: 8px; }
  .cond-text { font-size: 12px; overflow-wrap: break-word; word-break: break-word; }
  .cond-text ul { padding-left: 18px; }
  .cond-text li { padding-left: 6px; }

  /* -- Metrics grid -- */
  .grid2 {
    grid-template-columns: repeat(3, 1fr);
    flex: none !important; grid-template-rows: auto auto;
    gap: 5px;
  }
  .metric { padding: 10px 8px; min-width: 0; }
  .m-lbl { font-size: 9px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-val { font-size: 28px; }
  .m-unit { font-size: 12px; }
  .m-bar { margin-top: 6px; }
  /* Metric info icons — top right corner, sized for touch */
  .tip-hint {
    width: 28px !important; height: 28px !important;
    padding: 4px !important;
  }
  .tip-hint svg { width: 13px !important; height: 13px !important; }

  /* -- Footer -- */
  .foot { margin-top: 8px; }
  .foot-updated, .foot-actions {
    background: var(--glass);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  }
  .foot-updated { border-radius: 4px; }

  /* -- Live feed -- */
  #livefeed { left: 8px; right: 8px; bottom: 8px; width: auto; }
  #livefeed-header { padding: 6px 8px 8px 10px; }
  #livefeed-header-meta { margin-bottom: 3px; gap: 6px; }
  #livefeed-location { font-size: 13px; line-height: 1.22; }
  #livefeed-telemetry { padding: 5px 10px; }
  #livefeed-region { font-size: 9px; letter-spacing: 1px; }
  /* LIVE label + TZ readout — match desktop sizes, no mobile shrinkage */
  .livefeed-live-label { font-size: 10px; letter-spacing: 1.8px; }
  .livefeed-clock { padding: 2px 6px 2px 10px; column-gap: 7px; }
  .livefeed-clock-time  { font-size: 19px; }
  .livefeed-clock-label { font-size: 8px;  letter-spacing: 1.8px; }
  .livefeed-clock-tz    { font-size: 9px;  letter-spacing: 1.2px; }

  /* -- No-location message -- */
  #no-location-msg { flex-direction: column; text-align: center; gap: 12px; }

  /* -- Credits -- */
  #credit-desktop { display: none; }
}

/* Landscape mobile — panel becomes scrollable column */
@media (max-width: 720px) and (orientation: landscape) {
  #panel {
    /* In landscape, the panel is a side column — let it use full height and scroll */
    top: 0; bottom: 0; left: 0; right: auto;
    width: 380px;
    max-height: 100vh !important;
    border-radius: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    transform: none !important;
    padding: 12px 20px 16px;
    /* Transparent background — map shows through */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* Give inner sections their own glass background */
  #loc-wrap,
  .gauge-wrap,
  .cond-box,
  .grid2,
  .foot {
    background: var(--glass);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
  }
  /* Conditions already has its own bg — just ensure it matches */
  .cond-box {
    background: rgba(3, 14, 3, 0.93) !important;
  }
  /* Metrics grid: give each cell the glass look, not the grid wrapper */
  .grid2 {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
  }
  .metric {
    background: var(--glass);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 10px 8px;
  }
  #panel.sheet-closed {
    transform: translateX(-100%) !important;
  }
  /* Ensure content doesn't collapse in flex */
  #panel > * { flex-shrink: 0; }
  /* Hide drag handle — not needed for side panel */
  #sheet-handle { padding: 4px 0; }
  /* Compact spacing */
  .gauge-wrap { margin-bottom: 4px; }
  .cond-box { padding: 6px; }
  .hr { margin: 4px 0; }
  .grid2 { gap: 4px; }
  .metric { padding: 8px 6px; }
  .m-val { font-size: 24px; }
  .foot { margin-top: 8px; }
}

/* Extra small screens (< 380px) */
@media (max-width: 380px) {
  #panel { padding: 0 14px 10px; }
  .grid2 { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .m-val { font-size: 24px; }
  .metric { padding: 8px 6px; }
  #loc-text { font-size: 15px; }
  #verdict { font-size: 13px; letter-spacing: 0; }
}