/* LosBaka.org — hoja de estilos.
   El aspecto anticuado es deliberado. Ver .specify/memory/constitution.md, Principio I:
   nada de sombras suaves, esquinas redondeadas, degradados ni animación al hacer scroll.

   Los colores salen de prototipe_example.jpeg (DC-005), con una única excepción
   listada en la propia constitución: el fondo de página #F5DCB3, permitido por la
   enmienda v1.2.0. Cualquier otro color ausente del prototipo necesita enmienda,
   no una decisión aquí — y ningún gate puede detectarlo, así que depende de quien lea esto. */

/* ---------- base ---------- */

/* Comic Relief: réplica métrica de Comic Sans con licencia SIL OFL, servida
   desde el propio repositorio. Va como respaldo real de "Comic Sans MS", que no
   existe ni en iOS ni en Android — es decir, en los dispositivos por los que
   llega casi todo el mundo. Sin esto el móvil caía en Chalkboard SE o, en
   Android, en lo que cada fabricante decidiera para 'cursive'. */
@font-face {
  font-family: "Comic Relief";
  src: url("images/comic-relief-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Comic Relief";
  src: url("images/comic-relief-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

body {
  /* Tono papel, no blanco. Es un color ausente del prototipo, así que está
     permitido por la enmienda v1.2.0 de la constitución y no por decisión de esta
     hoja de estilos; el motivo y los contrastes viven en el Principio I. */
  background: #F5DCB3;
  color: #000000;
  /* Comic Sans MS primero para quien la tenga instalada; Comic Relief detrás
     para todos los demás; el resto de la cadena ya solo es red de seguridad. */
  font-family: "Comic Sans MS", "Comic Relief", "Comic Sans", "Chalkboard SE", cursive, sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 16px;
}

/* Imágenes fluidas: la caja se reserva con los atributos width/height del HTML
   y se escala aquí, así nada salta mientras carga. */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- wordmark ---------- */

/* Besley casi nunca está instalada; el fallback previsto es Times New Roman en
   cursiva y subrayado, que es la tipografía más de época que existe en la web. */
h1 {
  font-family: Besley, "Times New Roman", Times, serif;
  font-style: italic;
  text-decoration: underline;
  text-align: center;
  font-size: 64px;
  font-weight: normal;
  margin: 8px 0 28px;
}

/* El wordmark es un enlace a la home, pero en el prototipo se ve negro, no azul
   de enlace. Se fuerza el color en los tres estados; el subrayado se conserva. */
.wordmark,
.wordmark:visited {
  color: #000000;
}

.wordmark:focus,
.wordmark:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 4px;
}

/* ---------- composición ---------- */

/* Escritorio: dos destinos a la izquierda, artwork al centro, dos a la derecha.
   Se pinta con áreas para no tener que reordenar el marcado. */
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas:
    "ig art yt"
    "fb art tt"
    "merch merch merch";
  gap: 24px;
  align-items: center;
  justify-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.ig { grid-area: ig; }
.fb { grid-area: fb; }
.yt { grid-area: yt; }
.tt { grid-area: tt; }

/* ---------- merch ---------- */

/* Fila propia al final, centrada por el justify-items del grid. El GIF se sirve
   a 600 px y se muestra a 400: sobra resolución para pantallas de doble densidad
   sin que el archivo crezca, porque son solo dos fotogramas. */
.merch {
  grid-area: merch;
  display: block;
  width: 100%;
  max-width: 400px;
}

/* ---------- tipografía del juego ---------- */

/* Fuente de mapa de bits, servida desde el propio repositorio: el Principio IV
   prohíbe pedir nada a terceros, así que no se enlaza, se commitea. */
@font-face {
  font-family: "PKMN RBYGSC";
  src: url("game/assets/pkmn-rbygsc.ttf") format("truetype");
  font-display: swap;
}

/* ---------- panel de artwork ---------- */

/* Borde duro y sombra de desplazamiento con desenfoque 0: así se hacía.
   Una sombra suave o cualquier border-radius rompen el Principio I. */
.art {
  grid-area: art;
  border: 4px solid #000000;
  border-radius: 0;
  box-shadow: 6px 6px 0 #000000;
}

/* El panel es el contenedor sobre el que se apilan la imagen, el botón PLAY,
   el vídeo y el lienzo del juego. Sin JavaScript solo contiene la imagen.

   Mantiene una proporción fija, la misma del artwork. Sin esto el panel adopta
   la altura de lo que tenga dentro, y como el intro es 16:9 se encogía al
   arrancar el vídeo y volvía a crecer al terminar: la página daba dos saltos. */
.panel {
  position: relative;
  display: block;
  /* El ancho es obligatorio: todos los hijos van en position:absolute, así que el
     panel no tiene contenido en flujo del que sacar su tamaño. Y el grid usa
     justify-items:center, que no estira los items. Sin esto el panel mide 0x0 y
     no se ve ni el artwork ni el juego. */
  /* aspect-ratio se aplica a la caja que indique box-sizing. Con border-box los
     4 px de borde se comían la caja de contenido y su proporción pasaba a ser
     646/519 en vez de 654/527: object-fit:contain ajustaba entonces por altura y
     dejaba ~1 px del fondo azul del panel asomando a cada lado, a cualquier
     ancho de pantalla. Con content-box la proporción se aplica justo a la caja
     donde se dibujan el artwork y el lienzo, y encajan exactos.

     El calc devuelve los 4 px de borde de cada lado, así que la caja de borde
     sigue midiendo el 100% de la celda y no hay scroll horizontal a 320 px, que
     era la razón por la que aquí ponía border-box. */
  box-sizing: content-box;
  width: calc(100% - 8px);
  max-width: 654px;
  aspect-ratio: 654 / 527;
  line-height: 0; /* sin hueco fantasma bajo la imagen */
  background: #216BEE; /* el azul del cielo, por si el lienzo tarda un frame */
}

.panel-art,
.panel canvas,
.panel video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* El intro es 1920x1080 y el panel casi cuadrado: entra a 654x368 y sobran 79 px
   arriba y abajo. Se rellenan de negro, como cualquier vídeo apaisado en una
   tele de tubo. */
.panel video {
  background: #000000;
}

/* ---------- control PLAY ---------- */

/* Lo inyecta baka-jump.js. Cuadrado, negro sobre blanco, sin nada moderno. */
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "PKMN RBYGSC", "Courier New", monospace;
  font-size: 32px;
  line-height: 1;
  color: #000000;
  background: #FFFFFF;
  border: 4px solid #000000;
  border-radius: 0;
  padding: 12px 24px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  animation: baka-blink 1s step-end infinite;
}

.play:focus,
.play:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 4px;
}

/* Parpadeo duro de época: encendido/apagado, sin desvanecidos. step-end mantiene
   cada valor hasta el siguiente fotograma clave, así que no hay transición.

   Se parpadea con opacity y NO con visibility: un elemento con visibility:hidden
   deja de recibir clics, así que el botón era inclicable la mitad de cada segundo.
   Con opacity:0 sigue siendo pulsable aunque no se vea. */
@keyframes baka-blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Quien pide menos movimiento no ve parpadeo: el botón se queda encendido. */
@media (prefers-reduced-motion: reduce) {
  .play {
    animation: none;
    opacity: 1;
  }
}

/* ---------- destinos ---------- */

.dest {
  display: block;
  text-align: center;
  color: #0000EE;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
}

.dest:visited {
  color: #551A8B;
}

/* La dirección va subrayada, en azul de época. El subrayado no se quita nunca.
   No hay etiqueta con el nombre de la plataforma: la propia dirección lo dice
   (instagram.com, facebook.com, youtube.com, tiktok.com), que es lo que exige
   SC-013 — identificable por texto sin tener que reconocer un logo. */
.dest .url {
  display: block;
  font-size: 16px;
  margin-top: 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Indicador de foco visible: los estilos por defecto no bastan una vez que se
   reestilizan los colores de enlace. */
.dest:focus,
.dest:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 3px;
}

/* ---------- contacto ---------- */

/* Una sola columna a cualquier ancho, así que no necesita media query propia:
   con width 100% y box-sizing border-box los campos caben en 320 px. Solo usa
   colores que ya están permitidos — negro, blanco, el fondo #F5DCB3 y los azules
   de enlace. Un botón gris estilo Windows 98 necesitaría #C0C0C0, que no está en
   el prototipo, y por tanto una enmienda. */
.contacto {
  max-width: 480px;
  margin: 32px auto 0;
  padding: 0 16px;
}

.contacto h2 {
  font-size: 28px;
  margin: 0 0 12px;
  color: #000000;
}

.contacto label {
  display: block;
  margin: 12px 0 4px;
}

/* Los controles de formulario no heredan la fuente por defecto: font: inherit
   les da la Comic Sans del body. appearance: none quita el estilo nativo, que en
   iOS Safari mete esquinas redondeadas y un degradado en el botón. El tamaño
   mínimo de 16 px evita que iOS haga zoom al enfocar un campo. */
.contacto input,
.contacto textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  font: inherit;
  font-size: 16px;
  color: #000000;
  background: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 8px;
}

.contacto textarea {
  resize: vertical;
}

/* El mismo tratamiento que el control PLAY, con la letra del cuerpo y sin
   parpadeo. */
.contacto button {
  display: block;
  margin: 16px auto 0;
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 18px;
  color: #000000;
  background: #FFFFFF;
  border: 4px solid #000000;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 8px 24px;
  cursor: pointer;
}

.contacto-alt {
  text-align: center;
  margin: 16px 0 0;
}

/* Azul y morado de época declarados a mano, como en .dest: el gate de contraste
   mide el color declarado. overflow-wrap evita que la dirección desborde a 320 px. */
.contacto-alt a {
  color: #0000EE;
  overflow-wrap: anywhere;
}

.contacto-alt a:visited {
  color: #551A8B;
}

/* El mismo indicador de foco que los destinos sociales. */
.contacto input:focus,
.contacto input:focus-visible,
.contacto textarea:focus,
.contacto textarea:focus-visible,
.contacto button:focus,
.contacto button:focus-visible,
.contacto-alt a:focus,
.contacto-alt a:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 3px;
}

/* ---------- pie ---------- */

/* Hereda la Comic Sans del body. El gris está cerca del techo que permite el
   Principio V: sobre #F5DCB3, a 16 px, el mínimo AA de 4.5:1 se alcanza en
   #636363, así que #666666 ya suspende (4.3:1). #555555 deja margen. */
.pie {
  text-align: center;
  font-size: 16px;
  margin: 32px 0 8px;
  color: #555555;
}

/* ---------- móvil ---------- */

@media (max-width: 768px) {
  /* El artwork arriba a todo lo ancho; debajo, el GIF del merch a la izquierda y
     las cuatro redes en rejilla 2x2 a la derecha.

     minmax(0, …) en las tres columnas: sin ese 0 el mínimo automático de una
     pista de rejilla es el ancho del contenido, y una URL de 30 caracteres
     ensancharía la columna hasta desbordar la página a 320 px. */
  .grid {
    /* 1.5fr para el merch, medido en Chrome. Es lo máximo que admite mantener las
       URL en dos líneas a 390 px con letra de 11 px: a 1.8fr hacen falta 10 px para
       no pasar a tres, y 10 px ya no es achicar «un poco». La legibilidad de los
       enlaces sigue mandando sobre el tamaño del GIF. */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "art   art art"
      "merch ig  fb"
      "merch yt  tt";
    gap: 14px 10px;
  }

  h1 {
    font-size: 40px;
  }

  .merch {
    max-width: 100%;
  }

  /* Los cuatro logos tienen proporciones muy distintas — YouTube es 501x200 y
     TikTok 143x200 — así que al escalarlos solo por ancho la rejilla 2x2 salía
     desigual: la celda de TikTok medía 191 px de alto contra 116 la de YouTube.
     Limitando también la altura, las cuatro quedan parejas. */
  .dest img {
    max-height: 52px;
    width: auto;
  }

  /* Las columnas se estrechan mucho, así que el ancho se recupera del relleno
     lateral y no del vertical: el vertical es lo que mantiene el objetivo táctil
     por encima del mínimo, junto con el min-height de .dest. */
  .dest {
    padding: 10px 2px;
  }

  .dest .url {
    font-size: 11px;
    margin-top: 6px;
  }
}