:root{--hud-font: "Courier New", "Microsoft YaHei", monospace;color-scheme:dark}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#090c12;color:#e7e9ee;font-family:var(--hud-font)}canvas{display:block;touch-action:none;overscroll-behavior:none}#app{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none;overscroll-behavior:none}#ui-root{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.hud{position:absolute;top:0;right:0;bottom:0;left:0}.bar{position:relative;height:14px;background:#0000008c;border:1px solid rgba(255,255,255,.25);border-radius:2px;overflow:hidden}.bar-fill{height:100%;transition:width .12s ease-out}.hp-fill{background:linear-gradient(180deg,#ff5a5a,#b71c1c)}.mp-fill{background:linear-gradient(180deg,#4da3ff,#154fa8)}.xp-fill{background:linear-gradient(180deg,#ffd54f,#b78100)}.panel{pointer-events:auto;background:#000000b8;border:1px solid #3c475c;border-radius:6px;box-shadow:0 18px 60px #00000080}.tooltip{position:fixed;z-index:100;max-width:280px;padding:10px 12px;background:#000;pointer-events:none;font-size:13px;line-height:1.45}.damage-number{position:fixed;z-index:2000;transform:translate(-50%,-50%);font-weight:900;text-shadow:0 0 4px #000,0 2px 3px #000;pointer-events:none;white-space:nowrap}.hud-damage{position:fixed;z-index:2500;transform:translate(-50%,-50%);font-weight:900;pointer-events:none;white-space:nowrap;text-shadow:0 0 4px #000,0 2px 4px #000;animation:hud-damage-pop .7s ease-out forwards}@keyframes hud-damage-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}15%{opacity:1;transform:translate(-50%,-55%) scale(1.15)}to{opacity:0;transform:translate(-50%,-120%) scale(1)}}.center-message{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;text-shadow:0 3px 8px #000;pointer-events:none}.touch-controls{display:none}html.mobile-ui,html.mobile-ui body{position:fixed;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html.mobile-ui body{user-select:none;-webkit-user-select:none}html.mobile-ui .touch-controls{display:block}html.mobile-ui button{min-height:44px}.touch-button{min-width:48px;min-height:48px}.touch-button.touch-attack{background:#dc3c3c9e;border-color:#ffafafb8}.touch-button.touch-skill{background:#205888a8;border-color:#91cdffb3}.touch-button.touch-skill.is-empty{background:#0a0e145c;border-color:#ffffff2e;color:#ffffff73}.touch-button.touch-skill.is-cooldown{filter:saturate(.55)}.touch-skill-label{position:relative;z-index:2;pointer-events:none}.touch-skill-cooldown{pointer-events:none;z-index:1}.touch-button.touch-utility,.touch-button.touch-pause{background:#0a0e14b3;border-color:#ffffff7a}.mobile-scroll{touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.panel-close-button{z-index:2}.mobile-ui .hud-bars{width:min(42vw,250px)!important;left:max(14px,env(safe-area-inset-left))!important;top:max(14px,env(safe-area-inset-top))!important}.mobile-ui .hud-info{right:max(12px,env(safe-area-inset-right))!important;top:calc(max(72px,env(safe-area-inset-top)) + 8px)!important;font-size:12px!important}.mobile-ui .hud-mute{right:max(12px,env(safe-area-inset-right))!important;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 112px)!important;padding:8px 10px!important}.mobile-ui .hud-skills{display:none!important}.mobile-ui .hud-crosshair{opacity:.12!important}.mobile-ui .center-message{top:38%;font-size:.82em}.mobile-ui .panel{max-width:96vw}@media(orientation:landscape){html.mobile-ui .hud-bars{width:min(32vw,250px)!important}html.mobile-ui .touch-button{min-width:48px;min-height:48px}}@media(max-height:480px){html.mobile-ui .touch-joystick{width:92px;height:92px}html.mobile-ui .touch-skill-cluster{gap:5px}html.mobile-ui .hud-info{display:none!important}}