:root{--bg: #0b0b0e;--panel: #15151cf2;--border: #3a3a48;--text: #e6e2d8;--muted: #9a968c;--normal: #e6e2d8;--magic: #6f8cff;--rare: #ffd84a;--unique: #c57a3a;--life: #b3261e;--xp: #6a4fb0}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Noto Sans TC,sans-serif;-webkit-user-select:none;user-select:none}#app{position:relative;width:960px;height:600px;margin:12px auto}canvas{display:block;background:#111;cursor:crosshair}button{background:#26262f;color:var(--text);border:1px solid var(--border);padding:6px 14px;cursor:pointer;font:inherit;border-radius:3px}button:hover{background:#33333f}button.danger{border-color:#7a2a2a;color:#e89a9a}.hint{color:var(--muted);font-size:12px}#weather-info{font-size:12px;color:#c8ccd8;text-shadow:0 0 3px #000}#hud{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:6px;pointer-events:none}.bar{position:relative;width:260px;height:18px;background:#000a;border:1px solid var(--border)}.bar .fill{height:100%;width:0;transition:width .1s}.bar.life .fill{background:var(--life)}.bar.xp .fill{background:var(--xp)}.bar span{position:absolute;top:0;right:0;bottom:0;left:0;font-size:12px;line-height:18px;text-align:center;text-shadow:0 0 3px #000}#zone-info{font-size:13px;text-shadow:0 0 3px #000}#skillbar{position:absolute;left:50%;bottom:10px;transform:translate(-50%);display:flex;gap:8px;align-items:center}.skill{position:relative;width:110px;height:44px;background:#000b;border:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:12px;overflow:hidden}.skill .key{color:var(--muted);font-size:10px}.skill .cd{position:absolute;left:0;bottom:0;width:100%;height:0;background:#fff3;pointer-events:none}.skill .req{color:#e89a9a;font-size:10px}.skill.disabled{color:var(--muted);background:#0008;border-color:#2a2a33}.skill.disabled .name{text-decoration:line-through}.panel{position:absolute;background:var(--panel);border:1px solid var(--border);padding:18px 22px;border-radius:4px}#town{left:50%;top:50%;transform:translate(-50%,-50%);width:420px;text-align:center;display:flex;flex-direction:column;gap:10px}#town h1{margin:0 0 6px;font-weight:600;letter-spacing:.2em}#class-select{left:50%;top:50%;transform:translate(-50%,-50%);min-width:420px;max-width:900px;text-align:center;display:flex;flex-direction:column;gap:12px}#class-select h1{margin:0;font-weight:600;letter-spacing:.2em}#class-select .note{margin:0;color:#e89a9a;font-size:12px}#class-cards{display:flex;gap:14px;justify-content:center}.class-card{width:220px;border:1px solid var(--border);background:#0e0e13;padding:14px 16px;display:flex;flex-direction:column;gap:8px;text-align:left}.class-card h2{margin:0;font-size:18px;font-weight:600}.class-card .desc{margin:0;color:var(--muted);font-size:12px;min-height:2.6em}.class-stats{font-size:12px;display:grid;grid-template-columns:auto auto;column-gap:12px;row-gap:2px}.class-stats .v{text-align:right}.class-skills{margin:0;font-size:12px}.class-card button{margin-top:auto}#inventory{right:12px;top:12px;bottom:70px;width:560px;display:flex;gap:20px}#inventory h2{font-size:14px;margin:0 0 8px;color:var(--muted);font-weight:600}.inv-col{display:flex;flex-direction:column;min-width:0}.inv-col:first-child{width:210px}.inv-col:last-child{flex:1}#inventory .close,#passive-tree .close{position:absolute;right:8px;top:6px;padding:0 8px}#passive-hint{font-size:12px;color:#ffe08a;text-shadow:0 0 3px #000}#passive-tree{left:50%;top:50%;transform:translate(-50%,-50%);width:924px;display:flex;flex-direction:column;gap:6px;padding:12px 22px 10px}#passive-tree h2{font-size:14px;margin:0;color:var(--muted);font-weight:600}#passive-tree h2 span{color:#ffe08a;margin-left:10px}#passive-tree canvas{background:#0e0e13;border:1px solid var(--border);cursor:default}#passive-tree .hint{margin:0}#equipment{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:14px}#inv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.cell{height:50px;border:1px solid var(--border);background:#0e0e13;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:11px;text-align:center;padding:2px;cursor:pointer;overflow:hidden}.cell:hover{border-color:#888}.cell.empty{color:var(--muted);cursor:default}.cell .slot-label{font-size:9px;color:var(--muted)}.rarity-normal{color:var(--normal)}.rarity-magic{color:var(--magic)}.rarity-rare{color:var(--rare)}.rarity-unique{color:var(--unique)}#stats{font-size:12px;display:grid;grid-template-columns:auto auto;column-gap:12px;row-gap:2px}#stats .v{text-align:right}#tooltip{position:absolute;z-index:10;background:#0a0a0ef5;border:1px solid var(--border);padding:8px 12px;font-size:12px;max-width:260px;pointer-events:none}#tooltip .title{font-size:14px;font-weight:600;margin-bottom:4px}#tooltip .sub{color:var(--muted);margin-bottom:6px}#tooltip .implicit{color:#c8c8c8}#tooltip .affix{color:var(--magic)}#toasts{position:absolute;right:12px;bottom:70px;display:flex;flex-direction:column-reverse;gap:4px;pointer-events:none}.toast{background:#000c;border-left:3px solid var(--border);padding:4px 10px;font-size:12px;animation:fade 3s forwards}@keyframes fade{0%,70%{opacity:1}to{opacity:0}}