/* ---------- Portada ---------- */
.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(var(--sky), var(--purple) 55%, var(--night));
}
.stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3s ease-in-out infinite alternate;
}
.moon {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  width: min(112vw, 560px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 70%, #e2bf7c 0 6%, transparent 6.5%),
    radial-gradient(circle at 22% 62%, #e9c88a 0 4%, transparent 4.5%),
    radial-gradient(circle at 40% 35%, #fff7dc, var(--moon) 50%, #e9c27d 85%);
  box-shadow: 0 0 60px 20px #f8e3b044, 0 0 180px 70px #f47b201f;
  animation: moonglow 6s ease-in-out infinite alternate;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  margin: 0 auto;
  padding: 4.5rem 16px 0;
}
.hero h1 { line-height: 0.95; }
.hero h1 small {
  display: block;
  font-size: clamp(1.8rem, 9vw, 3rem);
  color: var(--ink);
}
.hero h1 span {
  display: block;
  font-size: clamp(3.4rem, 17vw, 7.5rem);
  color: var(--pumpkin);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 4px 5px 0 var(--ink);
  animation: flicker 7s infinite;
}
.tagline { max-width: 19rem; margin: 0.6rem auto 1rem; color: var(--ink); font-size: 1.25rem; }
.when {
  display: inline-block;
  margin: 0;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius);
  background: var(--ink);
  font-size: 1.25rem;
  white-space: nowrap;
  transform: rotate(-1.5deg);
}

.countdown { display: flex; justify-content: center; gap: 0.5rem; margin: 1.6rem 0 0.8rem; }
.tomb {
  width: 4.3rem;
  padding: 0.7rem 0 0.4rem;
  border-radius: 2.2rem 2.2rem 6px 6px;
  background: linear-gradient(#8f89a3, var(--stone));
  color: var(--ink);
  box-shadow: inset -5px -5px 0 #0003, 0 5px 0 #120a1f;
}
.tomb:nth-child(odd) { transform: rotate(-3deg); }
.tomb:nth-child(even) { transform: rotate(2deg); }
.tomb b { display: block; font: 2rem/1 "Creepster", cursive; }
.tomb small { font-size: 0.9rem; }
.started { font: 2rem "Creepster", cursive; color: var(--slime); }

.ghost {
  position: absolute;
  z-index: 3;
  bottom: 170px;
  right: 8%;
  width: 62px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.92;
  animation: float 4s ease-in-out infinite;
}

.scene { position: relative; height: 190px; margin-top: auto; }
.house { position: absolute; left: -6px; bottom: 30px; width: 175px; }
.house .lit > * { animation: candle 4s infinite; }
.house .lit > :nth-child(2n) { animation-delay: -1.7s; }
.pumpkin {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pumpkin.big { right: 7%; bottom: 14px; width: 112px; }
.pumpkin.small { right: 38%; bottom: 12px; width: 68px; }
.pumpkin svg { display: block; filter: drop-shadow(0 0 16px #f47b2088); }
.pumpkin .face { animation: candle 3s infinite; }
.pumpkin.talk svg { animation: wobble 0.5s; }
.ground {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -50px;
  height: 100px;
  border-radius: 50% 50% 0 0;
  background: #0f0818;
}
.fog {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 80px;
  background: radial-gradient(ellipse at center, #e8dcff2a, transparent 65%) 0 0 / 25% 100% repeat-x;
  filter: blur(8px);
  pointer-events: none;
  animation: drift 40s linear infinite;
}

@media (min-width: 700px) {
  .scene { height: 260px; }
  .house { width: 290px; left: 2%; }
  .pumpkin.big { width: 170px; right: 10%; }
  .pumpkin.small { width: 100px; right: 32%; }
  .ghost { width: 80px; bottom: 240px; right: 12%; }
}

.poster { max-width: min(92vw, 30rem); padding: 0; border: 0; background: transparent; text-align: center; color: var(--text); }
.poster::backdrop { background: #000c; }
.poster img { display: block; width: 100%; border-radius: var(--radius); }
.poster-thanks { margin: 0.8rem 0 0.2rem; font-size: 1.3rem; color: var(--moon); }
.poster-note { margin: 0 0 0.6rem; font-size: 1rem; color: var(--muted); }

/* ---------- Recorrido ---------- */
.meter {
  height: 16px;
  margin-top: 1rem;
  border: 2px solid var(--purple);
  border-radius: 99px;
  background: var(--ink);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fae22, var(--slime));
  box-shadow: 0 0 12px var(--slime);
}
.count { color: var(--moon); }

/* Se ven tantos portales como quepan; si no caben, botón "Siguiente portal" */
#route { width: min(100vw - 32px, 76rem); margin-inline: calc(50% - min(50vw - 16px, 38rem)); padding-inline: 10px; }
#route > :not(.buildings) { max-width: 40rem; margin-inline: auto; }
.buildings {
  --per-view: 1;
  --gap: 1rem;
  display: flex;
  gap: var(--gap);
  margin: 1.2rem 0 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.buildings::-webkit-scrollbar { display: none; }
.building { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); scroll-snap-align: start; }
@media (min-width: 640px) { .buildings { --per-view: 2; } }
@media (min-width: 1100px) { .buildings { --per-view: 4; } }
#route > .next { display: block; margin: 0.25rem auto 0.5rem; }
#route > .next[hidden] { display: none; }
.roof {
  display: grid;
  place-items: center;
  height: 40px;
  margin: 0 3px;
  background: linear-gradient(#4a3570, #362653);
  clip-path: polygon(5% 100%, 95% 100%, 82% 0, 18% 0);
}
.roof span { font: 1.3rem "Creepster", cursive; color: var(--pumpkin); letter-spacing: 0.06em; }
.facade {
  display: grid;
  grid-template-columns: 1.8rem repeat(var(--cols), 1fr);
  gap: 4px 3px;
  padding: 10px 6px;
  border-inline: 3px solid #18102b;
  background: linear-gradient(#2e2050, #221838);
}
.fl { place-self: center; color: var(--muted); font-size: 0.7rem; line-height: 1; }
.win .lt { position: absolute; bottom: 1px; font-size: 0.55rem; color: #5a2d0c; font-weight: bold; }
.win {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 3px 3px 1px 1px;
  background: #120b22;
  box-shadow: inset 0 0 0 1px #3b2b5e;
  color: #8f7fb8;
  font-size: 0.8rem;
  line-height: 1;
}
.win.on {
  background: radial-gradient(circle, #fff1b8, #ffb347 75%);
  box-shadow: 0 0 10px 2px #f47b20aa;
  cursor: pointer;
  animation: candle 3s infinite var(--d);
}
.win.on:hover { transform: scale(1.3); z-index: 1; }
.badge { position: absolute; top: -6px; right: -6px; font-size: 0.6rem; }
.entrance {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 0.6rem;
  height: 34px;
  border-inline: 3px solid #18102b;
  background: #221838;
  border-bottom: 6px solid #0f0818;
}
.entrance span { font-size: 0.7rem; margin-bottom: 3px; }
.entrance i { width: 24px; height: 28px; border-radius: 12px 12px 0 0; background: #5a2d0c; box-shadow: inset 0 0 0 3px #2b1505; }
.win-info { min-height: 1.6em; text-align: center; color: var(--moon); font-size: 1.05rem; }
#route > .btn, #route > .soon { display: block; width: fit-content; margin: 0.5rem auto 0; }

/* ---------- Minifiesta ---------- */
.party { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; align-items: center; }
.party .actions { grid-column: 1 / -1; }
.cauldron { position: relative; width: 92px; height: 100px; }
.cauldron .pot {
  position: absolute;
  bottom: 0;
  left: 6px;
  width: 80px;
  height: 60px;
  border-radius: 10px 10px 40px 40px;
  background: radial-gradient(circle at 35% 30%, #4a4462, #120a1f 70%);
}
.cauldron .pot::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -6px;
  right: -6px;
  height: 16px;
  border-radius: 50%;
  background: var(--slime);
  box-shadow: 0 0 16px var(--slime), inset 0 -4px 0 #4f9a1f;
}
.cauldron i {
  position: absolute;
  bottom: 56px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--slime);
  animation: bubble 2.4s ease-out infinite;
}
.cauldron i:nth-child(1) { left: 22px; }
.cauldron i:nth-child(2) { left: 44px; width: 9px; height: 9px; animation-delay: -0.6s; }
.cauldron i:nth-child(3) { left: 60px; animation-delay: -1.2s; }
.cauldron i:nth-child(4) { left: 34px; width: 7px; height: 7px; animation-delay: -1.8s; }

/* ---------- Normas ---------- */
.parchment {
  border: 0;
  background: linear-gradient(170deg, #fbe9bd, #e8cb88);
  color: #2a1a0a;
  transform: rotate(-1deg);
}
.parchment h2 { color: #b4470d; text-shadow: none; }
.parchment ul { margin: 0; padding: 0; list-style: none; }
.parchment li { padding: 0.45rem 0; border-bottom: 1px dashed #2a1a0a33; }
.parchment li:last-child { border: 0; }

/* ---------- Lápida final ---------- */
.epitaph { display: grid; place-items: center; margin-top: 3rem; }
.grave {
  width: 230px;
  padding: 2.4rem 1rem 1.2rem;
  border-radius: 115px 115px 8px 8px;
  background: linear-gradient(#8f89a3, var(--stone));
  color: var(--ink);
  text-align: center;
  box-shadow: inset -8px -8px 0 #0003, 0 10px 0 #0f0818;
}
.grave b { display: block; font: 2.4rem "Creepster", cursive; }
.grave span { display: block; font-size: 1.2rem; }
.grave small { display: block; margin-top: 0.4rem; }

/* ---------- Pequeños monstruos ---------- */
.allergies { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; padding: 0; list-style: none; }
.allergies li { padding: 0.15rem 0.7rem; border-radius: 99px; background: var(--purple); font-size: 1rem; }
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; margin: 0.8rem 0; padding: 0; list-style: none; }
.kid {
  display: grid;
  justify-items: center;
  padding: 0.7rem 0.4rem;
  border-radius: var(--radius);
  background: linear-gradient(#3d2463, #2a1748);
  box-shadow: inset 0 0 0 1px #f47b2033;
  text-align: center;
}
.kid .avatar { font-size: 2.2rem; line-height: 1.1; animation: float 4s ease-in-out infinite var(--d); }
.kid b { color: var(--moon); word-break: break-word; }
.kid small { color: var(--muted); font-size: 0.95rem; }
#kids > .btn, #kids > .soon { display: block; width: fit-content; margin: 0.5rem auto 0; }

/* ---------- Modo acertijos ---------- */
#route > .play { display: block; margin: 0.8rem auto 0; }
.riddle {
  max-width: 40rem;
  margin: 1rem auto 0;
  padding: 1rem;
  border: 2px dashed var(--slime);
  border-radius: var(--radius);
  background: #8fdc4514;
  text-align: center;
}
.riddle-title { font: 1.6rem "Creepster", cursive; color: var(--slime); letter-spacing: 0.04em; }
.riddle-msg { color: var(--moon); }
.riddle ul { margin: 0.5rem 0; padding: 0; list-style: none; }
.riddle li { padding: 0.25rem 0; font-size: 1.25rem; }
.riddle .btn { font-size: 1rem; padding: 0.4rem 1rem; }
button.win:not(.on) { cursor: pointer; }
button.win:not(.on):hover { box-shadow: inset 0 0 0 2px var(--slime); }
.win.nope { animation: nope 0.4s; background: #5a1020; }
@keyframes nope { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.riddle-hint { min-height: 1.4em; margin: 0.4rem 0 0; font-size: 1.4rem; color: var(--moon); }
.win.lit-row { box-shadow: inset 0 0 0 3px var(--slime), 0 0 14px var(--slime); color: var(--slime); font-weight: bold; animation: candle 1.2s infinite; }