/* =================================================================
   mobile.css — Smartphone-Layer (≤640px), lädt als LETZTES.
   Behebt die Kernprobleme der Mobil-Ansicht:
   1) Topbar wrappte auf 4 Zeilen (~40% des Screens) → eine wischbare
      Chip-Zeile.
   2) Beide Bottom-Sheets lagen deckungsgleich übereinander → das linke
      Handle war nicht antippbar. Geschlossen jetzt nebeneinander
      (halbe Breite), geöffnet volle Breite.
   3) Forschung/Aufgaben/Auto-Sammler waren mobil per display:none
      KOMPLETT unerreichbar → wieder verfügbar (Topbar scrollt ja).
   ================================================================= */

@media (max-width: 640px) {
  /* ---------- 1) Topbar: 2 kompakte Zeilen ----------
     Zeile 1: Ansicht-Tabs + HUD (Punkte zuerst, wischbar)
     Zeile 2: alle Aktions-Buttons (wischbar)                    */
  .topbar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: 6px;
    column-gap: 8px;
    padding: 6px 8px;
  }
  .topbar-group { flex-wrap: nowrap; gap: 6px; }
  .topbar-group:nth-of-type(2),
  .topbar-group:nth-of-type(3) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar-group:nth-of-type(2)::-webkit-scrollbar,
  .topbar-group:nth-of-type(3)::-webkit-scrollbar { display: none; }
  .topbar-group:nth-of-type(3) { grid-column: 1 / -1; }
  /* Punkte-Pille zuerst — die wichtigste Zahl bleibt immer sichtbar */
  .topbar .hud #hud-score { order: -1; }
  .topbar .hud { background: transparent; border: none; padding: 0; }
  .hud-pill, .topbar .btn.small, .topbar .tab { white-space: nowrap; }
  .topbar .tab { padding: 7px 12px; font-size: 13px; }
  .topbar .btn.small { min-height: 34px; }
  /* Altbestand blendete diese Buttons mobil aus → Features unerreichbar */
  #btn-tasks, #btn-research, #btn-auto-forager { display: inline-block !important; }

  /* ---------- 2) Hive-Tabs kompakt ---------- */
  .hive-tabs { padding: 4px 8px; gap: 4px; }
  .hive-tab { min-width: 104px; padding: 4px 10px; }
  .hive-tab-name { font-size: 12px; }

  /* ---------- 3) Bottom-Sheets: geschlossen nebeneinander ---------- */
  .sidebar-left:not(.is-mobile-open)  { left: 0; right: 50vw; }
  .sidebar-right:not(.is-mobile-open) { left: 50vw; right: 0; }
  .sidebar-left.is-mobile-open,
  .sidebar-right.is-mobile-open { left: 0; right: 0; z-index: 30; }
  .sidebar { max-height: 74dvh; }
  .mobile-sheet-handle {
    font-size: 12px;
    padding: 8px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Sheets: Inhalte mit Safe-Area-Puffer unten */
  .sidebar-left, .sidebar-right {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- Berater: mobil kompakt, nicht über dem Brett ---------- */
  .advisor-card { max-height: 34dvh; }
  .advisor-list { max-height: 20dvh; }

  /* ---------- Tageslicht: wischbare Topbar bleibt lesbar ---------- */
  body.hm-daylight .topbar .hud { background: transparent; border: none; }
}

/* ---------- Niedrige Viewports (Landscape-Phone): Pause-Karte kompakt ----
   Bei ~390px Höhe war die "Bereit?"-Karte höher als der Schirm und der
   Start-Button nicht erreichbar. ---------------------------------------- */
@media (max-height: 520px) {
  .pause-inner { padding: 12px 18px; max-height: 96dvh; overflow-y: auto; }
  .pause-inner h2 { font-size: 20px; margin: 0 0 4px; }
  .pause-inner p { margin: 0 0 8px; font-size: 12px; }
  .pause-checklist { max-height: 84px; margin-bottom: 10px; padding: 8px 10px; }
  .sp-spot-card { padding: 10px 12px; }
  .sp-spot-title { font-size: 18px; margin-bottom: 2px; }
  .sp-spot-hint { font-size: 12px; margin-bottom: 6px; }
  .sp-spot-canvas { max-height: 52dvh; width: auto; }
}

/* Landscape-Phone (breit + niedrig): das Tablet-Stacking (Sidebars über dem
   Canvas) quetschte den Canvas auf ~0px Höhe — Pause-Overlay unerreichbar.
   Stattdessen 3 schlanke Spalten wie am Desktop. */
@media (max-height: 520px) and (min-width: 641px) {
  .game-main {
    grid-template-columns: 176px 1fr 208px;
    grid-template-rows: 1fr;
    grid-template-areas: none;
  }
  .sidebar { max-height: none; border-bottom: none; }
  .sidebar-left  { border-right: 1px solid var(--border); }
  .sidebar-right { border-left: 1px solid var(--border); }
  .sidebar h3 { font-size: 10px; }
  .topbar { padding: 4px 8px; }
  .topbar .tab { padding: 5px 10px; font-size: 12px; }
  .topbar .btn.small { padding: 4px 9px; font-size: 11px; min-height: 28px; }
  .hud-pill { padding: 3px 9px; font-size: 11px; }
  .hive-tabs { padding: 3px 8px; }
  .hive-tab { min-width: 96px; padding: 3px 8px; }
}

/* Pinch-Zoom ist erlaubt (user-scalable entfernt). touch-action:manipulation
   erlaubt Wischen + Pinch, verhindert aber Doppeltipp-Zoom — sonst würde
   schnelles Tippen im Spiel (Bauen, +/-, Kacheln) versehentlich zoomen. */
html, body { touch-action: manipulation; }
button, canvas, input[type=range] { touch-action: manipulation; }