/* ============================================================================
   LAVA ESCAPE · hoja de estilos COMUN  ·  /app_LavaEscape/_lava.css
   ---------------------------------------------------------------------------
   Antes de esto cada pagina llevaba su <style> inline y habian salido DOS
   sistemas de diseño distintos: index/buy/customize con fondo en degradado y
   --line al .28/.18, y mural/ranks con fondo plano #160a06 y las tarjetas
   translucidas. El mismo boton se veia diferente segun donde estuvieras.

   Este fichero se enlaza DESPUES del <style> de cada pagina, a proposito: asi
   lo que se redefine aqui MANDA (tokens, anchos y layout de escritorio) y todo
   lo demas de cada pagina se queda como estaba. Se centraliza solo lo que hay
   que centralizar, sin vaciar el CSS de seis ficheros.

   REGLA DE ORO — EL MOVIL NO SE TOCA
   Los anchos base de la seccion 2 son EXACTAMENTE los que cada pagina tenia
   clavados en su <style>. Todo lo que cambia la colocacion vive dentro de un
   @media (min-width:720px) o mayor. Por debajo de 720 px la pagina se dibuja
   igual que antes.

   NO hay reset global de box-sizing (opcion (a) acordada). index, buy y
   customize se escribieron SIN el, y meterlo cambiaria el ancho de todo lo que
   lleva padding y ancho fijo — tambien en movil. Las piezas nuevas de aqui
   (.lv-*) lo declaran una a una.

   Los anchos se escriben explicitos por pagina en vez de con una variable
   heredada: una var puesta en :root la hereda el <body>, y entonces la regla
   de la pagina ganaria siempre a la del @media. Explicito y aburrido, pero
   predecible.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
/* Paleta unica. Se elige la de index.php, que es la pagina principal y la que
   mas gente ve, para que el cambio se note lo menos posible donde mas mira. */
:root{
  --ink:#f3ede6;          /* texto principal         */
  --muted:#b79a86;        /* texto secundario        */
  --bg:#160a06;           /* fondo plano de respaldo */
  --card:#241511;         /* fondo de tarjeta        */
  --line:rgba(255,180,90,.24);
  --lava:#ff6a00;
  --lava2:#ffb038;
  --gold:#ffcf48;
  --red:#ff5a4a;
  --green:#4fe0a0;
  --gap:16px;
}

/* --------------------------------------------------- 2. ANCHOS (base movil) */
/* Identicos a los de antes: esto NO cambia nada en un telefono. */
.wrap{width:100%;margin-left:auto;margin-right:auto}
.p-index .wrap,
.p-customize .wrap{max-width:560px}
.p-buy .wrap     {max-width:480px}
.p-ranks .wrap   {max-width:760px}
.p-mural .wrap,
.p-admin .wrap   {max-width:1040px}

/* FONDO UNICO. Era la ultima diferencia entre los dos sistemas: index, buy y
   customize llevaban el degradado de marca y mural, ranks y admin un plano
   #160a06, asi que al navegar de una a otra el fondo daba un salto. Como este
   fichero va despues del <style> de cada pagina, esta regla gana en todas.
   El background-color queda debajo por si el degradado no llega a pintar. */
body{
  background:radial-gradient(900px 500px at 50% -8%,#5a1e0a 0%,#2a0f08 45%,#140806 100%) fixed;
  background-color:var(--bg);
  color:var(--ink);
}

/* Nada de scroll horizontal por una tabla o un bloque ancho. */
img,canvas,svg{max-width:100%}
.lv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Contenedores de layout. En movil son bloques normales: no hacen nada. */
.lv-grid,.lv-cols,.lv-mural{display:block}
.lv-grid > *,.lv-cols > *,.lv-mural > *{box-sizing:border-box;min-width:0}

/* Los parrafos no se estiran aunque la tarjeta sea ancha: un texto de 1400 px
   de ancho no hay quien lo lea. */
.lv-read{max-width:68ch}

/* ------------------------------------------------------- 3. TABLET (>=720px) */
@media (min-width:720px){
  :root{--gap:18px}

  .p-index .wrap,
  .p-customize .wrap{max-width:700px}
  .p-buy .wrap      {max-width:640px}
  .p-ranks .wrap    {max-width:800px}

  /* Tarjetas en dos columnas donde se pida. Es grid, no columnas de texto, asi
     que ninguna tarjeta se parte por la mitad. */
  .lv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
           gap:var(--gap);align-items:start}
  .lv-grid > .lv-full{grid-column:1 / -1}

  /* La tienda: los packs dejan de ir de uno en uno. */
  .p-buy .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}

/* --------------------------------------------------- 4. ESCRITORIO (>=1080px) */
@media (min-width:1080px){
  :root{--gap:20px}

  .p-index .wrap,
  .p-customize .wrap{max-width:1040px}
  .p-buy .wrap      {max-width:900px}
  .p-ranks .wrap    {max-width:900px}
  .p-admin .wrap    {max-width:1200px}

  /* Principal + lateral. NADA de position:sticky aqui: el lateral de index lleva
     seis tarjetas y es mas alto que la pantalla, y una columna sticky mas alta
     que el viewport deja su parte de abajo imposible de ver. Sticky solo donde
     la columna es corta (el panel del mural, mas abajo). */
  .lv-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
           gap:var(--gap);align-items:start}

  .lv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lv-grid.lv-2{grid-template-columns:repeat(2,minmax(0,1fr))}

  .p-buy .grid{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* MURAL: el lienzo al lado del panel de compra. Antes habia que bajar a
     ciegas para ver el precio mientras arrastrabas el recuadro arriba. */
  .p-mural .lv-mural{display:grid;grid-template-columns:minmax(0,1fr) 380px;
                     gap:var(--gap);align-items:start}
  /* Aqui SI, porque es UNA tarjeta: y con tope de alto + scroll propio, para que
     nunca se quede nada del panel fuera de la pantalla. */
  .p-mural .lv-mural > .lv-side{position:sticky;top:16px;
                                max-height:calc(100vh - 32px);overflow-y:auto}

  /* Cuatro botones de menu estirados a 1200 px quedan ridiculos. */
  .nav{max-width:620px;margin-left:auto;margin-right:auto}
}

/* ------------------------------------------------------------ 5. TOPE (1400) */
/* A partir de aqui no se sigue creciendo: una linea mas ancha no se lee mejor
   y el diseño se deshace. */
@media (min-width:1400px){
  .p-index .wrap,
  .p-customize .wrap{max-width:1180px}
  .p-admin .wrap    {max-width:1320px}
}

/* PANTALLA DE LOGIN. El .wrap de index es ancho porque la partida va a dos columnas;
   el formulario de entrar son cuatro campos y estirado ocupaba toda la pantalla.
   Se estrecha SOLO esa tarjeta, y en escritorio se pone "More games and apps" a su
   derecha para llenar el hueco. El resto de la pagina no cambia. En movil .lv-login-row
   es un div normal y todo queda apilado igual que antes. */
.lv-login-row{display:block}
.lv-login-row > *{box-sizing:border-box;min-width:0}
/* El modulo de familia trae su propio fondo y 38px de padding porque nace pegado al
   footer; dentro de la columna eso es un pegote. Aqui va desnudo. */
.lv-login-side .sbf-more{background:transparent;padding:0}
.lv-login-side .sbf-more .in{max-width:none}
.lv-login-side .sbf-more h2{font-size:18px}

@media (min-width:720px){
  .card.lv-login{max-width:440px;margin-left:auto;margin-right:auto}
}
@media (min-width:1080px){
  .lv-login-row{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
                gap:var(--gap);align-items:start}
  .lv-login-row .card.lv-login{margin-left:0;margin-right:0}
  .lv-login-side{margin-top:18px}   /* alinea con el margin-top de .card */
}

/* ------------------------------------------------- 6. PIEZAS NUEVAS (lv-*) */
/* Todo lo de aqui son clases NUEVAS: no pueden romper nada de lo que ya habia. */
.lv-stack{display:flex;flex-direction:column;gap:10px}
.lv-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lv-spread{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lv-pill{display:inline-block;box-sizing:border-box;padding:2px 9px;border-radius:999px;
  border:1px solid var(--line);background:rgba(0,0,0,.28);font-size:11.5px;color:var(--muted)}
.lv-muted{color:var(--muted)}
.lv-sep{border:0;border-top:1px solid var(--line);margin:14px 0}

/* Accesibilidad: sobre fondo oscuro el foco por defecto del navegador se
   pierde, y sin el no se puede usar la web con el teclado. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--lava2);outline-offset:2px;border-radius:8px;
}

/* Quien tenga puesto "reducir movimiento" en el sistema no se merece que le
   parpadee la alerta de ola de lava en la cara. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Impresion: que un pedido o un ranking salgan legibles en papel/PDF. */
@media print{
  body{background:#fff !important;color:#000 !important}
  .nav,.top,.cta,button{display:none !important}
  .card{border:1px solid #999 !important;background:#fff !important;break-inside:avoid}
}