html,body{margin:0;padding:0;height:100%;width:100%;background:#0d0d12;color:#e6e6e6;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;overflow:hidden;user-select:none}#renderCanvas{width:100vw;height:100vh;display:block;outline:none;touch-action:none}.hidden{display:none!important}#login{position:absolute;inset:0;background:radial-gradient(circle at center,#1c1c28,#0a0a10);display:flex;align-items:center;justify-content:center;z-index:100}.login-box{background:#14141ef2;padding:32px;border:1px solid #2c2c40;border-radius:8px;width:320px;text-align:center}.login-box h1{margin:0 0 16px;letter-spacing:1px}.login-box input{width:100%;padding:10px;font-size:16px;background:#0d0d14;border:1px solid #2c2c40;color:#fff;border-radius:4px;margin-bottom:12px;box-sizing:border-box}.login-box #class-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.class-choice{min-height:78px;padding:9px;background:#11131a;color:#ddd;border:1px solid #303544;border-radius:6px;cursor:pointer;text-align:left}.class-choice:hover{border-color:#536078}.class-choice.selected{border-color:#78a6ff;background:#172033}.class-choice-name{display:block;color:#fff;font-size:13px;font-weight:700;margin-bottom:4px}.class-choice-desc{display:block;color:#aeb5c2;font-size:11px;line-height:1.25}.login-box>button{width:100%;padding:10px;background:#4d6fff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px}.login-box>button:hover{background:#5d7fff}.login-box .hint{font-size:12px;color:#888;margin-top:12px}#world-overlay{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.nameplate{position:absolute;top:0;left:0;pointer-events:none;transition:opacity .1s;text-align:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}.np-name{font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9);margin-bottom:2px;white-space:nowrap}.np-bar{width:92px;height:7px;background:#0009;border:1px solid rgba(255,255,255,.2);border-radius:2px;margin:0 auto;overflow:hidden}.np-bar-fill{height:100%;background:linear-gradient(180deg,#4dd672,#2ea84b);transition:width .15s ease-out}.nameplate.team-0 .np-name{color:#b6cfff}.nameplate.team-1 .np-name{color:#ffbdbd}.nameplate.dead{opacity:.35}.nameplate.dead .np-bar-fill{background:#555}.combat-float{--float-x: 0px;position:absolute;left:50%;bottom:36px;transform:translate(calc(-50% + var(--float-x)));font-size:18px;font-weight:800;letter-spacing:0;white-space:nowrap;pointer-events:none;animation:combat-float .95s ease-out forwards;text-shadow:0 2px 2px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.8)}.combat-float.damage{color:#ff5f5f}.combat-float.heal{color:#59f280}.combat-float.crit{font-size:24px;color:#ffd65a}.combat-float.heal.crit{color:#9dff72}@keyframes combat-float{0%{opacity:0;transform:translate(calc(-50% + var(--float-x))) translateY(8px) scale(.9)}16%{opacity:1;transform:translate(calc(-50% + var(--float-x))) translateY(0) scale(1.08)}to{opacity:0;transform:translate(calc(-50% + var(--float-x))) translateY(-42px) scale(1)}}#hud{position:absolute;inset:0;pointer-events:none;z-index:10}#status-banner{position:absolute;top:20%;left:50%;transform:translate(-50%);font-size:48px;font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8);letter-spacing:2px;pointer-events:none}.panel{position:absolute;top:24px;width:280px;background:#0000008c;padding:12px;border-radius:6px;border:1px solid rgba(255,255,255,.08)}.panel.left{left:24px}.panel.right{right:24px}.panel .name{font-weight:600;margin-bottom:6px;font-size:15px}.bar{height:18px;background:#ffffff14;border-radius:3px;overflow:hidden;position:relative}.bar-fill{height:100%;transition:width .12s ease-out}.bar-fill.hp{background:linear-gradient(180deg,#4dd672,#2ea84b)}.hp-text{font-size:12px;margin-top:4px;color:#ccc;text-align:right}#cast-bar{position:absolute;bottom:22%;left:50%;transform:translate(-50%);width:320px;height:22px;background:#0009;border:1px solid rgba(255,255,255,.15);border-radius:4px;overflow:hidden}.cast-bar{position:relative}.cast-bar.small{width:100%;height:14px;margin-top:6px}.cast-fill{height:100%;background:linear-gradient(180deg,#ffce5c,#d99a23);width:0%;transition:width 50ms linear}.cast-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.8)}#ability-bar{position:absolute;bottom:32px;left:50%;transform:translate(-50%);display:flex;gap:6px}.ability{width:64px;height:64px;background:#14141ed9;border:1px solid #444;border-radius:6px;position:relative;text-align:center;font-size:11px;color:#ccc;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}.ability.kind-damage{border-color:#7c4b3d}.ability.kind-heal{border-color:#40784a}.ability.kind-interrupt{border-color:#7b7341}.ability.kind-charge{border-color:#8d7a44}.ability-name{position:absolute;top:6px;left:0;right:0;font-size:11px;padding:0 4px}.hotkey{font-size:12px;font-weight:700;color:#fff;background:#00000080;border-radius:3px;padding:1px 5px}.cooldown-overlay{position:absolute;inset:0;background:#0009;color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:6px;opacity:0;transition:opacity 80ms}.ability.on-cooldown .cooldown-overlay{opacity:1}#event-log{position:absolute;bottom:110px;left:24px;width:320px;font-size:12px;line-height:1.5;color:#ccc;pointer-events:none}#event-log .row{background:#0006;padding:3px 8px;border-radius:3px;margin-top:2px;animation:fade 6s forwards}#event-log .row.damage{color:#ff8080}#event-log .row.heal{color:#88e8a0}#event-log .row.interrupt{color:#ffe066}@keyframes fade{0%{opacity:1}80%{opacity:1}to{opacity:0}}#controls-hint{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:11px;color:#888}#mobile-controls{display:none}.mobile-joystick,.mobile-btn{-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none}@media (hover: none) and (pointer: coarse){#mobile-controls{position:absolute;inset:0;display:block;pointer-events:none;z-index:30}.mobile-joystick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;background:#080a106b;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 26px #ffffff0d,0 8px 22px #00000047;pointer-events:auto}#mobile-joystick-thumb{--stick-x: 0px;--stick-y: 0px;position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));background:#e6ecf83d;border:1px solid rgba(255,255,255,.28);box-shadow:0 4px 14px #00000059;transition:transform 40ms linear}.mobile-actions{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:190px;height:188px;pointer-events:none}.mobile-btn{position:absolute;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:#0d0f16ad;color:#f2f4f8;font-size:12px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;pointer-events:auto;box-shadow:0 6px 18px #00000057;backdrop-filter:blur(8px)}.mobile-btn:active{transform:scale(.94);background:#32405cc7}.mobile-btn.kind-damage{border-color:#ff805c6b}.mobile-btn.kind-heal{border-color:#6fe2886b}.mobile-btn.kind-interrupt{border-color:#ffdd606b}.mobile-btn.kind-charge{border-color:#ffc85c80}.mobile-btn.on-cooldown:after{content:attr(data-cooldown);position:absolute;inset:0;border-radius:50%;background:#000000ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}.mobile-target{left:0;top:68px;width:66px;height:44px;border-radius:999px;font-size:11px}.mobile-jump{left:66px;top:0;width:68px;height:68px;border-color:#78a6ff80}.mobile-ability[data-mobile-ability="1"]{left:66px;top:72px}.mobile-ability[data-mobile-ability="2"]{left:0;top:124px}.mobile-ability[data-mobile-ability="3"]{left:66px;top:130px}.mobile-ability[data-mobile-ability="4"]{left:132px;top:72px}.mobile-ability[data-mobile-ability="5"]{left:132px;top:130px}#controls-hint,#ability-bar{display:none}}@media (max-width: 760px){.login-box{width:min(92vw,360px);padding:20px}.login-box #class-picker{grid-template-columns:1fr;max-height:42vh;overflow:auto}.panel{width:220px}#ability-bar{bottom:24px;gap:4px}.ability{width:54px;height:58px}#controls-hint{display:none}}#match-result{position:absolute;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:50;pointer-events:auto}.match-result-box{background:#14141ef2;border:1px solid #2c2c40;border-radius:8px;padding:28px 36px;text-align:center;min-width:320px}#match-result-title{font-size:32px;font-weight:700;margin-bottom:8px}#match-result-title.victory{color:#4dd672}#match-result-title.defeat{color:#ff7070}#match-result-sub{font-size:14px;color:#aaa;margin-bottom:20px}.match-result-box button{padding:10px 18px;font-size:15px;border-radius:4px;border:none;cursor:pointer;margin:0 4px}#rematch-btn{background:#4d6fff;color:#fff}#rematch-btn:hover{background:#5d7fff}#rematch-btn:disabled{background:#2b3470;color:#aaa;cursor:default}#leave-btn{background:#444;color:#fff}#leave-btn:hover{background:#555}