/* CASTLEHEAD ARCADE — castleheadarcade.com
   La paleta sale del propio juego: piedra húmeda con reflejo verde, luz de
   antorcha y los cuatro colores que identifican a cada minijuego. */

:root{
  --pozo:#060A07;        /* negro con reflejo verde, no negro neutro */
  --piedra:#131C16;
  --musgo:#1E2C22;
  --hueso:#D6E0D4;
  --hueso-tenue:#8C9A8C;

  --sangre:#C8202A;      /* HEADCRUSH  */
  --fuego:#FF7F1F;       /* HEADTWIST  */
  --veneno:#4FE870;      /* HEADSPLASH */
  --cripta:#B268FF;      /* HEADJONG   */
  --antorcha:#FF9E2C;
  --rojo:#F2404A;        /* idiomas sin seleccionar, sobre la imagen */

  --ancho:64rem;

  /* 'Press Start 2P' no tiene kana ni hangul: DotGothic16 recoge el japonés
     manteniendo el pixel, y el resto cae en la fuente del sistema. */
  --titulo:'Press Start 2P','DotGothic16','Hiragino Kaku Gothic ProN','Yu Gothic','Malgun Gothic',monospace;
  --cuerpo:'IBM Plex Sans','Hiragino Sans','Yu Gothic','Malgun Gothic','Noto Sans JP','Noto Sans KR',system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--pozo);
  color:var(--hueso);
  font-family:var(--cuerpo);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 1.5rem;}

a{color:var(--veneno);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:#7DFF9C;}
:focus-visible{outline:2px solid var(--antorcha);outline-offset:3px;}

h1,h2,h3{
  font-family:var(--titulo);
  font-weight:400;
  line-height:1.45;
  letter-spacing:.02em;
}

/* ---------- barra de idiomas ----------
   En la portada va montada sobre la propia imagen del laboratorio, con un
   velo oscuro arriba para que los nombres se lean sobre el dibujo. En las
   páginas de texto, que no tienen imagen, queda como una franja normal. */
.idiomas{
  background:var(--piedra);
  border-bottom:1px solid var(--musgo);
}
.portada .idiomas{
  position:absolute;top:0;left:0;right:0;z-index:3;
  background:linear-gradient(180deg,rgba(6,10,7,.82) 0%,rgba(6,10,7,.45) 55%,rgba(6,10,7,0) 100%);
  border-bottom:0;
  padding-bottom:2.2rem;
}
.idiomas-tira{
  display:flex;flex-wrap:wrap;
  justify-content:center;
  gap:.3rem .4rem;
  padding-top:.6rem;padding-bottom:.5rem;
}
.idioma{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .7rem;
  background:none;border:1px solid transparent;border-radius:3px;
  color:var(--rojo);
  font-family:var(--titulo);font-size:.55rem;
  line-height:1;
  cursor:pointer;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
}
.idioma:hover{color:#FF7A7A;}
.idioma.activo{
  color:var(--veneno);
  border-color:rgba(79,232,112,.6);
  background:rgba(6,10,7,.55);
  box-shadow:0 0 10px -2px rgba(79,232,112,.5);
}
.idioma .bandera{display:block;line-height:0;}
.idioma .bandera svg{
  display:block;width:22px;height:16px;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6);
}
.idioma .nombre{padding-top:.15em;}

/* ---------- portada ---------- */
.portada{position:relative;isolation:isolate;}
.portada img{display:block;width:100%;height:auto;}
.portada::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,10,7,.15) 0%,rgba(6,10,7,.55) 62%,var(--pozo) 100%);
}
.entrada{
  position:relative;z-index:2;
  margin-top:-8vw;padding-bottom:4.5rem;
  text-align:center;
}
.entrada p{
  max-width:34rem;margin:0 auto 2rem;
  font-size:1.15rem;color:var(--hueso);
}

.acciones{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;}
.boton{
  display:inline-block;padding:.85rem 1.6rem;
  font-family:var(--titulo);font-size:.68rem;
  text-decoration:none;border-radius:3px;
  border:2px solid currentColor;
}
.boton.principal{
  color:var(--veneno);
  background:rgba(79,232,112,.08);
  box-shadow:0 0 14px rgba(79,232,112,.28);
}
.boton.principal:hover{background:rgba(79,232,112,.16);color:var(--veneno);}
.boton.secundario{color:var(--antorcha);background:rgba(255,158,44,.06);}
.boton.secundario:hover{background:rgba(255,158,44,.14);color:var(--antorcha);}
.boton[aria-disabled="true"]{
  color:var(--hueso-tenue);border-style:dashed;
  background:none;box-shadow:none;cursor:default;
}

/* ---------- los cuatro juegos, como tanques del laboratorio ---------- */
.juegos{padding:1rem 0 4rem;}
.juegos h2,.galeria h2,.quien h2{
  font-size:.85rem;color:var(--hueso-tenue);
  margin:0 0 2rem;
}

.juego{
  position:relative;
  display:grid;
  grid-template-columns:1fr 150px;
  gap:1.5rem 2rem;
  padding:2rem 0;
  border-top:1px solid var(--musgo);
  align-items:center;
}
.juego-texto{align-self:center;}
.juego:last-of-type{border-bottom:1px solid var(--musgo);}

/* Ambiente: una mancha de luz del color del juego detrás de su captura, como
   el resplandor de los tanques del laboratorio. */
.juego::before{
  content:'';
  position:absolute;pointer-events:none;z-index:0;
  right:-1.5rem;top:50%;
  width:360px;height:360px;
  transform:translateY(-50%);
  background:radial-gradient(circle,var(--tono) 0%,transparent 62%);
  opacity:.17;
  filter:blur(34px);
}
.juego > *{position:relative;z-index:1;}

/* El cartel del propio juego hace de título: el color ya lo lleva él. */
.juego-logo{margin:0 0 1.1rem;line-height:0;}
.juego-logo img{
  display:block;width:100%;max-width:330px;height:auto;
  border-radius:4px;
}

.juego p{margin:0;color:var(--hueso-tenue);max-width:44rem;}

/* La captura de cada juego, con el halo de su propio color */
.juego-captura{display:block;line-height:0;}
.juego-captura img{
  display:block;width:100%;height:auto;
  border:1px solid rgba(255,255,255,.09);border-radius:6px;
  box-shadow:0 0 44px -14px var(--tono), 0 0 14px -8px var(--tono);
}
.juego-captura:hover img{
  border-color:var(--tono);
  box-shadow:0 0 56px -12px var(--tono), 0 0 18px -6px var(--tono);
}

/* ---------- otras pantallas ---------- */
.galeria{padding:1rem 0 4rem;}
.tira{
  display:flex;gap:1rem;
  overflow-x:auto;
  padding-bottom:1rem;
  scroll-snap-type:x mandatory;
}
.tira img{
  flex:0 0 auto;width:180px;height:auto;
  border:1px solid var(--musgo);border-radius:6px;
  scroll-snap-align:start;
}

/* ---------- quién ---------- */
.quien{padding:1rem 0 4rem;}
.quien p{max-width:38rem;color:var(--hueso-tenue);}

/* ---------- pie ---------- */
footer{
  border-top:1px solid var(--musgo);
  padding:2rem 0 3rem;
  font-size:.92rem;color:var(--hueso-tenue);
}
footer nav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-bottom:1rem;}

/* ---------- páginas de texto ---------- */
.texto{padding:3rem 0 4rem;max-width:42rem;}
.texto h1{font-size:1.15rem;margin:0 0 .5rem;}
.texto h2{font-size:.82rem;color:var(--veneno);margin:2.4rem 0 .6rem;}
.texto p,.texto li{color:var(--hueso-tenue);}
.texto li{margin-bottom:.4rem;}
.fecha{color:var(--hueso-tenue);font-size:.9rem;margin:0 0 2rem;}
.volver{
  display:inline-block;margin-bottom:2rem;
  font-family:var(--titulo);font-size:.62rem;
}

@media (max-width:720px){
  body{font-size:1.05rem;}

  /* En el móvil la portada es cuadrada: el logo llena la pantalla en vez de
     quedarse en una franja estrecha. */
  .entrada{margin-top:-2rem;padding-bottom:3.5rem;}
  .entrada p{font-size:1.08rem;}
  .acciones{flex-direction:column;align-items:stretch;}
  .boton{font-size:.62rem;padding:.95rem 1rem;text-align:center;}

  .idiomas-tira{gap:.35rem .3rem;padding-top:.5rem;}
  .idioma{padding:.35rem .5rem;gap:.35rem;font-size:.5rem;}
  .idioma .bandera svg{width:19px;height:14px;}
  .portada .idiomas{padding-bottom:3rem;}

  .juegos h2,.galeria h2,.quien h2{margin-bottom:1.4rem;}

  /* La captura pasa debajo del texto, a un tamaño en el que se vea de verdad
     lo que pasa en pantalla, sin tener que ampliar. */
  .juego{
    grid-template-columns:1fr;
    gap:1rem;
    padding:1.8rem 0;
  }
  /* Cartel y captura centrados: en vertical quedan mejor así que escorados. */
  .juego-logo{margin-bottom:.9rem;}
  .juego-logo img{max-width:300px;margin-inline:auto;}
  .juego-captura{width:min(300px,100%);margin:.2rem auto 0;}
  .juego::before{
    right:auto;left:50%;top:auto;bottom:0;
    width:320px;height:320px;
    transform:translate(-50%,-14%);
    opacity:.2;
  }
  .tira img{width:min(230px,62vw);}
}