/* fuentes incluidas en assets/fonts (funcionan sin internet) */
@font-face{font-family:'Rubik Wet Paint';src:url('../fonts/rubik-wet-paint.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Press Start 2P';src:url('../fonts/press-start-2p.woff2') format('woff2');font-display:swap}
/* Layout: one 16:9 arcade cabinet screen centered on a blood-dark ground; HUD and menus float inside it, sized in game pixels (--u). */
:root{
  --ink:#0c0506;       /* near-black with a red bias */
  --blood:#c3121c;     /* logo red */
  --blood-d:#6e070c;
  --bone:#f2e7cf;      /* logo lettering */
  --pump:#ff8a1f;
  --sick:#b8e34a;      /* zombie eyes / positive */
  --dim:#a8918a;
  --f-disp:'Rubik Wet Paint','Impact',fantasy;
  --f-pix:'Press Start 2P','Courier New',monospace;
  --u:2px;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--f-pix);display:grid;place-items:center;overflow:hidden;padding:0;
  background:radial-gradient(ellipse at 50% 40%,#2a080b 0%,var(--ink) 70%);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#wrap{position:relative;width:100vw;height:100vh;max-width:100%;
  box-shadow:0 0 0 calc(var(--u)*1) #000,0 0 calc(var(--u)*30) rgba(195,18,28,.35);overflow:hidden;background:#000}
#game{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
/* CRT scanlines */
#wrap::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;z-index:50}
.px{font-family:var(--f-pix)}
.outline{text-shadow:calc(var(--u)*-1) 0 #000,calc(var(--u)*1) 0 #000,0 calc(var(--u)*-1) #000,0 calc(var(--u)*1) #000,calc(var(--u)*1) calc(var(--u)*1) #000}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;font-size:calc(var(--u)*6);line-height:1.3;z-index:10}
.hud-l{position:absolute;left:calc(var(--u)*5);top:calc(var(--u)*4);display:flex;gap:calc(var(--u)*4);align-items:flex-start}
#hudFace{width:calc(var(--u)*26);height:calc(var(--u)*33);object-fit:cover;image-rendering:pixelated;border:calc(var(--u)*1) solid var(--bone);outline:calc(var(--u)*1) solid #000;background:#000;display:block}
#hudFace.hurt{filter:sepia(1) saturate(6) hue-rotate(-30deg)}
.hud-stats{display:flex;flex-direction:column;gap:calc(var(--u)*2.5);padding-top:calc(var(--u)*1)}
.row{display:flex;align-items:center;gap:calc(var(--u)*3);white-space:nowrap}
.lbl{color:var(--dim)}
.hearts{display:flex;gap:calc(var(--u)*1.5)}
.hearts svg{width:calc(var(--u)*7);height:calc(var(--u)*6);display:block}
.wbox{display:inline-grid;place-items:center;min-width:calc(var(--u)*9);height:calc(var(--u)*9);background:#000;border:calc(var(--u)*1) solid var(--bone);color:var(--bone)}
.wbox.H{color:#7cc7ff}.wbox.F{color:var(--pump)}.wbox.C{color:#ff7ac8}
.pk{width:calc(var(--u)*8);height:calc(var(--u)*8);display:block}
.hud-r{position:absolute;right:calc(var(--u)*6);top:calc(var(--u)*5);text-align:right;display:flex;flex-direction:column;gap:calc(var(--u)*3)}
#score{font-variant-numeric:tabular-nums;color:var(--bone)}
#lvlTag{position:absolute;left:50%;top:calc(var(--u)*5);transform:translateX(-50%);color:var(--blood);font-size:calc(var(--u)*6)}
.bar{width:calc(var(--u)*120);height:calc(var(--u)*5);background:#000;border:calc(var(--u)*1) solid var(--bone);position:relative}
.bar i{position:absolute;inset:0;right:auto;width:100%;background:linear-gradient(#ff3b3b,var(--blood) 60%,var(--blood-d));transition:width .1s}
#bossbar{position:absolute;left:50%;top:calc(var(--u)*16);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);color:var(--bone)}
#tankbar{position:absolute;left:calc(var(--u)*5);top:calc(var(--u)*42);display:flex;gap:calc(var(--u)*3);align-items:center}
#tankbar .bar{width:calc(var(--u)*50);height:calc(var(--u)*4)}
#tankbar .bar i{background:linear-gradient(#ffd27a,#c9822a)}
#banner{position:absolute;left:0;right:0;top:36%;text-align:center;font-size:calc(var(--u)*13);color:var(--bone);letter-spacing:calc(var(--u)*.5)}
#banner small{display:block;font-size:calc(var(--u)*6);color:var(--pump);margin-top:calc(var(--u)*5)}
#banner.pop{animation:pop .35s steps(4) both}
@keyframes pop{from{transform:scale(2.2);opacity:0}to{transform:scale(1);opacity:1}}
#go{position:absolute;right:calc(var(--u)*10);top:44%;font-size:calc(var(--u)*12);color:var(--pump);animation:blink .5s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#tip{position:absolute;left:0;right:0;bottom:calc(var(--u)*6);text-align:center;font-size:calc(var(--u)*5.5);color:var(--bone)}
.pop-t{position:absolute;transform:translate(-50%,0);font-size:calc(var(--u)*5);white-space:nowrap;animation:rise 1s linear forwards;pointer-events:none}
.pop-t.say{background:var(--bone);color:#111;padding:calc(var(--u)*2) calc(var(--u)*3);border:calc(var(--u)*1) solid #000;animation:rise2 1.4s linear forwards}
@keyframes rise{to{transform:translate(-50%,calc(var(--u)*-18));opacity:0}}
@keyframes rise2{0%{transform:translate(-50%,0)}80%{opacity:1}to{transform:translate(-50%,calc(var(--u)*-10));opacity:0}}

/* ---------- Screens ---------- */
.screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*7);text-align:center;padding:calc(var(--u)*8);box-sizing:border-box}
.dim{background:linear-gradient(rgba(12,5,6,.55),rgba(12,5,6,.85))}
.btn{font-family:var(--f-pix);font-size:calc(var(--u)*7);color:var(--bone);background:var(--blood-d);border:calc(var(--u)*1) solid var(--bone);padding:calc(var(--u)*4) calc(var(--u)*8);cursor:pointer;box-shadow:0 calc(var(--u)*2) 0 #000;pointer-events:auto}
.btn:hover,.btn:focus-visible{background:var(--blood);outline:calc(var(--u)*1) solid var(--pump);outline-offset:calc(var(--u)*1)}
.btn.ghost{background:transparent}
.btns{display:flex;gap:calc(var(--u)*6);flex-wrap:wrap;justify-content:center}
#title{flex-direction:row;gap:calc(var(--u)*10)}
#title .tcol{display:flex;flex-direction:column;gap:calc(var(--u)*9);align-items:center}
#title img{width:calc(var(--u)*170);height:auto;filter:drop-shadow(0 0 calc(var(--u)*8) rgba(0,0,0,.9));animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.03)}}
#title .press{font-size:calc(var(--u)*7);color:var(--bone);animation:blink 1s steps(1) infinite;cursor:pointer;pointer-events:auto;background:none;border:0;font-family:var(--f-pix)}
.controls{display:grid;grid-template-columns:auto auto;gap:calc(var(--u)*2) calc(var(--u)*6);font-size:calc(var(--u)*4.5);color:var(--dim);text-align:left}
.controls b{color:var(--bone);font-weight:normal}
.foot{font-size:calc(var(--u)*4);color:var(--blood)}
.disp{font-family:var(--f-disp);color:var(--blood);font-weight:normal;letter-spacing:calc(var(--u)*.6);line-height:1;margin:0;text-wrap:balance;text-shadow:0 calc(var(--u)*2) 0 #000}
.k{font-size:calc(var(--u)*6);color:var(--pump)}
.p{font-size:calc(var(--u)*5.5);line-height:1.8;color:var(--bone);max-width:calc(var(--u)*240);margin:0}

/* map */
#map{justify-content:flex-start;padding-top:calc(var(--u)*12);gap:calc(var(--u)*5)}
.path{position:relative;display:flex;gap:calc(var(--u)*14);align-items:center;margin-top:calc(var(--u)*4)}
.path::before{content:"";position:absolute;left:calc(var(--u)*8);right:calc(var(--u)*8);top:50%;border-top:calc(var(--u)*2) dashed var(--blood-d)}
.node{position:relative;width:calc(var(--u)*24);height:calc(var(--u)*24);display:grid;place-items:center;background:#1a0b0c;border:calc(var(--u)*1) solid var(--bone);color:var(--bone);font-family:var(--f-pix);font-size:calc(var(--u)*5);cursor:pointer;pointer-events:auto}
.node.boss{width:calc(var(--u)*30);height:calc(var(--u)*30);border-color:var(--blood);color:var(--blood)}
.node.done{background:var(--blood-d)}
.node[disabled]{opacity:.35;cursor:not-allowed}
.node.sel{outline:calc(var(--u)*1.5) solid var(--pump);outline-offset:calc(var(--u)*2);animation:breathe 1s ease-in-out infinite}
.mdetail{min-height:calc(var(--u)*30);display:flex;flex-direction:column;gap:calc(var(--u)*3);align-items:center}
.mdetail .disp{font-size:calc(var(--u)*16)}
.soon{display:flex;gap:calc(var(--u)*4);font-size:calc(var(--u)*4);color:var(--dim);flex-wrap:wrap;justify-content:center}
.soon span{border:calc(var(--u)*.5) solid #3a2224;padding:calc(var(--u)*2) calc(var(--u)*3)}

/* brief / clear / end */
#brief .disp{font-size:calc(var(--u)*24)}
#clear .disp,#over .disp{font-size:calc(var(--u)*28)}
.tally{display:grid;grid-template-columns:auto auto;gap:calc(var(--u)*3) calc(var(--u)*14);font-size:calc(var(--u)*6);text-align:left}
.tally span:nth-child(2n){text-align:right;color:var(--pump);font-variant-numeric:tabular-nums}
#ending{flex-direction:row;gap:calc(var(--u)*12)}
#ending img{width:calc(var(--u)*80);image-rendering:pixelated;border:calc(var(--u)*1) solid var(--bone);outline:calc(var(--u)*1) solid #000}
#ending .col{display:flex;flex-direction:column;gap:calc(var(--u)*6);align-items:flex-start;text-align:left;max-width:calc(var(--u)*190)}
#ending .disp{font-size:calc(var(--u)*22)}
#mute{position:absolute;right:calc(var(--u)*4);top:calc(var(--u)*26);z-index:40;font-size:calc(var(--u)*4.5);padding:calc(var(--u)*2) calc(var(--u)*3)}

/* touch */
#touch{position:absolute;inset:0;z-index:30;pointer-events:none}
.tb{position:absolute;pointer-events:auto;display:grid;place-items:center;font-family:var(--f-pix);font-size:calc(var(--u)*5);color:rgba(242,231,207,.85);background:rgba(20,8,9,.35);border:calc(var(--u)*1) solid rgba(242,231,207,.4);border-radius:50%;touch-action:none}
.tb.on{background:rgba(195,18,28,.55)}
.dpad{width:calc(var(--u)*24);height:calc(var(--u)*24)}
#tPause{right:calc(var(--u)*4);top:calc(var(--u)*46);width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:calc(var(--u)*2)}
@media (prefers-reduced-motion:reduce){#title img,.node.sel{animation:none}}

/* opciones / controles */
#options{gap:calc(var(--u)*4);padding-block:calc(var(--u)*6)}
.keygrid{display:grid;grid-template-columns:auto calc(var(--u)*46) calc(var(--u)*46);gap:calc(var(--u)*1.6) calc(var(--u)*4);align-items:center;font-size:calc(var(--u)*4.6)}
.klabel{text-align:right;color:var(--dim)}
.kbtn{font-family:var(--f-pix);font-size:calc(var(--u)*4.6);color:var(--bone);background:#140809;border:calc(var(--u)*.6) solid #5a2a2c;padding:calc(var(--u)*1.6) calc(var(--u)*2);cursor:pointer;pointer-events:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbtn:hover,.kbtn:focus-visible{border-color:var(--bone);outline:none}
.kbtn.wait{background:var(--blood-d);border-color:var(--pump);color:var(--pump);animation:blink .6s steps(1) infinite}
.optmsg{font-size:calc(var(--u)*4.2);color:var(--pump);min-height:calc(var(--u)*5)}
#options .btn{font-size:calc(var(--u)*5.5);padding:calc(var(--u)*3) calc(var(--u)*6)}
#title .btn{font-size:calc(var(--u)*5);padding:calc(var(--u)*2.5) calc(var(--u)*6)}

/* ---------- menú principal / pausa (estilo lista con cursor) ---------- */
#title .tcol{min-width:calc(var(--u)*150);align-items:flex-start}
.menu{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*2);text-align:left;pointer-events:auto;user-select:none}
.menu .mtitle{font-family:var(--f-pix);font-size:calc(var(--u)*6);color:var(--blood);letter-spacing:calc(var(--u)*.6);margin-bottom:calc(var(--u)*2);padding-left:calc(var(--u)*13)}
.menu .mlist{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*.5)}
.mi{position:relative;display:flex;align-items:center;gap:calc(var(--u)*4);padding-left:calc(var(--u)*13);cursor:pointer;font-family:var(--f-disp);font-size:calc(var(--u)*17);line-height:1.05;color:var(--bone);letter-spacing:calc(var(--u)*.6);
  text-shadow:0 calc(var(--u)*1.2) 0 #000,calc(var(--u)*-1) 0 #000,calc(var(--u)*1) 0 #000,0 calc(var(--u)*-1) 0 #000;transition:color .08s}
.mi.sel{color:var(--pump)}
.mi.sel::before{content:"";position:absolute;left:0;top:50%;width:calc(var(--u)*10);height:calc(var(--u)*7);transform:translateY(-50%);
  background:linear-gradient(#ff5a3a,var(--blood) 60%,var(--blood-d));clip-path:polygon(0 30%,55% 30%,55% 0,100% 50%,55% 100%,55% 70%,0 70%);filter:drop-shadow(0 calc(var(--u)*1) 0 #000);animation:nudge .5s steps(2) infinite}
@keyframes nudge{50%{transform:translate(calc(var(--u)*1.5),-50%)}}
.menu.sub .mi{font-size:calc(var(--u)*12)}
.mi .mv,.mi .madj{font-family:var(--f-pix);font-size:calc(var(--u)*4.6);letter-spacing:0;color:var(--bone)}
.mi.sel .mv{color:var(--pump)}
.mi .madj{color:var(--dim);padding:0 calc(var(--u)*1)}
.mi .madj:hover{color:var(--pump)}
.mi.vrow .ml{min-width:calc(var(--u)*46)}
/* controles: filas compactas en pixel */
.menu.ctrl .mlist{gap:calc(var(--u)*.6)}
.menu.ctrl .mi{font-size:calc(var(--u)*9.5)}
.menu.ctrl .mi.krow{font-family:var(--f-pix);font-size:calc(var(--u)*4.2);letter-spacing:0;gap:calc(var(--u)*2.5);text-shadow:calc(var(--u)*.6) calc(var(--u)*.6) 0 #000}
.menu.ctrl .mi.krow .ml{min-width:calc(var(--u)*72)}
.menu.ctrl .mi.krow.sel::before{width:calc(var(--u)*7);height:calc(var(--u)*5)}
.kslot{display:inline-block;min-width:calc(var(--u)*30);text-align:center;padding:calc(var(--u)*1) calc(var(--u)*1.5);background:rgba(10,4,5,.75);border:calc(var(--u)*.5) solid #5a2a2c;color:var(--bone);white-space:nowrap}
.kslot:hover,.kslot.on{border-color:var(--pump);color:var(--pump)}
.kslot.wait{background:var(--blood-d);border-color:var(--pump);color:var(--pump);animation:blink .6s steps(1) infinite}
.mhelp{display:grid;grid-template-columns:auto auto;gap:calc(var(--u)*2) calc(var(--u)*8);font-family:var(--f-pix);font-size:calc(var(--u)*4.4);color:var(--dim);padding-left:calc(var(--u)*13);margin-bottom:calc(var(--u)*3);text-shadow:calc(var(--u)*.6) calc(var(--u)*.6) 0 #000}
.mhelp b{color:var(--bone);font-weight:normal}
.mmsg{font-family:var(--f-pix);font-size:calc(var(--u)*4);color:var(--pump);padding-left:calc(var(--u)*13);margin-top:calc(var(--u)*2);max-width:calc(var(--u)*170);line-height:1.5}
#pause .menu{align-items:flex-start}
@media (prefers-reduced-motion:reduce){.mi.sel::before{animation:none}}

/* selector de armas del HUD: encendidas con munición, apagadas sin ella, la actual remarcada */
.wslots{gap:calc(var(--u)*1.5)}
.ws{display:inline-flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*1) calc(var(--u)*1.6);font-size:calc(var(--u)*4.2);border:calc(var(--u)*.6) solid #3a2224;background:rgba(0,0,0,.55);color:#4a3a3a;line-height:1}
.ws b{font-weight:normal;font-size:calc(var(--u)*3.4);color:inherit;opacity:.8}
.ws.on{color:var(--bone);border-color:#7a6a60}
.ws.on.P{color:#f2e7cf}.ws.on.H{color:#7cc7ff}.ws.on.F{color:var(--pump)}.ws.on.C{color:#ff7ac8}
.ws.cur{border-color:var(--pump);box-shadow:0 0 calc(var(--u)*3) rgba(255,138,31,.6)}

/* bocadillos de Javi y de los niños: texto oscuro limpio sobre fondo claro, sin contorno */
.pop-t.say{font-size:calc(var(--u)*5.2);line-height:1.3;color:#1a0a0a!important;background:#f2e7cf;border:calc(var(--u)*.8) solid #1a0a0a;padding:calc(var(--u)*2.4) calc(var(--u)*3.4);
  text-shadow:none!important;box-shadow:0 calc(var(--u)*1.2) 0 rgba(0,0,0,.6);letter-spacing:0;border-radius:calc(var(--u)*1.5)}
.pop-t.say::after{content:"";position:absolute;left:50%;bottom:calc(var(--u)*-3.4);transform:translateX(-50%);border:calc(var(--u)*2.2) solid transparent;border-top-color:#1a0a0a}

/* controles: columnas fijas para que etiquetas y teclas queden alineadas */
.menu.ctrl .mi.krow{display:grid;grid-template-columns:calc(var(--u)*92) calc(var(--u)*44) calc(var(--u)*44);column-gap:calc(var(--u)*2.5);align-items:center}
.menu.ctrl .mi.krow .ml{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu.ctrl .kslot{box-sizing:border-box;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* audio: etiqueta en columna fija, barra y flechas alineadas */
.mi.vrow{display:grid;grid-template-columns:calc(var(--u)*72) auto auto auto;column-gap:calc(var(--u)*2.5);align-items:center}
.mi.vrow .ml{min-width:0}
.mhelp{grid-template-columns:calc(var(--u)*92) auto;row-gap:calc(var(--u)*2.6)}
.mhelp span,.mhelp b{white-space:nowrap;line-height:1.2}

.vbar{display:inline-flex;gap:calc(var(--u)*.8)}
.vbar i{display:block;width:calc(var(--u)*3);height:calc(var(--u)*6);background:#3a2224;border:calc(var(--u)*.4) solid #000}
.vbar i.on{background:var(--bone)}
.mi.sel .vbar i.on{background:var(--pump)}

/* selector de mundo en el mapa */
.wsel{display:flex;align-items:center;gap:calc(var(--u)*6)}
.wbtn{font-family:var(--f-pix);font-size:calc(var(--u)*6);color:var(--bone);background:#1a0b0c;border:calc(var(--u)*.75) solid var(--bone);width:calc(var(--u)*12);height:calc(var(--u)*12);display:grid;place-items:center;cursor:pointer;padding:0}
.wbtn:hover:not([disabled]){background:var(--blood-d)}
.wbtn[disabled]{opacity:.25;cursor:default}

/* tinta del pulpo: manchas negras que tapan la pantalla un momento */
#ink{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .5s ease-out;
  background:radial-gradient(circle at 30% 40%,#05030a 0 14%,transparent 15%),radial-gradient(circle at 62% 55%,#05030a 0 18%,transparent 19%),radial-gradient(circle at 48% 30%,#05030a 0 10%,transparent 11%),radial-gradient(circle at 75% 32%,#0a0614 0 9%,transparent 10%),radial-gradient(circle at 22% 68%,#0a0614 0 11%,transparent 12%),radial-gradient(circle at 50% 75%,#05030a 0 12%,transparent 13%)}
#ink.on{opacity:.92;transition:opacity .08s}

/* ===== menú estilo "lista centrada" (v1.42): título grande, descripción, calabaza como cursor y ayuda abajo ===== */
#title{flex-direction:column;gap:calc(var(--u)*3);justify-content:center}
#title img{width:calc(var(--u)*92)}
#title .tcol{min-width:0;align-items:center}
#title.insub img{display:none}
.menu{align-items:center;gap:calc(var(--u)*1.5);text-align:center}
.menu .mlist{align-items:flex-start;gap:0}
.menu .mtitle{font-family:var(--f-disp);font-size:calc(var(--u)*15);color:var(--pump);letter-spacing:calc(var(--u)*.6);padding-left:0;margin-bottom:0;line-height:1.05;
  text-shadow:0 calc(var(--u)*1.2) 0 #000,calc(var(--u)*-1) 0 #000,calc(var(--u)*1) 0 #000,0 calc(var(--u)*-1) 0 #000}
.menu .mdesc{font-family:var(--f-pix);font-size:calc(var(--u)*4);color:var(--bone);max-width:calc(var(--u)*230);line-height:1.5;margin-bottom:calc(var(--u)*3)}
.menu .mfoot,.menu .mmsg{font-family:var(--f-pix);font-size:calc(var(--u)*3.6);color:var(--dim);margin-top:calc(var(--u)*4);padding-left:0;text-align:center}
.menu .mmsg{color:var(--pump)}
.mi{font-size:calc(var(--u)*15);padding-left:calc(var(--u)*15)}
.menu.sub .mi{font-size:calc(var(--u)*11.5)}
/* cursor: calabaza pixelada que se balancea */
.mi.sel::before{width:calc(var(--u)*11);height:calc(var(--u)*10);clip-path:none;filter:drop-shadow(0 calc(var(--u)*1) 0 #000);animation:pumpbob .6s steps(2) infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='1' height='2' fill='%233c7a2a'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%235a9a3a'/%3E%3Crect x='2' y='2' width='7' height='1' fill='%23ff8a1f'/%3E%3Crect x='1' y='3' width='9' height='5' fill='%23ff8a1f'/%3E%3Crect x='2' y='8' width='7' height='1' fill='%23ff8a1f'/%3E%3Crect x='3' y='9' width='5' height='1' fill='%23c85a0a'/%3E%3Crect x='0' y='4' width='1' height='3' fill='%23c85a0a'/%3E%3Crect x='10' y='4' width='1' height='3' fill='%23c85a0a'/%3E%3Crect x='5' y='3' width='1' height='6' fill='%23e8700f'/%3E%3Crect x='2' y='4' width='2' height='2' fill='%23ffd23f'/%3E%3Crect x='7' y='4' width='2' height='2' fill='%23ffd23f'/%3E%3Crect x='3' y='7' width='5' height='1' fill='%23ffd23f'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23ffd23f'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes pumpbob{50%{transform:translate(calc(var(--u)*1),-58%) rotate(-6deg)}}
.menu.ctrl .mi.krow.sel::before{width:calc(var(--u)*8);height:calc(var(--u)*7)}
#pause .menu{align-items:center}
@media (prefers-reduced-motion:reduce){.mi.sel::before{animation:none}}
.mi{text-align:left;white-space:nowrap}
.mi.vrow{grid-template-columns:calc(var(--u)*114) auto auto auto}
.mi.vrow{grid-template-columns:calc(var(--u)*140) auto auto auto}
.menu .mhelp{text-align:left}
/* v1.43: logo a la izquierda y menú a la derecha (también en los submenús) */
#title{flex-direction:row;align-items:center;justify-content:center;gap:calc(var(--u)*14)}
#title img,#title.insub img{display:block;width:calc(var(--u)*140);flex:none}
#title .tcol{width:calc(var(--u)*215);flex:none;align-items:center}
#title .menu .mtitle{font-size:calc(var(--u)*13)}
#title .menu.sub .mi{font-size:calc(var(--u)*9.5)}
#title .menu .mdesc{max-width:calc(var(--u)*190);font-size:calc(var(--u)*3.6)}
#title .mi.vrow{grid-template-columns:calc(var(--u)*126) auto auto auto}
#title .menu.ctrl .mi{font-size:calc(var(--u)*9)}
#title .menu.ctrl .mi.krow{font-size:calc(var(--u)*4.2)}

/* ===== MAPA v1.44: pestañas de mundos, sendero con lápidas y ficha de misión ===== */
:root{--pk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='1' height='2' fill='%233c7a2a'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%235a9a3a'/%3E%3Crect x='2' y='2' width='7' height='1' fill='%23ff8a1f'/%3E%3Crect x='1' y='3' width='9' height='5' fill='%23ff8a1f'/%3E%3Crect x='2' y='8' width='7' height='1' fill='%23ff8a1f'/%3E%3Crect x='3' y='9' width='5' height='1' fill='%23c85a0a'/%3E%3Crect x='0' y='4' width='1' height='3' fill='%23c85a0a'/%3E%3Crect x='10' y='4' width='1' height='3' fill='%23c85a0a'/%3E%3Crect x='5' y='3' width='1' height='6' fill='%23e8700f'/%3E%3Crect x='2' y='4' width='2' height='2' fill='%23ffd23f'/%3E%3Crect x='7' y='4' width='2' height='2' fill='%23ffd23f'/%3E%3Crect x='3' y='7' width='5' height='1' fill='%23ffd23f'/%3E%3C/svg%3E");
  --lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='4' height='1' fill='%23a8918a'/%3E%3Crect x='1' y='1' width='1' height='3' fill='%23a8918a'/%3E%3Crect x='6' y='1' width='1' height='3' fill='%23a8918a'/%3E%3Crect x='0' y='4' width='8' height='5' fill='%23a8918a'/%3E%3Crect x='3' y='5' width='2' height='2' fill='%231a0b0c'/%3E%3C/svg%3E")}
#map{justify-content:space-between;align-items:stretch;gap:calc(var(--u)*3);padding:calc(var(--u)*7) calc(var(--u)*14) calc(var(--u)*5);
  background:linear-gradient(rgba(12,5,6,.82),rgba(12,5,6,.25) 26%,rgba(12,5,6,.15) 55%,rgba(12,5,6,.85) 78%)}
.mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*8)}
.mhl{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*1.5);text-align:left}
.mhl .lbl{font-size:calc(var(--u)*4.4);color:var(--pump)}
#mWorldName{font-size:calc(var(--u)*17);color:var(--bone);text-align:left}
.wtabs{display:flex;gap:calc(var(--u)*2.5);align-items:center}
.wtab{position:relative;width:calc(var(--u)*13);height:calc(var(--u)*14);display:grid;place-items:center;padding:0;cursor:pointer;
  font-family:var(--f-disp);font-size:calc(var(--u)*9);color:var(--bone);background:rgba(20,8,10,.85);border:calc(var(--u)*.75) solid #5a3a3a;border-radius:calc(var(--u)*6) calc(var(--u)*6) calc(var(--u)*1) calc(var(--u)*1)}
.wtab:hover:not([disabled]){border-color:var(--pump)}
.wtab.on{color:var(--pump);border-color:var(--pump);background:var(--blood-d);box-shadow:0 0 calc(var(--u)*5) rgba(255,138,31,.45)}
.wtab.done::after{content:"";position:absolute;right:calc(var(--u)*-2.5);top:calc(var(--u)*-2.5);width:calc(var(--u)*6);height:calc(var(--u)*5.5);background:var(--pk) center/contain no-repeat}
.wtab[disabled]{opacity:.35;cursor:default}
.wtab[disabled]::before{content:"";position:absolute;inset:auto auto calc(var(--u)*-1) 50%;transform:translateX(-50%);width:calc(var(--u)*4);height:calc(var(--u)*4.5);background:var(--lock) center/contain no-repeat}
/* sendero */
.trail{position:relative;flex:1;min-height:0;margin:0 calc(var(--u)*6)}
.tsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tshadow{fill:none;stroke:rgba(0,0,0,.6);stroke-width:calc(var(--u)*5);stroke-linecap:round}
.tline{fill:none;stroke:#5a4040;stroke-width:calc(var(--u)*2);stroke-dasharray:calc(var(--u)*3) calc(var(--u)*3);stroke-linecap:round}
.tline.open{stroke:var(--pump);stroke-dasharray:calc(var(--u)*4) calc(var(--u)*2.5);animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:calc(var(--u)*-13)}}
.tnode{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.5);background:none;border:0;padding:0;cursor:pointer;color:var(--bone)}
.tstone{display:grid;place-items:center;width:calc(var(--u)*22);height:calc(var(--u)*26);box-sizing:border-box;padding-top:calc(var(--u)*3);
  font-family:var(--f-disp);font-size:calc(var(--u)*8);color:var(--bone);text-shadow:0 calc(var(--u)*1) 0 #000;
  background:linear-gradient(#4a4454,#2e2a36);border:calc(var(--u)*1) solid #15121a;border-radius:calc(var(--u)*11) calc(var(--u)*11) calc(var(--u)*1.5) calc(var(--u)*1.5);
  box-shadow:inset calc(var(--u)*1.5) 0 0 rgba(255,255,255,.08),0 calc(var(--u)*2) 0 #0a080c,0 calc(var(--u)*3.5) 0 #2f3f22;transition:transform .1s}
.tnode.boss .tstone{width:calc(var(--u)*28);height:calc(var(--u)*32);font-size:calc(var(--u)*7.5);background:linear-gradient(#6e1018,#3a060a);color:var(--bone);border-color:#200306}
.tnode.done .tstone{background:linear-gradient(#5a3a2a,#3a2418)}
.tnode.done.boss .tstone{background:linear-gradient(#8a1a20,#4a080c)}
.tstone{position:relative}
.tnode.done .tstone::after{content:"";position:absolute;top:calc(var(--u)*-3.5);right:calc(var(--u)*-4.5);width:calc(var(--u)*9);height:calc(var(--u)*8);background:var(--pk) center/contain no-repeat;filter:drop-shadow(0 0 calc(var(--u)*2) rgba(255,180,60,.8))}
.tnode.locked{cursor:default}
.tnode.locked .tstone{opacity:.45;color:transparent;text-shadow:none;background:var(--lock) center 60%/calc(var(--u)*7) no-repeat,linear-gradient(#3a3640,#24212a)}
.tnode.locked .tname{opacity:.4}
.tnode:hover:not([disabled]) .tstone{transform:translateY(calc(var(--u)*-1))}
.tnode.sel .tstone{border-color:var(--pump);box-shadow:inset calc(var(--u)*1.5) 0 0 rgba(255,255,255,.08),0 0 calc(var(--u)*7) rgba(255,138,31,.75),0 calc(var(--u)*3.5) 0 #2f3f22}
.tnode.sel::before{content:"";position:absolute;bottom:calc(100% - var(--u)*1);left:50%;width:calc(var(--u)*11);height:calc(var(--u)*10);margin-left:calc(var(--u)*-5.5);background:var(--pk) center/contain no-repeat;
  filter:drop-shadow(0 calc(var(--u)*1) 0 #000);animation:hop .7s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(calc(var(--u)*-3))}}
.tname{font-family:var(--f-pix);font-size:calc(var(--u)*3.4);line-height:1.4;max-width:calc(var(--u)*62);color:var(--bone);text-align:center}
.tnode.sel .tname{color:var(--pump)}
/* ficha */
.mcard{display:flex;gap:calc(var(--u)*8);align-items:stretch;text-align:left;background:rgba(14,6,8,.86);border:calc(var(--u)*.75) solid var(--blood-d);
  box-shadow:0 0 0 calc(var(--u)*.75) #000,inset 0 calc(var(--u)*.75) 0 rgba(255,255,255,.04);padding:calc(var(--u)*5) calc(var(--u)*7)}
.mcl{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*2);min-width:0}
.mcid{display:flex;gap:calc(var(--u)*4);align-items:center}
.mcid .k{font-size:calc(var(--u)*4.6)}
.mstat{font-family:var(--f-pix);font-size:calc(var(--u)*3.4);color:var(--bone);border:calc(var(--u)*.5) solid #5a4040;padding:calc(var(--u)*.8) calc(var(--u)*2)}
.mstat.done{color:var(--pump);border-color:var(--pump)}
#mName{font-size:calc(var(--u)*13);color:var(--blood);text-align:left}
#mBrief{margin:0;font-size:calc(var(--u)*3.7);line-height:1.6;color:var(--bone);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mcr{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:calc(var(--u)*3);flex:none}
.mcr .lbl{font-size:calc(var(--u)*4);text-align:center}
.mcr .btn{font-size:calc(var(--u)*5.5);padding:calc(var(--u)*3) calc(var(--u)*6)}
.mkeys{font-family:var(--f-pix);font-size:calc(var(--u)*3.4);color:var(--dim);text-align:center}
@media (prefers-reduced-motion:reduce){.tline.open,.tnode.sel::before{animation:none}}
.tnode{gap:calc(var(--u)*5)}
body.nocur,body.nocur *{cursor:none!important}

/* ===== prólogo estilo cinta VHS ===== */
#story{background:rgba(4,2,6,.9);cursor:pointer;justify-content:center}
#story::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 calc(var(--u)*1.5),rgba(255,255,255,.035) calc(var(--u)*1.5) calc(var(--u)*2))}
#story .vhs{position:absolute;top:calc(var(--u)*8);left:calc(var(--u)*12);font-family:var(--f-pix);font-size:calc(var(--u)*6);color:#e8f0ff;letter-spacing:calc(var(--u)*.6);animation:blink 1.2s steps(1) infinite}
.stbox{display:flex;flex-direction:column;gap:calc(var(--u)*6);align-items:center;max-width:calc(var(--u)*260)}
#stK{font-size:calc(var(--u)*6.5);letter-spacing:calc(var(--u)*.8)}
#stP{margin:0;font-family:var(--f-pix);font-size:calc(var(--u)*6);line-height:1.9;color:var(--bone);min-height:calc(var(--u)*60);text-align:center}
#stP.big{font-family:var(--f-disp);font-size:calc(var(--u)*18);line-height:1.2;color:var(--blood);min-height:0}
#story .sthint{position:absolute;bottom:calc(var(--u)*8);font-family:var(--f-pix);font-size:calc(var(--u)*3.6);color:var(--dim)}
/* onomatopeya del batazo a la carrera */
.pop-t.pow{font-family:var(--f-disp);font-size:calc(var(--u)*13);color:#ffd23f;letter-spacing:calc(var(--u)*.6);
  text-shadow:0 calc(var(--u)*1.2) 0 #000,calc(var(--u)*-1) 0 #c3121c,calc(var(--u)*1) 0 #c3121c,0 calc(var(--u)*-1) 0 #000;animation:powpop .9s ease-out forwards}
@keyframes powpop{0%{transform:translateX(-50%) scale(.4) rotate(-14deg);opacity:1}20%{transform:translateX(-50%) scale(1.25) rotate(-8deg)}100%{transform:translateX(-50%) translateY(calc(var(--u)*-14)) scale(1) rotate(-8deg);opacity:0}}