*{box-sizing:border-box}html,body{touch-action:none;-webkit-user-select:none;user-select:none;background:#a7d3ee;height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app,canvas{width:100%;height:100%;display:block}.hud{pointer-events:none;color:#fff;text-shadow:0 1px 2px #000000b3;font-size:13px;position:fixed;inset:0}.hidden{display:none!important}.frame{background:#14181e8c;border:1px solid #ffffff26;border-radius:8px;padding:6px 8px;position:absolute}.player-frame{width:220px;top:10px;left:10px}.target-frame{text-align:center;width:240px;top:10px;left:50%;transform:translate(-50%)}.name{margin-bottom:2px;font-weight:600}.lv{color:#ffd966;font-weight:400}.kit,.stance{color:#bfe3ff;font-size:11px}.stance{margin-top:3px}.bar{background:#00000073;border-radius:4px;height:14px;margin-top:3px;position:relative;overflow:hidden}.bar i{background:#d64545;transition:width .15s;position:absolute;top:0;bottom:0;left:0}.bar.mp i{background:#3f7fd8}.bar.rage i{background:#e8822a}.bar.exp i{background:#e0b43a}.bar span{text-align:center;font-size:11px;line-height:14px;display:block;position:relative}.bar.exp{border-radius:0;height:16px;margin:0;position:absolute;bottom:0;left:0;right:0}.bar.exp span{line-height:16px}.gold{color:#ffe08a;margin-top:4px;font-size:12px}.minimap{border:2px solid #fff6;border-radius:8px;width:160px;height:160px;position:absolute;top:10px;right:10px}.messages{flex-direction:column;gap:2px;width:320px;display:flex;position:absolute;bottom:150px;left:10px}.msg{background:#00000059;border-radius:4px;width:-moz-fit-content;width:fit-content;padding:2px 6px;transition:opacity 1s}.msg.fade{opacity:0}.msg.exp{color:#ffe08a}.msg.gold{color:#ffd23f}.msg.warn{color:#ffb0a0}.msg.bad{color:#ff6b6b}.msg.good{color:#9dff9d}.skillbar{pointer-events:auto;align-items:flex-end;gap:6px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.bar-rows{flex-direction:column;gap:4px;display:flex}.bar-row{gap:4px;display:flex}.bar-row.hidden{display:none}.skill.slot{width:50px;height:50px}.skill.basic{width:62px;height:62px}.skill.empty{background:#1e242e66;border-style:dashed}.bar-side{flex-direction:column;gap:4px;display:flex}.bar-more,.bar-book{color:#ffd966;width:30px;height:24px;font:inherit;cursor:pointer;background:#1e242ecc;border:1px solid #ffffff59;border-radius:6px;padding:0;font-size:11px}.drag-ghost{z-index:50;pointer-events:none;color:#fff;text-align:center;background:#283854eb;border:2px solid #ffd966;border-radius:10px;justify-content:center;align-items:center;width:54px;height:54px;font-size:10px;display:flex;position:fixed;transform:translate(-50%,-50%)}.skillbook{pointer-events:auto;width:min(440px,94vw);max-height:58vh;text-shadow:none;background:#181c24f2;border:1px solid #ffffff40;border-radius:10px;padding:10px 12px;position:absolute;bottom:150px;right:12px;overflow:auto}.book-head{color:#ffd966;justify-content:space-between;align-items:center;font-size:15px;display:flex}.book-close{color:#fff;cursor:pointer;background:0 0;border:none;font-size:20px}.book-hint{color:#bbb;margin:4px 0 8px;font-size:11px}.book-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;display:grid}.book-item{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;align-items:center;gap:8px;padding:6px;display:flex;position:relative}.book-item .icon{text-align:center;background:#34465f;border-radius:8px;flex:none;justify-content:center;align-items:center;width:42px;height:42px;font-size:9px;line-height:1.1;display:flex;overflow:hidden}.book-item .txt b{font-size:12px;display:block}.book-item .txt small{color:#bbb;font-size:10px;display:block}.book-item .on-bar{color:#ffd966;font-size:10px;font-style:normal;position:absolute;top:3px;right:5px}.book-item.locked{opacity:.5}.book-item.picked{outline:2px solid #ffd966}.skill{color:#fff;width:56px;height:56px;font:inherit;cursor:pointer;touch-action:none;background:#1e242ec7;border:2px solid #ffffff59;border-radius:10px;padding:0;font-size:10px;position:relative;overflow:hidden}.skill:active{transform:scale(.94)}.skill .key{color:#ffd966;font-size:10px;position:absolute;top:2px;left:4px}.skill .label{padding:15px 2px 0;line-height:1.1;display:block}.skill .lock{color:#ffd966;font-size:9px;font-style:normal;position:absolute;top:2px;right:4px}.skill .cd{justify-content:center;align-items:center;font-size:18px;font-style:normal;font-weight:700;display:flex;position:absolute;inset:0}.skill.nores{filter:grayscale(.8)brightness(.7)}.skill.locked{filter:grayscale()brightness(.45)}.banner{color:#ffe066;text-shadow:0 2px 8px #000000b3;white-space:nowrap;font-size:34px;font-weight:800;position:absolute;top:28%;left:50%;transform:translate(-50%)}.death{background:#50000099;border-radius:8px;padding:12px 18px;font-size:18px;position:absolute;top:40%;left:50%;transform:translate(-50%)}.floaters,.plates{position:absolute;inset:0;overflow:hidden}.floater{white-space:nowrap;will-change:transform;font-size:18px;font-weight:800;position:absolute;top:0;left:0}.floater.crit{color:#fc3;font-size:26px}.floater.hurt{color:#f55}.floater.miss{color:#ccc;font-size:14px}.plate{color:#fff;white-space:nowrap;text-align:center;background:#00000059;border-radius:4px;padding:1px 6px;font-size:12px;font-weight:600;line-height:1.25;position:absolute;top:0;left:0}.plate b{color:#ffd966;font-size:10px;font-weight:600;display:block}.help{pointer-events:auto;background:#14181e99;border-radius:8px;width:220px;padding:8px 10px;font-size:12px;line-height:1.5;position:absolute;top:222px;right:10px}.fps{font-size:12px;position:absolute;bottom:88px;right:12px}.hurt-flash{opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 90px 24px #ff1e1e99}.hurt-flash.on{animation:.4s ease-out hurt}@keyframes hurt{0%{opacity:1}to{opacity:0}}.dialog{pointer-events:auto;width:min(360px,90vw);text-shadow:none;background:#181c24f0;border:1px solid #ffffff40;border-radius:10px;padding:14px 16px;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.dialog h3{color:#ffd966;margin:0 0 8px;font-size:16px}.dialog p{margin:0 0 12px;line-height:1.5}.dialog .row{justify-content:flex-end;gap:8px;display:flex}.dialog button{color:#fff;font:inherit;cursor:pointer;background:#2d5c9e;border:1px solid #ffffff4d;border-radius:6px;padding:7px 14px}.dialog button.ghost{background:0 0}.castbar{background:#00000080;border-radius:4px;width:200px;height:16px;position:absolute;bottom:130px;left:50%;overflow:hidden;transform:translate(-50%)}.castbar i{background:#7cc4ff;position:absolute;top:0;bottom:0;left:0}.castbar span{text-align:center;font-size:11px;line-height:16px;display:block;position:relative}.menu{pointer-events:auto;gap:8px;display:flex;position:absolute;bottom:22px}.menu-left{left:12px}.menu-right{right:12px}.menu-item{flex-direction:column;align-items:center;gap:2px;display:flex}.menu-btn{color:#f3d38a;cursor:pointer;touch-action:none;background:radial-gradient(circle at 35% 30%,#5a4128,#24180e);border:2px solid #b08a4a;border-radius:8px;min-width:76px;height:36px;padding:0 10px;position:relative;box-shadow:inset 0 0 6px #0009}.menu-btn .glyph{white-space:nowrap;font:600 13px/32px system-ui,sans-serif}.menu-btn:hover{border-color:#f0c86a}.menu-btn.on{color:#fff3c4;border-color:#ffe08a;box-shadow:0 0 10px #ffd66ebf}.menu-btn .dot{background:#e0412f;border:1px solid #fff;border-radius:50%;width:10px;height:10px;display:none;position:absolute;top:-1px;right:-1px}.menu-btn.alert .dot{display:block}.menu-label{color:#f3e6c4;font-size:11px}.panel{z-index:20;pointer-events:auto;min-width:220px;text-shadow:none;color:#f3e6c4;background:#1e160ef2;border:2px solid #8a6a36;border-radius:6px;position:absolute;box-shadow:0 6px 20px #00000080}.panel-head{cursor:move;touch-action:none;background:linear-gradient(#5b3d1c,#3a2612);border-bottom:1px solid #8a6a36;justify-content:space-between;align-items:center;padding:5px 8px;display:flex}.panel-head b{color:#ffd77a;letter-spacing:1px}.panel-close{color:#f3d38a;cursor:pointer;background:#2a1c10;border:1px solid #8a6a36;border-radius:4px;width:22px;height:22px;padding:0;font-size:12px}.panel-body{padding:8px 10px}.panel-note{color:#c9b48a;margin:8px 0 0;font-size:11px;line-height:1.5}.panel-character{width:290px;max-height:calc(100vh - 150px);top:70px;left:80px;overflow:auto}.char-row{border-bottom:1px dashed #b08a4a40;justify-content:space-between;padding:2px 0;display:flex}.char-row b{color:#ffe9a8;font-weight:500}.char-head{flex-direction:column;gap:2px;margin-bottom:6px;display:flex}.char-head b{color:#ffd77a}.char-head span{color:#c9b48a;font-size:12px}.char-block{background:#0003;border:1px solid #b08a4a59;border-radius:4px;margin:6px 0;padding:4px 6px}.char-right{align-items:center;gap:4px;display:flex}.char-pm{color:#ffe08a;width:18px;height:18px;font:inherit;cursor:pointer;background:#2a1c10;border:1px solid #8a6a36;border-radius:3px;padding:0;font-size:12px;line-height:16px}.char-pm:disabled,.char-btn:disabled{opacity:.35;cursor:default}.char-btn{color:#e8d4a6;font:inherit;cursor:pointer;background:#2a1c10;border:1px solid #8a6a36;border-radius:4px;padding:1px 6px;font-size:11px}.char-up{color:#7ee07e;font-style:normal}.char-potential{color:#ffd77a;border-bottom:none}.char-exp{color:#c9b48a;font-size:12px}.panel-bag{width:262px;bottom:96px;right:12px}.bag-tabs{gap:4px;margin-bottom:6px;display:flex}.bag-tab,.bag-tools button,.sys-row button{color:#e8d4a6;font:inherit;cursor:pointer;background:#2a1c10;border:1px solid #8a6a36;border-radius:4px;padding:2px 8px;font-size:12px}.bag-tab.on,.sys-row button.on{color:#ffe08a;background:#6a4a22;border-color:#d0a456}.bag-grid{grid-template-columns:repeat(5,44px);gap:4px;display:grid}.bag-slot{background:#00000059 repeating-linear-gradient(45deg,#0000 0 6px,#b08a4a0f 6px 7px);border:1px solid #5c4626;border-radius:4px;width:44px;height:44px}.bag-tools{gap:4px;margin:6px 0;display:flex}.bag-gold{color:#ffe08a;font-size:12px}.panel-quests{width:260px;top:120px;right:190px}.panel-system{width:300px;top:18%;left:50%;transform:translate(-50%)}.panel-system h4{color:#ffd77a;margin:10px 0 4px;font-size:13px}.sys-row{align-items:center;gap:6px;margin:4px 0;display:flex}.sys-row span{width:70px}.sys-help{margin:0;font-size:12px;line-height:1.6}@media (max-width:1100px){.menu{bottom:104px}}@media (max-width:700px){.castbar{bottom:260px}.player-frame{width:170px}.target-frame{width:200px;top:64px}.minimap{width:110px;height:110px}.skillbar{gap:4px;bottom:20px}.bar-row{flex-wrap:wrap;width:248px}.skill.slot{width:38px;height:38px}.skill.basic{width:48px;height:48px}.skillbook{bottom:260px}.menu{flex-direction:column;gap:4px;bottom:190px}.menu-btn{min-width:64px;height:32px;padding:0 6px}.menu-btn .glyph{font-size:12px;line-height:28px}.menu-label{display:none}.panel-bag{top:60px;bottom:auto}.panel-character,.panel-quests{top:60px;left:50%;right:auto;transform:translate(-50%)}.skill .label{padding-top:13px;font-size:9px}.messages{width:220px;font-size:12px;bottom:140px}.help{width:180px;top:172px}.banner{font-size:24px}}