html,body{color:#e9dcc0;background:#141622;height:100%;margin:0;font-family:Noto Serif TC,Songti TC,Georgia,serif;overflow:hidden}#c{width:100vw;height:100vh;display:block}#ui{pointer-events:none;position:fixed;inset:0}#panel{background:linear-gradient(#2a2118e6,#18120ce6);border:2px solid #8a6a3a;width:250px;padding:10px 12px;position:absolute;top:16px;left:16px;box-shadow:inset 0 0 0 1px #000,0 4px 14px #0008}.name{color:#f3d48a;text-shadow:1px 1px #000;margin-bottom:6px;font-size:14px}.bar{background:#000;border:1px solid #5a4528;height:16px;margin:5px 0;position:relative}.bar i{position:absolute;inset:0 auto 0 0}.hp i{background:linear-gradient(#e0533f,#7a1a12)}.mp i{background:linear-gradient(#5b8ff0,#1b3478)}.bar span{text-shadow:1px 1px #000;padding-left:6px;font-size:11px;line-height:16px;position:relative}#slots{background:#18120ce6;border:2px solid #8a6a3a;gap:6px;padding:8px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.slot{color:#d9c79a;background:radial-gradient(#3a2e20,#120d08);border:1px solid #6b5230;justify-content:center;align-items:flex-end;width:48px;height:48px;font-size:11px;display:flex;position:relative}.slot b{color:#9c8458;font-size:10px;font-weight:400;position:absolute;top:2px;left:4px}#help{opacity:.8;text-shadow:1px 1px #000;text-align:right;max-width:360px;font-size:12px;position:absolute;bottom:16px;right:16px}#loc{color:#f3d48a;letter-spacing:2px;text-shadow:0 0 8px #000,1px 1px #000;font-size:18px;position:absolute;top:16px;left:50%;transform:translate(-50%)}#loading{justify-content:center;align-items:center;font-size:20px;display:flex;position:absolute;inset:0}@media (width<=700px){#loc{white-space:nowrap;font-size:15px;top:auto;bottom:96px}#panel{width:200px}#help{display:none}.slot{width:40px;height:40px;font-size:9px}}.ex{height:8px}.ex i{background:linear-gradient(#f3d48a,#9a6f1e)}.ex span{font-size:9px;line-height:8px;top:-1px}.gold{color:#f3d48a;margin-top:8px;font-size:12px}.slot{pointer-events:auto;cursor:pointer}.slot.empty{opacity:.5}.slot.flash{box-shadow:0 0 10px #f3d48a}.slot .n{color:#fff;font-size:10px;position:absolute;bottom:2px;right:3px}.slot .nm{text-align:center;font-size:10px;position:absolute;top:14px;left:0;right:0}#world-ui{pointer-events:none;position:fixed;inset:0;overflow:hidden}.hpbar{background:#000a;border:1px solid #000;width:44px;height:5px;margin-left:-22px;position:absolute}.hpbar i{background:#d3412f;height:100%;display:block}.hpbar.sel{outline:1px solid #f3d48a}.dmg{color:#fff;text-shadow:0 0 3px #000,1px 1px #000;white-space:nowrap;font:700 18px Georgia,serif;transition:transform 1s ease-out,opacity 1s ease-in;position:absolute;transform:translate(-50%)}.dmg.crit{color:#ffd23f;font-size:24px}.dmg.hurt{color:#ff6a5a}.dmg.heal{color:#7cf07c}.dmg.lv{color:#ffe68a;font-size:22px}#log{text-shadow:1px 1px #000;flex-direction:column;gap:2px;width:300px;font-size:12px;display:flex;position:absolute;bottom:16px;left:16px}#log div{transition:opacity 1s}#dead{color:#ffb4a0;text-shadow:0 0 8px #000;background:#300a;justify-content:center;align-items:center;font-size:28px;display:flex;position:absolute;inset:0}@media (width<=700px){#log{width:240px;font-size:11px;bottom:150px}}#dead[hidden]{display:none}#skill{background:radial-gradient(#7a2a10,#200a04);border:2px solid #c0602a;width:60px;height:60px;position:absolute;bottom:16px;right:16px;overflow:hidden}#skill:after{content:"";height:var(--cd,0%);background:#000a;position:absolute;bottom:0;left:0;right:0}#skill.nomp{filter:grayscale(.8)brightness(.7)}#skill .nm{color:#ffd27a;font-size:12px;top:18px}#skill .mpc2{color:#9cc0ff;font-size:9px;position:absolute;bottom:2px;right:4px}#skill .cdn{z-index:1;color:#fff;text-shadow:1px 1px #000;justify-content:center;align-items:center;font-size:18px;display:flex;position:absolute;inset:0}#help{bottom:90px}.dmg.mpc{color:#8fb4ff;font-size:14px}@media (width<=700px){#skill{width:64px;height:64px;bottom:84px;right:10px}}@media (width<=440px){#panel{border-width:1px;width:150px;padding:5px 7px;top:8px;left:8px}.name{margin-bottom:3px;font-size:11px}.bar{height:12px;margin:3px 0}.bar span{padding-left:4px;font-size:9px;line-height:12px}.ex{height:6px}.ex span{display:none}.gold{margin-top:3px;font-size:10px}#loc{font-size:13px;bottom:76px}}.bar span{white-space:nowrap;display:block}@media (width<=440px){.bar span{line-height:12px}}