:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071329;color:#f5fbff;overscroll-behavior:none;touch-action:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid #75e1ff;outline-offset:2px}.hidden{display:none!important}#game{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden;isolation:isolate;background:#071329}#stage{position:absolute;inset:0;width:100%;height:100%;display:block}#vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,#020c1c44,transparent 24%,transparent 78%,#030a1588);z-index:1}#hud{position:absolute;inset:0 0 auto;z-index:3;display:flex;gap:10px;align-items:flex-start;padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));pointer-events:none}.hud-block{background:#051628a6;border:1px solid #bcecff36;box-shadow:0 6px 35px #03102266, inset 0 1px #fff1;backdrop-filter:blur(14px);border-radius:13px;padding:8px 12px;min-width:120px}.mini-label{color:#98d9ed;font-size:9px;font-weight:900;letter-spacing:1.9px}.hud-block strong{font-size:16px;letter-spacing:1.2px}.health{color:#e8b86b;letter-spacing:3px;font-size:11px;line-height:1.3}.center-hud{margin-left:auto;min-width:170px;font-size:14px;font-weight:800}.center-hud span{color:#f5d989}.track{margin-top:7px;height:5px;border-radius:100px;background:#ffffff35;overflow:hidden}.track>div{width:0;height:100%;background:linear-gradient(90deg,#74e7fa,#f9d987);border-radius:30px}.icon-btn{pointer-events:auto;border:1px solid #ffffff49;background:#051628a5;backdrop-filter:blur(10px);width:43px;height:43px;border-radius:13px;font-size:21px;font-weight:800}#touchControls{pointer-events:none;position:absolute;inset:0;z-index:3}.touch-btn{position:absolute;bottom:max(11px,env(safe-area-inset-bottom,0px));pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:65px;border:1px solid #b4ecff70;border-radius:16px;background:#071d3770;box-shadow:0 4px 20px #0004,inset 0 1px #fff3;backdrop-filter:blur(3px);opacity:.65;touch-action:none}.touch-btn:active,.touch-btn.active{opacity:1;transform:scale(.95);background:#2a658c9e}.touch-btn span{font-size:30px;font-weight:500;line-height:.9}.touch-btn small{font-size:8px;margin-top:7px;font-weight:950;letter-spacing:1px}.touch-btn.jump{right:max(16px,env(safe-area-inset-right,0px))}.touch-btn.slide{left:max(16px,env(safe-area-inset-left,0px))}.overlay{position:absolute;inset:0;z-index:4;display:flex;justify-content:center;align-items:center;padding:12px max(12px,env(safe-area-inset-right,0px)) 12px max(12px,env(safe-area-inset-left,0px));background:linear-gradient(110deg,#020a1dc9,#061a35a5 61%,#07132e86);overflow-y:auto;touch-action:pan-y}.panel{width:min(830px,100%);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#6185b9 #132540;background:linear-gradient(160deg,#0c2446ed,#071629ed);border:1px solid #9cd5eb3d;border-radius:22px;box-shadow:0 20px 70px #000a,inset 0 1px #ffffff1b;padding:clamp(15px,2.4vw,30px);text-align:center}.topline{color:#83dcec;font-size:10px;letter-spacing:3px;font-weight:900;margin:0 0 12px}.title{font-size:clamp(27px,4.9vw,59px);line-height:1.05;margin:0;letter-spacing:-1px;text-transform:uppercase;font-weight:1000;color:#fff;text-shadow:0 2px 22px #74deff4a}.title em{font-style:normal;color:#fbd17e}.subtitle{color:#c5d8e9;font-size:clamp(11px,1.5vw,16px);margin:9px 0 15px}.hero-icon{font-size:clamp(30px,4.3vw,50px);margin-bottom:4px}.section-title{font-weight:950;letter-spacing:.9px;font-size:clamp(23px,3.5vw,33px);margin:4px 0 10px}.muted{color:#a3bbd4}.chars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px auto;max-width:530px}.char{display:flex;align-items:center;gap:10px;justify-content:center;min-height:62px;border-radius:12px;border:1px solid #8cbece36;background:linear-gradient(160deg,#163959,#0c223f);padding:7px 5px;font-weight:900;transition:background .12s}.char.active{border-color:#7ae5f1;background:linear-gradient(150deg,#245e76,#153047);box-shadow:0 0 0 1px #6dedef35}.char .char-ico{font-size:26px}.char small{display:block;font-size:9px;color:#a3c3d7;font-weight:700;margin-top:3px}.char .char-name{text-align:left;font-size:12px}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:15px 0 8px}.btn{font-weight:900;font-size:clamp(11px,1.35vw,14px);letter-spacing:.35px;min-height:40px;min-width:112px;padding:10px 15px;border-radius:11px;border:1px solid #a3e9f830;background:#1d4164;box-shadow:0 4px 12px #0004}.btn:active{transform:translateY(2px)}.btn.primary{background:linear-gradient(135deg,#7feac4,#3bbdca);color:#082536;border-color:#b2fff7}.btn.amber{background:linear-gradient(135deg,#ffe3a4,#e5b26d);color:#332314;border-color:#ffe7b1}.btn.ghost{background:#12304caa;border-color:#86c1cf4a}.btn:disabled{opacity:.5;cursor:not-allowed}.status{font-size:11px;color:#99c4d5;margin-top:14px}.hint{font-size:11px;color:#c2d3e5}.world-map{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left;margin:10px 0}.world-card{border:1px solid #d6eeff23;background:#09254099;border-radius:13px;padding:10px}.world-card h3{margin:0 0 5px;font-size:13px}.world-card p{margin:0 0 9px;color:#90b0c6;font-size:10px}.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.level{min-height:40px;border:1px solid #76d1e25b;border-radius:8px;background:#113f58;color:#e8faff;font-size:13px;font-weight:900}.level.locked{border-color:#ffffff19;background:#112b3a8c;color:#7598aa}.level.current{background:#276a79;border-color:#affaf8}.level small{display:block;font-size:7px;color:#fbd584;white-space:nowrap}.modal-instructions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;text-align:left}.modal-instructions>div{padding:12px;background:#0b2c45;border:1px solid #ffffff18;border-radius:10px;font-size:12px;color:#b9d5e4}.modal-instructions b{color:#7feacf}.install-help{text-align:left;margin:10px auto;max-width:430px;font-size:13px;color:#c6dbe8;line-height:1.6}.outro-rating{font-size:32px;color:#fbd384;letter-spacing:5px}.version{position:absolute;right:12px;bottom:7px;z-index:2;pointer-events:none;color:#ffffff4b;font-size:9px;letter-spacing:1px}#toast{position:absolute;z-index:6;top:23%;left:50%;transform:translateX(-50%);background:#082a43ed;border:1px solid #86edff9b;box-shadow:0 8px 35px #0008;color:#fff;padding:10px 16px;border-radius:11px;font-weight:850;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;font-size:clamp(12px,2vw,18px)}#toast.show{opacity:1}#portrait{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;background:linear-gradient(135deg,#07152d,#153b59);text-align:center}#portrait .phone{font-size:60px;color:#b4faed}#portrait h2{margin:12px 0 0}#portrait p{color:#b3cad7}#portrait button{padding:12px 16px;border:1px solid #fff5;border-radius:12px;background:#194864}body:not(.portrait-active) #portrait{display:none!important}@media (orientation:portrait) and (max-width:900px){body.portrait-active #portrait{display:flex!important}}@media (max-height:460px){.panel{padding:10px 16px;border-radius:15px}.topline{margin-bottom:4px}.title{font-size:26px}.subtitle{margin:4px 0 7px}.chars{margin:5px auto}.char{min-height:45px}.char .char-ico{font-size:19px}.actions{margin:8px 0 4px}.btn{min-height:34px;padding:7px 10px}.world-card{padding:7px}.world-card p{display:none}.level{min-height:31px}.status{margin-top:5px}.hero-icon{display:none}}@media (max-width:620px){.world-map{grid-template-columns:1fr}.world-card p{display:none}.chars{gap:5px}.char{gap:5px}.char .char-ico{font-size:19px}.char .char-name{font-size:10px}.char small{font-size:8px}.hud-block{min-width:90px;padding:6px 9px}.mini-label{font-size:7px}.hud-block strong{font-size:13px}.center-hud{min-width:100px}.touch-btn{width:52px;height:55px;bottom:7px}.touch-btn span{font-size:26px}.touch-btn small{font-size:6px}}@media (prefers-reduced-motion:reduce){#toast{transition:none}} 

/* v0.3: Siete mundos y múltiples capítulos, sin sacrificar visibilidad móvil. */
.world-map{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
@media (orientation:landscape) and (max-height:500px){.world-map{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}}

/* v0.4 — Interface inmersiva, sin selección accidental de texto en juego */
#game,#game *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;touch-action:manipulation}
#stage,#touchControls,.touch-btn{touch-action:none}
.overlay,.panel{touch-action:pan-y} #toast{max-width:92vw;white-space:normal;text-align:center}
.skins-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:12px 0}
.skin{min-height:110px;border-radius:13px;border:1px solid #92dcf54d;background:#14334e;padding:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.skin span{font-size:30px;color:#ffdda7}.skin b{font-size:12px}.skin small{font-size:9px;color:#b4cee2}.skin.active{outline:2px solid #86f7e8}.skin:disabled{opacity:.45}.power-indicator{display:block;font-size:10px;color:#7ff4dd;min-height:10px;margin-top:3px;font-weight:900}
.panel{position:relative;isolation:isolate}.panel>*:not(.confetti-stage){position:relative;z-index:1}
.confetti-stage{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.confetti{position:absolute;left:var(--x);top:-16px;background:var(--c);width:9px;height:14px;opacity:.95;animation:confettiDrop 2.7s var(--d) both cubic-bezier(.23,.71,.48,.94)}
.victory-icon{font-size:clamp(40px,8vw,75px);animation:victoryBounce 1.25s infinite ease-in-out;filter:drop-shadow(0 0 18px #f9d797a8)}
.victory-title{color:#fff4c1;text-shadow:0 0 20px #f8bf7373;animation:victoryPulse 1.3s infinite alternate}
.outro-rating{animation:victoryBounce 1s .2s both}
@keyframes confettiDrop{0%{transform:translateY(-15px) rotate(var(--r));opacity:1}100%{transform:translateY(100vh) rotate(770deg);opacity:0}}
@keyframes victoryBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.1)}}
@keyframes victoryPulse{from{filter:brightness(1)}to{filter:brightness(1.35)}}
@media(max-width:600px){.skins-grid{grid-template-columns:repeat(2,1fr)}.skin{min-height:80px}.skin span{font-size:23px}}
@media(prefers-reduced-motion:reduce){.confetti,.victory-icon,.victory-title,.outro-rating{animation:none}}

/* v0.5 — mejora visual, accesibilidad, rendimiento táctil */
.checkpoint-indicator{display:block;font-size:9px;color:#b2d9d6;letter-spacing:.25px;font-weight:800;padding-top:2px}
.touch-btn{border-color:#b4ecff84;background:linear-gradient(165deg,#07213c85,#0d355470);box-shadow:0 5px 25px #0003,inset 0 1px #fff4;opacity:.58;transition:opacity .14s,transform .14s}
.touch-btn:focus-visible,.btn:focus-visible,.char:focus-visible,.level:focus-visible,.icon-btn:focus-visible{outline:3px solid #fff1aa;outline-offset:2px}
@media (orientation:landscape) and (max-height:480px){.touch-btn{width:56px;height:57px}.center-hud{min-width:134px}.checkpoint-indicator{font-size:8px}.hud-block{padding:5px 10px}.overlay{padding:6px 14px}.panel{max-height:calc(100dvh - 12px)}}
@media (prefers-reduced-motion:reduce){.touch-btn{transition:none}}