:root{--navy: #121a2e;--ink: #0b1020;--panel: rgba(14, 22, 42, .78);--gold: #e4c36a;--gold-2: #8a6a28;--line: rgba(228, 195, 106, .35);--text: #f4efe4;--muted: #b7c0d4;--danger: #ff6b5a;--ok: #6ee7a0;font-family:Noto Sans TC,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--ink);color:var(--text)}button{font-family:inherit;cursor:pointer;border:0;color:inherit;background:none}.stage{min-height:100%;display:flex;align-items:center;justify-content:center;gap:36px;padding:16px;background:radial-gradient(800px 400px at 20% 10%,#1d3260 0%,transparent 60%),radial-gradient(600px 400px at 90% 90%,#3a1d4a 0%,transparent 55%),var(--ink)}.phone{width:min(430px,100vw);height:min(900px,100dvh);background:#0e1528;border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative;display:flex;flex-direction:column}.desk-hint{width:260px;color:var(--muted);font-size:14px;line-height:1.55}.desk-hint .logo{font-family:"Noto Serif TC",serif;font-size:28px;color:var(--gold);margin-bottom:8px}.ghost{margin-top:12px;border:1px solid var(--line);padding:8px 12px;border-radius:8px;color:var(--gold)}.hud{display:flex;flex-direction:column;gap:8px;padding:10px 10px 8px;background:linear-gradient(#1b2744,#0e152866);z-index:4}.hud-profile{display:flex;align-items:center;gap:8px}.avatar{width:42px;height:42px;border-radius:50%;background:#3a2a18;border:2px solid var(--gold);display:grid;place-items:center;font-family:"Noto Serif TC",serif;color:var(--gold)}.hud-name{font-weight:800;display:flex;align-items:center;gap:6px}.vip{font-size:10px;background:#7a1c8a;padding:1px 6px;border-radius:8px}.hud-sub{font-size:12px;color:var(--muted)}.hud-res{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.res-chip{display:flex;align-items:center;gap:4px;background:#00000059;border-radius:999px;padding:3px 6px;font-size:11px;font-weight:700}.res-ico{width:14px;height:14px;display:grid;place-items:center}.res-ico svg{width:14px;height:14px}.res-chip.gem{color:#7ecbff}.res-chip.ess{color:#c9a6ff}.res-chip.gold{color:var(--gold)}.res-chip.pop{color:#9fe7c2}.body{flex:1;position:relative;overflow:hidden}.scene{position:absolute;top:0;right:0;bottom:0;left:0}.territory{overflow:hidden}.sky{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(#6fb7ff,#c8e9ff 42%,#8fd0ff)}.clouds{position:absolute;inset:8% 0 auto;height:80px;background:radial-gradient(circle at 20% 50%,#fff 0 22px,transparent 23px),radial-gradient(circle at 70% 40%,#fff 0 28px,transparent 29px);opacity:.55;animation:drift 18s linear infinite}.sea{position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(#3aa0e8,#1c5fa8)}.isle-wrap{position:absolute;top:8%;right:0;bottom:18%;left:0}.island{width:118%;height:100%;margin-left:-9%}.bldg{position:absolute;transform:translate(-50%,-50%);min-width:64px;display:flex;flex-direction:column;align-items:center;gap:2px}.coin-bubble{background:#f4d45a;color:#5a3a10;font-weight:900;font-size:12px;padding:4px 7px;border-radius:99px;animation:bob 1.1s ease-in-out infinite}.cd{font-size:10px;background:#00000073;padding:2px 6px;border-radius:8px}.bldg-name{font-size:10px;font-weight:800;text-shadow:0 1px 2px #083;color:#fff}.walker{position:absolute;width:14px;height:18px;background:#222;border-radius:6px 6px 4px 4px;left:30%;top:58%;animation:walk 9s linear infinite}.walker:after{content:"";position:absolute;width:12px;height:8px;background:#eee;border-radius:6px;top:-6px;left:1px}.terr-stats{position:absolute;left:10px;top:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;font-weight:700}.terr-stats small,.rate{display:block;color:var(--muted);font-weight:500;margin-top:2px}.side-actions{position:absolute;left:10px;bottom:58px;display:flex;flex-direction:column;gap:10px}.round{width:58px;height:58px;border-radius:50%;position:relative;font-size:11px;font-weight:800;border:2px solid rgba(255,255,255,.35)}.round span{position:absolute;left:50%;bottom:-4px;transform:translate(-50%);background:#0a1020cc;padding:1px 6px;border-radius:8px;white-space:nowrap}.round.fish{background:radial-gradient(#5ad0ff,#1a6aa8)}.round.scroll{background:radial-gradient(#ffe08a,#b07a22)}.round.hammer{background:radial-gradient(#9ad0ff,#3a6aaa)}.dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:#ff3b3b;border:2px solid #fff;border-radius:50%}.afk-chest{position:absolute;right:12px;bottom:58px;width:74px;text-align:center;font-size:11px;font-weight:800}.chest-body{width:46px;height:28px;margin:0 auto;background:#c47a2a;border:2px solid #7a4a12;border-radius:4px}.chest-lid{width:50px;height:14px;margin:0 auto -2px;background:#e09a3a;border:2px solid #7a4a12;border-radius:8px 8px 2px 2px}.afk-chest.ready .chest-lid{transform:rotate(-18deg);transform-origin:left bottom}.afk-chest small{display:block;color:#1a3a60;font-weight:600}.quest-chip{position:absolute;left:8px;bottom:8px;max-width:70%;background:#0a1020d1;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:11px;line-height:1.35}.quest-chip b{color:var(--gold);margin-right:6px}.quest-chip em{display:block;font-style:normal;color:var(--muted)}.tabbar{display:grid;grid-template-columns:repeat(6,1fr);background:#141c33;border-top:1px solid var(--line);padding:6px 2px 8px;z-index:5}.tab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#8e9bb8;font-weight:700}.tab.on{color:var(--gold)}.tab-ico{position:relative;width:28px;height:28px;display:grid;place-items:center}.tab-svg{width:22px;height:22px}.heroes-scene,.play-scene{background:#1a2240;padding:8px 8px 12px;overflow:auto}.heroes-head{display:flex;justify-content:space-between;align-items:center;font-weight:800}.sync-btn{background:#3a2a10;border:1px solid var(--gold);color:var(--gold);border-radius:99px;padding:5px 10px;font-size:12px;font-weight:800}.sync-btn:disabled{opacity:.4}.el-filter{display:flex;gap:6px;margin:8px 0}.el-filter button{width:36px;height:28px;border-radius:8px;background:#243056;font-size:12px;font-weight:800}.el-filter .on{outline:2px solid var(--gold)}.el.wind{background:#1e7a40}.el.water{background:#1e6aaa}.el.fire{background:#a33a2a}.el.light{background:#a88a22}.el.dark{background:#5a3a8a}.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-card{background:linear-gradient(#2a3558,#1a2240);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 6px 10px;position:relative;min-height:148px}.hero-card.locked{filter:grayscale(1) brightness(.55)}.rarity{position:absolute;top:6px;right:6px;background:#c45a2a;font-size:10px;font-weight:900;padding:1px 5px;border-radius:4px}.rarity.sp{background:#e23a3a}.lv,.shards{position:absolute;left:6px;top:6px;font-size:10px;font-weight:800;background:#00000073;padding:1px 5px;border-radius:6px}.shards{top:auto;bottom:42px;background:#6a3aaa}.hn{font-weight:900;font-size:13px}.ht,.hpwr{font-size:10px;color:var(--muted)}.room-scene{background:#3a241c}.room-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 18%,#6a3a28 0 80px,transparent 81px),linear-gradient(#5a3a2c,#2a1814)}.shelves{position:absolute;top:18%;display:flex;flex-direction:column;gap:10px}.shelves.left{left:10px}.shelves.right{right:10px}.shelf{width:92px;background:#6a4428;border:2px solid #c4a06a;border-radius:8px;padding:8px;text-align:left;position:relative}.shelf b{display:block;font-size:13px}.shelf small{color:#f0d8b0}.room-stage{position:absolute;left:50%;top:42%;transform:translate(-50%,-20%)}.pet{position:absolute;left:-70px;top:40px;text-align:center;font-size:11px;font-weight:800}.fox{width:36px;height:28px;background:#f4efe8;border-radius:16px 16px 10px 10px;position:relative;margin:0 auto 4px}.fox:before,.fox:after{content:"";position:absolute;width:10px;height:12px;background:#f4efe8;top:-8px;border-radius:4px}.fox:before{left:4px}.fox:after{right:4px}.room-note{position:absolute;left:10px;right:10px;bottom:10px;font-size:12px;color:#f0d8b0;background:#00000059;padding:8px;border-radius:8px}.text-btn{margin-left:8px;color:var(--gold);font-weight:800;text-decoration:underline}.guild-scene{background:#2a3048}.guild-banner{position:absolute;top:8px;left:8px;right:70px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;justify-content:space-between;font-weight:800}.guild-banner small{display:block;color:var(--muted);font-weight:500}.els{display:flex;gap:4px;align-items:center}.els i{width:12px;height:12px;border-radius:50%}.hall{position:absolute;top:70px;right:12px;bottom:70px;left:12px;background:linear-gradient(#4a3a32,#2a221c);border-radius:16px;border:2px solid #8a6a48}.crystal{width:54px;height:72px;margin:18px auto 0;background:linear-gradient(#9fe7ff,#3a88d8);clip-path:polygon(50% 0,90% 30%,70% 100%,30% 100%,10% 30%)}.hotspot{position:absolute;background:#0a1020b3;padding:4px 8px;border-radius:8px;font-size:11px;font-weight:800}.hotspot.a{left:40%;top:40%}.hotspot.b{right:12px;top:28%}.hotspot.c{left:12px;bottom:28%}.leader{position:absolute;left:50%;bottom:16px;transform:translate(-50%);font-size:12px;font-weight:800}.guild-side{position:absolute;right:8px;top:86px;display:flex;flex-direction:column;gap:8px}.guild-side button{width:52px;height:52px;border-radius:50%;background:#243056;border:2px solid var(--line);font-size:11px;font-weight:800;position:relative}.pve-pvp{display:flex;gap:8px;margin-bottom:8px}.pve-pvp button{flex:1;padding:8px;border-radius:10px;background:#243056;font-weight:800}.pve-pvp .on{background:#3a2a10;color:var(--gold);outline:1px solid var(--gold)}.mode-list{display:flex;flex-direction:column;gap:8px}.mode{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:12px;text-align:left;min-height:76px}.mode b{display:block;font-size:16px}.mode small{color:#fffc}.mode.blue{background:linear-gradient(90deg,#2a6ad0,#3a88e8)}.mode.pink{background:linear-gradient(90deg,#b04a88,#e878b0)}.mode.teal{background:linear-gradient(90deg,#1e7a78,#3aa0a0)}.mode.purple{background:linear-gradient(90deg,#5a3a9a,#7a58c8)}.mode.violet{background:linear-gradient(90deg,#4a2a7a,#6a48aa)}.mode-art{width:72px;height:52px;border-radius:8px;background:#ffffff2e}.adventure{background:#102018}.adv-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 70% 40%,#1c6a58 0 40px,transparent 41px),linear-gradient(#16382c,#0c2018 40%,#1a3040)}.adv-bg:before{content:"";position:absolute;top:18%;right:8%;bottom:28%;left:8%;background:repeating-linear-gradient(90deg,#4a5a58 0,#4a5a58 18px,#3a4a48 18px,#3a4a48 22px);opacity:.35;clip-path:polygon(10% 100%,20% 40%,40% 70%,55% 20%,80% 60%,90% 100%)}.stage-tag{position:absolute;right:10px;top:10px;background:var(--panel);border:1px solid var(--line);padding:6px 10px;border-radius:8px;font-weight:800;font-size:12px}.battlefield{position:absolute;top:70px;right:8px;bottom:90px;left:8px}.side{position:absolute;display:flex;gap:4px}.side.allies{left:4px;bottom:20px}.side.foes{right:4px;top:20px}.fighter{display:flex;flex-direction:column;align-items:center;font-size:10px;font-weight:800}.fighter.dead{opacity:.35}.hpbar{width:44px;height:6px;background:#3a1020;border-radius:4px;overflow:hidden;margin:2px 0}.hpbar i{display:block;height:100%;background:#3ecf6e}.hpbar.foe i{background:#ff6b5a}.foe-body{width:40px;height:48px;background:linear-gradient(#6a5a58,#3a3030);border-radius:12px 12px 8px 8px;position:relative}.foe-body:before{content:"";position:absolute;width:22px;height:18px;background:#c4b0a0;border-radius:50%;left:9px;top:8px}.dmg{position:absolute;font-weight:900;color:#ffd36a;font-size:16px;animation:pop .9s ease-out forwards;pointer-events:none;text-shadow:0 1px 0 #3a2000}.dmg.crit{color:#ff7a4a;font-size:18px}.battle-banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);padding:10px 18px;border-radius:12px;font-weight:900;z-index:3}.battle-banner.win{background:#1e6a40}.battle-banner.lose{background:#6a1e28}.adv-dock{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-end}.challenge{width:84px;height:84px;border-radius:50%;background:radial-gradient(#ffd36a,#c47a22);color:#3a2408;font-weight:900;font-size:16px;border:3px solid #fff3}.toasts{position:absolute;left:50%;top:92px;transform:translate(-50%);z-index:20;display:flex;flex-direction:column;gap:6px;pointer-events:none}.toast{background:#0a1020e0;border:1px solid var(--gold);padding:6px 12px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap}.reveal{position:absolute;top:0;right:0;bottom:0;left:0;background:#060a14b8;z-index:30;display:grid;place-items:center}.reveal-card{width:240px;background:linear-gradient(#2a3558,#141c33);border:2px solid var(--gold);border-radius:16px;padding:18px 12px 16px;text-align:center;position:relative}.reveal-card h2{margin:4px 0 0;font-family:"Noto Serif TC",serif}.reveal-card p{margin:4px 0 12px;color:var(--muted)}.reveal-card button{background:var(--gold);color:#2a1c08;font-weight:900;padding:8px 18px;border-radius:99px}@keyframes bob{50%{transform:translateY(-6px)}}@keyframes walk{0%{left:28%}50%{left:62%}to{left:28%}}@keyframes drift{0%{transform:translate(-20px)}to{transform:translate(20px)}}@keyframes pop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-36px)}}@media(max-width:720px){.desk-hint{display:none}.stage{padding:0}.phone{width:100vw;height:100dvh;border:0;border-radius:0}}