/* ==========================================================================
   LAYOUT: header and the cockpit grid.

   Desktop is a wide three-zone cockpit:
     ┌──────────────────────────────────────────────┐
     │ progression │   HUD + reactor   │ upgrade    │
     │   rail      │     (center)      │  shop      │
     ├──────────────────────────────────────────────┤
     │ activity · achievements · stats (bottom)     │
     └──────────────────────────────────────────────┘
   Mobile switches to tabbed sections (responsive.css).
   ========================================================================== */

.top-bar,
.cockpit,
.hint {
  width: min(1680px, 100%);
  margin: 0 auto;
}

/* Header ------------------------------------------------------------------ */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.logo {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.1;
}

.logo span {
  color: var(--accent);
  text-shadow: var(--glow);
}

.version-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-faded);
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Cockpit grid -------------------------------------------------------------- */
.cockpit {
  display: grid;
  grid-template-columns: clamp(250px, 21vw, 320px) minmax(0, 1fr) clamp(310px, 25vw, 400px);
  grid-template-areas:
    "prog center shop"
    "bottom bottom bottom";
  gap: 1rem;
  align-items: start;
}

.zone-progression {
  grid-area: prog;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.zone-center {
  grid-area: center;
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.zone-shop {
  grid-area: shop;
}

.zone-bottom {
  grid-area: bottom;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(0, 1.35fr) minmax(0, 1.35fr);
  gap: 1rem;
  align-items: start;
  margin-top: 0.2rem;
}

/* Expanding achievements or stats lets the block take the full row. */
.bottom-block:has(.collapse-toggle.is-open) {
  grid-column: 1 / -1;
}

/* Section headers ----------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.28em;
}

.section-title::after {
  content: '';
  width: clamp(20px, 5vw, 70px);
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}

.section-subtitle {
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 1.1rem 0 0.55rem;
}

.section-meta {
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.section-note {
  color: var(--text-faded);
  font-size: 0.92rem;
  margin: 0 0 0.9rem;
}

/* Footer hint ---------------------------------------------------------------- */
.hint {
  color: var(--text-faded);
  font-size: 0.95rem;
  line-height: 1.7;
  padding: 1.1rem 0 0.6rem;
  text-align: center;
}

/* Mobile navigation (enabled in responsive.css) ------------------------------ */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-hi) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
}

.nav-btn {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-height: 52px;
  flex: 1;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0.3rem 0.2rem;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.nav-icon {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.18s ease;
}

.nav-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-btn.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.nav-btn.is-active .nav-icon {
  transform: translateY(-1px) scale(1.08);
}