:root {
  --bg-1: #0b1026;
  --bg-2: #1a1446;
  --ink: #f4efe6;
  --muted: #a9a6c4;
  --glow: #ffd98a;
  --glow-soft: rgba(255, 217, 138, .35);
  --err: #ff9aa8;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-2), var(--bg-1) 70%);
  background-color: var(--bg-1);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
main { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }

.screen { display: none; width: 100%; max-width: 620px; text-align: center; }
.screen.active { display: block; animation: rise .9s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.glow-orb {
  width: 14px; height: 14px; margin: 0 auto 28px; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 24px 10px var(--glow-soft), 0 0 80px 30px rgba(255,217,138,.15);
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.35); opacity: .8; } }

h1 { font-weight: 600; font-size: clamp(2rem, 7vw, 3rem); margin: 0 0 8px; letter-spacing: .01em; }
.sub { font-family: var(--sans); color: var(--muted); font-size: .95rem; margin: 0 0 32px; }

.digits { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; }
.digits input {
  width: 64px; height: 76px; text-align: center; font: 600 2rem var(--sans);
  color: var(--ink); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  caret-color: var(--glow);
}
.digits input:focus { border-color: var(--glow); box-shadow: 0 0 0 3px var(--glow-soft); background: rgba(255,255,255,.1); }
.digits.shake { animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }

.msg { min-height: 1.4em; margin: 0 0 14px; font: 400 .9rem var(--sans); color: var(--err); }

button {
  font: 500 1rem var(--sans); color: #20160a; background: var(--glow);
  border: 0; border-radius: 999px; padding: 14px 34px; cursor: pointer;
  box-shadow: 0 6px 30px var(--glow-soft); transition: transform .15s, box-shadow .2s, opacity .2s;
}
button:hover { transform: translateY(-1px); box-shadow: 0 8px 36px rgba(255,217,138,.5); }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button:disabled { opacity: .5; cursor: default; transform: none; }

/* Historia: escenario a pantalla completa */
#story { position: fixed; inset: 0; z-index: 2; display: none; background: #070a20; overflow: hidden; }
#story.active { display: block; animation: fadein 1.2s ease both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.stage { position: absolute; inset: 0; transition: opacity .7s ease; }
.stage.out { opacity: 0; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hud { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; justify-content: center; z-index: 5; pointer-events: none; }
.progress { display: flex; gap: 7px; }
.progress i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .4s, box-shadow .4s; }
.progress i.done { background: var(--glow); box-shadow: 0 0 10px var(--glow-soft); }

.title-card { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(7,10,32,.7), transparent); }
.title-card.show { animation: titlecard 2.6s ease both; }
@keyframes titlecard { 0% { opacity: 0; transform: scale(.97); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.02); } }
#ch-no { font: 500 .8rem var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--glow); margin-bottom: 14px; }
#ch-title { font-weight: 600; font-style: italic; font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1.15; margin: 0; max-width: 14em; text-shadow: 0 2px 30px #000; }


.intro-sub { line-height: 1.7; margin-bottom: 34px; }

/* ---- Animaciones de las escenas ---- */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tw { animation: tw 3.4s ease-in-out infinite; }
@keyframes tw { 50% { opacity: .2; } }
.glowpulse, .flame, .flame2, .leafsway, .bloom, .bloom2, .pool, .warm, .medal, .sway, .legA, .legB, .flapL, .flapR { transform-box: fill-box; transform-origin: center; }
.glowpulse { animation: gp 2.8s ease-in-out infinite; }
@keyframes gp { 50% { transform: scale(1.18); opacity: .75; } }
.fly-bob { animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-16px); } }
.flapL { transform-origin: 100% 100%; animation: flap .16s linear infinite alternate; }
.flapR { transform-origin: 0 100%; animation: flap .16s linear infinite alternate; }
@keyframes flap { to { transform: scaleY(.4); } }

.par.p1 { animation: par 40s ease-in-out infinite alternate; }
.par.p2 { animation: par 28s ease-in-out infinite alternate-reverse; }
.par.p3 { animation: par 20s ease-in-out infinite alternate; }
@keyframes par { to { transform: translateX(-34px); } }
.fall { animation: fall 10s ease-in infinite; }
@keyframes fall { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(560px); opacity: 0; } }

.sway { transform-origin: 50% 100%; animation: sway 4s ease-in-out infinite alternate; }
@keyframes sway { to { transform: rotate(6deg); } }
.leafsway { animation: leaf 7s ease-in-out infinite alternate; }
@keyframes leaf { to { transform: rotate(1.5deg) translateY(5px); } }
.dim .glowpulse { opacity: .35; animation: none; }
.on1, .on2, .on3, .on4, .on5 { opacity: 0; transition: opacity 2.2s ease, transform 2.2s ease; }
.step-1 .on1, .step-2 .on2, .step-3 .on3, .step-4 .on4, .step-5 .on5 { opacity: 1; }
.step-3 .dim .glowpulse { opacity: 1; animation: gp 2.8s ease-in-out infinite; }

.walkbob { animation: wb .7s ease-in-out infinite alternate; }
@keyframes wb { to { transform: translateY(-7px); } }
.legA { transform-origin: 50% 0; animation: leg .7s ease-in-out infinite alternate; }
.legB { transform-origin: 50% 0; animation: leg .7s ease-in-out infinite alternate-reverse; }
@keyframes leg { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.approach { transition: transform 5.5s cubic-bezier(.3,.1,.2,1); }
.step-1 .approach { transform: translate(-320px, 150px); }
.pool { opacity: 0; transform: scale(.3); transition: opacity 3s ease, transform 3s ease; }
.step-2 .pool { opacity: .9; transform: none; }
.warm { opacity: 0; transition: opacity 3s ease; }
.step-3 .warm { opacity: .9; }
.mistmove { animation: par 18s ease-in-out infinite alternate; }

.cloud.c1 { animation: par 16s ease-in-out infinite alternate; }
.cloud.c2 { animation: par 12s ease-in-out infinite alternate-reverse; }
.rain { animation: rain .5s linear infinite; transition: opacity 3s ease; }
@keyframes rain { to { transform: translate(-30px, 200px); } }
.bolt { opacity: 0; animation: bolt 7s linear infinite; }
.flash { opacity: 0; animation: flash 7s linear infinite; }
@keyframes bolt { 0%, 8%, 100% { opacity: 0; } 1%, 5% { opacity: 1; } 3% { opacity: .2; } }
@keyframes flash { 0%, 8%, 100% { opacity: 0; } 1% { opacity: .35; } 3% { opacity: .05; } 5% { opacity: .25; } }
.flickerwrap .flicker { animation: flicker 1.9s steps(1) infinite; }
@keyframes flicker { 0% { opacity: 1; } 18% { opacity: .35; } 26% { opacity: .9; } 47% { opacity: .25; } 55% { opacity: 1; } 78% { opacity: .5; } 100% { opacity: 1; } }
.clearsky { opacity: 0; transition: opacity 5s ease; }
.step-3 .clearsky { opacity: 1; }
.step-3 .rain, .step-3 .cloud, .step-3 .bolt, .step-3 .flash { opacity: 0 !important; animation-play-state: paused; transition: opacity 4s ease; }
.on2 { transition: opacity 2s ease; }

.flame { transition: transform 2.6s ease; }
.step-2 .flame { transform: scale(1.2); } .step-3 .flame { transform: scale(1.35); } .step-4 .flame { transform: scale(1.5); } .step-5 .flame { transform: scale(1.65); }
.flame2 { animation: flick2 1.4s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes flick2 { to { transform: scale(1.1, 1.18) rotate(2deg); } }
.medal { transform: scale(.45); }
.step-2 .medal.on2, .step-3 .medal.on3, .step-4 .medal.on4 { transform: scale(.8); }
.on-all { opacity: 1 !important; }

.land { animation: land 8s cubic-bezier(.25,.1,.3,1) both; }
@keyframes land { from { transform: translateY(-560px); opacity: 0; } 14% { opacity: 1; } to { transform: none; opacity: 1; } }
.bloom, .bloom2 { opacity: 0; transform: scale(.2); transition: opacity 3.5s ease, transform 3.5s ease; }
.step-1 .bloom { opacity: .9; transform: none; }
.step-3 .bloom2 { opacity: .8; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 380px) { .digits input { width: 56px; height: 68px; } }

/* ---- Caja de dialogo estilo Nintendo ---- */
.dialog { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); width: min(760px, calc(100% - 24px)); min-height: 8.4rem; padding: 22px 26px 30px; text-align: left; cursor: pointer; color: var(--ink); background: rgba(9,13,46,.93); border: 3px solid #f4efe6; border-radius: 12px; box-shadow: 0 0 0 3px rgba(9,13,46,.9), inset 0 0 0 2px rgba(255,217,138,.22), 0 14px 44px rgba(0,0,0,.55); animation: boxin .35s ease both; -webkit-tap-highlight-color: transparent; }
.dialog:focus-visible { outline: 3px solid var(--glow); outline-offset: 4px; }
@keyframes boxin { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
#dtext { margin: 0; font: 500 clamp(1.02rem, 3.6vw, 1.22rem)/1.6 var(--sans); letter-spacing: .005em; min-height: 4.8em; }
.nametag { position: absolute; top: -19px; left: 20px; padding: 5px 16px; font: 600 .86rem var(--sans); letter-spacing: .05em; color: #0b1026; background: #f4efe6; border: 2px solid #0b1026; border-radius: 8px; box-shadow: 0 0 0 2px #f4efe6; }
.nametag.hanser { background: #ffd98a; box-shadow: 0 0 0 2px #ffd98a; }
.nametag.dayren { background: #ffb8cc; box-shadow: 0 0 0 2px #ffb8cc; }
.arrow { position: absolute; right: 22px; bottom: 10px; font-style: normal; font-size: 1rem; color: var(--glow); opacity: 0; }
.arrow.on { opacity: 1; animation: arrow 1s ease-in-out infinite; }
@keyframes arrow { 50% { transform: translateY(5px); } }
.end { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: 22px; background: radial-gradient(closest-side, rgba(7,10,32,.78), rgba(7,10,32,.35)); animation: fadein 1.4s ease both; }
.end p { margin: 0; font: italic 600 clamp(2.4rem, 9vw, 4rem)/1 var(--serif); text-shadow: 0 0 40px var(--glow-soft); }

/* Burbujas representativas sobre los personajes */
.bubble { opacity: 0; transform: translateY(8px) scale(.6); transform-origin: 50% 100%; transform-box: fill-box; transition: opacity .25s ease, transform .25s cubic-bezier(.3,1.6,.5,1); }
.say-hanser .b-hanser, .say-dayren .b-dayren { opacity: 1; transform: none; }
.dot { animation: dot 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dot.d2 { animation-delay: .18s; } .dot.d3 { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }

[hidden] { display: none !important; }