/* ============================================================
   BASE
   Tipografía, reset, fondo de la app y contenedor principal.
   ============================================================ */

/* Fuente local que se usaba antes en toda la web. Se deja declarada por si
   se quiere recuperar en algún sitio concreto (títulos, nombres...). */
@font-face {
  font-family: "Banana Slip";
  src: url("../fonts/KaiseiOpti-Regular.ttf") format("truetype");
  font-display: swap; /* muestra texto mientras carga la fuente */
}

/* Anuphan se carga desde Google Fonts en el <link> de index.html: no hay
   @font-face que escribir aquí ni archivo que meter en fonts/. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* SCROLLBARS DE TODA LA WEB, discretas.
   Las de serie de Chrome son blancas y sobre este fondo oscuro cantaban
   muchísimo. Fina, transparente y solo el pulgar apenas visible; se
   aclara al pasar el ratón. El borde transparente + background-clip es
   el truco para que el pulgar parezca más fino que el canal. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.32);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Los botones e inputs no heredan la fuente por defecto */
button,
input,
select,
textarea {
  font-family: inherit;
}

body {
  font-family: "Anuphan", system-ui, -apple-system, "Segoe UI", Arial,
    sans-serif;
  color: #e8e8e8;
  /* La app ocupa exactamente la ventana: nunca scrollea el body,
     solo las zonas internas que lo necesiten.
     Dos columnas: menú lateral fijo + contenido */
  height: 100vh;
  display: flex;
  overflow: hidden;
  background: linear-gradient(180deg, #1e1e20 0%, #141416 55%, #08080a 100%);
}

/* Patrón animado en diagonal por encima del gradiente.
   Va en position: fixed para que cubra toda la ventana. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../img/common/bg-pattern.png");
  background-size: 800px 400px;
  background-repeat: repeat;
  animation: fondo-diagonal 30s linear infinite;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1; /* siempre por detrás de todo el contenido */
}

/* Mosaico infinito: se desplaza justo el tamaño de una baldosa,
   así el bucle no da tirón al reiniciarse. */
@keyframes fondo-diagonal {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 800px 400px;
  }
}

#contenido {
  position: relative;
  z-index: 1; /* por encima del patrón */
  flex: 1;
  min-width: 0;
  min-height: 0; /* deja que los hijos con scroll funcionen */
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* scroll aquí en las páginas largas */
}

/* En el detalle de jugador el contenido va sin padding, para que
   la columna del personaje se pegue al menú lateral.
   Lleva el #contenido delante para ganar en especificidad. */
#contenido.contenido--sin-padding {
  padding: 0;
}

.pagina__titulo {
  margin-bottom: 20px;
  padding-bottom: 10px;
  /* Línea fina que separa el título del contenido de la vista */
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

/* ------------------------- MÓVIL ------------------------- */

@media (max-width: 900px) {
  /* La app se apila: barra arriba y, debajo, el resto ocupando
     todo lo que queda de pantalla */
  body {
    flex-direction: column;
  }

  #contenido {
    flex: 1;
    min-height: 0;
    padding: 16px 14px;
    /* Margen inferior amplio: que la info no quede pegada al borde ni
       la tapen los botones en pantalla de algunos móviles */
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
}