:root{--fondo:#130d24;--panel:#140c26e0;--borde:#6b4fb0;--texto:#f1e9ff;--suave:#a99bc9;--acento:#ffb347;--vida:#e0405a;--mana:#3fa7ff;--legend:#ffd24a}*{box-sizing:border-box}html,body{background:var(--fondo);height:100%;color:var(--texto);-webkit-user-select:none;user-select:none;margin:0;font-family:Trebuchet MS,Segoe UI,sans-serif;overflow:hidden}#game,#game canvas{width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}#hud{pointer-events:none;text-shadow:0 2px 4px #000;position:fixed;inset:0}#hud .top{justify-content:space-between;gap:8px;padding:12px 16px;font-size:clamp(14px,2.4vw,22px);font-weight:700;display:flex}#h-round{color:var(--acento);letter-spacing:2px}#hud .bottom{gap:8px;width:min(340px,70vw);display:grid;position:absolute;bottom:16px;left:16px}.bar{background:#0000008c;border:2px solid #000;height:22px;position:relative}.bar i{transform-origin:0;width:100%;position:absolute;inset:0}.bar.hp i{background:var(--vida)}.bar.mp i{background:var(--mana);height:100%}.bar span{text-align:center;font-size:13px;font-weight:700;line-height:18px;position:absolute;inset:0}#h-weapon{font-size:16px;font-weight:700}#h-elems{min-height:28px;font-size:22px}#h-combo{color:var(--acento);text-align:right;font-size:clamp(22px,4vw,40px);font-weight:900;position:absolute;top:70px;right:20px}#h-dash{color:var(--suave);font-size:14px;position:absolute;bottom:20px;right:20px}#banner{text-align:center;letter-spacing:4px;color:var(--acento);text-shadow:0 4px #000,0 0 30px #7a4fff;opacity:0;pointer-events:none;padding:0 12px;font-size:clamp(28px,7vw,72px);font-weight:900;transition:opacity .4s;position:fixed;top:22%;left:0;right:0}#banner.show{opacity:1}#dmg{pointer-events:none;position:fixed;inset:0;overflow:hidden}#dmg div{color:#fff;text-shadow:0 2px #000;will-change:transform;font-size:20px;font-weight:900;display:none;position:absolute;top:0;left:0}#dmg div.crit{color:var(--legend);font-size:30px}#dmg div.heal{color:#7dff9a}#dmg div.hurt{color:#ff6a6a}.ov{background:#0a05149e;place-items:center;padding:12px;display:grid;position:fixed;inset:0;overflow:auto}.panel{background:var(--panel);border:3px solid var(--borde);text-align:center;width:100%;max-width:560px;padding:clamp(16px,4vw,32px)}.panel.wide{max-width:980px}h1{color:var(--acento);text-shadow:0 3px #000;margin:0 0 8px;font-size:clamp(30px,7vw,54px);line-height:1.05}h2{color:var(--acento);margin:0 0 8px;font-size:clamp(26px,5vw,40px)}.sub{color:var(--suave);margin:0 0 16px}.keys{text-align:left;background:#00000059;margin-bottom:20px;padding:12px 16px;font-size:15px;line-height:1.9}.keys b{color:var(--acento)}.btn{background:var(--acento);color:#1a1030;cursor:pointer;border:0;width:100%;margin:8px 0 0;padding:14px;font-size:18px;font-weight:800;display:block}.btn:hover{filter:brightness(1.1)}.btn.ghost{color:var(--texto);border:2px solid var(--borde);background:0 0}.best{color:var(--suave);margin:14px 0 0;font-size:14px}.stats{margin-bottom:12px;font-size:20px;line-height:2}.stats b{color:var(--acento)}#cards{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.card{border:3px solid var(--borde);cursor:pointer;text-align:center;color:var(--texto);font:inherit;background:#22153f;padding:16px 12px}.card:hover{border-color:var(--acento);transform:translateY(-4px)}.card .ic{font-size:44px}.card .tg{text-transform:uppercase;letter-spacing:2px;color:var(--suave);margin-top:4px;font-size:12px}.card h3{margin:8px 0 6px;font-size:20px}.card p{color:var(--suave);margin:0;font-size:14px}.card .un{color:var(--acento);margin-top:8px;font-size:14px;font-weight:700}.card.legend{border-color:var(--legend);box-shadow:0 0 24px #ffd24a73}#combos{text-align:left;color:var(--suave);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px 16px;margin-top:18px;font-size:14px;display:grid}#combos .on{color:#7dff9a;font-weight:700}#combos .near{color:var(--acento)}@media (width<=720px){#cards{grid-template-columns:1fr}.card{text-align:left;grid-template-columns:56px 1fr;align-items:center;gap:0 10px;display:grid}.card .ic{grid-row:span 3}}#flash{pointer-events:none;opacity:0;background:radial-gradient(#0000 40%,#dc1432a6 100%);transition:opacity .25s;position:fixed;inset:0}#flash.on{opacity:1;transition:none}#h-boss{width:min(520px,80vw);position:absolute;top:56px;left:50%;transform:translate(-50%)}#h-boss i{background:#b22a2a}#h-spell{color:var(--suave);font-size:15px}#h-weapon b{color:var(--acento)}#cross{pointer-events:none;opacity:.85;width:18px;height:18px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#cross:before,#cross:after{content:"";background:#fff;position:absolute;box-shadow:0 0 3px #000}#cross:before{clip-path:polygon(0 0,100% 0,100% 35%,0 35%,0 65%,100% 65%,100% 100%,0 100%);width:2px;height:18px;top:0;left:8px}#cross:after{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,65% 0,100% 0,100% 100%,65% 100%);width:18px;height:2px;top:8px;left:0}body.menu #cross{display:none}html,body{touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.tc,body.touch .kb{display:none}body.touch .tc{display:block}.btn,.card{touch-action:manipulation}.ov{touch-action:pan-y}#touch{pointer-events:none;z-index:5;display:none;position:fixed;inset:0}#touch.on{display:block}#touch>*{pointer-events:auto}#look-zone{position:absolute;inset:0}#joy-zone{width:46%;height:62%;position:absolute;bottom:0;left:0}#joy-base{pointer-events:none;background:#ffffff1a;border:3px solid #ffffff59;border-radius:50%;width:128px;height:128px;margin:-64px 0 0 -64px;display:none;position:absolute}#joy-base.on{display:block}#joy-knob{background:#ffffff8c;border-radius:50%;width:56px;height:56px;position:absolute;top:36px;left:36px}.tb{color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1e123c8c;border:3px solid #ffffff8c;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute}.tb.down{background:#ffb347bf;transform:scale(.94)}.tb.lg{width:92px;height:92px;right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));font-size:40px}.tb.md{width:64px;height:64px;font-size:28px}.tb.sm{width:46px;height:46px;font-size:18px}#tb-spell{right:calc(124px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom))}#tb-jump{right:calc(30px + env(safe-area-inset-right));bottom:calc(126px + env(safe-area-inset-bottom))}#tb-dash{right:calc(110px + env(safe-area-inset-right));bottom:calc(110px + env(safe-area-inset-bottom))}#tb-pause{right:calc(12px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top))}#tb-weapon{right:calc(66px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top))}#tb-cycle{right:calc(120px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top))}#rotate{z-index:50;text-align:center;color:var(--acento);background:#130d24;place-items:center;padding:24px;font-size:22px;font-weight:800;display:none;position:fixed;inset:0}@media (orientation:portrait){body.touch #rotate{display:grid}}body.touch #cross{display:none}body.touch #hud .top{padding:calc(8px + env(safe-area-inset-top)) 186px 0 calc(12px + env(safe-area-inset-left));gap:6px;font-size:13px}body.touch #hud .bottom{left:calc(12px + env(safe-area-inset-left));gap:4px;width:min(210px,34vw);top:44px;bottom:auto}body.touch .bar{height:16px}body.touch .bar span{font-size:11px;line-height:12px}body.touch #h-weapon{font-size:13px}body.touch #h-elems{min-height:18px;font-size:16px}body.touch #h-spell,body.touch #h-dash{display:none}body.touch #h-combo{top:44px;right:calc(14px + env(safe-area-inset-right));font-size:20px}body.touch #h-boss{width:min(300px,50vw);top:34px}body.touch #banner{font-size:clamp(22px,6vw,44px);top:16%}body.touch .keys{font-size:13px;line-height:1.6}@media (height<=520px){.ov{align-items:start}.panel{padding:14px 18px}h1{margin-bottom:4px;font-size:28px}h2{margin-bottom:4px;font-size:24px}.sub{margin-bottom:8px;font-size:13px}.keys{margin-bottom:10px;padding:8px 12px}.btn{padding:10px;font-size:16px}.stats{font-size:16px;line-height:1.6}#cards{grid-template-columns:repeat(3,1fr);gap:8px}.card{text-align:center;padding:8px 6px;display:block}.card .ic{font-size:26px}.card h3{margin:2px 0;font-size:15px}.card p,.card .un{font-size:11px}.card .tg{font-size:10px}#combos{grid-template-columns:repeat(3,1fr);margin-top:8px;font-size:11px}}@media (width<=720px) and (height>=521px){#hud .top{font-size:13px}}