/* ==========================================================================
   RESPONSIVE: cockpit scaling for laptops/tablets, the app-like tabbed
   phone layout, and narrow-landscape handling.
   Breakpoints: 1280px, 1100px (stacked), 860px (mobile tabs), 640/480px.
   ========================================================================== */

/* Laptop: tighten the rails so the center keeps room. */
@media (max-width: 1280px) {
  .cockpit {
    grid-template-columns: clamp(230px, 23vw, 280px) minmax(0, 1fr) clamp(290px, 27vw, 340px);
    gap: 0.8rem;
  }

  .reactor-stage {
    min-height: clamp(300px, 40vh, 420px);
  }

  .zone-bottom {
    grid-template-columns: minmax(240px, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
  }
}

/* Small desktop / tablet: center on top, rails side by side beneath. */
@media (max-width: 1100px) {
  .cockpit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "center center"
      "prog   shop"
      "bottom bottom";
  }

  .zone-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .zone-bottom #activityBlock {
    grid-column: 1 / -1;
  }
}

/* Mobile: tabbed sections + bottom navigation. */
@media (max-width: 860px) {
  body {
    padding: 0.8rem 0.8rem calc(86px + env(safe-area-inset-bottom, 0px));
  }

  .top-bar {
    margin-bottom: 0.8rem;
  }

  .ghost-btn-label {
    display: none;
  }

  #settingsBtn {
    display: none;
  }

  /* Reactor first: the progression rail sits in the DOM before the center
     zone (for the desktop grid), but on mobile the core must lead. */
  .cockpit {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .zone-progression {
    order: 2;
  }

  /* The bottom strip dissolves; its blocks become normal tab panels. */
  .zone-bottom {
    display: contents;
  }

  .tab-panel {
    display: none;
  }

  .tab-panel.is-active {
    display: block;
    animation: tabIn 0.22s ease-out;
  }

  .zone-progression.is-active {
    display: grid;
  }

  .zone-center.is-active {
    display: grid;
  }

  .bottom-block.is-active {
    display: block;
  }

  .mobile-nav {
    display: flex;
  }

  .hint {
    display: none;
  }

  /* Touch-first sizing. */
  .reactor-stage {
    min-height: 300px;
  }

  .core-btn {
    width: min(62vw, 260px);
  }

  .energy-value {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }

  .hud-tile {
    min-width: 0;
    flex: 1 1 28%;
  }

  /* Notifications sit below the header, full width, above the nav. */
  .notification-stack {
    top: 0.6rem;
    right: 0.6rem;
    left: 0.6rem;
    width: auto;
  }

  /* Settings becomes a full-screen sheet. */
  .sheet {
    width: 100vw;
    border-left: 0;
  }

  .buy-btn,
  .surge-btn,
  .prestige-btn,
  .horizon-btn,
  .action-btn,
  .danger-btn,
  .primary-btn {
    min-height: 3rem;
  }

  .seg-btn {
    min-height: 2.5rem;
  }

  .shop-tab {
    min-height: 2.6rem;
    padding: 0 0.95rem;
    font-size: 0.66rem;
  }

  .volume-row input[type="range"] {
    width: 8rem;
  }
}

@keyframes tabIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Small phones. */
@media (max-width: 640px) {
  .achievement-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .prestige-info {
    grid-template-columns: 1fr;
  }

  .section-head {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .hud-tile strong {
    font-size: 0.9rem;
  }
}

/* Narrow landscape phones: keep the reactor reachable without scrolling. */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 1024px) {
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .reactor-stage {
    min-height: 210px;
  }

  .core-btn {
    width: min(34vh, 180px);
  }

  .nav-btn {
    min-height: 44px;
  }

  .energy-value {
    font-size: 2rem;
    margin-bottom: 0.4rem;
  }

  .hud-tiles {
    gap: 0.4rem;
  }
}