/* ============================================================
   V19 MOBILE SMOOTH - Android / iPhone / Tablet
   Mantiene funciones y seguridad. Optimiza layout y GPU/CPU.
   ============================================================ */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    zoom: 1 !important;
    transform: none !important;
    overflow-x: hidden !important;
    background: #070910 !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  }

  /* El 90% se conserva solo en PC. En móvil provocaba miniaturización y repintado caro. */
  #landing-screen.landing-screen,
  .login-screen,
  .scanlines,
  .bg-ambient,
  .bg-particles,
  .modal-overlay,
  .orders-overlay,
  #landing-screen .bg-slider,
  #landing-screen .bg-overlay,
  .login-bg-slider,
  .login-bg-overlay,
  .ranking-bg-slider,
  .ranking-bg-slide,
  .ranking-bg-overlay,
  .news-bg-slider,
  .news-bg-slide,
  .news-bg-overlay {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  /* Quitar trabajo gráfico innecesario en GPU móvil. */
  .bg-particles,
  .scanlines,
  .bg-ambient,
  #ranking-screen::before,
  #ranking-screen::after,
  #ranking-screen .ranking-podium-card::before,
  #ranking-screen .ranking-podium-aura {
    display: none !important;
  }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .06s !important;
    scroll-behavior: auto !important;
  }

  .navbar,
  .nav-dropdown,
  .coupon-panel,
  .equipment-card,
  .cells-container,
  .inventory-section,
  .modal-card,
  .toast,
  .ranking-status,
  .vault-warning-overlay,
  .trades-shell,
  .clan-web-card,
  .ranking-podium-card,
  .ranking-board,
  .ranking-row {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
  }

  .main-content > .tab-navigation,
  .nav-menu,
  .shop-session-actions {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .main-content > .tab-navigation::-webkit-scrollbar,
  .nav-menu::-webkit-scrollbar,
  .shop-session-actions::-webkit-scrollbar { display: none; }

  .tab-content,
  .ranking-section,
  .ranking-row,
  .trades-market-list,
  .vault-grid,
  .clan-web-card {
    content-visibility: auto;
    contain-intrinsic-size: 420px;
  }

  /* ================= RANKING MÓVIL ================= */
  body.ranking-open #ranking-screen.ranking-screen,
  #ranking-screen {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background: #080a10 !important;
  }

  #ranking-screen .ranking-bg-slider,
  #ranking-screen .ranking-bg-overlay {
    opacity: .18 !important;
    filter: none !important;
  }

  #ranking-screen .ranking-public-nav {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    padding: 8px 10px !important;
    background: rgba(7,9,15,.97) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }

  #ranking-screen .ranking-public-nav .landing-nav-inner {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  #ranking-screen .ranking-public-nav .nav-logo {
    margin: 0 !important;
    min-height: 34px !important;
  }
  #ranking-screen .ranking-public-nav .nav-logo-img {
    width: 30px !important;
    height: 30px !important;
  }
  #ranking-screen .ranking-public-nav .nav-logo-text {
    font-size: .98rem !important;
  }
  #ranking-screen .ranking-nav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    padding-bottom: 2px !important;
  }
  #ranking-screen .ranking-nav-menu .nav-item { flex: 0 0 auto !important; }
  #ranking-screen .ranking-nav-menu .nav-link {
    display: block !important;
    padding: 7px 9px !important;
    font-size: .66rem !important;
    white-space: nowrap !important;
  }

  #ranking-screen .ranking-public-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 8px 28px !important;
    margin: 0 auto !important;
  }
  #ranking-screen .ranking-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #ranking-screen .ranking-hero {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  #ranking-screen .ranking-kicker { font-size: .58rem !important; }
  #ranking-screen .ranking-title {
    font-size: 1.18rem !important;
    line-height: 1.05 !important;
    margin: 2px 0 !important;
  }
  #ranking-screen .ranking-subtitle {
    font-size: .68rem !important;
    margin: 0 !important;
  }
  #ranking-screen .ranking-hero-badges {
    width: auto !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
  }
  #ranking-screen .ranking-badge-card {
    min-width: 58px !important;
    padding: 7px 8px !important;
    border-radius: 9px !important;
  }
  #ranking-screen .ranking-badge-value { font-size: .72rem !important; }
  #ranking-screen .ranking-badge-label { display: none !important; }

  /* Podio compacto: 3 filas, no tres tarjetas gigantes. */
  #ranking-screen .ranking-podium {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
  }
  #ranking-screen .ranking-podium-card,
  #ranking-screen .ranking-podium-card.rank-1,
  #ranking-screen .ranking-podium-card.rank-2,
  #ranking-screen .ranking-podium-card.rank-3 {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    border-radius: 12px !important;
    transform: none !important;
  }
  #ranking-screen .ranking-podium-top {
    width: 54px !important;
    min-width: 54px !important;
    margin: 0 !important;
    display: block !important;
  }
  #ranking-screen .ranking-laurel.has-trophy {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }
  #ranking-screen .ranking-trophy-img {
    width: 48px !important;
    height: 48px !important;
    filter: none !important;
    transform: none !important;
  }
  #ranking-screen .ranking-podium-figure-wrap { display: none !important; }
  #ranking-screen .ranking-podium-player {
    min-width: 0 !important;
    text-align: left !important;
  }
  #ranking-screen .ranking-podium-place {
    margin: 0 0 1px !important;
    font-size: .50rem !important;
    letter-spacing: 1px !important;
  }
  #ranking-screen .ranking-podium-name {
    margin: 0 0 2px !important;
    font-size: .88rem !important;
    line-height: 1.1 !important;
  }
  #ranking-screen .ranking-podium-class-chip {
    margin: 0 0 5px !important;
    padding: 2px 6px !important;
    font-size: .50rem !important;
  }
  #ranking-screen .ranking-podium-stats {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 4px !important;
  }
  #ranking-screen .ranking-stat-line {
    min-width: 0 !important;
    padding: 4px 5px !important;
    border-radius: 7px !important;
    display: block !important;
    text-align: center !important;
  }
  #ranking-screen .ranking-stat-line:nth-child(1),
  #ranking-screen .ranking-stat-line:nth-child(3) { display: none !important; }
  #ranking-screen .ranking-stat-label {
    display: block !important;
    font-size: .43rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #ranking-screen .ranking-stat-value {
    display: block !important;
    font-size: .62rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Ranking TOP 20 como tarjetas fluidas, sin tabla de 696px. */
  #ranking-screen .ranking-board {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border-radius: 12px !important;
    contain: layout paint style;
  }
  #ranking-screen .ranking-board-header { display: none !important; }
  #ranking-screen .ranking-board-body {
    width: 100% !important;
    display: grid !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  #ranking-screen .ranking-row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) minmax(58px,.52fr) !important;
    grid-template-areas:
      "rank player player"
      "level exp exp"
      "record kills winrate" !important;
    gap: 5px 7px !important;
    align-items: center !important;
    padding: 8px !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
    transform: none !important;
    contain: layout paint style;
  }
  #ranking-screen .ranking-cell-rank {
    grid-area: rank !important;
    font-size: .82rem !important;
    text-align: center !important;
  }
  #ranking-screen .ranking-player { grid-area: player !important; min-width: 0 !important; }
  #ranking-screen .ranking-player-avatar {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
  }
  #ranking-screen .ranking-player-name {
    max-width: 100% !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #ranking-screen .ranking-player-class { font-size: .48rem !important; }
  #ranking-screen .ranking-cell-level {
    grid-area: level !important;
    text-align: left !important;
    font-size: .66rem !important;
  }
  #ranking-screen .ranking-cell-exp {
    grid-area: exp !important;
    text-align: right !important;
    font-size: .66rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #ranking-screen .ranking-cell-record {
    grid-area: record !important;
    text-align: left !important;
    font-size: .68rem !important;
  }
  #ranking-screen .ranking-cell-kills {
    grid-area: kills !important;
    text-align: center !important;
    font-size: .68rem !important;
  }
  #ranking-screen .ranking-cell-winrate {
    grid-area: winrate !important;
    text-align: right !important;
    font-size: .68rem !important;
  }
  #ranking-screen .ranking-cell-level::before { content: 'LV ' !important; color:#7f8897 !important; }
  #ranking-screen .ranking-cell-exp::before { content: 'EXP ' !important; color:#7f8897 !important; text-shadow:none !important; }
  #ranking-screen .ranking-cell-record::before { content: 'V/D ' !important; color:#7f8897 !important; }
  #ranking-screen .ranking-cell-kills::before { content: 'KILLS ' !important; color:#7f8897 !important; font-weight:700 !important; }
  #ranking-screen .ranking-cell-winrate::before { content: 'WR ' !important; color:#7f8897 !important; }

  /* Mercado y Baúl: evitar lienzos de escritorio enormes. */
  .trades-table { min-width: 820px !important; }
  .trades-table-wrap { -webkit-overflow-scrolling: touch; }
  .vault-workspace { grid-template-columns: 1fr !important; }
  .vault-grid { max-height: none !important; }

  img { content-visibility: auto; }
}

@media (max-width: 560px), (hover: none) and (pointer: coarse) and (max-device-width: 760px) {
  #ranking-screen .ranking-public-content { padding: 7px 6px 24px !important; }
  #ranking-screen .ranking-hero { padding: 8px 9px !important; }
  #ranking-screen .ranking-title { font-size: 1.02rem !important; }
  #ranking-screen .ranking-subtitle { font-size: .60rem !important; }
  #ranking-screen .ranking-badge-card { min-width: 50px !important; padding: 6px !important; }
  #ranking-screen .ranking-podium-card,
  #ranking-screen .ranking-podium-card.rank-1,
  #ranking-screen .ranking-podium-card.rank-2,
  #ranking-screen .ranking-podium-card.rank-3 {
    grid-template-columns: 46px minmax(0,1fr) !important;
    padding: 7px 8px !important;
    gap: 7px !important;
  }
  #ranking-screen .ranking-podium-top { width:46px !important; min-width:46px !important; }
  #ranking-screen .ranking-laurel.has-trophy,
  #ranking-screen .ranking-trophy-img { width:42px !important; height:42px !important; }
  #ranking-screen .ranking-podium-stats { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
  #ranking-screen .ranking-stat-label { font-size:.40rem !important; }
  #ranking-screen .ranking-stat-value { font-size:.56rem !important; }
  #ranking-screen .ranking-board-body { padding: 4px !important; gap: 5px !important; }
  #ranking-screen .ranking-row { padding: 7px !important; }
}