/* ===== Distribución para teléfono (≤600 px) y tableta (≤900 px) =====
   Solo reorganiza y proporciona la interfaz existente: mismas pantallas, mismos botones y mismas acciones.
   Todo va dentro de media queries; el escritorio (más de 900 px) no cambia. Identidad: negro azulado, dorado y naranja. */

/* ---------- TELÉFONO ---------- */
@media(max-width:600px){
  /* Navegación: la barra superior queda para la marca, las monedas y la cuenta; las secciones pasan a una barra
     inferior fija al alcance del pulgar (antes se cortaban en una tira con desplazamiento lateral). */
  .top{height:58px;gap:8px;padding:0 10px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .top .logo{margin-right:auto}
  .top nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;height:auto;overflow:visible;
    padding:0 4px env(safe-area-inset-bottom,0px);background:linear-gradient(180deg,#121a21f5,#090e12fa);border-top:1px solid #84674566;box-shadow:0 -12px 30px #000a;
    -webkit-mask-image:none;mask-image:none}
  .top nav button{position:relative;height:56px;padding:0 2px;border:0;border-top:2px solid transparent;font:700 11px var(--title);letter-spacing:.09em;color:#94a2ac;white-space:nowrap}
  .top nav button.on{color:#ffe3b1;border-top-color:var(--ac);background:linear-gradient(180deg,#f2b5441f,transparent 70%)}
  .top nav button .dotnew{position:absolute;top:13px;right:calc(50% - 38px)}
  .body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  /* la columna lateral de jugador (equipo y social) duplica lo que ya está en Jugar y Social: en el teléfono no se apila al final */
  #lobby{display:none}

  /* Inicio: héroe a la altura útil, JUGAR como acción principal y debajo dos accesos iguales (Social y Progresión) */
  .cinematic-hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;column-gap:10px;row-gap:12px;align-content:stretch;
    min-height:calc(100svh - 58px - 72px - env(safe-area-inset-bottom,0px))}
  .cinematic-hero .in{grid-column:1/-1;grid-row:1;padding:56px 16px 0}
  .cinematic-hero .cinematic-actions{width:100%}
  .cinematic-social,.cinematic-progress{position:relative;left:auto;right:auto;bottom:auto;align-self:start;width:auto;height:112px;margin:0;padding:12px;border-radius:10px}
  .cinematic-social{grid-column:1;grid-row:2;margin-left:16px}
  .cinematic-progress{grid-column:2;grid-row:2;margin-right:16px}
  .cinematic-social .cinematic-progress-overline,.cinematic-progress-overline{top:12px;left:12px;font-size:8px}
  .cs-icon{top:28px;right:10px;width:38px;height:38px}
  .cinematic-progress-ring{top:26px;right:10px;width:46px;height:46px}
  .cinematic-social .cinematic-progress-copy b,.cinematic-progress-copy b{font-size:12px;letter-spacing:.07em}
  .cinematic-social .cinematic-progress-copy small,.cinematic-progress-copy small{font-size:10px}
  .cinematic-bottom{grid-column:1/-1;grid-row:4}
  /* misiones: la pestaña vertical tapaba el logotipo; pasa a una etiqueta horizontal en la esquina */
  .cinematic-missions{top:12px;right:12px;width:auto;height:auto}
  .cinematic-missions-tab{flex-direction:row;width:auto;height:32px;gap:8px;padding:0 12px;border-radius:16px}
  .cinematic-missions-tab span{writing-mode:horizontal-tb;font-size:10px;letter-spacing:.14em}
  .cinematic-missions-panel{top:40px;right:0}

  /* Jugar: los modos en una rejilla de 3 (antes una tira lateral con modos ocultos) */
  .lb-tabs{overflow:visible}
  .lb-tabs-in{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}
  .lb-tab-ind{display:none}
  .lb-tab:nth-last-child(2):nth-child(3n+1){grid-column:1/-1}   /* un modo suelto en la última fila ocupa todo el ancho */
  .lb-tab{min-height:48px;padding:6px 4px;justify-content:center;text-align:center;gap:6px}
  .lb-tab b{font-size:11px;letter-spacing:.04em}.lb-tab small{font-size:9px;letter-spacing:.04em}
  .lb-tab .lb-tab-rk{width:22px;height:22px}
  .lb-tab.on{background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 34%,#18222a),color-mix(in srgb,var(--tint) 14%,#10171d));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 65%,transparent)}
  /* tarjeta de rango: emblema arriba y datos a todo el ancho (antes dos columnas estrechas) */
  .rk-hero{grid-template-columns:1fr;gap:6px;padding:16px}
  .rk-hero-art{width:116px;justify-self:center}
  .rk-hero h2{font-size:32px}

  /* Arsenal: categorías en dos filas visibles y visor 3D proporcionado a la pantalla */
  .ars-tabs{grid-template-columns:repeat(3,1fr)}
  .ars{grid-template-rows:auto clamp(230px,38vh,340px) auto auto}
  .ars-guns{grid-auto-columns:132px}

  /* Perfil: el acceso al camino de experiencia apila su botón para no partir el título en tres líneas */
  .pf-path{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px}
  .pf-path-reward{width:56px;height:56px}
  .pf-path-go{grid-column:1/-1;justify-self:end}

  /* Noticias: lectura alineada a la izquierda (centrada era difícil de leer en columnas estrechas) */
  .news-reader-body{text-align:left}

  /* Compra en partida: una columna de grupos y 4 objetos por fila (los nombres ya no se cortan a dos letras) */
  #buy .buy-groups{grid-template-columns:1fr}
  #buy .buy-group .bgrid{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* Ventanas emergentes: casi a pantalla completa, con margen cómodo */
  .mb{min-width:0;max-width:calc(100vw - 20px);padding:22px 18px}
}

/* ---------- TELÉFONO GRANDE / TABLETA VERTICAL (601–900 px) ---------- */
@media(min-width:601px) and (max-width:900px){
  /* Inicio: los accesos Social y Progresión flotaban en esquinas opuestas con un hueco central; se agrupan a la izquierda bajo JUGAR */
  .cinematic-social{left:24px;bottom:104px}
  .cinematic-progress{right:auto;left:192px;bottom:104px;width:150px;height:150px}
  .cs-icon{top:30px;width:46px;height:46px}
  .cinematic-progress-ring{top:30px;width:60px;height:60px}
  /* Jugar: todos los modos visibles sin desplazamiento ni nombres cortados, en una rejilla de 4 */
  .lb-tabs{overflow:visible}
  .lb-tabs-in{grid-template-columns:repeat(4,minmax(0,1fr));min-width:0}
  .lb-tab-ind{display:none}
  .lb-tab{padding:6px 4px}.lb-tab b{font-size:12px;letter-spacing:.05em}.lb-tab small{font-size:10px}
  .lb-tab.on{background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 34%,#18222a),color-mix(in srgb,var(--tint) 14%,#10171d));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 65%,transparent)}
  /* Arsenal: visor 3D algo menos alto */
  .ars{grid-template-rows:auto clamp(300px,44vh,460px) auto auto}
}