*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;background:#05070d;font-family:KaiTi,STKaiti,PingFang SC,Microsoft YaHei,serif;color:#d8dce8;overflow:hidden}#app{position:relative;width:min(100vw,56.25vh);height:min(100vh,calc(100vw * 16 / 9));margin:0 auto;background:#0a0d18;overflow:hidden}#app canvas{display:block}.dlg-mask{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#04060c8c;backdrop-filter:blur(2px)}.dlg{width:78%;max-width:420px;padding:26px 22px;background:linear-gradient(180deg,#181610f5,#100f0bf5);border:1px solid #6b5a33;border-radius:14px;box-shadow:0 8px 40px #0009;display:flex;flex-direction:column;gap:14px}.dlg-title{text-align:center;font-size:24px;letter-spacing:8px;color:#f3d98a}.dlg-input{width:100%;padding:12px 14px;font-size:16px;font-family:inherit;color:#f0ead6;background:#ffffff0d;border:1px solid #4a4028;border-radius:8px;outline:none}.dlg-input:focus{border-color:#c9a860}.dlg-btn{padding:12px;font-size:18px;letter-spacing:4px;font-family:inherit;color:#241c0c;background:linear-gradient(180deg,#e8cf96,#c9a860);border:none;border-radius:8px;cursor:pointer}.dlg-btn:disabled{opacity:.5}.dlg-btn.ghost{color:#b8ad8d;background:#ffffff0d;border:1px solid #4a4028}.dlg-btn.small{padding:8px 16px;font-size:14px;letter-spacing:2px}.srv-dlg{max-height:74%}.srv-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:46vh}.srv-item{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#ffffff0a;border:1px solid #3a3220;border-radius:10px;cursor:pointer}.srv-item.sel{border-color:#c9a860;background:linear-gradient(180deg,#e8cf9629,#c9a8600f)}.srv-tag{flex:none;font-size:11px;color:#ffb1a0;border:1px solid #8a5040;border-radius:4px;padding:1px 5px}.srv-name{font-size:17px;color:#f0ead6}.srv-sub{margin-left:auto;font-size:12px;color:#7a7460}.job-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.job-chip{padding:8px 16px;font-size:16px;font-family:inherit;color:#b8ad8d;background:#ffffff0d;border:1px solid #4a4028;border-radius:8px;cursor:pointer}.job-chip.sel{color:#241c0c;background:linear-gradient(180deg,#e8cf96,#c9a860);border-color:#e8cf96}.topbar{position:absolute;top:0;left:0;right:0;z-index:12;display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;background:linear-gradient(180deg,#06070ad1,#06070a00);pointer-events:none}.topbar>*{pointer-events:auto}.tb-left{display:flex;align-items:center;gap:6px}.tb-avatar{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3d4a75,#151a30);border:2px solid #c9a860;flex:none}.tb-role{display:flex;flex-direction:column;gap:2px}.tb-name{font-size:15px;color:#f3e6c0;max-width:90px}.tb-money{font-size:12px;color:#9be0b0}.tb-mid{flex:1;text-align:center}.tb-realm{display:inline-block;padding:3px 12px;font-size:13px;color:#ffd9a8;background:#1410088c;border:1px solid rgba(201,168,96,.45);border-radius:10px}.tb-sub{font-size:10px;color:#8a8474;margin-top:1px}.tb-right{display:flex;flex-direction:column;gap:2px;align-items:flex-end}.tb-currency{font-size:13px;color:#bfe3ff;text-shadow:0 1px 2px #000}.tb-plus{color:#ffd9a8;border:1px solid #8a7440;border-radius:50%;padding:0 4px;font-size:10px}.navbar{position:absolute;left:0;right:0;bottom:0;z-index:12;display:flex;justify-content:space-between;align-items:flex-end;padding:0 6px calc(4px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#06070ad9,#06070a00)}.nav-btn{position:relative;flex:1;text-align:center;cursor:pointer;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}.nav-btn img{width:58px;height:58px;object-fit:contain}.nav-btn:nth-child(3) img{width:66px;height:66px}.nav-btn.sel img{filter:drop-shadow(0 0 8px rgba(243,217,138,.7))}.nav-btn:not(.sel) img{filter:grayscale(.15) brightness(.92)}.nav-label{display:block;margin-top:-12px;font-size:13px;letter-spacing:2px;color:#f3d98a;text-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.8)}.nav-btn:not(.sel) .nav-label{color:#b9b3a2}.nav-red{display:none;position:absolute;top:-2px;right:16%;width:10px;height:10px;border-radius:50%;background:#e04040;border:1px solid #fff}.page{position:absolute;inset:0;z-index:8;padding-top:56px;overflow:hidden}.chatbar{position:absolute;left:0;right:0;bottom:76px;z-index:9;padding:0 10px;pointer-events:none}.chat-lines{display:flex;flex-direction:column;gap:2px;max-height:108px;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 30%)}.chat-line{font-size:13px;color:#e8e0cc;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-ch{color:#e0a0a0}.chat-more{position:absolute;right:10px;bottom:2px;pointer-events:auto;width:40px;height:24px;font-family:inherit;color:#d8cba8;background:#0a0a0c99;border:1px solid #555;border-radius:6px}.city-left{position:absolute;left:8px;top:64px;z-index:9;display:flex;flex-direction:column;gap:10px;width:64px}.city-right{position:absolute;right:8px;top:64px;z-index:9;display:flex;flex-direction:column;gap:10px;width:66px;align-items:flex-end}.side-entry{position:relative;display:flex;align-items:center;justify-content:center;height:56px;border-radius:10px;cursor:pointer;background:linear-gradient(180deg,#14120cb8,#0c0b08b8);border:1px solid rgba(201,168,96,.4);background-size:contain;background-repeat:no-repeat;background-position:center}.side-entry span,.side-entry .se-icon{font-size:13px;color:#f3e6c0;text-shadow:0 1px 3px #000}.side-entry.vert{width:62px;height:62px;flex-direction:column;font-size:12px}.side-entry.small{height:46px}.se-icon{writing-mode:vertical-rl;letter-spacing:2px}.side-entry.vert .se-icon{writing-mode:horizontal-tb}.dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:#e04040;border:1px solid #fff}.banner{width:100%;padding:6px 8px;text-align:center;cursor:pointer;background:linear-gradient(180deg,#3c3214cc,#1e190ccc);border:1px solid #8a7440;border-radius:8px}.banner-title{font-size:15px;color:#ffd9a8;letter-spacing:2px}.banner-sub{font-size:10px;color:#b8ad8d}.city-npcs{position:absolute;inset:0}.npc-entry{position:absolute;display:flex;flex-direction:column;align-items:center;cursor:pointer;z-index:9}.npc-circle{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;font-size:20px;color:#3a2c10;background:radial-gradient(circle at 35% 30%,#f0e2b8,#c9a860);border:2px solid #6b5a33;box-shadow:0 3px 10px #00000080}.npc-name{margin-top:3px;font-size:12px;color:#f0ead6;text-shadow:0 1px 3px #000;background:#0a0a0a73;padding:0 6px;border-radius:4px}.bag-tabs{display:flex;gap:8px;padding:8px 12px}.bag-tab{flex:1;padding:8px 0;font-size:16px;font-family:inherit;color:#c8c0aa;background:linear-gradient(180deg,#28261ee6,#181610e6);border:1px solid #55503c;border-radius:8px;cursor:pointer}.bag-tab.sel{color:#2a2010;background:linear-gradient(180deg,#e8d9a8,#c9a860);border-color:#e8cf96}.bag-list{position:absolute;inset:118px 10px 54px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;-webkit-overflow-scrolling:touch}.bag-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:linear-gradient(180deg,#f5f2ebeb,#e4e0d6eb);border-radius:10px;box-shadow:0 2px 6px #00000059}.bag-icon{position:relative;width:44px;height:44px;border-radius:8px;flex:none;background:linear-gradient(160deg,#d8d4c8,#b8b4a8);border:1px solid #99917c}.bag-icon.q-green{background:linear-gradient(160deg,#c8e0c0,#98c890)}.bag-icon.q-blue{background:linear-gradient(160deg,#b8d0f0,#88a8d8)}.bag-icon.q-purple{background:linear-gradient(160deg,#d8c0f0,#a888c8)}.bag-icon.q-orange{background:linear-gradient(160deg,#f0d8a8,#d8a860)}.bag-icon i{position:absolute;top:-6px;left:-4px;font-size:10px;font-style:normal;color:#4a90e0}.bag-name{flex:1;font-size:15px}.bag-num{font-size:14px;color:#6a6456}.bag-empty{text-align:center;padding:40px 0;color:#8a8474;font-size:14px}.bag-foot{position:absolute;left:0;right:0;bottom:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#0a0a0cbf}.bag-space{font-size:13px;color:#c8c0aa}.role-left{position:absolute;left:0;top:56px;bottom:0;width:42%}.role-verse{position:absolute;left:8px;top:18%;display:flex;flex-direction:column;gap:10px;width:52px}.role-figure{position:absolute;inset:0}.role-name-plate{position:absolute;left:12px;top:8px;padding:4px 14px;font-size:18px;color:#f3d98a;background:#0a0a0a8c;border:1px solid rgba(201,168,96,.5);border-radius:8px}.role-right{position:absolute;right:0;top:56px;bottom:0;width:58%;padding:10px;display:flex;flex-direction:column;gap:10px}.role-eq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.eq-slot{height:52px;border-radius:8px;background:#0f0f12a6;border:1px solid #55503c}.role-bars{display:flex;flex-direction:column;gap:8px}.bar-row{display:flex;align-items:center;gap:8px;font-size:13px}.bar-row span{width:34px;color:#d8cba8}.bar-row b{font-size:12px;color:#f0ead6}.bar{flex:1;height:12px;border-radius:6px;background:#00000080;overflow:hidden;border:1px solid #444}.bar.hp i{display:block;height:100%;background:linear-gradient(90deg,#c04040,#e06850)}.bar.mp i{display:block;height:100%;background:linear-gradient(90deg,#3868c0,#5898e8)}.role-attr{font-size:14px;color:#d8cba8}.attr-title{margin-bottom:4px}.attr-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:13px}.gang-head{padding:8px 14px;text-align:center}.gang-title{font-size:26px;letter-spacing:6px;color:#f3d98a;text-shadow:0 2px 6px #000}.gang-search{display:flex;align-items:center;gap:8px;margin-top:8px}.gang-search input{flex:1;padding:8px 12px;font-size:14px;font-family:inherit;color:#f0ead6;background:#f0ece2e6;border:none;border-radius:6px;outline:none}.gang-search span{font-size:12px;color:#c8c0aa}.gang-cols{display:grid;grid-template-columns:1.4fr 1fr .5fr .7fr 60px;gap:4px;padding:6px 14px;font-size:13px;color:#8a8474}.gang-list{position:absolute;inset:190px 10px 90px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}.gang-item{display:grid;grid-template-columns:1.4fr 1fr .5fr .7fr 60px;gap:4px;align-items:center;padding:10px 12px;font-size:14px;color:#3a3428;background:linear-gradient(180deg,#f5f2ebeb,#e4e0d6eb);border-radius:10px;box-shadow:0 2px 6px #00000059}.gang-join{padding:4px 8px;font-size:13px;font-family:inherit;color:#fff;background:linear-gradient(180deg,#e8a040,#c07020);border:none;border-radius:6px}.gang-foot{position:absolute;left:0;right:0;bottom:16px;text-align:center}.df-head{text-align:center;padding-top:10px;text-shadow:0 2px 6px #000}.df-year{font-size:14px;color:#d8cba8}.df-name{font-size:24px;letter-spacing:8px;color:#f3d98a}.df-body{position:absolute;inset:0}.df-node{position:absolute;display:flex;flex-direction:column;align-items:center;cursor:pointer;font-size:12px;color:#f0ead6;text-shadow:0 1px 3px #000}.df-circle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-size:20px;color:#f0e2b8;background:#14100899;border:2px solid #c9a860;margin-bottom:3px}.df-cult{font-size:13px;color:#ffb1a0;margin-bottom:3px}.df-orb{width:56px;height:56px;border-radius:50%}.df-orb.red{background:radial-gradient(circle,#e03c32d9,#78141466);box-shadow:0 0 24px #e03c3299}.df-orb.gold{background:radial-gradient(circle,#f0be50e6,#8c5a1466);box-shadow:0 0 24px #f0be5099}.mj-name{position:absolute;left:10px;top:64px;padding:4px 12px;font-size:15px;color:#f0ead6;background:#0a0a0c99;border-left:3px solid #c9a860}.mj-arrow{position:absolute;top:44%;width:40px;height:64px;font-size:26px;color:#f3d98a;background:#0a0a0c80;border:1px solid #55503c;border-radius:8px;font-family:inherit}.mj-arrow.left{left:6px}.mj-arrow.right{right:6px}.mj-slots{position:absolute;right:8px;top:60px;display:flex;gap:6px}.mj-slot{width:44px;height:44px;border-radius:8px;text-align:center;line-height:44px;background:#0f0f12b3;border:1px solid #55503c;font-size:16px}.mj-slot.sel{border-color:#f3d98a}.mj-me{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center}.mj-avatar{width:92px;height:92px;margin:0 auto;border-radius:50%;line-height:86px;font-size:26px;color:#f3e6c0;background:radial-gradient(circle at 35% 30%,#3d4a75,#151a30);border:3px solid #c04040;box-shadow:0 4px 16px #0009}.mj-realm{margin-top:4px;font-size:12px;color:#d8cba8;text-shadow:0 1px 3px #000}.mj-ops{position:absolute;bottom:130px;display:flex;flex-direction:column;gap:10px}.mj-ops.left{left:12px}.mj-ops.right{right:12px;align-items:center}.mj-op{min-width:52px;padding:8px 10px;text-align:center;font-size:15px;color:#f3e6c0;background:#141008a6;border:2px solid #8a7440;border-radius:10px;cursor:pointer}.mj-op.big{padding:10px 14px;font-size:17px}.mj-op.attack{width:64px;height:64px;border-radius:50%;font-size:26px;line-height:60px;padding:0}.toast{position:absolute;left:50%;top:18%;transform:translate(-50%);padding:9px 18px;font-size:15px;color:#ffd9a8;background:#141008eb;border:1px solid #6b5a33;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:40;white-space:nowrap}.toast.show{opacity:1}