/* 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;

  --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 ---------- */
.idiomas{
  background:var(--piedra);
  border-bottom:1px solid var(--musgo);
}
.idiomas-tira{
  display:flex;flex-wrap:wrap;
  justify-content:center;
  gap:.15rem .35rem;
  padding-top:.5rem;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(--hueso-tenue);
  font-family:var(--titulo);font-size:.55rem;
  line-height:1;
  cursor:pointer;
}
.idioma:hover{color:var(--hueso);}
.idioma.activo{
  color:var(--veneno);
  border-color:rgba(79,232,112,.45);
  background:rgba(79,232,112,.08);
}
.idioma .bandera{display:block;line-height:0;}
.idioma .bandera svg{
  display:block;width:20px;height:15px;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}
.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{
  display:grid;
  grid-template-columns:22px 1fr 150px;
  gap:1.5rem;
  padding:1.8rem 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);}

/* El tanque: un cilindro de cristal con el líquido del color del juego.
   Es el elemento del banner traído a la estructura de la página. */
.tanque{
  border-radius:8px;
  align-self:stretch;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16) 0 6%,transparent 6%),
    linear-gradient(180deg,transparent 0 18%,var(--tono) 18%);
  box-shadow:0 0 12px -1px var(--tono), inset 0 0 8px rgba(255,255,255,.18);
  opacity:.85;
}

.juego h3{margin:.1rem 0 .5rem;font-size:.95rem;color:var(--tono);}
.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 var(--musgo);border-radius:6px;
  box-shadow:0 0 20px -10px var(--tono);
}
.juego-captura:hover img{border-color: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:1rem;}
  .entrada{margin-top:-4vw;}
  .entrada p{font-size:1.05rem;}
  .boton{font-size:.62rem;padding:.8rem 1.2rem;}

  /* La captura pasa debajo del texto, manteniendo el raíl de color a la izquierda */
  .juego{
    grid-template-columns:14px 1fr;
    gap:1.1rem;
  }
  .tanque{grid-row:1 / -1;}
  .juego-captura{grid-column:2;width:min(170px,55%);}
  .tira img{width:150px;}
}