/*
  spa_mobile.css
  Ładowany TYLKO na ≤768px przez:
  <link rel="stylesheet" href="spa_mobile.css" media="(max-width:768px)">
  Zero wpływu na desktop.
*/

/* ══ LANDING PAGE MOBILE ══ */
.lp-nav{padding:0 16px}
.lp-nav-links{display:none}
.lp-nav-btn{display:none}
.lp-hero{padding:80px 20px 40px}
.lp-hero-stats{flex-wrap:wrap}
.lp-hstat-sep{display:none}
.lp-hstat{flex:1;min-width:80px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.lp-hstat:last-child{border-right:none}
.lp-section{padding:60px 20px}
.lp-cards{grid-template-columns:1fr}
.lp-split{grid-template-columns:1fr;gap:40px}
.lp-team{grid-template-columns:1fr 1fr}
.lp-footer{flex-direction:column;text-align:center;padding:24px 20px}
.lp-contact-info{flex-direction:column;gap:6px}
.lp-contact-info span:nth-child(even){display:none}
.lp-cta-actions{flex-direction:column;align-items:center}
.lp-btn-lg{width:100%;justify-content:center}


.sidebar { display: none !important; }
.mobile-nav { display: flex !important; }

/* ── game-wrap pionowo ── */
.game-wrap { flex-direction: column; height: 100dvh; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── panels-wrap: miejsce na dolną nawę ── */
.panels-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 68px;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════
   TOPBAR — portrait
════════════════════════════ */
.topbar {
  height: auto;
  min-height: 48px;
  padding: 6px 10px;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: visible;
  flex-shrink: 0;
}

/* ukryj niepotrzebne elementy topbara */
.topbar-day,
.topbar-sep,
.topbar-level-wrap { display: none !important; }

/* statsy — scrollowalne poziomo, nie zawijają */
.topbar-stats {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.topbar-stats::-webkit-scrollbar { display: none; }

.tstat {
  padding: 0 10px;
  min-width: 64px;
  flex-shrink: 0;
  height: 48px;
  border-right: 1px solid var(--border);
}
.tstat:last-child { border-right: none; }
.tstat-val { font-size: 13px; }
.tstat-lbl { font-size: 6px; letter-spacing: .08em; }

/* akcje — tylko głośnik, reset i pomoc ukryte */
.topbar-actions { gap: 4px; flex-shrink: 0; }
.topbar-actions .topbar-icon-btn { display: none; }
#sound-toggle-btn { padding: 4px 8px; font-size: 7px; gap: 3px; }
#sound-label { display: none; }

/* ════════════════════════════
   GRIDY
════════════════════════════ */
.grid-3,
.grid-2,
.grid-4 { grid-template-columns: 1fr; }
.col-full { grid-column: 1; }
.ticker-row { grid-template-columns: 1fr 1fr; }
.monitor-grid { grid-template-columns: 1fr 1fr; }
.contracts-grid { grid-template-columns: 1fr; }
.stock-grid { grid-template-columns: 1fr; }
.hm-stat-row { grid-template-columns: 1fr; }

/* ── karty kompakt ── */
.gc { padding: 12px; }
.ccard { padding: 12px; }
.ticker-n { font-size: 20px; }
.ticker-cell { padding: 12px 10px; }
.chart-cell { padding: 10px 12px; }
.chart-val { font-size: 14px; }
canvas.sparkline { height: 28px; }

/* ── ukryj quick actions (jest dolna nawa) ── */
.quick-actions { display: none; }

/* ── magazyn ── */
.mag-topbar { flex-direction: column; gap: 8px; }
.stock-card-foot { flex-wrap: wrap; }
.stock-order-btn { width: 100%; }

/* ════════════════════════════
   DOLNA NAWIGACJA
════════════════════════════ */
.mobile-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  height: 56px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: rgba(10,8,5,.94);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--text-faint);
  font-family: 'Montserrat', sans-serif;
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding: 0;
  transition: color .15s;
}
.mobile-nav-item.active { color: var(--gold); }
.mobile-nav-item svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
}

.mobile-nav-dot {
  position: absolute;
  top: 8px; right: calc(50% - 18px);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid rgba(10,8,5,.9);
  display: none;
}
.mobile-nav-dot.visible { display: block; }

/* ════════════════════════════
   LANDSCAPE
════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {

  /* topbar niższy */
  .topbar { min-height: 40px; padding: 4px 8px; gap: 4px; }
  .tstat { height: 40px; min-width: 56px; padding: 0 8px; }
  .tstat-val { font-size: 12px; }
  .tstat-lbl { font-size: 5px; }

  /* dolna nawa niższa */
  .mobile-nav { height: 48px; }
  .mobile-nav-item { font-size: 6px; gap: 2px; }
  .mobile-nav-item svg { width: 16px; height: 16px; }

  /* panels mniejszy padding */
  .panels-wrap { padding: 8px 8px 56px; }

  /* 2 kolumny tam gdzie się mieści */
  .ticker-row { grid-template-columns: repeat(4, 1fr); }
  .monitor-grid { grid-template-columns: repeat(4, 1fr); }
  .contracts-grid { grid-template-columns: 1fr 1fr; }
  .stock-grid { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════
   BARDZO MAŁE ≤380px
════════════════════════════ */
@media (max-width: 380px) {
  .tstat { min-width: 56px; padding: 0 6px; }
  .tstat-val { font-size: 11px; }
  .monitor-grid { grid-template-columns: 1fr; }
}

/* ── katalog mobile ── */
.katalog-grid{grid-template-columns:1fr}

/* ── rabaty mobile ── */
.rabaty-grid{grid-template-columns:1fr}