@font-face{font-family:Fredoka;src:url(fonts/Fredoka.ttf) format('truetype');font-weight:300 700;font-display:swap}
:root{--ink:#2b2140;--cream:#fffaf0;--gold:#ffcf3f;--gold-d:#c98a0b;--green:#7bd84a}
html,body{margin:0;height:100%;overflow:hidden;background:#92d54a;font-family:Fredoka,system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;color:#fff}
canvas{display:block;width:100vw;height:100vh}
.ic{height:1.25em;width:auto;max-width:1.6em;object-fit:contain;vertical-align:-0.3em}

/* ===== HUD ===== */
#hud{position:fixed;top:0;left:0;right:0;padding:calc(8px + env(safe-area-inset-top)) 10px 0;pointer-events:none;display:none}
#xpwrap{display:flex;align-items:center;gap:6px}
#lvbadge{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c4,var(--gold) 55%,var(--gold-d));color:var(--ink);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #0004,inset 0 -3px 0 #0002;border:2px solid #fff}
#xpbar{flex:1;height:14px;border-radius:9px;background:#0005;border:2px solid #fffc;overflow:hidden;box-shadow:0 2px 0 #0003}
#xpfill{height:100%;width:0;border-radius:7px;background:linear-gradient(180deg,#d9ff9a,#7bd84a 55%,#4fae2c);box-shadow:inset 0 2px 0 #fff8;transition:width .15s}
#row{display:flex;gap:6px;margin-top:7px;justify-content:space-between}
.pill{background:#2b214099;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1.5px solid #ffffff40;border-radius:999px;padding:3px 10px;font-weight:600;font-size:14px;white-space:nowrap;display:flex;align-items:center;gap:5px}
.pill b{color:var(--gold)}
#goalwrap{margin-top:6px;height:8px;border-radius:6px;background:#0004;overflow:hidden}
#goalfill{height:100%;width:0;background:linear-gradient(90deg,#ffe27a,#ffb02e);transition:width .2s}
#goalwrap.done #goalfill{background:linear-gradient(90deg,#9cff6a,#3fd06a)}
#weps{margin-top:6px;display:flex;gap:5px}
#weps span{background:#2b214080;border-radius:10px;padding:2px 6px 2px 3px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:2px}
#weps .ic{height:22px}
#bossbar{display:none;margin:8px auto 0;width:min(320px,80vw);text-align:center;font-weight:700;font-size:13px;letter-spacing:1px;text-shadow:0 2px 0 #0006}
#bossbar div{height:10px;border-radius:6px;background:#0006;border:2px solid #fff;overflow:hidden;margin-top:2px}
#bossbar i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#ff8a8a,#e5304a)}
#toast{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%);font-weight:700;font-size:24px;text-align:center;pointer-events:none;text-shadow:0 3px 0 #0007,0 0 18px #0005;opacity:0;white-space:nowrap}
#toast.show{animation:toast 2.2s ease-out}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}

/* ===== Overlays ===== */
.overlay{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;background:radial-gradient(ellipse at center,#2b214099,#140c22e6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.overlay.on{display:flex;animation:fadein .25s}
@keyframes fadein{from{opacity:0}}
.overlay h1{margin:0;font-size:44px;font-weight:700;line-height:1;color:#fff;text-shadow:0 4px 0 #6b3fa0,0 8px 18px #0006}
.overlay h2{margin:0;font-size:30px;font-weight:700;text-shadow:0 3px 0 #0006}
.overlay p{margin:0;font-size:17px;opacity:.92;line-height:1.35}
.big{font-family:inherit;font-size:24px;font-weight:700;padding:14px 44px;border-radius:999px;border:none;background:linear-gradient(180deg,#ffe680,var(--gold));color:var(--ink);box-shadow:0 6px 0 var(--gold-d),0 10px 20px #0005;transition:transform .08s,box-shadow .08s;letter-spacing:.5px}
.big:active{transform:translateY(5px);box-shadow:0 1px 0 var(--gold-d),0 4px 10px #0005}
.small{font-family:inherit;font-size:15px;font-weight:600;padding:8px 22px;border-radius:999px;border:2px solid #fff8;background:transparent;color:#fff}
.franAnim{width:69px;height:120px;background:url(images/fran_walk.png) 0 0/276px 120px no-repeat;animation:walk .6s steps(4) infinite,bounce .3s ease-in-out infinite alternate;filter:drop-shadow(0 6px 4px #0005)}
@keyframes walk{to{background-position:-276px 0}}
@keyframes bounce{to{transform:translateY(-4px)}}
.title{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.stat{display:flex;gap:10px;justify-content:center}
.stat div{background:#ffffff1a;border-radius:14px;padding:8px 14px;min-width:70px}
.stat b{display:block;font-size:22px;color:var(--gold)}
.stat small{font-size:12px;opacity:.8}

/* level-up cards */
#choices{display:flex;flex-direction:column;gap:10px}
.card{position:relative;width:min(340px,88vw);background:var(--cream);color:var(--ink);border-radius:18px;padding:12px 14px 12px 70px;font-size:14px;border:none;text-align:left;font-family:inherit;box-shadow:0 5px 0 #c9b98f,0 10px 18px #0004;opacity:0;animation:cardin .45s cubic-bezier(.3,1.5,.5,1) forwards;transition:transform .08s}
.card:active{transform:translateY(4px)}
.card b{display:block;font-size:18px;font-weight:700;margin-bottom:1px}
.card .cic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:12px;background:#f1e6c8;display:flex;align-items:center;justify-content:center}
.card .cic img{max-width:38px;max-height:38px}
.card.ad{background:linear-gradient(135deg,#fff4c2,#ffe07a);box-shadow:0 5px 0 #c98a0b,0 10px 18px #0004}
.card .tag{position:absolute;right:10px;top:-9px;background:#e5304a;color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;box-shadow:0 2px 0 #0003}
.card .new{color:#3d9a1e;font-weight:700}
@keyframes cardin{from{opacity:0;transform:translateY(30px) scale(.8)}to{opacity:1;transform:none}}
#adfake{position:fixed;inset:0;background:#000;display:none;align-items:center;justify-content:center;font-size:22px;z-index:500}

/* ===== Pause button (HUD) ===== */
.pause-btn{pointer-events:auto;flex:none;width:34px;height:34px;border-radius:50%;border:2px solid #fffc;background:#2b214099;display:flex;align-items:center;justify-content:center;gap:4px;padding:0;box-shadow:0 2px 0 #0003}
.pause-btn span{display:block;width:4px;height:13px;border-radius:2px;background:#fff}
.pause-btn:active{transform:translateY(2px)}
.menu-level{font-weight:700;font-size:20px;color:var(--gold)}
#menu .big,#win .big,#over .big{display:flex;flex-direction:column;align-items:center;min-width:250px;line-height:1.15}
.btn-sub{font-size:13px;font-weight:600;opacity:.75;letter-spacing:0}
.btn-sub:empty{display:none}
.big.green{background:linear-gradient(180deg,#c9f58a,#7bd84a);box-shadow:0 6px 0 #3f9a22,0 10px 20px #0005}
.big.green:active{box-shadow:0 1px 0 #3f9a22,0 4px 10px #0005}
.setting-value{font-size:15px;font-weight:600;color:#7bb342}
.small .ic{height:1.1em}

/* ===== Settings & Credits (modelo Marshmallow Pals) ===== */
.overlay.modal{z-index:50}
.panel{width:min(360px,90vw);max-height:calc(100vh - 40px);overflow-y:auto;background:var(--cream);color:var(--ink);border-radius:22px;padding:18px 18px 16px;box-shadow:0 8px 0 #c9b98f,0 14px 30px #0006;animation:cardin .35s cubic-bezier(.3,1.5,.5,1);display:flex;flex-direction:column;align-items:center;gap:6px}
.panel h2{color:var(--ink);text-shadow:none;font-size:28px}
.small.dark{border-color:#2b214055;color:var(--ink);margin-top:6px}
.settings-list{display:flex;flex-direction:column;gap:8px;width:100%;margin:6px 0 2px}
.setting-row{display:flex;align-items:center;gap:12px;width:100%;font:inherit;font-size:17px;font-weight:600;color:var(--ink);text-align:left;background:#fff;border:2px solid #e8dcbc;border-radius:16px;padding:10px 14px;cursor:pointer;transition:transform .1s,background .15s}
.setting-row[hidden]{display:none}
.setting-row:active{transform:translateY(1px);background:#f6efdc}
.setting-icon{width:1.6em;font-size:20px;text-align:center}
.setting-name{flex:1}
.setting-arrow{font-size:24px;line-height:1;color:#7bb342}
/* interruptor: verde = encendido, gris = apagado */
.switch{position:relative;flex:none;width:46px;height:26px;border-radius:13px;background:#5cbf2a;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:23px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:left .2s}
.setting-row[aria-pressed="false"] .switch{background:#c9c2b4}
.setting-row[aria-pressed="false"] .switch::after{left:3px}
.credits-card{text-align:center}
.credits-game{font-size:22px;font-weight:700;margin:0;opacity:1}
.credits-version{font-size:13px;opacity:.6;margin:0}
.credits-list{margin:8px 0 4px;width:100%}
.credits-list dt{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.55;margin-top:10px}
.credits-list dd{margin:2px 0 0;font-size:16px;font-weight:600}
.credits-mail{user-select:text;-webkit-user-select:text}
.credits-copy{font-size:12px;opacity:.6;margin:8px 0 0}
.panel p{opacity:1}

/* ===== Rotate notice ===== */
.rotate-notice{display:none;position:fixed;inset:0;z-index:900;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:#2b2140f2;color:#fff;font-weight:700;font-size:20px}
.rotate-notice .phone{font-size:56px;animation:rotate-hint 2s ease-in-out infinite}
@keyframes rotate-hint{0%,30%{transform:rotate(90deg)}60%,100%{transform:rotate(0)}}
@media (orientation:landscape) and (pointer:coarse) and (max-height:600px){.rotate-notice{display:flex}}

/* ===== Splash "Stera Digital Studios" (igual que Marshmallow Pals) ===== */
.splash{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;overflow:hidden;
 background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.9) 0 6%,transparent 7%),radial-gradient(circle at 82% 26%,rgba(255,255,255,.7) 0 4%,transparent 5%),radial-gradient(circle at 75% 82%,rgba(255,255,255,.8) 0 7%,transparent 8%),radial-gradient(circle at 14% 78%,rgba(255,255,255,.6) 0 3.5%,transparent 4.5%),linear-gradient(160deg,#fde4ec 0%,#f3dcff 50%,#d9f0ff 100%);
 animation:splash-out 450ms ease-in 2300ms forwards;cursor:pointer}
.splash.leaving{animation:splash-out 250ms ease-in forwards}
.splash-word{display:flex;margin:0;padding:0;white-space:nowrap;font-size:clamp(3.6rem,20vw,6rem);font-weight:700;line-height:1;letter-spacing:.02em}
.splash-word span{display:inline-block;color:var(--c);text-shadow:0 3px 0 #fff,0 -2px 0 #fff,3px 0 0 #fff,-3px 0 0 #fff,0 7px 0 rgba(0,0,0,.08),0 10px 18px rgba(142,15,66,.25);opacity:0;
 animation:splash-letter 520ms cubic-bezier(.34,1.56,.64,1) calc(150ms + var(--i)*90ms) forwards,splash-float 1.8s ease-in-out calc(700ms + var(--i)*120ms) infinite}
.splash-sub{margin:0;font-size:clamp(.95rem,4.6vw,1.3rem);font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#c2185b;opacity:0;animation:splash-sub 500ms ease-out 750ms forwards}
.splash-sparkle{position:absolute;color:#fff;font-size:1.6rem;text-shadow:0 0 10px rgba(255,193,7,.9);opacity:0;animation:splash-twinkle 1.1s ease-in-out var(--d) infinite}
@keyframes splash-letter{0%{opacity:0;transform:translateY(-60px) scale(.4)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes splash-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes splash-sub{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes splash-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
@keyframes splash-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.splash-word span,.splash-sub{animation:none;opacity:1}.splash-sparkle{display:none}}

/* ===== Stars ===== */
.win-stars{height:56px}
.stars-big i,.stars-sm i{font-style:normal;color:#0005;display:inline-block}
.stars-big i{font-size:52px;margin:0 2px;text-shadow:0 3px 0 #0004}
.stars-big i:nth-child(2){transform:translateY(-10px)}
.stars-big i.on{color:var(--gold);text-shadow:0 3px 0 var(--gold-d),0 0 18px #ffd23f99;animation:starpop .5s cubic-bezier(.3,1.8,.5,1) both}
.stars-big i:nth-child(2).on{animation-name:starpop2}
@keyframes starpop{from{transform:scale(0) rotate(-40deg)}}
@keyframes starpop2{from{transform:translateY(-10px) scale(0) rotate(-40deg)}to{transform:translateY(-10px)}}

/* ===== Adventure map ===== */
#map{position:fixed;inset:0;display:none;flex-direction:column;background:#6fbe3e;z-index:5}
#map.on{display:flex;animation:fadein .25s}
.map-top{flex:none;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:#2b2140d9;box-shadow:0 3px 10px #0004;z-index:2}
.map-top h2{flex:1;margin:0;font-size:24px;text-shadow:0 2px 0 #0006}
.map-back{width:40px;height:40px;border-radius:50%;border:2px solid #fffc;background:#ffffff22;color:#fff;font:700 30px/1 Fredoka,sans-serif;padding:0 0 4px;display:flex;align-items:center;justify-content:center}
.map-stars{background:#0004;border-radius:999px;padding:4px 12px;font-weight:700;font-size:16px}
.map-stars b{color:var(--gold)}
#mapScroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#mapPath{position:relative;margin:0 auto}
.zone{position:absolute;left:-50vw;right:-50vw}
.zone::after{content:"";position:absolute;inset:0;background:url(images/grass_tile.jpg) 0 0/220px;opacity:.28;mix-blend-mode:multiply}
.zone-sign{position:absolute;transform:translate(-50%,-50%);z-index:1;background:linear-gradient(180deg,#c8884a,#9a5e2c);color:#fff;font-weight:700;font-size:15px;padding:5px 14px;border-radius:10px;border:2px solid #6b3f1a;box-shadow:0 3px 0 #6b3f1a,0 6px 10px #0004;white-space:nowrap;text-shadow:0 2px 0 #0005}
.map-road{position:absolute;left:0;top:0;pointer-events:none}
.road-base{fill:none;stroke:#e9c98f;stroke-width:26;stroke-linecap:round;filter:drop-shadow(0 3px 0 #a5814a)}
.road-dash{fill:none;stroke:#fff6dd;stroke-width:4;stroke-dasharray:2 16;stroke-linecap:round}
.map-deco{position:absolute;background-image:url(images/decor.png);background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 3px 2px #0003)}
.node{position:absolute;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:4px solid #fff;padding:0;font:700 22px Fredoka,sans-serif;color:var(--ink);
 background:radial-gradient(circle at 35% 30%,#fff6c4,var(--gold) 55%,var(--gold-d));box-shadow:0 5px 0 #8a5a08,0 8px 12px #0005;z-index:2;cursor:pointer}
.node:active{transform:translate(-50%,-46%)}
.node.milestone{width:68px;height:68px;font-size:24px;border-color:#ffe680}
.node.current{background:radial-gradient(circle at 35% 30%,#d9ff9a,#7bd84a 55%,#3f9a22);box-shadow:0 5px 0 #2b6e15,0 0 0 0 #fff8;animation:nodepulse 1.4s ease-out infinite}
.node.locked{background:radial-gradient(circle at 35% 30%,#e8e4ee,#b9b2c6 60%,#8d85a0);box-shadow:0 5px 0 #5f5875,0 8px 12px #0004;border-color:#ffffffaa}
.node .lock{font-size:20px}
.node.shake{animation:nodeshake .35s}
@keyframes nodepulse{0%{box-shadow:0 5px 0 #2b6e15,0 0 0 0 #ffffffaa}100%{box-shadow:0 5px 0 #2b6e15,0 0 0 18px #fff0}}
@keyframes nodeshake{25%{margin-left:-6px}75%{margin-left:6px}}
.stars-sm{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);white-space:nowrap;line-height:1}
.stars-sm i{font-size:16px;-webkit-text-stroke:1px #6b3f1a}
.stars-sm i.on{color:var(--gold)}
.stars-sm i:nth-child(2){position:relative;top:3px}
.fran-pin{position:absolute;left:50%;bottom:44px;width:46px;height:80px;margin-left:-23px;background:url(images/fran_walk.png) 0 0/184px 80px no-repeat;animation:bounce .5s ease-in-out infinite alternate;filter:drop-shadow(0 4px 3px #0005);pointer-events:none}