/* ============================================================
   THE KING OF KINGS ARMY — Responsive Mobile Styles
   Breakpoints: 768px (tablet), 480px (mobile)
   ============================================================ */

/* ── Navbar ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar { padding: 0 16px; }
  .navbar-links a:not(.active) { display: none; }
  .navbar-links a.active { font-size: 0.8rem; padding: 5px 10px; }
  .navbar-logo { font-size: 0.85rem; }
  .navbar-logo span { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .navbar-links { display: none; }
  .page-main { padding: 20px 0 80px; }
  .container  { padding: 0 14px; }
  .container-sm { padding: 0 14px; }
}

/* ── Toast ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .toast {
    bottom: 80px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

/* ── Cards & Modals ───────────────────────────────────────── */
@media (max-width: 480px) {
  .card  { padding: 18px 14px; }
  .modal { padding: 24px 18px; }
  .modal-bg { padding: 14px; }
}

/* ── Auth page ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-card { padding: 28px 20px; }
  .auth-logo { margin-bottom: 28px; }
  .auth-logo h1 { font-size: 1.1rem; }
}

/* ── Dashboard ────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Stack campaign card + hero vertically */
  div[style*="flex:0 0 160px"],
  #campaign-card {
    flex: unset !important;
    width: 100% !important;
  }
  .profile-hero {
    flex-direction: column !important;
    text-align: center;
  }
  .profile-info { text-align: center; }
  .xp-text { text-align: left; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-box   { padding: 12px 8px; }
  .stat-value { font-size: 1.2rem; }
  .stat-label { font-size: 0.65rem; }
  .two-col    { grid-template-columns: 1fr; }
  .rank-icon  { width: 60px; height: 60px; font-size: 1.5rem; }
  .profile-name { font-size: 1.2rem; }
}

/* ── Leaderboard ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .lb-row { padding: 12px 14px; gap: 10px; }
  .lb-xp  { font-size: 0.78rem; }
}

/* ── Campaign page ────────────────────────────────────────── */
@media (max-width: 740px) {
  .camp-wrap { padding: 14px 12px 80px; }
}

@media (max-width: 480px) {
  /* Tabs */
  .camp-tabs { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .camp-tab  { white-space: nowrap; min-width: 80px; font-size: 0.72rem; padding: 10px 8px; }

  /* Campaign grid: 1 column */
  .campaign-grid { grid-template-columns: 1fr; }

  /* Stats bar */
  .camp-stats-panel { gap: 6px; }
  .cstat-label { display: none; }
  .cstat-val   { font-size: 0.82rem; }

  /* Pomodoro score */
  .pomo-score-num  { font-size: 1.8rem; }
  .pomo-score-bar-wrap { max-width: 100%; }

  /* Pomo box */
  .pomo-box { padding: 16px 12px; }
  .pomo-box-label { font-size: 0.62rem; }

  /* Timer digits */
  .pomo-timer { font-size: 3rem !important; }

  /* Animation row: canvas fills width */
  .pomo-anim-row { flex-direction: row; justify-content: center; }

  /* Battle canvas: max 100% */
  #battle-canvas-container canvas { max-width: 100% !important; }
  #battle-canvas-container { overflow: hidden; }
}

/* Campaign map: scale-to-fit via JS (_scaleMapToFit). Solo ajustamos la barra superior. */
@media (max-width: 768px) {
  .map-fragments-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .map-frags-label   { white-space: nowrap; }
  #section-map       { overflow: hidden; }
}

/* Battle scene buttons */
@media (max-width: 480px) {
  .battle-actions { gap: 6px !important; }
  .battle-btn { font-size: 0.72rem !important; padding: 8px 10px !important; }
  .spirit-pip { width: 9px !important; height: 9px !important; }
}

/* ── Store ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .store-page { padding: 0 12px 80px; }

  /* Filter pills: scroll horizontal */
  .store-filter-row,
  .inv-filter-row { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; padding-bottom: 4px; }
  .filter-pill { white-space: nowrap; flex-shrink: 0; }

  /* Cards: 2 columns */
  .store-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .store-card { padding: 12px 10px !important; }
  .store-card-name { font-size: 0.72rem !important; }
  .store-card-price { font-size: 0.68rem !important; }
}

/* ── Inventory ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .inv-page  { padding: 0 12px 80px; }
  .inv-grid  { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .inv-card  { padding: 12px 10px !important; }
}

/* ── Soldier / RPG ────────────────────────────────────────── */
@media (max-width: 900px) {
  .sol-root { grid-template-columns: 1fr !important; }
  .inv-panel {
    position: static !important;
    max-height: 380px !important;
    top: unset !important;
  }
}

@media (max-width: 640px) {
  .soldier-page { padding: 0 10px 80px; }

  /* Paper-doll clásico: slots izq | personaje | slots der */
  .soldier-layout {
    grid-template-columns: 68px 1fr 68px !important;
    gap: 5px !important;
    align-items: center !important;
  }

  /* Slots: solo ícono centrado, tamaño mínimo cuadrado */
  .equip-slot {
    min-height: 54px !important;
    padding: 4px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 2px !important;
    border-radius: 8px !important;
  }
  .slot-icon         { font-size: 1.4rem !important; line-height: 1; }
  .slot-empty-label  { font-size: 0.48rem !important; color: rgba(201,168,76,0.5); }
  .slot-item-info    { display: none !important; }
  .slot-filled       { flex-direction: column !important; align-items: center !important; gap: 2px !important; width: 100% !important; }
  .slot-item-icon    { font-size: 1.35rem !important; }
  .slot-filled .inv-eq-btn { display: none !important; }

  /* Personaje compacto pero visible */
  #soldier-sprite    { width: 120px !important; height: 120px !important; }
  .soldier-img-wrap  { min-height: 130px !important; padding-bottom: 4px; }
  .soldier-stats-wrap { padding: 10px 10px 12px !important; }
  .s-stat-lbl        { font-size: 0.68rem !important; }

  /* Inventario más compacto */
  .inv-panel         { max-height: 300px !important; }
  .inv-panel-hint    { display: none; }
}

@media (max-width: 480px) {
  /* Clase grid: 3 columnas en modal */
  .char-class-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .char-class-icon { font-size: 1.5rem !important; }
  .char-class-name { font-size: 0.58rem !important; }
}

/* ── Profile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .verse-search-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
  }
  .verse-search-row button { grid-column: span 2; }
  .social-link { font-size: 0.75rem; padding: 5px 10px; }
}

/* ── Admin ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-table { font-size: 0.78rem; }
  .admin-table th, .admin-table td { padding: 8px 10px; }
}

@media (max-width: 480px) {
  /* Tabs scroll on admin */
  .admin-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ── Difficulty grid ──────────────────────────────────────── */
@media (max-width: 480px) {
  .difficulty-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .diff-btn { padding: 10px 6px; }
}

/* ── PvP & Arena ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .pvp-player-card { padding: 10px 12px; gap: 8px; }
  .pvp-player-icon { font-size: 1.4rem; }
  .pvp-player-name { font-size: 0.75rem; }
  .pvp-player-sub  { font-size: 0.58rem; }
  .pvp-challenge-btn { font-size: 0.6rem; padding: 5px 8px; }
}

/* ── Floating HUD (expedition score) ─────────────────────── */
@media (max-width: 480px) {
  .pomo-score.is-fixed {
    width: calc(100vw - 28px) !important;
    left: 14px !important;
    transform: none !important;
  }
}

/* ── Info sub-panel ───────────────────────────────────────── */
@media (max-width: 480px) {
  .pomo-sub-panel {
    width: calc(100vw - 28px) !important;
    left: 14px !important;
    right: 14px !important;
  }
  .map-info-panel {
    width: calc(100vw - 28px) !important;
    left: 14px !important;
    right: 14px !important;
  }
}

/* ── Bottom nav bar (mobile only) ────────────────────────── */
@media (max-width: 480px) {
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(7,7,15,0.97);
    border-top: 1px solid var(--gold-border);
    backdrop-filter: blur(14px);
    z-index: 150;
    align-items: stretch;
  }
  .mobile-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.55rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav a .mn-icon { font-size: 1.25rem; line-height: 1; }
  .mobile-nav a.active   { color: var(--gold); }
  .mobile-nav a:hover    { color: var(--gold-light); }
}

@media (min-width: 481px) {
  .mobile-nav { display: none; }
}

/* ── Touch targets ────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn       { min-height: 42px; }
  .btn-sm    { min-height: 34px; }
  .task-item { padding: 14px 14px; }
  .camp-tab  { min-height: 44px; }
}

/* ── Typography scale ─────────────────────────────────────── */
@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1rem; }
}