/* La página de presentación.

   Mismo sitio que el juego y mismo aire: fondo casi negro con morado, letra
   monoespaciada y los oros de la portada. Nada de fuentes descargadas ni de
   librerías; una página que habla de un juego sin dependencias no puede
   arrastrar medio megabyte para enseñar cuatro capturas. */

:root {
  --fondo: #0a0710;
  --fondo2: #120c1a;
  --texto: #b9a8c4;
  --oro: #ffd27a;
  --oro-claro: #ffe9a8;
  --lila: #e0b8f0;
  --verde: #8ce0a0;
  --linea: #3a2b45;
  --tenue: #7a6484;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Courier New", Courier, monospace;
  font-size: 17px;
  line-height: 1.65;
  /* El cielo estrellado del juego, hecho con dos degradados en vez de con una
     imagen: pesa cero y no se pixela al ampliar. */
  background-image:
    radial-gradient(1px 1px at 20% 12%, rgba(255,255,255,.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 72% 6%,  rgba(255,255,255,.30) 50%, transparent 50%),
    radial-gradient(1px 1px at 45% 22%, rgba(255,255,255,.25) 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 18%, rgba(255,255,255,.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 8%  28%, rgba(255,255,255,.20) 50%, transparent 50%),
    radial-gradient(120% 60% at 50% 0%, #1d1430 0%, var(--fondo) 70%);
  background-repeat: no-repeat;
}

/* Para lectores de pantalla y buscadores: el <h1> de verdad está aquí, aunque
   lo que se ve sea el rótulo dibujado. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

header, section, footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 56px;
}

/* ================= La portada ================= */

#portada {
  text-align: center;
  padding-top: 64px;
}

h1 { margin: 0; line-height: 0; }

/* El ancho lo pone landing.js, y siempre en múltiplos enteros del lienzo.
   Esto de aquí es solo el respaldo para cuando no hay JavaScript. */
#titulo {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.lema {
  margin: 14px 0 0;
  color: var(--lila);
  font-size: 19px;
  letter-spacing: 3px;
}

.pitch {
  margin: 30px auto 0;
  max-width: 620px;
  text-align: left;
  font-size: 18px;
}

/* ================= El botón ================= */

.cta-caja { margin: 36px 0 0; text-align: center; }

.cta {
  display: inline-block;
  padding: 16px 40px;
  background: var(--oro);
  color: #1a1020;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  text-decoration: none;
  border: 2px solid #7a5a20;
  /* Sombra dura, sin difuminar: es un botón de 1990, no de 2015. */
  box-shadow: 5px 5px 0 #4a2f10;
  transition: transform .08s steps(2), box-shadow .08s steps(2), background .12s;
}
.cta:hover, .cta:focus-visible {
  background: var(--oro-claro);
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #4a2f10;
}
.cta:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 #4a2f10;
}

.cta-grog {
  background: var(--verde);
  border-color: #2f6a3f;
  box-shadow: 5px 5px 0 #1c4227;
}
.cta-grog:hover, .cta-grog:focus-visible { background: #aef0be; }
.cta-grog:active { box-shadow: 0 0 0 #1c4227; }

.cta-pie {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--tenue);
}

/* ================= Secciones ================= */

h2 {
  margin: 0 0 18px;
  padding-top: 34px;
  border-top: 1px solid var(--linea);
  color: var(--oro-claro);
  font-size: 24px;
  line-height: 1.3;
}

p { margin: 0 0 18px; }

b { color: #d8c8e0; }
i { color: var(--lila); font-style: italic; }

code {
  font-family: inherit;
  color: var(--verde);
  font-size: .92em;
}

/* ================= Capturas ================= */

figure { margin: 26px 0 0; }

/* El mismo mueble de monitor que enmarca el juego. Repetirlo aquí es lo que
   hace que la página y el juego parezcan la misma cosa. */
.crt {
  position: relative;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(160deg, #3a3340 0%, #241f2b 60%, #191520 100%);
  box-shadow: 0 0 0 2px #120e18, 0 14px 34px rgba(0,0,0,.7),
              inset 0 1px 0 rgba(255,255,255,.06);
  line-height: 0;
}
.crt img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Las scanlines van encima de la imagen, no dentro: así la captura se queda
   como salió del juego y el efecto es solo de presentación. */
.crt::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.16) 3px, rgba(0,0,0,.16) 4px);
}

figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tenue);
  text-align: center;
}

.rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.rejilla figure { margin-top: 26px; }

/* ================= Lista ================= */

.lista { margin: 0 0 8px; padding-left: 22px; }
.lista li { margin-bottom: 10px; }
.lista li::marker { color: var(--oro); }

/* El remate del bote va solo, separado del párrafo anterior y en cursiva: es
   un chiste a destiempo y necesita el silencio de antes para funcionar.
   Pegado al párrafo se lee como una explicación y deja de tener gracia. */
.remate { margin-top: -6px; font-style: italic; color: var(--tenue); }

/* LA LÁPIDA. Lo único que la donación sí da, y por eso se aparta del resto:
   viene justo después de una lista de cinco cosas que NO hace, y sin un
   cambio de aire se leería como la sexta.

   El borde gris de piedra a la izquierda es todo el adorno que necesita: más
   que eso competiría con la lápida de verdad, que se dibuja en el juego. */
.losa {
  border-left: 3px solid #5c6570;
  background: rgba(92, 101, 112, .07);
  padding: 14px 18px 2px;
  margin: 22px 0;
  border-radius: 0 4px 4px 0;
}
.losa b { color: var(--oro-claro); }

/* ================= Pie ================= */

footer { padding-bottom: 70px; font-size: 15px; }
footer p { color: var(--tenue); }

.enlaces { margin-top: 26px; text-align: center; font-size: 16px; }
.enlaces a { color: var(--lila); }
.sep { margin: 0 12px; color: var(--linea); }

a:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* ================= Enlaces =================

   NINGÚN ENLACE SIN COLOR. El de la tabla de récords no tenía regla propia y
   se quedaba con lo que pone el navegador: azul sin visitar y MORADO una vez
   pulsado. Sobre un fondo casi negro, ilegible el uno y horrible el otro.

   Y el morado solo aparecía DESPUÉS de hacer clic, así que revisando la página
   recién abierta no se veía nunca: solo lo sufría quien ya la había usado.

   Por eso la regla es general y no para ese enlace suelto. El siguiente que se
   añada nace con color, en vez de heredar el mismo fallo. */
a { color: var(--oro); }
a:hover { color: var(--oro-claro); }
/* Los botones grandes traen su propio color de texto sobre fondo lleno */
.cta, .cta:hover { color: #1a1020; }

.firma {
  margin-top: 34px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: #52455e;
}
.mofa { letter-spacing: 3px; }

/* ================= Pantallas estrechas ================= */

@media (max-width: 620px) {
  body { font-size: 16px; }
  #portada { padding-top: 40px; }
  .rejilla { grid-template-columns: 1fr; gap: 0; }
  h2 { font-size: 21px; }
  .pitch { font-size: 17px; }
  .cta { padding: 15px 26px; font-size: 17px; letter-spacing: 1px; }
  header, section, footer { padding-bottom: 44px; }
}

/* Quien pide menos movimiento no quiere que el botón le salte al pasar. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { transition: none; }
  .cta:hover, .cta:focus-visible, .cta:active { transform: none; }
}

/* ================= El selector de idioma =================

   Arriba a la derecha y discreto: es un mando, no un reclamo. Quien lo
   necesita lo busca ahí, y quien no, no debería tropezarse con él antes que
   con el rótulo.

   Nace con hidden puesto en el HTML: si solo hay un idioma cargado, no
   aparece nunca. Un desplegable con una sola opción no es una opción. */

#idiomas {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
}

#idiomas select {
  background: var(--fondo2);
  color: var(--tenue);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

#idiomas select:hover,
#idiomas select:focus {
  color: var(--oro-claro);
  border-color: var(--oro);
  outline: none;
}

/* En una pantalla estrecha no puede quedar flotando encima del rótulo, así
   que deja de estar posicionado y se pone en su propia fila. */
@media (max-width: 520px) {
  #idiomas { position: static; text-align: right; padding: 10px 14px 0; }
}