:root{
  --bg:#0B0B12; --bg2:#12121C; --panel:#171724; --panel2:#1E1E2E; --line:#2A2A3D;
  --tx:#ECECF4; --tx2:#A6A6BE; --tx3:#6E6E88;
  --acc:#7C5CFF; --ok:#2BD98B; --bad:#FF5470; --warn:#FFB020; --gold:#F5C542;
  --r:14px; --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:16px;line-height:1.5}
body{min-height:100vh;background:radial-gradient(1200px 600px at 80% -10%,#1d1440 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#0d2a2a 0%,transparent 55%),var(--bg)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
a{color:var(--acc)}
.boot{display:grid;place-items:center;min-height:100vh;color:var(--tx2);font-family:var(--mono)}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.mono{font-family:var(--mono)}
.muted{color:var(--tx2)} .dim{color:var(--tx3)}
.small{font-size:.86rem}
h1,h2,h3{margin:.2em 0 .4em;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(1.8rem,4vw,2.6rem)} h2{font-size:1.5rem} h3{font-size:1.15rem}

/* botones */
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--tx);padding:.65em 1.1em;border-radius:10px;font-weight:500;transition:.15s;display:inline-flex;align-items:center;gap:.5em}
.btn:hover{border-color:var(--acc);transform:translateY(-1px)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.sm{padding:.4em .75em;font-size:.88rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}

/* inputs */
input,textarea,select{font-family:inherit;font-size:1rem;background:var(--bg2);border:1px solid var(--line);color:var(--tx);border-radius:10px;padding:.7em .9em;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
textarea{min-height:150px;resize:vertical;line-height:1.5}
label{display:block;font-size:.85rem;color:var(--tx2);margin:.8em 0 .3em}

/* login / glitch */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .card{width:min(420px,100%)}
.glitch{position:relative;font-family:var(--mono);font-weight:700;letter-spacing:.04em;font-size:clamp(2rem,7vw,3.2rem);margin:0}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0;overflow:hidden}
.glitch::before{color:#ff2e88;transform:translate(-2px,0);clip-path:inset(0 0 55% 0);animation:gl1 2.8s infinite steps(1)}
.glitch::after{color:#20e3c2;transform:translate(2px,0);clip-path:inset(55% 0 0 0);animation:gl2 3.3s infinite steps(1)}
@keyframes gl1{0%,92%{transform:translate(0)}93%{transform:translate(-4px,-1px)}96%{transform:translate(3px,1px)}}
@keyframes gl2{0%,88%{transform:translate(0)}89%{transform:translate(4px,1px)}94%{transform:translate(-3px,0)}}

.card{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:var(--r);padding:20px;backdrop-filter:blur(6px)}
.card+.card{margin-top:14px}

/* HUD */
.hud{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hud .wrap{display:flex;align-items:center;gap:12px;padding:10px 16px}
.avatar{width:40px;height:40px;border-radius:10px;image-rendering:pixelated;background:var(--bg2);border:2px solid var(--acc);flex:none}
.lvl{font-family:var(--mono);font-size:.8rem;color:var(--tx2)}
.xpbar{height:6px;width:140px;background:var(--bg2);border-radius:9px;overflow:hidden;margin-top:3px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),#20e3c2);transition:width .6s}
.iconbtn{position:relative;background:var(--panel2);border:1px solid var(--line);color:var(--tx);border-radius:10px;width:40px;height:40px;display:grid;place-items:center;font-size:1.1rem}
.iconbtn .dot{position:absolute;top:-4px;right:-4px;background:var(--bad);color:#fff;font-size:.7rem;border-radius:9px;padding:0 5px;font-family:var(--mono)}
@media(max-width:600px){.xpbar{width:80px}.hud .alias{display:none}}

/* mapa */
.mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:10px}
.zcard{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:.2s;text-align:left;color:var(--tx);padding:0}
.zcard:hover{transform:translateY(-3px);border-color:var(--zc)}
.zcard .art{aspect-ratio:16/10;position:relative;overflow:hidden;background:#000}
.zcard .art svg{width:100%;height:100%;display:block}
.zcard .info{padding:14px 16px}
.zcard .tag{font-family:var(--mono);font-size:.75rem;color:var(--zc);text-transform:uppercase;letter-spacing:.08em}
.prog{height:5px;background:var(--bg2);border-radius:9px;overflow:hidden;margin-top:10px}
.prog i{display:block;height:100%;background:var(--zc,var(--acc));transition:width .8s}
.restorable{transition:filter 1.2s}
.glitchlayer{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);mix-blend-mode:multiply}
.glitchlayer::after{content:'';position:absolute;left:0;right:0;height:14%;top:30%;background:rgba(255,46,136,.18);animation:scan 3.5s infinite linear}
@keyframes scan{0%{top:-15%}100%{top:110%}}
.sello{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:.72rem;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.6);border:1px solid var(--line)}
.sello.ok{color:var(--ok);border-color:var(--ok)}

/* zona */
.zhead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:center}
@media(max-width:800px){.zhead{grid-template-columns:1fr}}
.zart{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative;aspect-ratio:16/10;background:#000}
.zart svg{width:100%;height:100%;display:block}
.lore{font-family:var(--mono);font-size:.92rem;color:var(--tx2);border-left:3px solid var(--zc);padding-left:12px}
.misiones{display:grid;gap:10px;margin-top:16px}
.mision{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);cursor:pointer;text-align:left;color:var(--tx);width:100%}
.mision:hover:not(.lock){border-color:var(--zc)}
.mision .ico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--bg2);font-size:1.25rem;flex:none}
.mision.done .ico{background:color-mix(in srgb,var(--zc) 25%,var(--bg2))}
.mision.lock{opacity:.5;cursor:not-allowed}
.mision .stars{font-size:.95rem;letter-spacing:2px;color:var(--gold)}
.mision .t{font-weight:500}
.mision .s{font-size:.82rem;color:var(--tx2)}

/* misión */
.mtop{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
.steps{display:flex;gap:4px;flex:1}
.steps i{height:5px;flex:1;border-radius:9px;background:var(--bg2)}
.steps i.ok{background:var(--ok)} .steps i.cur{background:var(--zc,var(--acc))}
.qtext{font-size:1.15rem;font-weight:500;margin:6px 0 16px}
.opts{display:grid;gap:10px}
.opt{text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);transition:.15s;display:flex;gap:12px;align-items:flex-start}
.opt:hover:not(:disabled){border-color:var(--zc,var(--acc))}
.opt .k{font-family:var(--mono);color:var(--tx3);flex:none}
.opt.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--panel2));opacity:.8}
.opt.good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--panel2))}
.fb{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);font-size:.95rem;animation:pop .25s}
.fb.ok{border-color:var(--ok)} .fb.bad{border-color:var(--bad)} .fb.hint{border-color:var(--warn)}
.fb b{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.fb.ok b{color:var(--ok)} .fb.bad b{color:var(--bad)} .fb.hint b{color:var(--warn)}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* clasificar */
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px}
.bin{min-height:120px;border:2px dashed var(--line);border-radius:12px;padding:10px;background:var(--bg2);transition:.15s}
.bin h4{margin:0 0 8px;font-size:.9rem;font-family:var(--mono);color:var(--tx2)}
.bin.over,.bin.target{border-color:var(--zc,var(--acc));background:color-mix(in srgb,var(--zc,var(--acc)) 10%,var(--bg2))}
.chip{display:inline-block;padding:7px 11px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);margin:3px;font-size:.9rem;user-select:none}
.chip.drag{cursor:grab}
.chip.sel{border-color:var(--zc,var(--acc));box-shadow:0 0 0 2px var(--zc,var(--acc))}
.chip.okc{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--panel2))}
.pool{min-height:60px;padding:10px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}

/* unir */
.unir{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.unir .col{display:grid;gap:8px;align-content:start}
.unir .u{padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);text-align:left;color:var(--tx)}
.unir .u.sel{border-color:var(--zc,var(--acc));box-shadow:0 0 0 2px var(--zc,var(--acc))}
.unir .u.done{border-color:var(--ok);opacity:.55}
@media(max-width:600px){.unir{grid-template-columns:1fr}}

/* ordenar */
.olist{display:grid;gap:8px}
.oitem{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2)}
.oitem .n{font-family:var(--mono);color:var(--tx3);width:20px}
.oitem .t{flex:1}
.oitem button{background:var(--bg2);border:1px solid var(--line);color:var(--tx);border-radius:8px;width:34px;height:30px}

/* chat */
.chat{background:#0E0E16;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chat .bar{padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.82rem;color:var(--tx2);display:flex;gap:8px;align-items:center}
.chat .bar i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
.chat .log{padding:14px;display:grid;gap:8px;max-height:420px;overflow-y:auto}
.msg{max-width:85%;padding:8px 12px;border-radius:12px;background:var(--panel2);animation:pop .25s}
.msg .de{font-family:var(--mono);font-size:.75rem;color:var(--zc,var(--acc));display:block}
.msg.yo{justify-self:end;background:color-mix(in srgb,var(--zc,var(--acc)) 25%,var(--panel2))}
.msg.sis{justify-self:center;background:transparent;color:var(--tx3);font-style:italic;font-size:.88rem;text-align:center}
.typing{color:var(--tx3);font-family:var(--mono);font-size:.8rem;padding:0 14px 10px}

/* archivo */
.arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.acard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;text-align:left;color:var(--tx)}
.acard.leida{border-color:color-mix(in srgb,var(--zc) 50%,var(--line))}
.lectura{max-width:720px;margin:0 auto}
.lectura p{font-size:1.08rem;line-height:1.7}
.dato{border-left:3px solid var(--gold);padding:8px 12px;background:var(--bg2);border-radius:0 10px 10px 0;font-size:.95rem}

/* resultados / modal */
.modal{position:fixed;inset:0;background:rgba(5,5,10,.75);display:grid;place-items:center;z-index:50;padding:16px;animation:pop .2s}
.modal .card{width:min(560px,100%);max-height:90vh;overflow:auto}
.big{font-size:3rem;font-family:var(--mono);font-weight:700}
.starsbig{font-size:2.2rem;color:var(--gold);letter-spacing:6px}
.insig{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ins{padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);text-align:center}
.ins .e{font-size:2rem}
.ins.no{opacity:.35;filter:grayscale(1)}
#toasts{position:fixed;bottom:16px;right:16px;display:grid;gap:8px;z-index:60}
.toast{background:var(--panel2);border:1px solid var(--acc);border-radius:12px;padding:10px 14px;animation:pop .25s;max-width:320px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.xpfloat{position:fixed;font-family:var(--mono);font-weight:700;color:var(--ok);pointer-events:none;animation:up 1.1s forwards;z-index:70}
@keyframes up{to{transform:translateY(-60px);opacity:0}}

/* pixel editor */
.pxgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;touch-action:none;user-select:none;width:min(100%,384px);aspect-ratio:1}
.pxgrid div{background:#14141f}
.palette{display:flex;flex-wrap:wrap;gap:6px}
.palette button{width:30px;height:30px;border-radius:7px;border:2px solid transparent}
.palette button.sel{border-color:#fff}

/* labs */
.lab{display:grid;gap:14px}
.labgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
@media(max-width:800px){.labgrid{grid-template-columns:1fr}}
.stage{background:#08080e;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative}
.stage svg{display:block;width:100%;height:auto}
.kv{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.9rem;padding:6px 0;border-bottom:1px dashed var(--line)}
.reto{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel)}
.reto.ok{border-color:var(--ok)}
.reto h4{margin:0 0 8px;font-family:var(--mono);font-size:.82rem;color:var(--zc,var(--acc));letter-spacing:.06em;text-transform:uppercase}
.result{padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);margin-top:6px}
.result .u{font-size:.8rem;color:#7fd17f;font-family:var(--mono)}
.result .tt{color:#8ab4ff;font-weight:500}
.ccbadge{display:inline-flex;gap:6px;align-items:center;padding:8px 12px;border-radius:10px;background:#000;border:1px solid #444;font-family:var(--mono);font-weight:700}
.toggle{display:flex;gap:6px;flex-wrap:wrap}
.toggle button{padding:.5em .9em;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--tx)}
.toggle button.on{border-color:var(--zc,var(--acc));background:color-mix(in srgb,var(--zc,var(--acc)) 25%,var(--panel2))}
.hot{cursor:pointer;transition:.15s}
.hot:hover{filter:brightness(1.4)}
input[type=range]{padding:0;accent-color:var(--zc,var(--acc))}
.video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vida{font-size:1.4rem}
.vida.off{filter:grayscale(1);opacity:.3}

/* v2: ilustraciones, unidades aprobadas */
.ilu{display:inline-grid;place-items:center;color:var(--tx);flex:none}
.ilu svg{width:100%;height:100%;display:block}
.ilu.xs{width:22px;height:22px;vertical-align:-6px;margin-right:6px}
.ilu.big{width:92px;height:92px;display:grid;margin:0 auto 6px;padding:12px;border-radius:20px;background:color-mix(in srgb,var(--zc,var(--acc)) 12%,var(--bg2));border:1px solid var(--line)}
.ilu.hero{width:120px;height:120px;display:grid;padding:16px;border-radius:24px;background:color-mix(in srgb,var(--zc,var(--acc)) 14%,var(--bg2));border:1px solid var(--line);margin:6px 0 10px}
.ilu.card{width:44px;height:44px;float:right;margin-left:8px}
img.ilu.foto{max-width:100%;max-height:260px;border-radius:12px;display:block;margin:0 auto 10px;width:auto;height:auto}
.chip .ilu.xs{margin-right:4px}
.unir .u{display:flex;align-items:center;gap:6px}
.zcard.aprobada{cursor:default;opacity:.85}
.zcard.aprobada:hover{transform:none}
.zcard.aprobada .tag{color:var(--ok)}