/* 1rem = 1% del ancho del escenario (lo calcula main.js) */
:root{--ink:#22204f;--navy:#141a45;--sun:#ffd23f;--mint:#2fcf8b;--red:#ff5d6c;--sky:#4cc9f0}
html{font-size:10px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
html,body{margin:0;height:100%;overflow:hidden;background:var(--navy);overscroll-behavior:none;
  font-family:'Andika','Comic Neue','Comic Sans MS','Chalkboard SE','Trebuchet MS',sans-serif;color:var(--ink)}
button{font:inherit;color:inherit;border:0;cursor:pointer;padding:0}
.screen{position:fixed;inset:0;display:none;overflow:hidden}
.screen.active{display:flex}
.emoji,.em,.ico{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}

/* ---------- fondo de estrellas ---------- */
.stars-bg{position:absolute;inset:0;background:linear-gradient(#0d1033,#2d2a73 65%,#5a3f9a);}
.stars-bg::before,.stars-bg::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(2px 2px at 10% 20%,#fff,transparent),radial-gradient(2px 2px at 30% 60%,#fff,transparent),
  radial-gradient(3px 3px at 55% 15%,#ffe9a3,transparent),radial-gradient(2px 2px at 75% 40%,#fff,transparent),
  radial-gradient(2px 2px at 90% 25%,#fff,transparent),radial-gradient(3px 3px at 20% 85%,#ffe9a3,transparent),
  radial-gradient(2px 2px at 65% 80%,#fff,transparent),radial-gradient(2px 2px at 45% 40%,#fff,transparent);
  animation:tw 3s ease-in-out infinite alternate}
.stars-bg::after{transform:translate(4%,3%) scale(1.1);animation-delay:1.5s;opacity:.7}
@keyframes tw{from{opacity:.35}to{opacity:1}}

/* ---------- botones ---------- */
.big{font-size:4.2rem;font-weight:700;padding:1.4rem 4rem;border-radius:5rem;background:var(--sun);color:var(--ink);
  box-shadow:0 .8rem 0 #d29a00;transition:transform .1s}
.big:active{transform:translateY(.5rem);box-shadow:0 .3rem 0 #d29a00}
.big.ok{background:var(--mint);box-shadow:0 .8rem 0 #14976a;color:#fff}
.big.no{background:#fff;box-shadow:0 .8rem 0 #b9b9d6}
.rb{width:7.4rem;height:7.4rem;border-radius:50%;background:#fff;border:.4rem solid var(--ink);font-size:3.8rem;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 .5rem 0 rgba(0,0,0,.25);flex:none}
.rb:active{transform:translateY(.3rem)}
.rb.hintb{background:var(--sun)}
.rb.go{width:9.4rem;height:9.4rem;background:var(--mint);color:#fff;font-size:4.6rem;animation:pulse .8s ease-in-out infinite alternate}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.1)}}

/* ---------- portada ---------- */
#title{align-items:center;justify-content:center;gap:7rem}
.moon{position:absolute;right:3%;top:3%;font-size:7rem;filter:drop-shadow(0 0 3rem rgba(255,240,170,.7));animation:float 5s ease-in-out infinite alternate}
.skyline{position:absolute;left:0;right:0;bottom:0;font-size:9rem;letter-spacing:.5rem;white-space:nowrap;text-align:center;opacity:.55;filter:brightness(.45) saturate(.7)}
.t-det{height:74vh;aspect-ratio:118/172;position:relative;z-index:2;animation:float 3s ease-in-out infinite alternate}
.t-det svg,.detsvg{width:100%;height:100%;overflow:visible}
.t-box{position:relative;z-index:2;text-align:center;color:#fff}
.kicker{font-size:3.6rem;margin:0;color:var(--sun);font-weight:700}
.t-box h1{font-size:min(10rem,17vh);margin:0;line-height:1;color:#fff;text-shadow:0 .6rem 0 #3b2f86,0 1.4rem 3rem rgba(0,0,0,.5);letter-spacing:.2rem}
.sub{font-size:3.4rem;margin:1.6rem 0 3.4rem;max-width:50rem}
.fs{position:absolute;right:2rem;bottom:2rem;width:7rem;height:7rem;border-radius:50%;background:#ffffff33;color:#fff;font-size:4rem;z-index:3}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-1.6rem)}}

/* ---------- menú ---------- */
#menu{flex-direction:column;align-items:center;padding:1.4rem 3rem;gap:1rem;overflow-y:auto}
#menu header{position:relative;z-index:1;display:flex;align-items:center;gap:2rem}
#menu h2{font-size:min(6rem,9vh);margin:0;color:#fff;text-shadow:0 .5rem 0 #3b2f86}
#cards{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:1.8rem 2.4rem;width:100%;max-width:150vh;padding-bottom:2rem}
.card{position:relative;width:29rem;border-radius:3.4rem;background:var(--c,#6c63ff);color:#fff;padding:1.2rem 1.4rem 1.4rem;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;box-shadow:0 1rem 0 rgba(0,0,0,.28),inset 0 .5rem 0 rgba(255,255,255,.25);transition:transform .12s}
.card:active{transform:translateY(.7rem) scale(.98)}
.card .ico{font-size:6.6rem;line-height:1.05;filter:drop-shadow(0 .5rem .4rem rgba(0,0,0,.3))}
.card .nm{font-size:2.7rem;font-weight:700;text-align:center;line-height:1.1;min-height:5.6rem;display:flex;align-items:center}
.card .lv{font-size:2.6rem;letter-spacing:.2rem}
.card .st{font-size:3.2rem;letter-spacing:.2rem;background:#00000033;border-radius:3rem;padding:.2rem 1.4rem}
.card .say{position:absolute;right:1rem;top:1rem;width:6rem;height:6rem;border-radius:50%;background:#fff;color:var(--ink);font-size:3rem;display:flex;align-items:center;justify-content:center}
.card .done{position:absolute;left:1.2rem;top:1rem;font-size:4rem}

/* ---------- escenario ---------- */
#game{align-items:center;justify-content:center;background:#0b0e2e}
#stage{position:relative;width:100rem;height:56.25rem;overflow:hidden;background:#000;font-size:1rem}
#sky,#ground,#sea,#hills,#decor,#hsl{position:absolute;left:0;right:0}
#sky{top:0;z-index:1}
#sky.wall{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 3rem,transparent 3rem 6rem)!important}
#sea{z-index:1;background:linear-gradient(#4cc3f0,#1b8ed1);display:none}
#hills{position:absolute;top:0;bottom:0;z-index:2;pointer-events:none}
.hill{position:absolute;border-radius:50% 50% 0 0/100% 100% 0 0}
#ground{bottom:0;z-index:3;box-shadow:inset 0 .7rem 0 rgba(0,0,0,.12)}
#ground::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 3rem,transparent 3rem 6rem)}
#decor,#hsl{top:0;bottom:0;pointer-events:none}
.star{position:absolute;width:.5rem;height:.5rem;border-radius:50%;background:#fff;animation:tw 2s ease-in-out infinite alternate}
.decor{position:absolute;transform:translate(-50%,-100%);line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  filter:drop-shadow(0 .6rem .5rem rgba(0,0,0,.22))}
.decor.sway{animation:sway 3s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes sway{from{transform:translate(-50%,-100%) rotate(-2deg)}to{transform:translate(-50%,-100%) rotate(2deg)}}

/* puntos tocables */
.hs{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;cursor:pointer;pointer-events:auto;padding:.8rem 1.4rem}
.hs .em{font-size:calc(var(--s)*1rem);line-height:1.05;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  filter:drop-shadow(0 .5rem .4rem rgba(0,0,0,.35));transition:transform .15s}
.hs:active .em{transform:scale(1.18)}
.hs .lb{margin-top:.2rem;background:#fff;color:var(--ink);font-weight:700;font-size:2.5rem;line-height:1.1;padding:.3rem 1.3rem;border-radius:2rem;border:.28rem solid var(--ink);white-space:nowrap}
.hs.new::after{content:"✨";position:absolute;top:-.5rem;right:-.2rem;font-size:3.6rem;animation:tw .7s ease-in-out infinite alternate;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.hs.exit{z-index:120!important}
.hs.exit .em{background:#fff;border:.5rem solid var(--ink);border-radius:50%;padding:.6rem;font-size:4.4rem;box-shadow:0 .5rem 0 rgba(0,0,0,.3);animation:pulse 1s ease-in-out infinite alternate}
.hs.exit .lb{background:var(--sun);font-size:2.2rem}
.hs.hint .em{animation:pulse .5s ease-in-out infinite alternate}
.hs.hint::before{content:"";position:absolute;left:50%;top:40%;width:calc(var(--s)*1.5rem + 6rem);height:calc(var(--s)*1.5rem + 6rem);transform:translate(-50%,-50%);
  border-radius:50%;border:.8rem dashed var(--sun);background:rgba(255,230,100,.25);animation:spin 2.5s linear infinite;pointer-events:none}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* detective */
#det{position:absolute;top:80%;left:30%;width:15rem;height:22.2rem;transform:translate(-50%,-100%);z-index:90;transition:left linear 0s;pointer-events:none}
#det .flipper{width:100%;height:100%;transition:transform .15s}
#det .bob{width:100%;height:100%;animation:idle 2.4s ease-in-out infinite alternate}
#det.walking .bob{animation:hop .36s ease-in-out infinite alternate}
@keyframes idle{from{transform:translateY(0)}to{transform:translateY(-.5rem)}}
@keyframes hop{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-1.4rem) rotate(2deg)}}
.legL,.legR,.armL,.armR{transform-box:fill-box;transform-origin:50% 0}
#det.walking .legL{animation:swing .36s ease-in-out infinite alternate}
#det.walking .legR{animation:swing .36s ease-in-out infinite alternate-reverse}
#det.walking .armL{animation:swing2 .36s ease-in-out infinite alternate}
#det.walking .armR{animation:swing2 .36s ease-in-out infinite alternate-reverse}
@keyframes swing{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes swing2{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
/* oscuridad con linterna */
.lamp{position:absolute;left:50%;top:42%;width:16rem;height:16rem;margin:-8rem 0 0 -8rem;border-radius:50%;display:none;pointer-events:none;
  box-shadow:0 0 0 160rem rgba(6,6,28,.93);transition:width .4s,height .4s,margin .4s}
#det.dark .lamp{display:block}
#det.dark.lit .lamp{width:46rem;height:46rem;margin:-23rem 0 0 -23rem;box-shadow:0 0 5rem 3rem rgba(6,6,28,.5),0 0 0 160rem rgba(6,6,28,.93)}

/* interfaz */
#hud{position:absolute;left:1.6rem;right:1.6rem;top:1.4rem;z-index:200;display:flex;align-items:center;gap:1.4rem}
#obj{flex:1;min-width:0;display:flex;align-items:center;gap:1.2rem;background:#fff;border:.4rem solid var(--ink);border-radius:4rem;padding:.9rem 2rem;
  font-weight:700;font-size:2.6rem;line-height:1.1;box-shadow:0 .5rem 0 rgba(0,0,0,.25);cursor:pointer}
#obj .olab{font-size:3.4rem}
#otxt{flex:1}
#odir{background:var(--sun);border-radius:3rem;padding:.4rem 1.6rem;white-space:nowrap;font-size:2.8rem}
#odir:empty{display:none}
#obj.flash{animation:flash .9s ease-out}
@keyframes flash{0%{transform:scale(1.07);background:#fff3a0}100%{transform:scale(1);background:#fff}}
#inv{position:absolute;right:1.6rem;top:11rem;z-index:200;display:flex;flex-direction:row;gap:1rem;pointer-events:none}
.slot{width:10.4rem;background:#fff;border:.35rem solid var(--ink);border-radius:2rem;text-align:center;padding:.4rem 0 .5rem;animation:pop .4s}
.slot span{display:block;font-size:5.4rem;line-height:1.1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.slot small{display:block;font-size:2rem;font-weight:700}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}

#dialog{position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:210;display:none;align-items:center;gap:2rem;background:#fffdf5;
  border:.5rem solid var(--ink);border-radius:4rem;padding:1.6rem 2.2rem;box-shadow:0 .8rem 0 rgba(0,0,0,.3)}
#dialog.on{display:flex;animation:up .25s ease-out}
@keyframes up{from{transform:translateY(8rem);opacity:0}to{transform:none;opacity:1}}
#portrait{flex:none;width:13rem;height:13rem;border-radius:50%;background:#bfe9ff;border:.4rem solid var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center}
#portrait svg{width:130%;height:130%;margin-top:1rem}
#portrait span{font-size:8.4rem;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.dbody{flex:1;min-width:0}
#dname{display:inline-block;background:var(--ink);color:#fff;font-weight:700;font-size:2.3rem;padding:.2rem 1.6rem;border-radius:2rem;margin-bottom:.8rem}
#dtext{font-size:3.7rem;font-weight:700;line-height:1.3}
#dtext .w{border-radius:.8rem;transition:background .1s}
#dtext .w.on{background:#ffe066}
.dbtns{display:flex;flex-direction:column;gap:1.2rem;align-items:center}

#pop{position:absolute;inset:0;z-index:220;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;pointer-events:none;background:rgba(20,26,69,.55)}
#pop.on{display:flex}
#pop .pe{font-size:24rem;line-height:1;animation:bigpop .6s ease-out;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;filter:drop-shadow(0 1rem 2rem rgba(0,0,0,.5))}
#pop .pt{background:#fff;border:.5rem solid var(--ink);border-radius:4rem;padding:1.2rem 4rem;font-size:4.6rem;font-weight:700}
@keyframes bigpop{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
#fade{position:absolute;inset:0;background:#0d1033;z-index:190;opacity:0;pointer-events:none;transition:opacity .28s}
#fade.on{opacity:1}

#ask,#win{position:absolute;inset:0;z-index:240;display:none;align-items:center;justify-content:center;background:rgba(13,16,51,.78)}
#ask.on,#win.on{display:flex}
#win{z-index:250;overflow:hidden}
.box{background:#fff;border:.6rem solid var(--ink);border-radius:5rem;padding:2rem 6rem;text-align:center;position:relative;z-index:2;animation:bigpop .5s}
.box p{font-size:4.4rem;font-weight:700;margin:0 0 2rem}
.box h2{font-size:5rem;margin:0}
.row{display:flex;gap:3rem;justify-content:center}
.medal{font-size:9rem;line-height:1.1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;animation:float 1.2s ease-in-out infinite alternate}
#winStars{font-size:6rem;letter-spacing:1rem;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
#winText{margin:.2rem 0 1.4rem!important;font-size:3rem!important}
#confetti span{position:absolute;top:-12rem;font-size:5rem;animation:fall linear forwards;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
@keyframes fall{to{transform:translateY(80rem) rotate(540deg)}}

/* girar la tablet */
#rotate{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;background:var(--navy);color:#fff;text-align:center;font-size:7vw;font-weight:700;line-height:1.3}
#rotate small{font-size:4.6vw;font-weight:400}
@media (orientation:portrait) and (max-aspect-ratio:4/5){#rotate{display:flex}}

/* ---------- jugo, poderes, colores ---------- */
#sky,#sea,#hills,#ground,#decor{filter:grayscale(var(--gray,0));transition:filter 1.4s}
#decor{z-index:4}
#juice{position:absolute;left:1.6rem;top:12rem;z-index:205;display:none;flex-direction:column;align-items:center;gap:.3rem;width:10rem;padding:.7rem 0 .6rem;
  background:#fff;border:.4rem solid var(--ink);border-radius:2.4rem;box-shadow:0 .5rem 0 rgba(0,0,0,.25)}
#juice .jorange{font-size:4.2rem;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
#juice small{font-size:2.2rem;font-weight:700}
.glass{position:relative;display:block;width:5.4rem;height:9rem;border:.4rem solid var(--ink);border-radius:.8rem .8rem 2.2rem 2.2rem;background:#e6f4ff;overflow:hidden}
.fill{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(#ffb02e,#ff7a00);transition:height .25s}
#juice.low{animation:pulse .5s ease-in-out infinite alternate;background:#ffe3e3}
#juice.power{background:#fff3a8;box-shadow:0 0 3rem 1rem #ffd23f}
#juice.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-.8rem)}40%,80%{transform:translateX(.8rem)}}
#pal{position:absolute;left:50%;transform:translateX(-50%);top:12rem;z-index:200;display:none;gap:2rem;pointer-events:none}
.pc{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.pdot{display:block;width:4.8rem;height:4.8rem;border-radius:50%;background:#cfcfdc;border:.4rem solid var(--ink)}
.pdot.on{background:var(--c);animation:pop .5s}
.pc b{font-size:1.9rem;color:#fff;text-shadow:0 .2rem .4rem rgba(0,0,0,.6);min-height:2.4rem}
#race{position:absolute;left:50%;transform:translateX(-50%);top:24rem;z-index:230;width:50rem;display:none;text-align:center}
#race.on{display:block}
.rtxt{font-size:4.6rem;font-weight:700;color:#fff;text-shadow:0 .4rem 0 #d12f2f,0 0 2rem rgba(0,0,0,.5);animation:pulse .3s infinite alternate}
.rbar{height:3.4rem;border-radius:2rem;background:#fff;border:.4rem solid var(--ink);overflow:hidden}
.rbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3d3d,#ffb02e)}
#toast{position:absolute;left:50%;top:34%;transform:translate(-50%,-1rem);z-index:230;background:#fff;border:.5rem solid var(--ink);border-radius:4rem;padding:1rem 3rem;
  font-size:3.6rem;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* súper poder: resplandor y músculos */
.aura{position:absolute;left:50%;top:50%;width:36rem;height:36rem;margin:-18rem 0 0 -18rem;border-radius:50%;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle,rgba(255,240,130,.95) 0,rgba(255,190,50,.55) 35%,rgba(255,150,0,0) 70%)}
#det.power .aura{opacity:1;animation:aura .45s ease-in-out infinite alternate}
@keyframes aura{from{transform:scale(.88)}to{transform:scale(1.12)}}
#det.power .bob{filter:drop-shadow(0 0 1rem #ffe14d) drop-shadow(0 0 2.6rem #ff9f1c)}
#det{transition:left linear 0s,width .3s,height .3s}
#det.power{width:17.5rem;height:25.9rem}
.torso,.armLw,.armRw{transform-box:fill-box;transition:transform .3s}
.torso{transform-origin:50% 50%}
.musc{transform-box:fill-box;transform-origin:50% 0;transition:transform .3s}
#det.power .torso{transform:scale(1.22,1.04)}
#det.power .musc{transform:scale(1.55,1.06)}
#det.power .armLw{transform:translateX(-6px)}
#det.power .armRw{transform:translateX(6px)}
.bic{display:none;transform-box:fill-box;transform-origin:center}
#det.power .bic{display:inline;animation:flex .5s ease-out}
@keyframes flex{from{transform:scale(0)}60%{transform:scale(1.45)}to{transform:scale(1)}}
#det.power.walking .bob{animation-duration:.2s}
#det.power.walking .legL,#det.power.walking .legR,#det.power.walking .armL,#det.power.walking .armR{animation-duration:.2s}
.burst{position:absolute;left:50%;top:45%;pointer-events:none}
.burst span{position:absolute;font-size:5rem;opacity:0;animation:burst .9s ease-out;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.3)}}

/* Tripa Seca corre de un lado a otro */
.hs .svgw{display:block;width:calc(var(--s)*.47rem);height:calc(var(--s)*1rem);font-size:0}
.hs .svgw svg{width:100%;height:100%;overflow:visible}
.hs.run{animation:runx 2.8s ease-in-out infinite alternate}
.hs.run .svgw{animation:flipx 5.6s steps(1) infinite}
@keyframes runx{from{margin-left:-22rem}to{margin-left:22rem}}
@keyframes flipx{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
.card .new{position:absolute;left:-.8rem;top:-1rem;background:#ff3d71;color:#fff;font-size:2.3rem;font-weight:700;padding:.2rem 1.4rem;border-radius:2rem;transform:rotate(-8deg);z-index:2;box-shadow:0 .4rem 0 rgba(0,0,0,.25)}