/* La web de Doge Idle Mining (dogecoin.cloud): los colores y las letras del juego (estilo "Arcade Lunar").
   Sin programas ni servicios de afuera: ni cookies, ni estadísticas, ni letras de Google. */

/* OJO: el navegador guarda las letras 1 semana. Si a Pixel Minero se le agregan letras, hay que subir el número
   de "?v=" para que pida la nueva (v=2: las letras del portugués, Â Ê Ô Ã Õ À Ç). */
@font-face {
  font-family: 'Pixel Minero';
  src: url('/fuentes/PixelMinero.otf?v=2') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('/fuentes/VT323.ttf') format('truetype');
  font-display: swap;
}

:root {
  --espacio: #1b0f2e;
  --ventana: #26163f;
  --dorado: #ffb300;
  --crema: #f6e7c1;
  --texto: #fff4dc;
  --suave: #c9b8e0;
  --sombra: #0e0818;
  --contorno: #070201;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--espacio);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texto);
  font-family: 'VT323', ui-monospace, 'Courier New', monospace;
  font-size: 22px;
  line-height: 1.3;
  /* Unas estrellas quietas, como el fondo del juego */
  background-color: var(--espacio);
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff4dc 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 9%, #c9b8e0 50%, transparent 51%),
    radial-gradient(2px 2px at 43% 72%, #fff4dc 50%, transparent 51%),
    radial-gradient(2px 2px at 91% 58%, #ffb300 50%, transparent 51%),
    radial-gradient(2px 2px at 25% 88%, #c9b8e0 50%, transparent 51%),
    radial-gradient(2px 2px at 64% 35%, #fff4dc 50%, transparent 51%);
  background-size: 420px 420px;
}

.pagina {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 16px 48px;
  display: grid;
  gap: 22px;
}

h1,
h2 {
  margin: 0;
  font-family: 'Pixel Minero', 'VT323', monospace;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--dorado);
  text-shadow: 3px 3px 0 var(--sombra);
  letter-spacing: 1px;
  text-wrap: balance;
}

h1 {
  font-size: 30px;
  line-height: 1.35;
}

h2 {
  font-size: 20px;
  line-height: 1.4;
}

p {
  margin: 0;
}

/* El selector de idioma (ES · EN · PT), arriba a la derecha, con la letra y el color del pie.
   El idioma en que estás no es un enlace: va en crema y sin subrayar. */
.idiomas {
  /* Los márgenes negativos descuentan el relleno de los enlaces: las letras quedan al borde derecho de la página. */
  margin: -4px -8px -14px 0;
  color: var(--suave);
  font-size: 18px;
  text-align: right;
}

/* Con relleno alrededor, para que en el celular sea fácil acertarle con el dedo. */
.idiomas a,
.idiomas [aria-current] {
  display: inline-block;
  padding: 10px 8px;
}

.idiomas [aria-current] {
  color: var(--crema);
}

.sub {
  color: var(--suave);
}

/* Una ventana del juego: panel oscuro con borde crema, contorno negro y sombra dura */
.ventana {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  background: var(--ventana);
  border: 3px solid var(--crema);
  box-shadow:
    0 0 0 3px var(--contorno),
    6px 6px 0 3px var(--sombra);
}

ol,
ul {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 6px;
}

strong {
  font-weight: normal;
  color: var(--dorado);
}

a {
  color: var(--dorado);
}

/* El correo pasa entero a la línea siguiente; solo se parte si no cabe ni solo (celulares muy angostos). */
.correo {
  font-size: 24px;
  overflow-wrap: anywhere;
}

/* Lo mismo con una dirección larga dentro de un texto (la de la Política, en los Términos): sin esto no se parte y,
   en el celular, ensancha toda la página (el texto se corta a la derecha y el selector de idioma queda escondido). */
.ventana a {
  overflow-wrap: anywhere;
}

.aviso {
  color: var(--suave);
}

footer {
  display: grid;
  gap: 4px;
  color: var(--suave);
  font-size: 18px;
  text-align: center;
}