/* ==============================================================
   1. TUS TIPOGRAFIAS
   Pon los archivos en una carpeta fonts/ junto a este style.css
   y descomenta los bloques cambiando los nombres de archivo.
   ============================================================== */

@font-face{
  font-family:'ArmadaBlack';
  src:url('fonts/armada_black.woff2') format('woff2'),
      url('fonts/armada_black.ttf')   format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'HabitSmall';
  src:url('fonts/habit_small.woff2') format('woff2'),
      url('fonts/habit_small.ttf')   format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}


:root{
  /* Cambia solo estas dos lineas para estrenar tipografia.
     Lo que va detras de la coma es el plan B si la tuya falla. */
  --fuente-titulo:'ArmadaBlack', monospace;
  --fuente-texto: 'HabitSmall', monospace;

  /* Colores sacados de tus assets */
  --mar-hondo:   #3f8fae;
  --crema:       #f2e4cd;
  --tinta:       #5c4630;
  --tinta-flojo: #8a7150;
  --sombra:      rgba(40,28,18,.4);

  /* Escala del pixel art. La calcula el JS: vale 1, 2, 3...
     Todos los tamanos de letra se multiplican por ella, asi que
     nunca salen decimales y la fuente de pixel se ve nitida. */
  --esc:2;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--mar-hondo);
  font-family:var(--fuente-texto);
  color:var(--tinta);
  overflow-x:hidden;
}

/* Para fuentes de pixel: quita el suavizado que las emborrona */
.pixel-txt{
  -webkit-font-smoothing:none;
  font-smooth:never;
}

/* ==============================================================
   2. LA ESCENA
   ============================================================== */
.mar{
  position:fixed;
  inset:0;
  z-index:-1;
  background:url('img/sea.webp') center/cover no-repeat;
  image-rendering:pixelated;
}

.escena{
  position:relative;
  width:100%;
  max-width:1280px;
  aspect-ratio:640/360;
  overflow:hidden;
}

.capa{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  image-rendering:pixelated;
  user-select:none;
  -webkit-user-drag:none;
}

/* Las tres capas de edificio estan siempre cargadas y solo se
   ensena una. Cambiar de piso es instantaneo, sin parpadeo. */
.edificio{display:none}
.edificio.activa{display:block}

.pieza{position:absolute;image-rendering:pixelated;pointer-events:none;user-select:none}

/* ==============================================================
   3. ROTULO
   ============================================================== */
.rotulo{
  position:absolute;
  left:2.5%; top:3.5%;
  z-index:5;
  pointer-events:none;
  font-family:var(--fuente-titulo);
  color:var(--crema);
  line-height:1.4;
}
.rotulo h1{font-size:calc(var(--esc) * 32px)}
.rotulo p{font-size:calc(var(--esc) * 16px);opacity:.92}
.rotulo .coords{font-size:calc(var(--esc) * 8px);opacity:.75;margin-top:.6em}

/* ==============================================================
   4. PUNTOS CLICABLES
   ============================================================== */
.punto{
  position:absolute;
  border:0;background:transparent;
  cursor:pointer;z-index:4;border-radius:6px;
  transition:background .15s,box-shadow .15s;
}
.punto:hover,.punto:focus-visible{
  background:rgba(255,255,255,.2);
  box-shadow:0 0 0 2px var(--crema);
  outline:none;
}
body.diseno .punto{background:rgba(255,80,120,.3);box-shadow:inset 0 0 0 2px #ff4f7a}

/* ==============================================================
   5. CAJA DE DIALOGO
   Proporcion exacta del asset (408x60): el borde nunca se deforma.
   ============================================================== */
.hud{
  position:fixed;
  inset:0;
  z-index:8;
  pointer-events:none;
  display:flex;
  justify-content:center;
}
.hud-interior{
  position:relative;
  width:100%;
  max-width:1280px;
}
   
.dialogo{
  position:absolute;
  left:14.7%;
  bottom:calc(var(--esc) * 8px);
  pointer-events:auto;
  width:63.75%;
  aspect-ratio:408/60;
  z-index:8;
  display:none;
  background:url('img/text_bg.png') no-repeat center/100% 100%;
  image-rendering:pixelated;
  padding:calc(var(--esc) * 7px) calc(var(--esc) * 26px) calc(var(--esc) * 6px) calc(var(--esc) * 10px);
  cursor:pointer;
}
.dialogo[data-abierto]{display:block}

.dialogo .quien{
  font-family:var(--fuente-titulo);
  font-size:calc(var(--esc) * 7px);
  color:var(--tinta-flojo);
  display:block;
  margin-bottom:.35em;
}
.dialogo .texto{
  font-size:calc(var(--esc) * 16px);
  line-height:0.7;
}
.dialogo .flecha{
  position:absolute;
  right:3.5%; bottom:12%;
  width:4%;
  image-rendering:pixelated;
  animation:parpadeo 1s steps(2,end) infinite;
}
@keyframes parpadeo{50%{opacity:0}}

.retrato{
  position:absolute;
  left:78.1%; bottom:0; width:13.6%;
  z-index:7;
  display:none;
  image-rendering:pixelated;
  pointer-events:none;
}
.retrato[data-abierto]{display:block}

/* ==============================================================
   6. MENU Y NAVEGACION
   ============================================================== */
.menu{
  display:none;
  flex-direction:column;
  width:fit-content;
  gap:.4em;
  margin-top:calc(var(--esc) * 12px);
  pointer-events:auto;
}
.menu[data-abierto]{display:flex}

.chapa{
  font-family:var(--fuente-texto);
  font-size:calc(var(--esc) * 16px);
  color:var(--tinta);
  background:var(--crema);
  border:2px solid var(--tinta-flojo);
  border-radius:5px;
  padding:.4em .85em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 3px 0 var(--sombra);
  transition:transform .12s,background .12s;
  line-height:calc(var(--esc) * 10px);
  pointer-events:auto;
}
.chapa:hover,.chapa:focus-visible{background:#fff;transform:translateY(-2px)}

.pisos{
  position:absolute;
  right:2.5%; top:4%;
  z-index:6;
  display:none;
  gap:.4em;
}
.pisos[data-abierto]{display:flex}

.indice{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.indice:focus-within{width:auto;height:auto;clip:auto;top:0;left:0;background:var(--crema);padding:1em;z-index:20}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==============================================================
   7. POPUPS
   ============================================================== */
.popup[hidden]{display:none}

.popup{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(var(--esc) * 8px);
  background:rgba(25,52,66,.6);
}

/* --------------------------------------------------------------
   El tamano y la tipografia salen de estas cuatro variables.
   Tocalas aqui y cambia todo; o sobreescribelas por seccion
   mas abajo. --pop-ancho se multiplica por --esc, asi que 210
   son 420px reales cuando --esc vale 2.
   -------------------------------------------------------------- */
.popup-caja{
  --pop-ancho:210px;
  --pop-txt:16px;
  --pop-titulo:10px;
  --pop-aire:5px;

  display:flex;
  flex-direction:column;
  width:min(calc(var(--esc) * var(--pop-ancho)), 100%);
  max-height:min(88vh, calc(var(--esc) * 260px));
  background:var(--crema);
  border:calc(var(--esc) * 2px) solid var(--tinta-flojo);
  border-radius:5px;
  box-shadow:0 calc(var(--esc) * 3px) 0 var(--sombra);
}

/* anchos por seccion: anade las que quieras */
.popup[data-seccion="aficiones"] .popup-caja{--pop-ancho:320px}
.popup[data-seccion="libros"] .popup-caja{--pop-ancho:320px}
.popup[data-seccion="games"] .popup-caja{--pop-ancho:320px}
.popup[data-seccion="mision"] .popup-caja{--pop-ancho:260px}

.popup-barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--esc) * 4px);
  flex-shrink:0;                    /* la barra nunca se encoge */
  padding:calc(var(--esc) * 4px) calc(var(--esc) * var(--pop-aire));
  border-bottom:calc(var(--esc) * 2px) solid var(--tinta-flojo);
}

.popup-titulo{
  font-family:var(--fuente-titulo);
  font-size:calc(var(--esc) * var(--pop-titulo));
  color:var(--tinta);
}

.popup-cerrar{
  font-size:calc(var(--esc) * var(--pop-titulo));
  line-height:1;
  padding:.15em .5em;
}

/* --------------------------------------------------------------
   El cuerpo es lo unico que scrollea. min-height:0 es obligatorio:
   sin el, un hijo de flex se niega a encogerse y el scroll no sale.
   -------------------------------------------------------------- */
.popup-cuerpo{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;      /* al llegar al final no scrollea la pagina */
  padding:calc(var(--esc) * var(--pop-aire));
  font-size:calc(var(--esc) * var(--pop-txt));
  line-height:0.7;
}

/* barra de scroll a juego */
.popup-cuerpo{scrollbar-width:thin;scrollbar-color:var(--tinta-flojo) transparent}
.popup-cuerpo::-webkit-scrollbar{width:calc(var(--esc) * 4px)}
.popup-cuerpo::-webkit-scrollbar-track{background:transparent}
.popup-cuerpo::-webkit-scrollbar-thumb{
  background:var(--tinta-flojo);
  border-radius:calc(var(--esc) * 2px);
}

/* ==============================================================
   8. PIEZAS DE CONTENIDO (valen para cualquier popup)
   ============================================================== */

/* texto de entrada */
.pop-intro{
  margin-bottom:calc(var(--esc) * 6px);
  color:var(--tinta-flojo);
  line-height:0.7;
}

/* subtitulo dentro del popup */
.pop-titulo{
  font-family:var(--fuente-titulo);
  font-size:calc(var(--esc) * 8px);
  color:var(--tinta);
  margin-bottom:calc(var(--esc) * 3px);
}

/* bloque con aire debajo */p
:not(.pop-cols) > .pop-bloque + .pop-bloque{margin-top:calc(var(--esc) * 8px)}

/* --------- columnas ---------
   auto-fit + minmax: dos columnas si caben, una sola si no.
   No hace falta media query. Baja el 90px si las quieres mas
   estrechas, subelo si prefieres que colapsen antes. */
.pop-cols{
  display:grid;
  grid-template-columns:var(--cols, 1fr);
  gap:calc(var(--esc) * 14px);
}

@media (min-width:601px){
  .pop-cols{--cols:1fr 1fr}
  .popup[data-seccion="libros"] .pop-cols{--cols:3fr 2fr}
}

.pop-cols > * + *{
  border-left:1px solid var(--tinta-flojo);
  padding-left:calc(var(--esc) * 14px);
}

.pop-cols + p{margin-top:calc(var(--esc) * 12px)}

/* --------- listas de dos datos (tema/artista, libro/autor) --------- */
.pop-lista{list-style:none}
.pop-lista li{
  display:flex;
  justify-content:space-between;
  gap:calc(var(--esc) * 4px);
  padding:calc(var(--esc) * 2px) 0;
  border-bottom:1px solid var(--tinta-flojo);
}
.pop-lista li:last-child{border-bottom:0}
.pop-lista .dato{
  color:var(--tinta-flojo);
  text-align:right;
  flex-shrink:0;
}

/* --------- lista simple con vinetas --------- */
.pop-puntos{list-style:none}
.pop-puntos li{padding:calc(var(--esc) * 1px) 0}
.pop-puntos li::before{content:'- ';color:var(--tinta-flojo)}

/* --------- galeria de imagenes --------- */
.pop-galeria{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(calc(var(--esc) * 60px), 1fr));
  gap:calc(var(--esc) * 3px);
  margin-bottom:calc(var(--esc) * 10px);
}
.pop-galeria img{
  width:100%;
  display:block;
  border:1px solid var(--tinta-flojo);
  image-rendering:pixelated;
}
.pop-galeria figcaption{
  margin-top:calc(var(--esc) * 2px);
  color:var(--tinta-flojo);
}

/* --------- botones al final --------- */
.pop-acciones{
  display:flex;
  flex-wrap:wrap;
  gap:calc(var(--esc) * 3px);
  margin-top:calc(var(--esc) * 8px);
}

/* ---------- entradas de log ---------- */
.log-entrada + .log-entrada{
  margin-top:calc(var(--esc) * 10px);
  padding-top:calc(var(--esc) * 10px);
  border-top:1px solid var(--tinta-flojo);
}

.log-meta{
  display:flex;
  flex-wrap:wrap;
  gap:calc(var(--esc) * 5px);
  margin-bottom:calc(var(--esc) * 5px);
  font-size:calc(var(--esc) * 16px);
  color:var(--tinta-flojo);
}
.log-meta > * + *::before{content:'· ';}

.log-entrada p + p{margin-top:calc(var(--esc) * 5px)}

.log-figura{margin-bottom:calc(var(--esc) * 5px)}
.log-figura img{
  display:block;
  width:100%;
  border:1px solid var(--tinta-flojo);
  image-rendering:pixelated;
}
.log-figura figcaption{
  margin-top:calc(var(--esc) * 2px);
  font-size:calc(var(--esc) * 8px);
  color:var(--tinta-flojo);
}

/* el log pide un popup algo mas ancho que el resto */
.popup[data-seccion="log"] .popup-caja{--pop-ancho:260px}

/* ==============================================================
   9. HERRAMIENTA DE MEDIR (modo diseno)
   ============================================================== */
.regla{position:absolute;border:2px dashed #ff4f7a;background:rgba(255,80,120,.15);pointer-events:none;z-index:30;display:none}
.consola{position:fixed;left:0;bottom:0;z-index:40;background:#141414;color:#7dffb0;font:12px/1.5 monospace;padding:.6em .9em;display:none;white-space:pre}
body.diseno .consola{display:block}