:root{--gold:#c9a45c;--gold-dim:#6e5a34;--ink:#0d0b0a;--panel:#120f0df0;--text:#d8d2c4;--dim:#8c8474;--serif:"Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif;--sans:"Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;--frame:url(/ui/frame.webp);--socket:url(/ui/socket.webp);--leather:url(/ui/leather.webp);--divider:url(/ui/divider.webp);--rarity-normal:#b8b0a0;--rarity-magic:#6f8cff;--rarity-rare:#f2d24b}*{box-sizing:border-box}html,body{height:100%;color:var(--text);font-family:var(--sans);-webkit-user-select:none;user-select:none;background:#000;margin:0;font-size:14px;overflow:hidden}#game{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui button{color:inherit;cursor:pointer;font-family:inherit}kbd{font-family:var(--sans);color:var(--dim);font-size:10px}#labels,#floaters{position:absolute;inset:0;overflow:hidden}.label{white-space:nowrap;pointer-events:auto;cursor:pointer;text-shadow:0 1px 2px #000;background:#000000b8;border:1px solid #ffffff14;padding:1px 7px;font-size:13px;position:absolute;top:0;left:0}.label:hover{border-color:var(--gold);background:#3c321ee6}.bubble{color:#2a1a0c;white-space:nowrap;pointer-events:none;opacity:0;background:#faf0dcf2;border:2px solid #8a6a34;border-radius:12px;max-width:260px;padding:6px 12px;font-size:13px;font-weight:700;transition:opacity .2s;position:absolute;top:0;left:0;box-shadow:0 4px 12px #000000b3}.bubble:after{content:"";border:8px solid #0000;border-top-color:#8a6a34;border-bottom:0;margin-left:-8px;position:absolute;bottom:-9px;left:50%}.bubble.show{opacity:1;animation:.25s ease-out bubble-pop}@keyframes bubble-pop{0%{margin-top:8px}to{margin-top:0}}.label.npc,.label.exit{font-family:var(--serif);background:#00000080;border-color:#0000}.floater{text-shadow:0 0 3px #000,0 2px 2px #000;white-space:nowrap;font-size:16px;font-weight:700;animation:.9s ease-out forwards float-up;position:absolute;transform:translate(-50%,-50%)}.floater.dmg{color:#fff2d8}.floater.crit{color:#ffd23c;font-size:24px}.floater.hurt{color:#ff5a48;font-size:18px}.floater.miss{color:#b8c4d0;font-size:14px}.floater.xp{color:#b9a0ff;font-size:12px;font-weight:400}@keyframes float-up{0%{opacity:1;margin-top:0}to{opacity:0;margin-top:-60px}}#hurt-vignette{opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 160px 40px #b400008c}#hurt-vignette.show{animation:.5s ease-out hurt}@keyframes hurt{0%{opacity:1}to{opacity:0}}#zone-name{text-align:center;font-family:var(--serif);letter-spacing:.3em;color:var(--gold);text-shadow:0 0 18px #000,0 2px 4px #000;opacity:0;font-size:40px;position:absolute;top:12%;left:0;right:0}#zone-name.show{animation:3.2s ease-out forwards zone}@keyframes zone{0%{opacity:0;letter-spacing:.6em}15%,70%{opacity:1;letter-spacing:.3em}to{opacity:0}}#target{text-align:center;width:320px;margin-left:-160px;display:none;position:absolute;top:14px;left:50%}#target .name{font-family:var(--serif);text-shadow:0 1px 3px #000;margin-bottom:3px;font-size:16px}#target .name.elite{color:#7f9cff}#target .name.unique{color:#f2c84b}#target .bar{border:1px solid var(--gold-dim);background:#000000bf;height:12px}#target .bar i{background:linear-gradient(#c8301c,#7a1408);height:100%;transition:width .12s;display:block}#quest{color:#e8dcc0;text-shadow:0 1px 3px #000;max-width:280px;font-size:13px;position:absolute;top:14px;left:14px}#quest b{font-family:var(--serif);color:var(--gold);letter-spacing:.2em;font-size:12px;display:block}#log{text-shadow:0 1px 2px #000;flex-direction:column;gap:2px;font-size:13px;display:flex;position:absolute;bottom:170px;left:14px}#log .line{animation:5s forwards log}#log .warn{color:#ff9a70}#log .good{color:#a8e08a}#log .magic{color:#6f8cff}#log .rare{color:#f2d24b}@keyframes log{0%,80%{opacity:1}to{opacity:0}}#minimap{border:2px solid var(--gold-dim);background:#0000008c;border-radius:50%;width:176px;height:176px;position:absolute;top:12px;right:12px}#minimap.large{opacity:.85;background:#00000040;border:none;border-radius:0;width:560px;height:560px;margin:-300px 0 0 -280px;top:50%;left:50%;right:auto}#bottom{z-index:10;pointer-events:auto;align-items:flex-end;gap:14px;padding:0 18px 10px;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.globe{background:#0a0808;border:3px solid #1a120a;border-radius:50%;flex:none;width:132px;height:132px;margin:0 8px 10px;position:relative;overflow:hidden;box-shadow:0 0 0 2px #6e5a34,0 0 0 4px #1a120a,0 0 0 5px #c9a45c88,0 6px 24px #000,inset 0 0 26px #000}.globe:after{content:"";pointer-events:none;border-radius:50%;position:absolute;inset:0;box-shadow:inset 0 -12px 26px #000000bf,inset 0 6px 14px #ffffff0f}.globe .fill{transition:height .15s;position:absolute;bottom:0;left:0;right:0}.globe.life .fill{background:radial-gradient(circle at 40% 30%,#ff5a40,#a81408 55%,#4a0600)}.globe.mana .fill{background:radial-gradient(circle at 40% 30%,#6a9cff,#1c3cc0 55%,#081050)}.globe .gloss{background:radial-gradient(circle at 32% 24%,#ffffff47,#0000 38%);border-radius:50%;position:absolute;inset:0}.globe span{text-align:center;text-shadow:0 0 4px #000,0 1px 2px #000;font-size:13px;font-weight:700;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}#bar{background:linear-gradient(#0a07058c, #0a0705d9), var(--leather) center / 320px;border:22px solid #0000;border-bottom-width:0;border-image:var(--frame) 46 46 0 / 22px 22px 0 stretch;flex-direction:column;gap:7px;padding:2px 6px 8px;display:flex;position:relative;box-shadow:0 0 26px #000000e6}#xp{background:#050302;border:1px solid #6e5a34;height:12px;position:relative;box-shadow:inset 0 1px 4px #000}#xp i{background:linear-gradient(#f0d080,#b88a30 50%,#6a4a10);height:100%;transition:width .3s;display:block;box-shadow:0 0 8px #f0c86480}#xp span{text-align:center;color:#f0e6cc;text-shadow:0 0 2px #000;font-size:10px;line-height:11px;position:absolute;inset:0}#slots{align-items:center;gap:6px;display:flex}#slots .sep{background:var(--gold-dim);width:1px;height:40px;margin:0 4px}.slot{background:var(--socket) center / 100% 100%;border:none;width:52px;height:52px;padding:5px;transition:transform 80ms,filter .15s;position:relative;box-shadow:0 2px 6px #000}.slot .icon,.cell .icon{width:100%;height:100%}.slot .icon svg,.cell .icon svg{width:100%;height:100%;display:block}.icon-img{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}.slot .icon-img{border-radius:3px;box-shadow:0 0 0 1px #000c}.slot:active{transform:translateY(1px)scale(.97)}.slot kbd{color:#fff;text-shadow:0 0 3px #000,0 0 2px #000;font-weight:700;position:absolute;top:5px;left:7px}.slot b{color:#fff;text-shadow:0 0 3px #000,0 0 2px #000;font-size:13px;position:absolute;bottom:4px;right:7px}.slot:hover{filter:brightness(1.25)}.slot.skill.active{box-shadow:0 0 0 2px #ffd060,0 0 14px #ffc850d9}.slot.skill.active:after{content:"";pointer-events:none;border-radius:3px;position:absolute;inset:5px;box-shadow:inset 0 0 10px #ffd26ebf}.slot.skill.locked{opacity:.3;filter:grayscale()}#hud-buttons{justify-content:center;gap:4px;display:flex}.hud-btn{letter-spacing:.1em;background:linear-gradient(#3a2c1c,#1a120b);border:1px solid #6e5a34;border-radius:2px;padding:3px 10px;font-size:12px;box-shadow:inset 0 1px #ffdc962e,0 2px 4px #000;color:#e8d8b0!important}.hud-btn kbd{margin-left:5px}.hud-btn:hover{border-color:var(--gold);background:linear-gradient(#54402a,#24180e);color:#fff!important}.hud-btn.alert{color:#ffd060;border-color:#ffd060;animation:1.2s infinite pulse}@keyframes pulse{50%{box-shadow:0 0 10px #ffc850cc}}.panel{z-index:10;background:linear-gradient(#0c08068c, #080605d1), var(--leather) center / 384px;border:26px solid #0000;border-image:var(--frame) 46 / 26px stretch;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#6e5a34 transparent;width:390px;max-height:calc(100% - 250px);padding:8px 10px 10px;display:none;position:absolute;top:60px;overflow-y:auto;box-shadow:0 0 40px #000,inset 0 0 60px #000c}.panel.left{left:24px}.panel.right{z-index:12;width:480px;max-height:calc(100% - 24px);top:12px;right:16px}.panel h2{font-family:var(--serif);color:#f0d48a;letter-spacing:.25em;text-align:center;text-shadow:0 0 12px #f0b45059,0 2px 2px #000;background:var(--divider) center bottom / 230px auto no-repeat;margin:0 0 6px;padding-bottom:24px;font-size:24px;font-weight:900}.panel h3{font-family:var(--serif);color:var(--gold);letter-spacing:.2em;text-align:center;align-items:center;gap:10px;margin:14px 0 8px;font-size:14px;display:flex}.panel h3:before,.panel h3:after{content:"";background:linear-gradient(90deg,#0000,#8a6a34,#0000);flex:1;height:1px}.panel .close{background:radial-gradient(circle at 40% 35%,#6a1a10,#2a0805);border:1px solid #8a6a34;border-radius:50%;width:26px;height:26px;padding:0;font-size:16px;line-height:22px;position:absolute;top:0;right:0;box-shadow:0 2px 4px #000;color:#e8c8a0!important}.panel .close:hover{border-color:var(--gold);background:radial-gradient(circle at 40% 35%,#a02818,#3a0a06);color:#fff!important}.panel .points{text-align:center;color:#e8dcc0;margin-bottom:4px;font-size:13px}.panel .hint{color:var(--dim);text-align:center;margin-top:10px;font-size:12px}.panel .gold{color:#f0d070;text-shadow:0 0 6px #f0c85a59;justify-content:flex-end;align-items:center;gap:6px;margin-top:10px;font-weight:700;display:flex}.panel .gold .icon-img{border-radius:50%;width:22px;height:22px;box-shadow:0 0 0 1px #8a6a34}.plus{background:radial-gradient(circle at 40% 30%,#e8c070,#7a5418 60%,#3a2408);border:1px solid #f0d080;border-radius:50%;width:26px;height:26px;padding:0;font-size:17px;font-weight:900;line-height:1;animation:1.6s ease-in-out infinite plus-glow;box-shadow:0 0 8px #f0c8648c,0 2px 3px #000;color:#1a0e04!important}.plus:hover:not(:disabled){filter:brightness(1.2)}.plus:disabled{opacity:.22;filter:grayscale();box-shadow:none;animation:none;cursor:default!important}@keyframes plus-glow{50%{box-shadow:0 0 14px #ffd26ee6,0 2px 3px #000}}.attr-row{background:linear-gradient(90deg,#0000008c,#281c1066);border:1px solid #4a3a24;border-left:3px solid #8a6a34;grid-template-columns:52px 44px 1fr 28px;align-items:center;gap:8px;margin:5px 0;padding:6px 10px;display:grid;box-shadow:inset 0 0 12px #0009}.attr-row span{font-family:var(--serif);color:#e8d8b0;letter-spacing:.1em}.attr-row b{text-align:center;color:#fff;text-shadow:0 0 6px #ffdc9666;background:#0009;border:1px solid #3a2c1a;border-radius:2px;font-size:18px}.attr-row small{color:var(--dim);font-size:11px}.stat-row{align-items:baseline;gap:6px;padding:3px 6px;font-size:13px;display:flex}.stat-row:nth-child(2n){background:#00000040}.stat-row span{color:#a89c84;white-space:nowrap}.stat-row b{color:#f0e6cc;white-space:nowrap;margin-left:auto}.skill-row{background:linear-gradient(90deg,#0009,#1e140c59);border:1px solid #4a3a24;grid-template-columns:62px 1fr 28px;align-items:center;gap:10px;margin:6px 0;padding:8px 10px 8px 8px;display:grid;box-shadow:inset 0 0 14px #0009}.skill-row .slot{width:62px;height:62px;padding:6px}.skill-row.unlearned .slot .icon-img,.skill-row.unlearned .slot .icon{filter:grayscale(.85)brightness(.55)}.skill-row .title{font-family:var(--serif);color:#fff;letter-spacing:.05em;font-size:16px}.skill-row .pips{gap:3px;margin:4px 0 3px 2px;display:flex}.skill-row .pips i{background:#1a120a;border:1px solid #3a2c1a;width:13px;height:5px;transform:skew(-20deg)}.skill-row .pips i.on{background:linear-gradient(#ffe7a0,#c88a28);border-color:#f0d080;box-shadow:0 0 5px #ffc85ab3}.skill-row .pips i.bonus{background:linear-gradient(#b8d0ff,#4a6ad8);border-color:#a8c0ff;box-shadow:0 0 5px #78a0ffb3}.skill-row .title span{color:var(--gold);font-family:var(--sans);font-size:12px}.skill-row .desc{color:#c8bea8;margin:2px 0;font-size:12px}.skill-row .nums{color:#8fb8e0;font-size:11px}.skill-row .req{color:#ff7a60;font-size:11px}.equip{background:radial-gradient(at 50% 45%,#825f3240,#0000 62%);border-bottom:1px solid #4a3a24;grid-template-rows:repeat(3,58px);grid-template-columns:repeat(3,58px);grid-template-areas:"weapon helm amulet""weapon armor ring""weapon boots.";justify-content:center;gap:16px 28px;margin:0 0 12px;padding:4px 0 22px;display:grid;position:relative}.equip .cell{width:58px}.equip .slot-weapon{aspect-ratio:auto;border:12px solid #0000;border-image:var(--socket) 22 fill / 12px stretch;background:#00000059;grid-area:weapon;height:100%;padding:0}.equip .slot-helm{grid-area:helm}.equip .slot-armor{grid-area:armor}.equip .slot-boots{grid-area:boots}.equip .slot-ring{grid-area:ring}.equip .slot-amulet{grid-area:amulet}.equip .slot-label{text-align:center;color:#9a8660;letter-spacing:.2em;pointer-events:none;font-size:10px;position:absolute;bottom:-16px;left:-10px;right:-10px}.bag-tabs{gap:4px;margin-bottom:-1px;padding-left:6px;display:flex}.bag-tab{background:linear-gradient(#2a1e12,#120c07);border:1px solid #4a3a24;border-bottom:none;border-radius:4px 4px 0 0;flex:1;padding:4px 0 3px;font-size:14px;position:relative;font-family:var(--serif)!important;color:#a89070!important}.bag-tab small{font-family:var(--sans);color:#7a6a50;margin-left:6px;font-size:10px}.bag-tab:hover{color:#fff!important}.bag-tab.active{z-index:1;background:linear-gradient(#5a4224,#241810);border-color:#c9a45c;box-shadow:0 -2px 8px #f0be5a40;color:#ffe0a0!important}.bag-tab.active small{color:#d8c090}.grid{background:#00000073;border:1px solid #3a2c1a;grid-template-columns:repeat(8,1fr);gap:3px;padding:6px;display:grid;box-shadow:inset 0 0 16px #000}.cell{aspect-ratio:1;background:var(--socket) center / 100% 100%;border:none;padding:4px;position:relative}.cell.item{color:var(--rarity-normal)}.cell.item.magic{color:var(--rarity-magic)}.cell.item.rare{color:var(--rarity-rare)}.cell.item:before{content:"";background:radial-gradient(circle, color-mix(in srgb, currentColor 24%, transparent) 0%, transparent 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 60%, transparent), inset 0 0 10px color-mix(in srgb, currentColor 35%, transparent);pointer-events:none;border-radius:2px;position:absolute;inset:3px}.cell.item.normal:before{background:0 0;box-shadow:inset 0 0 0 1px #b8b0a038}.cell.item:hover{filter:brightness(1.3)}.cell .item-art{filter:drop-shadow(0 2px 3px #000);position:relative}.cell .ghost{color:#6a5838;opacity:.5;width:auto;height:auto;position:absolute;inset:24%}.cell .price{text-align:center;color:#e8c860;background:#000000bf;font-size:10px;position:absolute;bottom:-1px;left:0;right:0}.cell .price.poor{color:#ff6a50}.grid.shop{grid-template-columns:repeat(4,1fr);gap:8px}.shop-potions{flex-direction:column;gap:5px;display:flex}.shop-potion{text-align:left;background:linear-gradient(90deg,#0009,#1e140c59);border:1px solid #4a3a24;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:4px 8px;display:grid}.shop-potion .icon,.shop-potion .icon-img{border-radius:3px;width:34px;height:34px}.shop-potion .icon svg{width:100%;height:100%}.shop-potion:hover{border-color:var(--gold)}.shop-potion b{color:#e8c860}#tooltip{border:16px solid #0000;border-image:var(--frame) 46 / 16px stretch;z-index:50;text-align:center;background:#060403f5;min-width:190px;max-width:290px;padding:2px 6px 4px;font-size:13px;display:none;position:absolute;box-shadow:0 6px 24px #000}.tt-art{filter:drop-shadow(0 3px 4px #000);width:64px;height:64px;margin:0 auto 4px;display:block}.tt-name{font-family:var(--serif);color:#fff;font-size:15px}.tt-name.small{font-size:13px}.tt-sub{color:var(--dim);margin-bottom:5px;font-size:11px}.tt-stat{color:#8fa8ff}.tt-desc{color:#c8c0b0;margin-bottom:4px}.tt-dim .tt-stat{color:#6a7088}.tt-divider{background:var(--divider) center top / 130px auto no-repeat;color:var(--dim);margin:8px 0 3px;padding-top:14px;font-size:11px}.tt-footer{color:#c9a45c;margin-top:7px;font-size:11px}#dialog{z-index:11;background:linear-gradient(#0c080699, #080605d9), var(--leather) center / 384px;border:26px solid #0000;border-image:var(--frame) 46 / 26px stretch;pointer-events:auto;width:540px;margin-left:-270px;padding:6px 12px;display:none;position:absolute;bottom:190px;left:50%;box-shadow:0 0 30px #000}#dialog h2{font-family:var(--serif);color:var(--gold);margin:0 0 6px;font-size:18px}#dialog p{margin:0 0 12px;line-height:1.7}#dialog button{text-align:left;background:linear-gradient(90deg,#0009,#281c1066);border:1px solid #4a3a24;border-left:3px solid #8a6a34;width:100%;margin-top:5px;padding:7px 10px;display:block}#dialog button:hover{border-color:var(--gold);color:#fff}.screen{z-index:20;pointer-events:auto;text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.screen h1{font-family:var(--serif);margin:0;font-weight:900}.screen button{border:1px solid var(--gold-dim);color:#e8dcc0;min-width:220px;font-family:var(--serif);letter-spacing:.2em;background:linear-gradient(#2c2218,#15100b);margin:6px;padding:11px 26px;font-size:18px}.screen button:hover:not(:disabled){border-color:var(--gold);color:#fff;box-shadow:0 0 16px #c8a05066}.screen button:disabled{opacity:.35;cursor:default}#title{background:radial-gradient(at 50% 35%,#2a1c14 0%,#0a0706 60%,#000 100%)}#title h1{letter-spacing:.25em;color:#d8b060;text-shadow:0 0 40px #ff782873,0 4px #3a2408;padding-left:.25em;font-size:110px}#title .subtitle{letter-spacing:.9em;color:var(--gold-dim);margin-bottom:36px;padding-left:.9em}#title .menu{flex-direction:column;display:flex}#title .status{height:20px;color:var(--dim);margin-top:8px;font-size:12px}#title .controls{color:var(--dim);text-align:left;grid-template-columns:1fr 1fr;gap:5px 34px;margin-top:30px;font-size:12px;display:grid}#title .controls kbd{color:#c9a45c;min-width:92px;font-size:12px;display:inline-block}#death{background:radial-gradient(#3c00008c,#000000e6);display:none}#death h1{color:#a81408;letter-spacing:.3em;text-shadow:0 0 30px #000;margin-bottom:30px;padding-left:.3em;font-size:80px}#fatal{color:#fcc;white-space:pre-wrap;pointer-events:auto;z-index:99;-webkit-user-select:text;user-select:text;background:#200;border:2px solid #a00;width:560px;margin-left:-280px;padding:18px;display:none;position:absolute;top:30%;left:50%}