@font-face{font-family:'Caveat';font-weight:600;font-display:swap;src:url(fonts/caveat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-weight:700;font-display:swap;src:url(fonts/caveat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Marker';font-weight:400;font-display:swap;src:url(fonts/permanent-marker-latin-400-normal.woff2) format('woff2')}

:root{--ki:0;--rk:0;--ink:#1b2352;--gold:#ffd91a;--orange:#ff8a1a;--nav-h:84px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#050a24;color:var(--ink);font-family:'Caveat',cursive;overscroll-behavior:none}
html.js,html.js body{overflow:hidden}
body{position:fixed;inset:0;-webkit-text-size-adjust:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.emoji{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-weight:400}

/* ================= capas de fondo ================= */
#sky{position:fixed;inset:0;z-index:0;
  background:
   radial-gradient(ellipse 80% 55% at 50% 36%,rgba(255,210,60,calc(.16 + var(--ki)*.6)) 0,rgba(255,210,60,0) 70%),
   linear-gradient(180deg,#040820 0%,#0f1a5a 36%,#2a2a86 68%,#5a3a93 100%)}
#rays{position:fixed;z-index:1;left:50%;top:36%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,226,120,.34) 0deg 4deg,transparent 4deg 11deg,rgba(255,226,120,.2) 11deg 13deg,transparent 13deg 22deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 28%,transparent 56%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 28%,transparent 56%);
  opacity:calc(.4 + var(--ki)*.6);animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#fx{position:fixed;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}

.fl{position:fixed;top:0;bottom:0;width:min(30vw,150px);z-index:3;pointer-events:none}
.fl-l{left:0}
.fl-r{right:0;transform:scaleX(-1)}
.fl img{will-change:transform,scale;position:absolute;inset:0;width:100%;height:100%;transform-origin:0 50%;
  scale:calc(1 + var(--ki)*.75) 1;opacity:calc(.82 + var(--ki)*.18)}
.fl .f1{animation:fl1 1.1s ease-in-out infinite alternate}
.fl .f2{animation:fl2 .7s ease-in-out infinite alternate}
.fl .f3{animation:fl3 .5s ease-in-out infinite alternate}
@keyframes fl1{from{transform:scaleX(.9) translateY(-6px)}to{transform:scaleX(1.12) translateY(8px)}}
@keyframes fl2{from{transform:scaleX(1.08) translateY(8px)}to{transform:scaleX(.88) translateY(-5px)}}
@keyframes fl3{from{transform:scaleX(.9) translateY(-4px)}to{transform:scaleX(1.15) translateY(5px)}}

#mtn{position:fixed;left:0;right:0;bottom:0;width:100%;height:26vh;min-height:150px;max-height:300px;z-index:4;pointer-events:none}
#rocks{position:fixed;inset:0;z-index:5;pointer-events:none}
.rock{position:absolute;left:calc(var(--x) * 1%);bottom:calc(var(--b) * 1vh);width:var(--w);
  translate:0 calc(var(--rk) * var(--rise) * -1px);rotate:calc(var(--rk) * var(--rot) * 1deg)}
.rock svg{display:block;width:100%;height:auto;overflow:visible;animation:bob var(--bd,5s) ease-in-out var(--dl,0s) infinite alternate}
.rock .crack{opacity:calc(var(--ki) * 1.2);filter:none}
@keyframes bob{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-7px) rotate(1.5deg)}}
#bolts{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
#storm{position:fixed;inset:0;z-index:7;background:#02030c;opacity:0;pointer-events:none;transition:opacity .5s}
body.storm #storm{opacity:.62}
#flash{position:fixed;inset:0;z-index:60;background:radial-gradient(circle at 50% 45%,#fff 0,#fff6b0 35%,#ffd21a 70%);opacity:0;pointer-events:none}
#flash.go{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
body.shake #deck{animation:shake .5s linear}
@keyframes shake{0%,100%{translate:0 0}10%{translate:-8px 4px}25%{translate:7px -6px}40%{translate:-6px -3px}55%{translate:6px 5px}70%{translate:-4px 2px}85%{translate:3px -2px}}
.ring-fx{position:fixed;z-index:8;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none;
  border:4px solid #fff6b0;box-shadow:0 0 22px 6px rgba(255,210,60,.8),inset 0 0 18px rgba(255,210,60,.7);animation:ringfx .9s ease-out forwards}
@keyframes ringfx{from{transform:scale(.2);opacity:1}to{transform:scale(16);opacity:0}}

/* ================= slides ================= */
#deck{position:fixed;inset:0;z-index:10}
.slide{position:absolute;inset:0;visibility:hidden;opacity:0;pointer-events:none;
  transform:translateX(9%) scale(.98);
  transition:opacity .5s ease,transform .65s cubic-bezier(.2,.8,.2,1),visibility 0s .65s}
.slide.before{transform:translateX(-9%) scale(.98)}
.slide.active{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
.scroll{touch-action:pan-y;position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:max(64px,calc(env(safe-area-inset-top) + 58px)) 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px)}
.wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px;min-height:100%}
.cover .wrap{justify-content:center}

/* ---- título */
.title{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.wd{display:inline-block;white-space:nowrap}
.title .ch{display:inline-block;opacity:0;transform:translateY(40px) scale(.4) rotate(-12deg)}
.slide.in .wd{display:inline-block;white-space:nowrap}
.title .ch{animation:pop .7s cubic-bezier(.2,1.7,.4,1) both;animation-delay:calc(var(--d) * 42ms + .15s)}
@keyframes pop{0%{opacity:0;transform:translateY(40px) scale(.4) rotate(-12deg)}100%{opacity:1;transform:none}}
.t1{font-family:'Marker';font-size:clamp(32px,9.4vw,84px);line-height:1.04;color:var(--gold);letter-spacing:1px;
  -webkit-text-stroke:.13em #8a2a00;paint-order:stroke fill;stroke-linejoin:round;
  filter:drop-shadow(0 .06em 0 #4a1500)}
.t2{font-family:'Marker';font-size:clamp(26px,7.4vw,56px);line-height:1;color:#fff;
  -webkit-text-stroke:.14em #1a1f6a;paint-order:stroke fill;stroke-linejoin:round;
  display:flex;align-items:center;justify-content:center;gap:.28em;flex-wrap:wrap}
.t2 .ten{font-weight:400;font-size:2.7em;line-height:.8;color:#ff9a1a;-webkit-text-stroke:.1em #7a1d00;padding:0 .04em}
.slide.in .t2 .ten .ch{animation:pop .7s cubic-bezier(.2,1.7,.4,1) both,tenpulse 1.6s ease-in-out 1.4s infinite;animation-delay:.95s,1.9s}
@keyframes tenpulse{50%{transform:scale(1.12);filter:drop-shadow(0 0 14px #ffd21a)}}
.t3{font-family:'Caveat';font-weight:700;font-size:clamp(26px,7vw,48px);line-height:1.1;color:#fff4c8;margin-top:6px;text-shadow:0 2px 0 #1a1f6a,0 0 18px rgba(255,210,60,.7)}

/* ---- Goku / marcos */
.hero{position:relative;width:min(100%,640px);translate:calc(var(--sx,0) * 1px) calc(var(--sy,0) * 1px)}
.hero.small{width:min(100%,560px)}
.hero-aura{position:absolute;inset:-9%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,236,140,calc(.25 + var(--ki)*.7)) 0,rgba(255,190,40,calc(.12 + var(--ki)*.4)) 45%,rgba(255,190,40,0) 70%);
  scale:calc(1 + var(--ki)*.35)}
.gframe{position:relative;padding:6px;border-radius:18px;
  background:linear-gradient(135deg,#fff6a8 0%,#ffb300 38%,#ff6a00 68%,#ffd400 100%);
  box-shadow:0 0 0 3px #0b1030,0 0 calc(26px + var(--ki)*70px) calc(6px + var(--ki)*26px) rgba(255,200,40,calc(.45 + var(--ki)*.5)),0 12px 30px rgba(0,0,0,.55);
  animation:float 5.5s ease-in-out infinite}
.gframe img{display:block;width:100%;height:auto;border-radius:13px;background:#0b1030}
@keyframes float{50%{translate:0 -7px}}
.gframe.power{animation:power .7s ease-out}
@keyframes power{0%{scale:1;filter:brightness(1)}25%{scale:1.07;filter:brightness(1.6)}100%{scale:1;filter:brightness(1)}}
#gokuGold{cursor:pointer}
.tap-ring{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:3px solid #fff;
  box-shadow:0 0 14px 3px rgba(255,255,255,.8);animation:tapring 1.8s ease-out infinite;pointer-events:none}
@keyframes tapring{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.7);opacity:0}}
.tilt{transition:transform .2s ease-out;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ---- botón de cargar ki */
.charge-zone{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
#charge{position:relative;width:128px;height:128px;border-radius:50%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  animation:idle 1.8s ease-in-out infinite;outline-offset:8px}
#charge.hold{animation:none;scale:calc(1 + var(--ki)*.18)}
@keyframes idle{50%{scale:1.07}}
#charge .core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fffbd0 0,#ffc83a 48%,#ff6a00 100%);
  box-shadow:0 0 calc(20px + var(--ki)*60px) calc(2px + var(--ki)*18px) rgba(255,200,40,calc(.55 + var(--ki)*.45)),inset 0 -8px 16px rgba(160,50,0,.4)}
#charge .ring{position:absolute;inset:-12px;border-radius:50%;
  background:conic-gradient(#fff 0 calc(var(--ki) * 360deg),rgba(255,255,255,.2) 0);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%)}
#charge .lbl{position:relative;z-index:2;font-family:'Marker';font-size:20px;line-height:1.05;color:#5a1c00;text-shadow:0 1px 0 rgba(255,255,255,.55);pointer-events:none}
.hint{font-weight:700;font-size:24px;color:#fff4c8;text-shadow:0 0 12px rgba(255,210,60,.8);opacity:.9}

/* ---- hoja de la carta */
.paper{position:relative;width:100%;padding:clamp(22px,5vw,38px) clamp(20px,5.5vw,40px);border-radius:20px;
  background:radial-gradient(ellipse at 50% 35%,#fffaea 0%,#fff2cc 70%,#ffe9b3 100%);
  box-shadow:0 0 0 4px #ffc400,0 0 0 8px #14206a,0 0 30px 10px rgba(255,200,40,.5),0 14px 30px rgba(0,0,0,.5);
  opacity:0;transform:translateY(24px) scale(.97)}
.slide.in .paper{animation:paper .8s cubic-bezier(.2,.9,.3,1) .1s forwards}
@keyframes paper{to{opacity:1;transform:none}}
.paper::after{content:"";position:absolute;inset:9px;border:2px dashed rgba(214,150,40,.55);border-radius:14px;pointer-events:none}
.letter{position:relative;z-index:2;font-weight:600;color:var(--ink);font-size:clamp(23px,6.1vw,31px);line-height:1.3}
.letter p{margin:0 0 .5em}
.letter p:last-child{margin-bottom:0}
.hello{font-weight:700;font-size:1.55em;line-height:1.05;color:#d4400a;margin-bottom:.05em!important}
.felices{font-weight:700;font-size:1.17em;line-height:1.15;margin-bottom:.45em!important}
.hl{background:linear-gradient(transparent 52%,#ffd24a 52%,#ffd24a 92%,transparent 92%);padding:0 2px}
.tq{font-weight:700;font-size:1.4em;line-height:1.1;color:#d4400a;margin-top:.45em!important}
.conamor{font-weight:700;font-size:1.28em;line-height:1.1;margin-top:.5em!important}
.papa{font-weight:700;font-size:2.1em;line-height:1.05;color:#d4400a;margin-top:.05em!important;rotate:-2.5deg;transform-origin:left center}
#heart{display:inline-block;cursor:pointer;animation:beat 1.3s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.22)}28%{transform:scale(1)}42%{transform:scale(1.15)}}

/* palabra por palabra */
html.js .w{display:inline-block;opacity:0;transform:translateY(.35em) scale(.9);filter:blur(4px)}
html.js .slide.in .w{animation:word .5s ease-out both;animation-delay:calc(var(--i) * 26ms + .55s)}
html.js .slide.instant .w{animation-duration:.01s;animation-delay:0s}
@keyframes word{to{opacity:1;transform:none;filter:none}}

/* ---- fotos */
.pile{position:relative;width:min(100%,520px);height:min(92vw,470px);margin-top:4px}
.polaroid{position:absolute;background:#fffdf4;padding:10px 10px 32px;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 0 2px rgba(255,214,90,.9);transition:transform .25s ease-out,z-index 0s}
.polaroid img{display:block;width:100%;height:auto}
.polaroid::before{content:"";position:absolute;top:-13px;left:50%;width:34%;height:26px;margin-left:-17%;
  background:rgba(255,205,70,.82);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.p-a{left:0;top:0;width:76%;--r:-4deg;rotate:-4deg;z-index:1;animation:sway 6s ease-in-out infinite alternate}
.p-b{right:0;bottom:0;width:72%;--r:3.5deg;rotate:3.5deg;z-index:2;animation:sway 7s ease-in-out 1s infinite alternate-reverse}
@keyframes sway{from{translate:0 0}to{translate:0 -6px}}
.polaroid:hover,.polaroid:focus-visible{z-index:5;scale:1.04;outline:none}

/* ---- cierre */
.fin-top{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.dragon{position:relative;width:min(58vw,250px);cursor:pointer;animation:drift 7s ease-in-out infinite;outline-offset:6px}
.dragon-back{position:absolute;inset:-16% -34%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(2,3,14,.95) 0,rgba(2,3,14,.85) 42%,rgba(2,3,14,0) 72%)}
.dragon img{position:relative;display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 calc(10px + var(--ki)*20px) rgba(120,255,120,.35))}
html.wave .slide.active .dragon img{filter:url(#wave) drop-shadow(0 0 12px rgba(120,255,120,.35))}
@keyframes drift{0%,100%{translate:0 0;rotate:-1.5deg}50%{translate:0 -14px;rotate:1.5deg}}
.dragon.roar{animation:roar .9s ease-in-out}
@keyframes roar{0%{scale:1}15%{scale:1.14;rotate:-3deg}30%{scale:1.08;rotate:3deg}50%{scale:1.16;rotate:-2deg}100%{scale:1}}
.final-paper .letter{font-size:clamp(25px,6.6vw,33px)}
.fin-bottom{display:flex;align-items:center;justify-content:center;gap:clamp(14px,6vw,40px);width:100%;margin-top:6px;flex-wrap:wrap}
.p-c{position:relative;width:min(44vw,210px);rotate:2.4deg;flex:none;animation:sway 6.5s ease-in-out infinite alternate}
.big10{font-family:'Marker';font-size:clamp(110px,34vw,230px);line-height:.9;color:var(--gold);letter-spacing:-.04em;cursor:pointer;user-select:none;
  -webkit-text-stroke:.07em #8a2a00;paint-order:stroke fill;stroke-linejoin:round;
  filter:drop-shadow(0 .05em 0 #4a1500) drop-shadow(0 0 18px rgba(255,200,40,.6));animation:tenpulse 1.8s ease-in-out infinite;outline-offset:6px}
.big10:active{scale:.94}
.restart{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;margin-top:6px;
  font-weight:700;font-size:23px;color:#fff4c8;background:rgba(10,16,70,.7);box-shadow:0 0 0 2px rgba(255,214,90,.8),0 0 18px rgba(255,200,40,.35)}

/* ---- navegación */
#nav{position:fixed;z-index:30;left:50%;bottom:max(14px,env(safe-area-inset-bottom));translate:-50% 0;display:flex;align-items:center;gap:16px;
  padding:8px 14px;border-radius:999px;background:rgba(6,10,50,.72);box-shadow:0 0 0 2px rgba(255,214,90,.7),0 8px 24px rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nb{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#5a1c00;
  background:radial-gradient(circle at 35% 30%,#fff7b0,#ffb300 60%,#ff7a00);box-shadow:0 0 14px rgba(255,200,40,.6);transition:scale .15s,opacity .2s}
.nb:active{scale:.9}
.nb[disabled]{opacity:.25;pointer-events:none}
#dots{display:flex;gap:12px;align-items:center}
#dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.28);transition:all .3s}
#dots i.on{background:radial-gradient(circle,#fff 0,#ffd21a 60%);box-shadow:0 0 12px 4px rgba(255,210,60,.85);scale:1.45}
#snd{position:fixed;z-index:30;top:max(12px,env(safe-area-inset-top));right:12px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff4c8;background:rgba(6,10,50,.7);box-shadow:0 0 0 2px rgba(255,214,90,.7)}
#snd .off{display:none}
#snd[aria-pressed="false"] .on{display:none}
#snd[aria-pressed="false"] .off{display:block}

/* ---- visor de fotos */
#lb{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(2,3,14,.88);padding:18px;cursor:zoom-out}
#lb[hidden]{display:none}
#lb img{max-width:min(94vw,900px);max-height:88vh;border:10px solid #fffdf4;border-bottom-width:30px;box-shadow:0 0 0 3px #ffd21a,0 0 50px rgba(255,200,40,.5);animation:lbin .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes lbin{from{transform:scale(.6) rotate(-4deg);opacity:0}}

.heart-fx{position:fixed;z-index:65;font-size:30px;pointer-events:none;animation:heartup 2s ease-out forwards}
@keyframes heartup{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--dx),-70vh) scale(1.3) rotate(var(--rt));opacity:0}}

@media (min-width:760px){
  .fin-top{flex-direction:row;align-items:center;gap:22px}
  .dragon{flex:none;width:250px}
  .final-paper{flex:1}
  .pile{height:430px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #rays{animation:none}
}
@media (max-height:640px){.hint{display:none}}

@media (min-width:900px) and (min-aspect-ratio:4/3){
  .cover .wrap{max-width:1120px;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"title hero" "charge hero";
    align-content:center;align-items:center;column-gap:40px;row-gap:14px}
  .cover .title{grid-area:title}
  .cover .hero{grid-area:hero;width:100%}
  .cover .charge-zone{grid-area:charge}
  .cover .t1{font-size:clamp(34px,4.4vw,64px)}
  .cover .t2{font-size:clamp(26px,3.4vw,46px)}
  .cover .t3{font-size:clamp(26px,3vw,42px)}
}