/* =============================================================
   mobile.css — VTS Hero Combo Tool (Enhanced)
   Applied on screens ≤768px
   ============================================================= */

:root {
  --mobile-gap: 8px;
  --mobile-radius: 12px;
}

/* ── Base ────────────────────────────────────────────────── */
html, body {
  -webkit-text-size-adjust: 100%;
  padding-bottom: 190px !important;
  overscroll-behavior-y: none;
}
* { -webkit-tap-highlight-color: transparent; }

#app {
  padding: 10px !important;
  border-radius: var(--mobile-radius) !important;
}

/* ── Branding ────────────────────────────────────────────── */
.team-badge, #createComboTitle { display: none !important; }
#appTitle { font-size: 1.65rem !important; }
.main-logo { width: 110px !important; height: 110px !important; }

/* ── Tab Navigation (horizontal scroll on mobile) ────────── */
/* Tab container: horizontal scroll instead of wrapping */
.grid.grid-cols-2.sm\\:flex {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  padding: 3px 2px !important;
  gap: 3px !important;
}
.grid.grid-cols-2.sm\\:flex::-webkit-scrollbar { display: none !important; }

/* Each tab wrapper keeps its natural size */
.grid.grid-cols-2.sm\\:flex > div {
  flex: 0 0 auto !important;
  width: auto !important;
}

.tab-pill {
  font-size: 0.68rem !important;
  padding: 0.45rem 0.65rem !important;
  white-space: nowrap !important;
}

/* ── Hero Grid ───────────────────────────────────────────── */
#generatorHeroes, #availableHeroes {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}

.hero-card, .generator-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1.3;
  padding: 5px !important;
  margin: 0 !important;
}
.hero-card img, .generator-card img {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 3px !important;
  border-width: 1.5px !important;
}
.hero-card span.text-xs, .generator-card span.text-xs {
  font-size: 0.58rem !important;
  line-height: 1.1 !important;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-tag {
  font-size: 0.46rem !important;
  padding: 1px 3px !important;
  top: 2px !important; left: 2px !important;
}
.generator-card-selected {
  border: 2px solid #38bdf8 !important;
  transform: scale(0.93) !important;
}

/* ── Sticky Footer ───────────────────────────────────────── */
#comboFooterBar {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  border-radius: 18px 18px 0 0 !important;
  padding: 10px 12px env(safe-area-inset-bottom, 14px) !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.65) !important;
}

/* ── Combo Slots ─────────────────────────────────────────── */
.combo-slot {
  width: 68px !important;
  height: 68px !important;
  margin: 0 !important;
  border-width: 2px !important;
}
#comboButtonsRow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
#comboButtonsRow button {
  font-size: 0.7rem !important;
  padding: 8px 4px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
}

/* ── Generator Buttons ───────────────────────────────────── */
#generateCombosBtn, #generateRandomBtn, #downloadGeneratorBtn {
  display: block; width: 100%; max-width: 100%;
  margin: 4px auto; border-radius: 9999px;
  font-size: 0.83rem; padding: 11px 12px;
  letter-spacing: 0.04em; font-weight: 800;
}
#generateCombosBtn  { background: linear-gradient(135deg, #15803d, #22c55e); box-shadow: 0 4px 16px rgba(34,197,94,0.3); }
#generateRandomBtn  { background: linear-gradient(135deg, #b45309, #f59e0b); box-shadow: 0 4px 16px rgba(245,158,11,0.3); }
#downloadGeneratorBtn { background: linear-gradient(135deg, #6d28d9, #8b5cf6); box-shadow: 0 4px 16px rgba(139,92,246,0.3); }

/* ── Saved / Generated combos ────────────────────────────── */
.saved-combo-display, .generated-combo-card {
  padding: 10px 10px 10px 52px !important;
  margin: 6px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 110px !important;
}
.saved-combo-number {
  left: 10px !important;
  width: 28px !important; height: 28px !important;
  font-size: 0.76rem !important;
}
.generated-combo-card {
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 10px 10px 10px !important;
  gap: 6px !important;
}
.generated-combo-card .saved-combo-slots {
  display: flex !important; flex-direction: row !important;
  justify-content: center !important; gap: 5px !important; width: 100% !important;
}
.generated-combo-card > div:last-child {
  margin-left: 0 !important; padding-right: 0 !important; text-align: center !important;
}
.saved-combo-slot-item { width: 80px !important; height: 80px !important; }
.saved-combo-slot-item img { width: 72px !important; height: 72px !important; }

/* ── Scroll-to-top lower on mobile (above footer) ────────── */
#scrollTopBtn { bottom: 5.5rem !important; right: 0.75rem !important; }

/* ── Research ────────────────────────────────────────────── */
#researchSection .tech-season-btn { padding: 6px 12px !important; font-size: 0.75rem !important; }
#techGridWrapper { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
#techListContainer .tech-card-pos { padding: 12px !important; border-radius: 10px !important; border-top-width: 3px !important; }
#techListContainer .tech-card-pos h3 { font-size: 0.875rem !important; }
#techListContainer .tech-card-pos p { font-size: 0.65rem !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
#techCalculatorContainer { padding: 12px !important; border-radius: 14px !important; }
#techCalculatorContainer h3 { font-size: 1rem !important; }
#techCalculatorContainer .grid.grid-cols-1.sm\\:grid-cols-3 { grid-template-columns: 1fr !important; gap: 8px !important; }
.tech-node-container { width: 100% !important; max-width: 100% !important; padding: 10px 12px !important; }
.tech-node-slider { height: 5px !important; }
.tech-node-input { width: 36px !important; font-size: 0.75rem !important; }
.quick-set-btn { padding: 4px 6px !important; font-size: 0.6rem !important; flex: 1 !important; min-width: 28px !important; }
.branch-tab-btn { font-size: 0.6rem !important; padding: 8px 4px !important; }
#globalTechSummary > div { padding: 12px !important; border-radius: 12px !important; }
#globalTechSummary .text-3xl { font-size: 1.1rem !important; }
#globalTechSummary > div > div.grid { grid-template-columns: 1fr 1fr; gap: 8px; }

/* ── Loyalty ─────────────────────────────────────────────── */
#loyaltyCalcSection table { font-size: 0.72rem !important; }
#loyaltyCalcSection th, #loyaltyCalcSection td { padding: 6px 8px !important; }
@media (max-width: 480px) {
  #loyaltyCalcSection th:nth-child(5), #loyaltyCalcSection td:nth-child(5) { display: none; }
}

/* ── Comments ────────────────────────────────────────────── */
.comment-avatar { width: 30px !important; height: 30px !important; min-width: 30px !important; font-size: 0.85rem !important; }
.replies-container { margin-left: 1rem !important; padding-left: 0.75rem !important; }

/* ── Language selector ───────────────────────────────────── */
#languageSelect { font-size: 0.78rem !important; }

/* ── Hero search on mobile ───────────────────────────────── */
.hero-search-input { font-size: 0.8rem !important; }