:root{--ink: #ffffff;--muted: #c9d6f5;--panel: rgba(20, 30, 70, .72);--panel-solid: rgba(22, 30, 72, .92);--line: rgba(255, 255, 255, .22);--rift: #a855f7;--pink: #ff4fd8;--cyan: #5ee7ff;--gold: #ffd166;--red: #ff3b5c;--green: #6bff9e;--safe-top: 0px;--safe-bottom: 0px}html,body{margin:0;height:100%;overflow:hidden;background:#a9dcff;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink)}#stage{position:fixed;inset:0}#stage canvas{display:block;width:100%;height:100%}#floaters{position:fixed;inset:0;pointer-events:none;overflow:hidden}#hud{position:fixed;inset:0;pointer-events:none}#hud .top{position:absolute;top:calc(var(--safe-top) + 10px);left:12px;right:12px;display:flex;justify-content:space-between;align-items:center}.player-card{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;background:var(--panel);border:1px solid var(--line);border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 16px #0a143c40}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:14px;letter-spacing:-.5px;background:radial-gradient(circle at 35% 30%,#6a7fd6,#26336e);border:2px solid var(--gold)}.hp{position:relative;width:132px;height:16px;border-radius:999px;background:#0006;overflow:hidden}.hp-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(180deg,#8cff7a,#3fcf4f);transition:width .15s ease}.hp-fill.low{background:linear-gradient(180deg,#ff7a8c,#ff3b5c)}.hp-text{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.6)}.gems{display:flex;align-items:center;gap:7px;padding:7px 14px 7px 10px;background:var(--panel);border:1px solid var(--line);border-radius:999px;font-size:17px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.gem{width:16px;height:16px;background:linear-gradient(135deg,#e3b6ff,var(--rift));transform:rotate(45deg) scale(.85);border-radius:3px;box-shadow:0 0 10px #a855f7cc}.rift-chip{position:absolute;top:calc(var(--safe-top) + 64px);left:12px;display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-weight:800;font-size:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.rift-dot{width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:pulse 1.2s ease-in-out infinite}.sep{width:1px;height:14px;background:var(--line)}@keyframes pulse{50%{opacity:.35}}#banner{position:absolute;top:28%;left:0;right:0;text-align:center;font-size:30px;font-weight:900;letter-spacing:.5px;text-shadow:0 3px 0 rgba(40,20,90,.6),0 0 24px rgba(168,85,247,.9);opacity:0}#banner.show{animation:banner 1.5s ease forwards}@keyframes banner{0%{opacity:0;transform:scale(1.4)}12%{opacity:1;transform:scale(1)}75%{opacity:1}to{opacity:0;transform:translateY(-10px)}}#hint{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 210px);transform:translate(-50%);width:min(86vw,360px);padding:8px 12px;border-radius:12px;background:#141e468c;font-size:13px;font-weight:600;text-align:center;transition:opacity .6s ease}#hint.hidden{opacity:0}#stick{position:absolute;left:92px;top:calc(100% - var(--safe-bottom) - 120px);width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;background:radial-gradient(circle,#ffffff14,#ffffff2e);border:2px solid rgba(255,255,255,.45);box-shadow:0 4px 18px #0a143c40;opacity:.55;transition:opacity .15s}#stick.active{opacity:1;transition:none}#knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#d8e2ff);box-shadow:0 3px 10px #0a143c59}.btn{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;border:3px solid rgba(255,255,255,.85);color:#fff;display:grid;place-items:center;padding:0;font:inherit;--cd: 0;box-shadow:0 6px 18px #0a143c59,inset 0 2px #ffffff40;transition:transform .08s ease}.btn:after{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(rgba(10,15,40,.62) calc(var(--cd) * 360deg),transparent 0)}.btn svg{width:46%;height:46%;fill:currentColor;position:relative;top:-5px}.btn .name{position:absolute;bottom:12%;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}.btn .cd{position:absolute;z-index:1;font-size:20px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.6)}.btn.pressed{transform:scale(.9)}.btn.ready{border-color:#fff}.btn.dash{right:18px;bottom:calc(var(--safe-bottom) + 70px);width:92px;height:92px;background:radial-gradient(circle at 40% 30%,#4a6be0,#22307a)}.btn.dash.ready{box-shadow:0 0 22px #5ee7ffb3,0 6px 18px #0a143c59}.btn.skill{right:118px;bottom:calc(var(--safe-bottom) + 34px);width:70px;height:70px;background:radial-gradient(circle at 40% 30%,#c06cff,#6a22b8)}.btn.skill.ready{box-shadow:0 0 22px #ff4fd8b3,0 6px 18px #0a143c59}.dmg{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:17px;color:#fff;text-shadow:0 2px 0 rgba(30,20,70,.8),0 0 6px rgba(0,0,0,.4);animation:float-up .7s ease-out forwards;white-space:nowrap}.dmg.crit{color:var(--gold);font-size:24px}.dmg.hurt{color:var(--red);font-size:22px}.dmg.heal{color:var(--green);font-size:21px}.dmg.stun{color:var(--gold);font-size:14px;letter-spacing:1px}@keyframes float-up{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}15%{opacity:1;transform:translate(-50%,-60%) scale(1)}to{opacity:0;transform:translate(-50%,-190%) scale(.95)}}.ebar{position:absolute;left:0;top:0;width:46px;height:6px;border-radius:4px;background:#140f28a6;overflow:hidden;box-shadow:0 0 0 1px #00000059}.ebar.charger{width:64px;height:7px}.ebar i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#ff6b7d,var(--red))}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:radial-gradient(ellipse at 50% 40%,#a855f733,#0e1232b8 70%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease}.overlay.show{opacity:1;pointer-events:auto}.panel{width:min(360px,100%);background:var(--panel-solid);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:22px 20px 18px;box-sizing:border-box;box-shadow:0 20px 60px #00000073,inset 0 1px #ffffff14;text-align:center;transform:translateY(8px) scale(.98);transition:transform .25s ease}.overlay.show .panel{transform:none}.title{font-size:28px;font-weight:900;letter-spacing:.5px}.title.win{color:var(--cyan);text-shadow:0 0 18px rgba(94,231,255,.6)}.title.lose{color:var(--pink);text-shadow:0 0 18px rgba(255,79,216,.5)}.sub{color:var(--muted);font-size:14px;margin:6px 0 16px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.stat{background:#ffffff0f;border-radius:12px;padding:10px 8px}.stat b{display:block;font-size:20px}.stat span{font-size:12px;color:var(--muted)}.weapons{display:flex;gap:8px;margin-bottom:12px}.weapons button{flex:1;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:#ffffff0d;color:var(--ink);font:inherit;font-weight:800}.weapons button.sel{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px #ffd1664d}button.primary{width:100%;padding:14px;border-radius:14px;border:0;font:inherit;font-size:17px;font-weight:900;color:#fff;background:linear-gradient(180deg,#c06cff,#7b2ff0);box-shadow:0 6px 24px #a855f773}button:active{transform:scale(.98)}