:root{--charcoal: #16161a;--g1: #2a2b31;--g2: #3d3f47;--g3: #5a5d66;--rust1: #7a2e1f;--rust2: #a8432b;--amber1: #d98a2b;--amber2: #f2b85a;--blue1: #2c4a6e;--blue2: #4f86b8;--bone: #d8d2c4;--leather1: #4a3526;--leather2: #6b4e38;--bronze: #8c6a3a;--blood: #8b1a1a;--ashgreen: #5c6b5a;--paper: var(--bone);--iron: var(--g2);--ink: var(--charcoal);--accent: var(--amber1);--danger: var(--blood);--font: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;--touch: 44px}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--charcoal);color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}#game{position:fixed;inset:0}#game canvas{display:block}#ui{position:fixed;inset:0;pointer-events:none;z-index:10;font-size:14px}#ui .i{pointer-events:auto}.paper{background:var(--paper);color:var(--ink);border:3px solid var(--iron);border-radius:4px;box-shadow:inset 0 0 0 2px var(--g3),0 6px 18px #0000008c}button{font-family:var(--font);color:var(--ink);background:var(--paper);border:2px solid var(--iron);border-radius:3px;padding:8px 12px;min-height:var(--touch);min-width:var(--touch);font-size:14px;cursor:pointer;touch-action:manipulation;box-shadow:inset 0 -3px #16161a2e}button:hover:not(:disabled){border-color:var(--accent)}button:active:not(:disabled){transform:translateY(1px);box-shadow:none}button:focus-visible{outline:3px solid var(--accent);outline-offset:1px}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);color:var(--ink);border-color:var(--leather1);font-weight:700}button.danger{background:var(--danger);color:var(--bone);border-color:var(--charcoal)}button.ghost{background:transparent}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.muted{color:var(--g2)}.small{font-size:12px}.accent{color:var(--leather1);font-weight:700}.hud-chip{background:#d8d2c4eb;color:var(--ink);border:2px solid var(--iron);border-radius:3px;padding:4px 8px}.hud-tl{position:absolute;left:10px;top:max(10px,env(safe-area-inset-top));width:min(300px,40vw)}.hud-tc{position:absolute;left:50%;transform:translate(-50%);top:max(10px,env(safe-area-inset-top));text-align:center;white-space:nowrap}.hud-tr{position:absolute;right:10px;top:max(10px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-end;gap:6px}.bar{position:relative;height:18px;background:var(--charcoal);border:2px solid var(--iron);border-radius:2px;overflow:hidden}.bar>i{position:absolute;inset:0 auto 0 0;transition:width .12s}.bar.hp>i{background:linear-gradient(var(--rust2),var(--blood))}.bar.xp{height:6px;border-width:1px;margin-top:3px}.bar.xp>i{background:var(--amber2)}.bar.focus{height:8px;border-width:1px}.bar.focus>i{background:var(--blue2)}.bar.focus.on>i{background:var(--amber2)}.bar>span{position:absolute;inset:0;text-align:center;font-size:12px;line-height:14px;color:var(--bone);text-shadow:0 1px 2px #000}.lvl{font-weight:700;margin-right:6px}.minimap{background:#16161acc;border:2px solid var(--iron);border-radius:3px;image-rendering:pixelated}.inv-row{display:flex;gap:6px}.fps{font-size:11px;color:var(--g3)}.broadcast{position:absolute;left:50%;top:max(52px,calc(env(safe-area-inset-top) + 44px));transform:translate(-50%,-140%);transition:transform .35s;background:var(--rust1);color:var(--bone);border:2px solid var(--amber1);padding:6px 16px;border-radius:3px;white-space:nowrap;font-weight:700}.broadcast{opacity:0;visibility:hidden}.broadcast.show{transform:translate(-50%);opacity:1;visibility:visible}.bossbar{position:absolute;left:50%;transform:translate(-50%);top:max(64px,calc(env(safe-area-inset-top) + 56px));width:min(420px,56vw);display:none;text-align:center}.bossbar .bar{height:14px;border-color:var(--amber1)}.bossbar .name{font-size:13px;color:var(--bone);text-shadow:0 1px 2px #000}.room-name{position:absolute;left:50%;top:24%;transform:translate(-50%);font-size:26px;letter-spacing:6px;color:var(--bone);text-shadow:0 2px 6px #000;opacity:0;transition:opacity .4s;white-space:nowrap}.channel{position:absolute;left:50%;bottom:44%;transform:translate(-50%);width:220px;display:none;text-align:center;color:var(--bone);text-shadow:0 1px 2px #000}.channel .bar>i{background:var(--blue2);transition:none}.toasts{position:absolute;left:50%;top:32%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}.toast{background:#d8d2c4f2;color:var(--ink);border:2px solid var(--iron);padding:4px 12px;border-radius:3px;animation:toast 2.4s forwards;white-space:nowrap}@keyframes toast{0%{opacity:0;transform:translateY(6px)}10%{opacity:1;transform:none}80%{opacity:1}to{opacity:0}}.cluster{position:absolute;right:12px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:8px}.auto-row{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%}.auto{display:flex;border:2px solid var(--iron);border-radius:3px;overflow:hidden}.auto button{flex:1;border:none;border-radius:0;box-shadow:none;padding:6px 8px;font-size:13px}.auto button.on{background:var(--accent);font-weight:700}.auto button.locked{opacity:.5}.skills{display:grid;grid-template-columns:repeat(5,60px);gap:8px}.skill{position:relative;width:60px;height:60px;padding:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;overflow:hidden;font-weight:700}.skill .k{position:absolute;left:0;right:0;top:4px;font-size:10px;color:var(--g2)}.skill .cd{position:absolute;inset:0;background:conic-gradient(rgba(22,22,26,.72) var(--p, 0%),transparent 0);pointer-events:none}.skill .cdt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--bone);text-shadow:0 1px 3px #000;pointer-events:none}.skill.dodge{background:var(--leather2);color:var(--bone)}.skill.buff{border-color:var(--amber2);box-shadow:0 0 12px var(--amber1)}.tip{position:absolute;bottom:72px;right:0;width:220px;padding:8px;font-size:12px;font-weight:400;display:none}.joy{position:absolute;left:22px;bottom:max(22px,env(safe-area-inset-bottom));width:130px;height:130px;border-radius:50%;background:#3d3f4759;border:2px solid rgba(216,210,196,.5);display:none}.joy i{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:#d8d2c473;border:2px solid var(--bone)}.touch .joy{display:block}.modal-bg{position:absolute;inset:0;background:#0a0a0c73;display:flex;align-items:center;justify-content:center;padding:16px}.ask{width:min(460px,100%);padding:18px;text-align:center}.ask h3{margin:0 0 6px;font-size:22px;letter-spacing:2px}.ask p{margin:0 0 14px}.ask .count{font-size:12px;color:var(--g2);margin-bottom:10px}.ask .actions{display:flex;gap:12px}.ask .actions button{flex:1;min-height:64px;font-size:20px}.banner{position:absolute;left:50%;transform:translate(-50%);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 170px);padding:6px 14px;white-space:nowrap}.panel{width:min(760px,100%);max-height:min(88vh,100%);display:flex;flex-direction:column}.panel header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:3px double var(--iron)}.panel header h3{margin:0;letter-spacing:3px}.panel .body{padding:12px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}.tabs button.on{background:var(--accent);font-weight:700}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}.cell{position:relative;aspect-ratio:1;min-height:var(--touch);border:3px solid var(--g3);border-radius:3px;background:var(--charcoal);display:flex;align-items:center;justify-content:center;font-size:20px;padding:0;box-shadow:none}.cell.empty{opacity:.3}.cell.sel{outline:3px solid var(--accent);outline-offset:1px}.cell .en{position:absolute;right:3px;top:1px;font-size:10px;color:var(--amber2)}.cell .dur{position:absolute;left:3px;bottom:1px;font-size:9px;color:var(--rust2)}.cell .lost{position:absolute;inset:0;background:#8b1a1aa6;color:var(--bone);display:flex;align-items:center;justify-content:center;font-size:11px}.section-title{margin:12px 0 6px;color:var(--g2);font-size:12px;letter-spacing:2px;border-bottom:1px solid var(--g3)}.panel .body .detail{position:sticky;bottom:-12px;box-shadow:0 -8px 16px #16161a59}.detail{margin-top:10px;border:3px solid var(--accent);border-radius:3px;padding:10px;background:var(--paper)}.detail .name{font-size:16px;font-weight:700}.detail ul{margin:6px 0;padding-left:18px;line-height:1.6}.equip-grid{display:grid;grid-template-columns:repeat(6,60px);gap:8px}.equip-grid .cell{width:60px;height:60px}.equip-grid .lbl{font-size:11px;color:var(--g2);text-align:center}.stats{font-size:12px;line-height:1.7;margin-top:6px}.floors{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.floors button{padding:10px 8px;display:flex;flex-direction:column;gap:2px}.floors button b{font-size:18px}.bonus{color:var(--rust1);font-weight:700}.outpost{border:2px solid var(--g3);border-radius:3px;padding:10px;margin-bottom:10px}.outpost h4{margin:0 0 4px}label.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}select,input[type=range]{width:100%;min-height:var(--touch)}select{background:var(--paper);color:var(--ink);border:2px solid var(--iron);border-radius:3px;padding:6px;font-family:var(--font);font-size:14px}.rotation{list-style:none;padding:0;margin:0}.rotation li{display:flex;align-items:center;gap:6px;margin-bottom:6px;padding:4px;border:2px dashed transparent;border-radius:3px;background:#16161a0d}.rotation li.over{border-color:var(--accent)}.rotation li .handle{cursor:grab;font-size:18px;padding:0 6px}.rotation .nm{flex:1}.town-bar{position:absolute;left:10px;right:10px;top:max(10px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}.town-hint{position:absolute;left:50%;transform:translate(-50%);bottom:max(14px,env(safe-area-inset-bottom));color:var(--bone);font-size:12px;white-space:nowrap;text-shadow:0 1px 2px #000}.result h3{margin:0 0 4px;font-size:24px}.result h3.death{color:var(--blood)}.result .grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:10px 0}.result .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}#rotate{display:none;position:fixed;inset:0;z-index:100;background:var(--charcoal);color:var(--bone);font-family:var(--font);align-items:center;justify-content:center;flex-direction:column;gap:8px;font-size:22px;letter-spacing:3px}#rotate small{font-size:13px;color:var(--g3);letter-spacing:1px}@media(orientation:portrait)and (pointer:coarse){#rotate{display:flex}}@media(max-height:480px),(max-width:700px){.skills{grid-template-columns:repeat(5,52px);gap:6px}.skill{width:52px;height:52px;font-size:12px}.hud-tr .minimap{width:120px;height:76px}.equip-grid{grid-template-columns:repeat(3,60px)}}.tier{margin:8px 0}.tier-lbl{font-size:11px;color:var(--g2);margin-bottom:4px}.tier-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.talent{position:relative;min-height:48px;padding:4px;font-size:12px;line-height:1.2}.talent .ex{position:absolute;left:3px;top:1px;font-size:9px;color:var(--rust1)}.talent.learned{background:var(--accent);font-weight:700}.talent.locked{opacity:.45}.talent.keystone{border:3px solid var(--blood);font-weight:700}.talent.keystone.learned{background:var(--rust2);color:var(--bone)}.talent.inactive{border-style:dashed;opacity:.7}.talent.sel{outline:3px solid var(--blue2);outline-offset:1px}@media(max-width:700px){.tier-row{grid-template-columns:repeat(3,minmax(0,1fr))}}.pc-hud{position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none}.pc-left{position:absolute;left:14px;bottom:16px;display:flex;align-items:flex-end;gap:10px}.pc-right{position:absolute;right:14px;bottom:16px;display:flex;align-items:flex-end;gap:12px}.pc-skills{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.pc-xp{position:absolute;left:150px;right:150px;bottom:4px;display:flex;align-items:center;gap:8px;color:var(--bone);font-size:12px;text-shadow:0 1px 2px #000}.pc-xp .bar.xp{flex:1;height:7px;margin:0}.orb{position:relative;width:116px;height:116px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 60%,#1d1d22,#0b0b0d);border:4px solid var(--iron);box-shadow:0 0 0 3px var(--bronze),0 6px 18px #000000b3;pointer-events:auto}.orb>i{position:absolute;left:0;right:0;bottom:0;height:100%;transition:height .15s}.orb.hp>i{background:linear-gradient(180deg,var(--rust2),var(--blood) 60%,#4a0d0d)}.orb.focus>i{background:linear-gradient(180deg,var(--blue2),var(--blue1) 70%,#142338)}.orb.focus.on>i{background:linear-gradient(180deg,var(--amber2),var(--amber1))}.orb .gloss{position:absolute;left:18%;top:10%;width:40%;height:26%;border-radius:50%;background:#ffffff2e}.orb>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--bone);font-size:12px;font-weight:700;text-shadow:0 1px 3px #000;text-align:center}.flasks .stone-btn{height:58px;min-width:58px;padding:4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px}.stone-btn .k,.skill .k{display:block;font-size:10px;color:var(--g2)}.skillbar{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:6px;background:#16161aa6;border:2px solid var(--iron);border-radius:4px}.sb-row{display:flex;gap:6px}.skill-wrap{position:relative}.pc-hud .skill{width:56px;height:56px;border-radius:6px;font-size:12px}.pc-hud .skill.mouse{width:62px;background:var(--leather2);color:var(--bone)}.pc-hud .skill.mouse .k{color:var(--amber2)}.pc-hud .skill.dodge{width:64px}.pc-hud .tip{bottom:64px;right:0}.pc-hud .auto button{padding:4px 10px;font-size:12px;min-height:32px}.m-cluster{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));width:230px;height:230px}.m-cluster .skill{border-radius:50%}.m-cluster>.skill-wrap{position:absolute;right:0;bottom:0}.m-cluster .skill.atk{width:104px;height:104px;font-size:18px;background:var(--rust1);color:var(--bone);border:4px solid var(--amber1)}.m-cluster .arc{position:absolute}.m-cluster .arc .skill{width:62px;height:62px}.m-cluster .a1{right:112px;bottom:6px}.m-cluster .a2{right:100px;bottom:78px}.m-cluster .a3{right:40px;bottom:124px}.m-cluster .a4{right:126px;bottom:150px}.m-cluster .arc .skill.dodge{width:58px;height:58px}.m-cluster .tip{bottom:110px;right:0}.m-auto{position:absolute;left:50%;transform:translate(-50%);bottom:calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px}.m-auto .auto button{padding:4px 8px;font-size:12px;min-height:44px}.m-auto .stone-btn{min-height:44px;padding:4px 10px;font-size:12px;white-space:nowrap}.touch .hud-tr{flex-direction:row;align-items:flex-start;gap:6px}.touch .hud-tr .minimap{width:84px;height:84px}.touch .hud-tr>.hud-chip{display:none}.touch .hud-tr>.row{display:grid;grid-template-columns:repeat(2,auto);gap:4px;order:-1}.touch .hud-tr>.row button{min-height:40px;min-width:52px;padding:2px 6px;font-size:12px}.touch .hud-tr .fps{position:absolute;right:0;top:88px}.touch .hud-tc{font-size:12px;padding:2px 8px}.touch .hud-tl{width:min(260px,34vw)}@media(max-height:430px){.m-cluster{transform:scale(.8);transform-origin:right bottom}.joy{transform:scale(.85);transform-origin:left bottom}}.auto button{white-space:nowrap}