/* ============================================================
   WordGalaxy — Responsive global (auto-ajuste a la pantalla)
   Solo AÑADE overrides para pantallas chicas; el desktop no cambia.
   Se carga DESPUÉS del rediseño, así que gana en móvil.
   ============================================================ */

/* --- Sin scroll horizontal (si el contenido es más ancho que la pantalla, la barra de
       arriba quedaba tapada por la página a la derecha). overflow-x:clip NO rompe el
       position:sticky del navbar (a diferencia de overflow-x:hidden). --- */
html, body { overflow-x: clip; max-width: 100%; }
.bodyContainer, .wg-navbar, .backgroundImageContainer { max-width: 100%; }

/* --- Medios fluidos en TODA la web (evita desbordes). NO se tocan embed/object/iframe
       para no encoger ningún reproductor Flash. --- */
img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }

/* --- Iconos de rango consistentes en rankings / hall of fame / top users (16px, alineados) --- */
td img[src*="/ranks/rank_"], .rank_name img[src*="/ranks/rank_"],
td img[src*="ranks/rank_"] { height: 16px !important; width: auto !important; vertical-align: middle; image-rendering: auto; }

/* --- Contenedores anchos: fluidos en tablet --- */
@media (max-width: 1024px) {
  .container, .backgroundImageContainer, .wg-nav-inner { max-width: 100% !important; }
}

/* ================= TABLET / MÓVIL GRANDE (<=768px) ================= */
@media (max-width: 768px) {
  /* Tablas de datos (rankings, hall of fame, admin) -> scroll horizontal propio */
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Grids del rediseño (hangar, shop, etc.) -> una sola columna */
  .eqp-grid, .wg-grid, .wg-cols, [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Shop en columna */
  .shop-container { flex-direction: column !important; }
  .shop-container .nav-left, .shop-container .items { width: 100% !important; }

  /* Padding lateral cómodo */
  .bodyContainer, .container, .wg-nav-inner { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ================= MÓVIL (<=640px) ================= */
@media (max-width: 640px) {
  /* Cualquier fila flex (incl. estilos inline en las páginas) se envuelve */
  [style*="display:flex"], [style*="display: flex"],
  .wg-nav-user, .wg-nav-resources, .wg-buy-row, .eqp-grid, .wg-row, .row { flex-wrap: wrap !important; }

  /* Paneles/tarjetas del rediseño a ancho completo */
  .eqp-col, .wg-panel, .wg-card, .wg-box, .wg-shell, .wg-wrap,
  .bodyContainer > .page, .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9 {
    width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important;
  }

  /* Forms/inputs/botones a ancho completo y cómodos al tacto */
  input[type="text"], input[type="password"], input[type="email"], input[type="number"],
  select, textarea, .wg-input, .form-control { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

  /* Tipografías más contenidas */
  .wg-title, h1 { font-size: 20px !important; line-height: 1.2 !important; }
  .wg-subtitle, h2 { font-size: 16px !important; }

  /* Navbar compacta */
  .wg-nav-brand { font-size: 14px; }
  .wg-nav-resources { gap: 10px; font-size: 11px; }
  .wg-nav-pilot-name { font-size: 11px; }
  .wg-nav-pilot-lvl { font-size: 9px; }
}

/* ================= MÓVIL CHICO (<=420px) ================= */
@media (max-width: 420px) {
  .wg-nav-link { font-size: 9px; padding: 5px 6px; letter-spacing: 1px; }
  .wg-nav-start { padding: 6px 10px; font-size: 10px; }
  .wg-nav-user { gap: 10px; }
  .bodyContainer, .container { padding-left: 8px !important; padding-right: 8px !important; }
}