/* 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 */
  --veneno:#4FE870;      /* HEADTWIST */
  --agua:#3BD9E6;        /* HEADSPLASH */
  --cripta:#B268FF;      /* HEADJONG  */
  --antorcha:#FF9E2C;

  --ancho:64rem;
}

*{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:'IBM Plex Sans',system-ui,sans-serif;
  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:'Press Start 2P',monospace;
  font-weight:400;
  line-height:1.45;
  letter-spacing:.02em;
}

/* ---------- 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:'Press Start 2P',monospace;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;
  gap:1.5rem;
  padding:1.6rem 0;
  border-top:1px solid var(--musgo);
}
.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;
  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;}

/* ---------- capturas ---------- */
.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:210px;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:'Press Start 2P',monospace;font-size:.62rem;
}

@media (max-width:640px){
  body{font-size:1rem;}
  .entrada{margin-top:-4vw;}
  .entrada p{font-size:1.05rem;}
  .juego{grid-template-columns:14px 1fr;gap:1.1rem;}
  .boton{font-size:.62rem;padding:.8rem 1.2rem;}
}