:root{--bg:#0f1530;--panel:#182047;--ink:#0a0f26;--line:#2b3670;--tx:#eef1ff;--mut:#9aa4d8;--acc:#ffd23f;--ok:#5eead4;--bad:#ff6b8a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tx);font:16px/1.6 "Avenir Next","Segoe UI",system-ui,sans-serif}
header{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:2px solid var(--line)}
h1{margin:0;font:800 1.5rem/1 "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:-.02em;color:var(--acc)}
nav{display:flex;gap:8px}
.stats{display:flex;gap:18px;color:var(--mut)}.stats b{color:var(--tx)}
button{font:inherit;cursor:pointer;color:var(--tx);background:var(--panel);border:2px solid var(--line);padding:8px 16px;border-radius:8px}
button:hover{border-color:var(--acc)}
button:focus-visible,textarea:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
button.on,button.go{background:var(--acc);border-color:var(--acc);color:#1a1530;font-weight:700}
main{display:grid;grid-template-columns:250px 1fr;gap:28px;max-width:1080px;margin:28px auto;padding:0 16px}
#map{display:flex;flex-direction:column;gap:8px}
#map button{text-align:left}
#map button:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line)}
#map .cur{border-color:var(--acc)}
#game{background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:26px 28px}
h2{margin:0 0 6px;font-size:1.5rem}
#story{margin:0;color:var(--mut);max-width:62ch}
.ed{position:relative;background:var(--ink);border:2px solid var(--line);border-radius:10px;margin:18px 0;font:14px/1.65 ui-monospace,"Cascadia Code",Consolas,monospace}
.ed:focus-within{border-color:var(--acc)}
.ed pre,.ed textarea{margin:0;padding:14px 16px;width:100%;border:0;font:inherit;white-space:pre-wrap;word-break:break-all;tab-size:4}
/* El cursor del textarea debe caer justo sobre el texto resaltado: misma fuente y mismas métricas en ambas capas */
.ed pre code{font:inherit;letter-spacing:inherit}
.ed pre,.ed textarea{letter-spacing:0;font-variant-ligatures:none;font-kerning:none}
.ed pre{min-height:130px;color:var(--tx)}
.ed textarea{position:absolute;inset:0;height:100%;resize:none;overflow:hidden;background:none;color:transparent;caret-color:var(--acc)}
.ed textarea::selection{background:#ffd23f55}
.kw{color:#ff8fab}.str{color:#7ee8c7}.num{color:#ffb86b}.fn{color:#8ecbff}.cm{color:#7480bd;font-style:italic}
.opts{display:grid;gap:8px;margin-bottom:6px}
.opts button{text-align:left;font-family:ui-monospace,Consolas,monospace;white-space:pre-wrap}
#feedback{margin-top:14px;min-height:1.6em}
.ok{color:var(--ok)}.bad{color:var(--bad)}
.term{margin:12px 0;padding:12px 16px;background:var(--ink);border-left:4px solid var(--ok);border-radius:6px;color:var(--tx);font:14px/1.6 ui-monospace,Consolas,monospace}
@media(max-width:780px){main{grid-template-columns:1fr}#map{flex-direction:row;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.teoria{margin:18px 0;padding:4px 20px 8px;background:var(--ink);border-left:4px solid var(--acc);border-radius:8px}
.teoria h3{margin:12px 0 0;font-size:1.05rem}.teoria code{color:var(--acc)}
.ty{color:#c3b5ff}

/* Interfaz v3 */
header{position:sticky;top:0;z-index:5;background:#0f1530ee;backdrop-filter:blur(6px)}
h1::before{content:"</> ";color:var(--ok)}
main{grid-template-columns:270px 1fr;align-items:start}
aside{position:sticky;top:84px}
.prog{margin-bottom:14px;color:var(--mut);font-size:.9rem}
#bar{height:10px;background:var(--panel);border-radius:6px;overflow:hidden;margin-bottom:6px}
#bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),var(--acc));transition:width .5s}
#map{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
#map button{padding:8px 0;text-align:center;border-radius:10px;font-weight:700}
#map button.done{background:#12384a;border-color:var(--ok);color:var(--ok)}
#map button.cur{background:var(--acc);border-color:var(--acc);color:#1a1530}
#game{padding:30px 34px;box-shadow:0 18px 40px #0006;border-top:5px solid var(--acc)}
#title{font-size:1.7rem;letter-spacing:-.01em}
.teoria{padding:6px 24px 14px}
.teoria h3{margin:18px 0 6px}
.teoria p{margin:0 0 6px;max-width:64ch}
.ejemplo{margin:6px 0;padding:12px 16px;background:var(--ink);border-radius:8px;font:14px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap}
.ed[data-l]::before{content:attr(data-l);display:block;box-sizing:border-box;height:34px;padding:0 14px;border-bottom:2px solid var(--line);color:var(--mut);font:12px/34px system-ui,sans-serif}
.ed[data-l] textarea{top:34px;height:calc(100% - 34px)}
button.go{padding:10px 22px;font-size:1.02rem;box-shadow:0 4px 0 #b8941a}
button.go:hover{transform:translateY(-2px)}
button.go:active{transform:translateY(2px);box-shadow:none}
#feedback.ok,#feedback.bad{padding:14px 18px;border-radius:10px;animation:pop .25s}
#feedback.ok{background:#0e3a3d}#feedback.bad{background:#3d1630}
@keyframes pop{from{transform:scale(.97);opacity:.4}}
@media(max-width:780px){aside{position:static}#map{grid-template-columns:repeat(8,1fr)}}

/* Interfaz v4 */
nav{flex-wrap:wrap}
.stats{align-items:center;flex-wrap:wrap}
.stats button{padding:4px 12px;font-size:.85rem}
#intro{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 30%,#243070,var(--bg) 70%)}
#intro[hidden]{display:none}
#intro .box{max-width:560px;text-align:center}
#intro h1{font-size:3rem;margin-bottom:10px}
#intro p{color:var(--mut)}
#il{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0}
#il button{padding:12px 20px;font-weight:700}
.lnk{background:none;border:0;color:var(--mut);text-decoration:underline;margin-top:14px}
.pv{display:block;width:100%;height:220px;margin-top:14px;border:2px solid var(--line);border-radius:10px;background:#fff}
#play>button+button{margin-left:10px}
#map button.d1{border-bottom:3px solid var(--ok)}
#map button.d2{border-bottom:3px solid var(--acc)}
#map button.d3{border-bottom:3px solid var(--bad)}

/* Mundos, niveles y subniveles */
#map{display:flex;flex-direction:column;gap:10px}
.world>summary{cursor:pointer;list-style:none;font-weight:700;padding:8px 12px;background:var(--panel);border:2px solid var(--line);border-radius:10px}
.world[open]>summary{border-color:var(--acc);color:var(--acc)}
.lvl{padding:10px 4px 0;font-size:.85rem;color:var(--mut)}
#map .sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#map .sub button{width:46px;padding:5px 0;font-size:.8rem}
@media(min-width:781px){aside{max-height:calc(100vh - 100px);overflow-y:auto;padding-right:4px}}

/* Mundos de 50 niveles */
#map .sub button{width:38px;padding:5px 0;font-size:.78rem}
.world>summary{font-size:.92rem}

/* Niveles × subniveles */
main{grid-template-columns:300px 1fr}
#map .sub{flex-wrap:nowrap;gap:5px}
#map .sub button{flex:1;width:auto;min-width:0;padding:5px 2px;font-size:.72rem;white-space:nowrap}
.lvl{padding:10px 4px 0;font-weight:600;line-height:1.3}

/* Zonas seguras en móvil */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
header{top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:#0f1530ee}

/* Estilo videojuego */
:root{--pix:"Press Start 2P",ui-monospace,Consolas,monospace;--hard:#05081c}
body{background:linear-gradient(#ffffff09 1px,transparent 1px) 0 0/100% 4px,radial-gradient(ellipse at 50% -10%,#2a3a8f,transparent 60%),#0b1030}
h1::before{content:none}
h2,#title,.world>summary,.lvl,button,#xp,.prog{font-family:var(--pix)}
button{font-size:.62rem;line-height:1.6;border:3px solid var(--hard);border-radius:6px;box-shadow:0 4px 0 var(--hard);transition:transform .08s,box-shadow .08s}
button:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--hard);border-color:var(--acc)}
button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hard)}
button:disabled:hover{transform:none;box-shadow:0 4px 0 var(--hard);border-color:var(--hard)}
button.go{box-shadow:0 5px 0 #a47e00}button.go:hover{box-shadow:0 7px 0 #a47e00;border-color:var(--hard)}
.opts button{font:.9rem ui-monospace,Consolas,monospace}
#map .sub button{font:700 .72rem system-ui,sans-serif;border-width:2px;box-shadow:0 3px 0 var(--hard)}
header{border-bottom:4px solid var(--hard);box-shadow:0 4px 0 var(--line)}
.stats{background:var(--hard);border:3px solid var(--line);border-radius:8px;padding:6px 12px}
#hearts{font-size:1.1rem;letter-spacing:2px}#xp,#xp b{font-size:.6rem;color:var(--acc)}
header .lg svg{height:44px;width:auto;display:block}
#game,.world>summary{border:4px solid var(--hard);border-radius:6px;box-shadow:0 0 0 3px var(--line),0 8px 0 #0007}
#game{background:linear-gradient(#1b2656,#151c42)}
.world>summary{font-size:.58rem;line-height:1.7;box-shadow:0 0 0 2px var(--line),0 4px 0 #0007}
#title{font-size:1rem;line-height:1.7;color:var(--acc);text-shadow:3px 3px 0 var(--hard)}
.lvl{font-size:.55rem;line-height:1.8}.prog{font-size:.55rem}
#bar{height:16px;border:3px solid var(--hard);border-radius:4px;background:var(--hard)}
#bar i{background:repeating-linear-gradient(90deg,var(--ok) 0 8px,#12384a 8px 10px)}
#map button.cur{animation:pulse 1s steps(2) infinite}
@keyframes pulse{50%{box-shadow:0 3px 0 var(--hard),0 0 0 3px #ffd23f88}}
.ed{border:4px solid var(--hard);border-radius:6px;box-shadow:0 0 0 3px var(--line)}
.ed[data-l]::before{padding-left:74px;background:radial-gradient(circle at 20px 17px,#ff6b8a 5px,transparent 6px),radial-gradient(circle at 38px 17px,#ffd23f 5px,transparent 6px),radial-gradient(circle at 56px 17px,#5eead4 5px,transparent 6px)}
#intro{background:radial-gradient(circle at 50% 25%,#2e3fa8,#0b1030 70%)}
#intro .box{padding:30px 26px;background:#141b44;border:4px solid var(--hard);border-radius:8px;box-shadow:0 0 0 4px var(--line),0 12px 0 #0008}
#intro .lg svg{display:block;margin:0 auto;width:min(400px,78vw);height:auto;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
#il button{font-size:.68rem;padding:14px 16px;background:var(--hard);border-color:var(--line)}
#il button.on{background:var(--acc);border-color:var(--hard)}
#cont{animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{filter:brightness(1.3)}}
.lnk{font-size:.55rem;box-shadow:none}.lnk:hover{box-shadow:none;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
.ph{width:20px;height:17px;margin-right:3px;vertical-align:middle;image-rendering:pixelated}
#streak{display:inline-flex;align-items:center;gap:6px;font:400 .62rem var(--pix);color:#ff9f1c;cursor:help}
#streak svg{width:16px;height:18px;image-rendering:pixelated}#streak small{font-size:.5rem;color:var(--mut)}
.stdin{display:block;width:100%;min-height:64px;margin-top:10px;padding:8px 10px;background:#0b1030;color:#eef1ff;border:3px solid var(--hard);border-radius:6px;font:.9rem ui-monospace,Consolas,monospace;box-sizing:border-box;resize:vertical}
#play .term{margin-top:10px;white-space:pre-wrap}
/* Extras: monedas, tienda, logros, mascota, modo libre */
button:disabled{opacity:.45;cursor:not-allowed}
#qxh{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}#qxh button{padding:4px 8px;font-size:.55rem}
.av{position:relative;display:inline-block;width:38px;height:38px;padding:3px;border-radius:6px;vertical-align:middle}
.av i{display:grid;place-items:center;height:100%;background:#0b1030;border-radius:4px;font:normal 1.3rem/1 system-ui}
.av b{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font:normal 1.1rem/1 system-ui}
.av.big{width:84px;height:84px;padding:5px}.av.big i{font-size:2.8rem}.av.big b{top:-26px;font-size:2.2rem}
#qm{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:14px;background:#05081ccc}#qm[hidden]{display:none}
#qm .bx{width:min(780px,100%);max-height:88vh;overflow:auto;padding:20px 22px;background:#141b44;border:4px solid var(--hard);border-radius:6px;box-shadow:0 0 0 4px var(--line),0 12px 0 #0008}
#qm h3{margin:18px 0 8px;font-size:1rem}#qm .term{white-space:pre-wrap}
#qm select{font:inherit;padding:6px 10px;margin-bottom:6px;background:var(--hard);color:var(--tx);border:3px solid var(--line);border-radius:6px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.fr button{margin:6px 8px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.card{padding:10px;text-align:center;background:var(--hard);border:3px solid var(--line);border-radius:6px;font-size:.85rem}.card.eq{border-color:var(--acc)}
.card button{margin-top:6px;width:100%;padding:6px 4px}.e{display:block;font-size:2rem;line-height:1.3}.sw{display:block;height:32px;margin:6px 0;border-radius:4px}
.ach{display:flex;gap:12px;align-items:center;padding:8px 10px;margin-bottom:6px;background:var(--hard);border-radius:6px;font-size:.88rem}.ach .e{font-size:1.6rem}.ach.lk{opacity:.45;filter:grayscale(1)}
#qt{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:40;display:grid;gap:8px;width:min(420px,92vw)}
#qt div{padding:10px 14px;background:#0e3a3d;border:3px solid var(--ok);border-radius:6px;font-size:.85rem;animation:pop .25s}
#pet{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:8;text-align:right;cursor:pointer;user-select:none}
#pet span{display:block;font-size:2.4rem;line-height:1;animation:float 3s ease-in-out infinite}
#pet em{display:none;margin-bottom:6px;padding:6px 10px;background:var(--panel);border:3px solid var(--hard);border-radius:6px;font:normal .8rem system-ui;max-width:200px;text-align:left}#pet.say em{display:inline-block}
.px{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;image-rendering:crisp-edges;image-rendering:pixelated}
/* HUD */
.stats{background:none;border:0;padding:0;gap:10px}
.stats .pc{display:flex;align-items:center;gap:10px;padding:14px 12px 6px 8px;text-align:left;background:var(--hard);border-color:var(--line)}
.pi{display:grid;gap:5px;min-width:112px}.pi b{font-size:.55rem;color:var(--acc);white-space:nowrap}
.xb{display:block;height:9px;background:#05081c;border:2px solid var(--line);border-radius:3px;overflow:hidden}
.xb i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--ok) 0 6px,#12384a 6px 8px);transition:width .4s}
.pi small{font-size:.48rem;color:var(--mut)}
#hearts,#streak{display:inline-flex;align-items:center;gap:6px;padding:9px 11px;background:var(--hard);border:3px solid var(--line);border-radius:6px}
#qxh,.tl{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
#qxh button,.tl button{padding:8px 10px;font-size:.55rem}
#qxh .coin{color:var(--acc)}
#xp{display:none}
@media(max-width:780px){.stats{width:100%}}
#map .bossb{display:block;width:100%;margin-top:10px;border-color:#ff5d6c;color:#ffb3ba}
.bb{display:flex;gap:10px;align-items:center;margin-bottom:12px;font-size:.62rem}.bb .xb{flex:1}.bb i{background:repeating-linear-gradient(90deg,#ff5d6c 0 6px,#4a1220 6px 8px)}
/* Mapas de mundo */
.wmap{position:relative;margin-top:8px;padding:12px 8px 10px;border:3px solid var(--line);border-radius:8px;overflow:hidden}
.mstart{font-size:.55rem;color:var(--pth);margin:0 0 2px 6px}
.wmap .lvl{margin:0 0 -2px 6px;font-size:.5rem;color:#fff;text-shadow:1px 1px 0 #000a}
.mrow{position:relative;display:flex;justify-content:space-between;align-items:center;padding:8px 6px;margin:0}
.mrow.rv{flex-direction:row-reverse}
.mrow::before{content:'';position:absolute;left:24px;right:24px;top:50%;height:6px;margin-top:-3px;background:repeating-linear-gradient(90deg,var(--pth) 0 8px,transparent 8px 12px)}
.mlink{position:relative;height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 6px;font-size:1.1rem}
.mlink::before{content:'';position:absolute;top:-4px;bottom:-4px;width:6px;background:repeating-linear-gradient(180deg,var(--pth) 0 8px,transparent 8px 12px)}
.mlink.r::before{right:22px}.mlink.l::before{left:22px}
.mlink.r span:last-child,.mlink.l span:first-child{visibility:hidden}
#map .nd{position:relative;z-index:1;width:38px;height:38px;padding:0;display:grid;place-items:center;font-size:.58rem;background:var(--hard);border-width:3px;border-radius:50%}
#map .nd.done{background:#14532d;border-color:#5eead4}
#map .nd.cur{background:#4a3a8a}
#map .nd.nx{border-color:#ffd23f;animation:pl 1.2s infinite}
#map .nd:disabled{opacity:.7;filter:grayscale(.6)}
.tok{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:1.1rem;animation:float 1.6s ease-in-out infinite;pointer-events:none}
@keyframes pl{50%{box-shadow:0 0 0 7px #ffd23f55}}
/* Castillo de ladrillo (jefe) y detalles del mapa */
:root{--brk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' shape-rendering='crispEdges'%3E%3Crect width='16' height='8' fill='%239aa0bd'/%3E%3Cpath d='M1 1h7v2H1zM9 5h7v2H9z' fill='%23b3b9d3'/%3E%3Cpath d='M0 .5h16M0 4.5h16M8.5 0v4M.5 4v4' stroke='%23565b7a'/%3E%3C/svg%3E")}
#map .wmap .bossb{display:block;width:100%;margin:0;padding:0;background:none;border:0;box-shadow:none;text-align:center;opacity:1}
.cs{position:relative;display:flex;align-items:flex-end;justify-content:center;width:160px;height:96px;margin:34px auto 10px;transition:transform .15s}
#map .wmap .bossb:not(:disabled):hover .cs{transform:translateY(-3px)}
.cs i{position:relative;display:block;background:var(--brk) 0 0/32px 16px;image-rendering:pixelated;border:3px solid #343858;box-shadow:inset -4px 0 #0000002e,0 5px 0 #0006}
.cs .t{width:42px;height:84px}.cs .k{width:92px;height:62px;margin:0 -3px;z-index:1}
.cs i::before{content:'';position:absolute;left:-3px;right:-3px;top:-14px;height:11px;background:repeating-linear-gradient(90deg,#aab0cb 0 8px,transparent 8px 13px);border-bottom:3px solid #343858}
.cs .t::after{content:'';position:absolute;left:50%;top:18px;width:9px;height:16px;margin-left:-5px;background:#14172e;border-radius:5px 5px 0 0;box-shadow:0 0 0 2px #343858}
.cs .k::after{content:'';position:absolute;left:50%;bottom:0;width:30px;height:40px;margin-left:-18px;background:repeating-linear-gradient(90deg,#3a2a1a 0 3px,#0a0612 3px 7px);border:3px solid #343858;border-bottom:0;border-radius:15px 15px 0 0}
.fl{position:absolute;left:50%;top:-44px;display:block;width:3px;height:30px;background:#e8ecff}
.fl::after{content:'';position:absolute;left:3px;top:0;width:16px;height:10px;background:#ff5d6c;clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%);animation:wv 1s steps(2) infinite}
@keyframes wv{50%{height:12px}}@keyframes gl{50%{box-shadow:0 0 16px 5px #ff9a3c}}
.bossb:not(:disabled):not(.won) .k::after{animation:gl 1.4s infinite}
.cl{display:inline-block;padding:5px 10px;background:#000b;border:2px solid #ff5d6c;border-radius:5px;font-size:.58rem;color:#ffd0d5}
.bossb:disabled .cs{filter:grayscale(1) brightness(.55)}.bossb:disabled .cl{border-color:var(--line);color:var(--mut)}
.bossb.won .fl::after{background:#ffd23f}.bossb.won .cl{border-color:#ffd23f;color:#ffe9a0}
.wmap{border-width:4px;box-shadow:inset 0 0 40px #0006,0 4px 0 #0006}
.wmap::before{content:'';position:absolute;inset:0;background:radial-gradient(#ffffff1a 1.2px,transparent 1.6px) 0 0/14px 14px;pointer-events:none}
.wmap .lvl{display:inline-block;margin:0 0 -4px 4px;padding:3px 8px;background:#000a;border-radius:4px;font-size:.5rem;color:#fff}
.mstart{display:inline-block;padding:3px 8px;background:#000a;border-radius:4px}
.mrow::before{height:8px;margin-top:-4px;filter:drop-shadow(0 2px 0 #0006)}
.mlink{font-size:1.35rem;filter:drop-shadow(0 2px 0 #0006)}
#map .nd{box-shadow:0 4px 0 #0007;transition:transform .12s}
#map .nd:hover:not(:disabled){transform:translateY(-2px) scale(1.1)}
#map .nd.nx{width:44px;height:44px}
/* Editor tematico y jefe de mundo en la esquina */
#play{position:relative}
#play .ed{margin-top:46px;background-color:var(--eb,var(--ink));background-image:radial-gradient(#ffffff0f 1px,transparent 1.5px);background-size:14px 14px;border-color:var(--ea,var(--hard));box-shadow:0 0 0 3px var(--eh,var(--line)),0 0 22px -4px var(--ea,transparent)}
#play .ed[data-l]::before{background-color:var(--eh);color:var(--ea);border-bottom-color:var(--ea)}
.bsp{position:absolute;top:-38px;right:14px;z-index:3;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.bsp.in{top:0;right:0}
.be{display:block;font-size:2.4rem;line-height:1;filter:drop-shadow(0 4px 0 #0008);animation:float 2.4s ease-in-out infinite}
.bsp.big .be{font-size:3.2rem}
.bn{display:grid;gap:4px;margin-bottom:6px;justify-items:end}
.bn small{padding:3px 7px;background:#000c;border:2px solid var(--ea,#ff5d6c);border-radius:4px;color:var(--ea,#fff);font-size:.5rem;white-space:nowrap}
.bn .xb{width:84px}.bn .xb i{background:repeating-linear-gradient(90deg,#ff5d6c 0 6px,#4a1220 6px 8px)}
.bsp.hit .be{animation:hit .45s}.bsp.lol .be{animation:lol .55s}
@keyframes hit{25%{transform:translateX(-7px) rotate(-9deg);filter:brightness(2.2) saturate(0)}75%{transform:translateX(7px) rotate(9deg)}}
@keyframes lol{40%{transform:translateY(-14px) scale(1.18)}}
.cb{position:absolute;left:50%;top:-34px;margin-left:-22px;z-index:2;font-size:2.2rem;line-height:1;animation:float 2.4s ease-in-out infinite}
/* Ventana tematica: las variables se fijan en :root desde el script segun el mundo */
body{background:linear-gradient(#ffffff09 1px,transparent 1px) 0 0/100% 4px,radial-gradient(ellipse at 50% -10%,var(--g2,#2a3a8f),transparent 60%),var(--g1,#0b1030)}
header,body::before{background:var(--hdr,#0f1530ee)}
#intro .box,#qm .bx{background:var(--panel)}
/* Dificultad */
.dh{margin:14px 0 0;font-size:.62rem;color:var(--acc)}
.dfs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0}
.dfs .df{flex:1 1 150px;display:grid;gap:5px;justify-items:center;padding:12px 10px;background:var(--hard);border:3px solid var(--line);border-radius:8px}
.dfs .df.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc)}
.dfs .df b{color:var(--acc);font-size:.62rem}.dfs .df small{font-size:.5rem;color:var(--mut);line-height:1.5;text-align:center}

/* ===== Inicio fijo: la pantalla de inicio no cambia con el tema de color del mundo ===== */
#intro{--bg:#0f1530;--panel:#182047;--ink:#0a0f26;--line:#2b3670;--hard:#05081c;--acc:#ffd23f;--mut:#9aa4d8;--tx:#eef1ff;overflow-y:auto}
#intro .box{max-width:620px;width:100%;margin:auto}
#intro .dh{margin:18px 0 0;font-size:.9rem;color:var(--acc)}
#intro .dsub{margin:8px 0 0;font-size:.8rem}

/* ===== Menú desplegable ===== */
.dd{position:relative}
#ddb{padding:12px 16px;font-size:.62rem}
#ddm{position:absolute;right:0;top:calc(100% + 12px);z-index:25;display:grid;gap:8px;min-width:260px;padding:12px;background:var(--panel);border:4px solid var(--hard);border-radius:6px;box-shadow:0 0 0 3px var(--line),0 10px 0 #0008}
#ddm[hidden]{display:none}
#ddm #qxh,#ddm .tl{display:grid;gap:8px;width:100%}
#ddm button{width:100%;text-align:left;padding:10px 12px;font-size:.58rem}
#ddm .tl{padding-top:8px;border-top:3px solid var(--line)}
@media(max-width:780px){.dd{margin-left:auto}#ddm{right:0;max-width:calc(100vw - 32px)}}

/* ===== Jefes pixel art ===== */
.spr{display:block;width:64px;height:64px;image-rendering:crisp-edges;image-rendering:pixelated;filter:drop-shadow(0 4px 0 #0008)}
.spr.sm{display:inline-block;width:40px;height:40px;vertical-align:middle}
.bsp.big .spr{width:88px;height:88px}
.bsp{top:-60px}.bsp.in{top:0}
#play .ed{margin-top:70px}
#play.bf .ed{margin-top:96px}
#play.bf .bsp:not(.in){top:-86px}
.cb{top:-46px;margin-left:-26px}
.cb .spr{width:52px;height:52px}
.cs{margin-top:56px}

/* ===== Mundo grande estilo Super Mario World ===== */
main{display:block;max-width:1120px}
main.map #game,main:not(.map) #ow{display:none}
#mapb{font-size:.62rem;padding:12px 16px}
.owt{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.owt b{flex:1 1 260px;text-align:center;font:400 .72rem/1.7 var(--pix);color:var(--acc);text-shadow:3px 3px 0 var(--hard)}
.owt .prog{flex:1 1 220px;margin:0}
#wm{height:min(66vh,600px);min-height:380px;padding:0;overflow:auto;background:var(--hard)}
#wm::before{display:none}
.cv{position:relative;overflow:hidden}
.cv .bl{position:absolute;border-radius:50%;background:#ffffff16;box-shadow:inset 0 -10px #00000026}
.cv svg{position:absolute;inset:0;pointer-events:none}
.cv .p0,.cv .p1{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cv .p0{stroke:#0009;stroke-width:24}
.cv .p1{stroke:var(--pth);stroke-width:10;stroke-dasharray:1 16}
.cv .sc{position:absolute;line-height:1;opacity:.92;pointer-events:none;filter:drop-shadow(0 3px 0 #0005)}
#map .cv .nd{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;font-size:.6rem}
#map .cv .nd.nx{width:44px;height:44px}
.cv .lvl{position:absolute;z-index:0;max-width:260px;margin:0;font-size:.46rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cv .hero{position:absolute;z-index:4;margin:-50px 0 0 -16px;font-size:1.7rem;line-height:1;pointer-events:none;transition:left .9s linear,top .9s linear;animation:float 1.1s ease-in-out infinite}
.cv .cst{position:absolute;z-index:2;width:160px;margin-left:-80px;transform:scale(.8);transform-origin:50% 0}
#feedback button+button{margin-left:10px}
@media(max-width:780px){#wm{height:min(60vh,520px)}}

/* ===== Combate de jefe ===== */
.bb{font-size:.58rem}
.dmg{position:absolute;right:30px;top:0;font:400 1rem var(--pix);text-shadow:2px 2px 0 #000;animation:dmgup .9s forwards}
@keyframes dmgup{to{transform:translateY(-52px);opacity:0}}
#play[data-ph="2"] .bsp .spr{filter:drop-shadow(0 4px 0 #0008) hue-rotate(-35deg) saturate(1.7)}
#play[data-ph="3"] .bsp .spr{filter:drop-shadow(0 0 9px #ff2a3a) saturate(2.2) brightness(1.1);animation:rage .25s steps(2) infinite}
@keyframes rage{50%{transform:translateX(3px)}}
#play[data-ph="3"] .bb i{animation:blink .5s steps(2) infinite}

/* ===== Iconos en el mapa ===== */
.owi{display:flex;gap:8px;align-items:center}
.owi button{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:.58rem}
.owi .av{width:32px;height:32px}.owi .av i{font-size:1.1rem}.owi .av b{font-size:.9rem;top:-10px}
.owi .pe{font-size:1.5rem;line-height:1}.owi .coin{color:var(--acc)}
/* ===== Usuarios ===== */
#lg{--bg:#0f1530;--panel:#182047;--ink:#0a0f26;--line:#2b3670;--hard:#05081c;--acc:#ffd23f;--mut:#9aa4d8;--tx:#eef1ff;position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;overflow-y:auto;background:radial-gradient(circle at 50% 25%,#2e3fa8,#0b1030 70%)}
#lg .box{width:min(460px,100%);margin:auto;padding:28px 24px;text-align:center;background:#141b44;border:4px solid var(--hard);border-radius:8px;box-shadow:0 0 0 4px var(--line),0 12px 0 #0008}
#lg h1{margin:0 0 10px;font-size:1.7rem}#lg p{color:var(--mut)}#lg .bad{color:var(--bad);min-height:1.4em}
.lgl{display:grid;gap:10px;margin:18px 0}
.inp{font:inherit;padding:8px 10px;color:var(--tx);background:var(--hard);border:3px solid var(--line);border-radius:6px}
#lg .inp{width:100%;text-align:center}
.urow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;margin-bottom:8px;background:var(--hard);border:3px solid var(--line);border-radius:6px}
.urow b{flex:1 1 140px}.urow small{flex:1 1 100%;color:var(--mut);font-size:.8rem}
.urow .inp{width:150px}.urow button{padding:6px 8px;font-size:.5rem}.urow .bad{flex:1 1 100%;margin:0}

#lg .lgl{margin:18px 0 8px}#lg .go{margin-top:10px}#lg .dsub{font-size:.8rem}