:root{--ink:#111419;--paper:#c4baa2;--gold:#bd9a58;--edge:#514b3b;--pixel-panel:url('assets/pixel/panel.png');--atlas:url('assets/pixel/icons.png')}
html,body{font-family:'Noto Sans TC',monospace;background:#0d1014;color:var(--paper)}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;filter:grayscale(.75);opacity:.45}button:focus-visible,input:focus-visible{outline:2px solid #e7ce85!important;outline-offset:3px}
img,canvas,.pixel-icon{image-rendering:pixelated;image-rendering:crisp-edges}#gameCanvas{image-rendering:pixelated}
.dark-panel{background-color:#12151bee;background-image:linear-gradient(#10131bd9,#10131bf0),var(--pixel-panel);background-size:cover;border:2px solid #514936;border-radius:0!important;box-shadow:inset 2px 2px #79705a55,inset -2px -2px #050709,3px 3px 0 #0008;backdrop-filter:none}
.gold-border{border-color:#8c7549;box-shadow:inset 2px 2px #cab16b44,inset -2px -2px #0b0c0f,4px 4px #0007}
#uiLayer{padding-bottom:30px!important}#uiLayer button{border-radius:1px!important;text-shadow:1px 1px #000}
#uiLayer>div:first-child>div:first-child>.dark-panel:first-child{border-top:3px solid #a18a50}
#uiLayer .auto-active{background:linear-gradient(#3d3927,#24251f);border-color:#b69a5d;box-shadow:inset 2px 2px #cdb97833,2px 2px #000;color:#e6ce8e}
#uiLayer .fixed.right-2,#uiLayer .fixed.right-3{border-radius:0}
.pixel-icon{display:inline-block;width:40px;height:40px;flex-shrink:0;background-image:var(--atlas);background-repeat:no-repeat;background-size:400% 400%;image-rendering:pixelated;vertical-align:middle}
.icon-0{background-position:0 0}.icon-1{background-position:33.333% 0}.icon-2{background-position:66.667% 0}.icon-3{background-position:100% 0}.icon-4{background-position:0 33.333%}.icon-5{background-position:33.333% 33.333%}.icon-6{background-position:66.667% 33.333%}.icon-7{background-position:100% 33.333%}.icon-8{background-position:0 66.667%}.icon-9{background-position:33.333% 66.667%}.icon-10{background-position:66.667% 66.667%}.icon-11{background-position:100% 66.667%}.icon-12{background-position:0 100%}.icon-13{background-position:33.333% 100%}.icon-14{background-position:66.667% 100%}.icon-15{background-position:100% 100%}
.menu-art{width:26px;height:26px}#uiLayer button:has(.menu-art)>i{display:none}.hotbar-art{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);z-index:1;opacity:.8;pointer-events:none}#uiLayer button:has(.hotbar-art)>div>i{visibility:hidden}#uiLayer button:has(.hotbar-art)>span,#uiLayer button:has(.hotbar-art)>div[id^=cdOverlay]{z-index:3}#uiLayer button:has(.hotbar-art)>div>span{z-index:2;background:#101218aa}
.pixel-orb{position:relative;width:78px;height:78px;border:0!important;background:#07080c!important;overflow:visible;border-radius:50%!important;box-shadow:none!important;isolation:isolate}
.pixel-orb:after{content:'';position:absolute;inset:-10px;background:url('assets/pixel/orb.png') center/contain no-repeat;image-rendering:pixelated;z-index:2;pointer-events:none;mask-image:radial-gradient(circle,transparent 0 33%,#000 34%)}
.pixel-orb .orb-fill-hp,.pixel-orb .orb-fill-mp{clip-path:circle(50% at 50% 50%);border-radius:0!important;bottom:0;max-height:100%;box-shadow:inset 5px 0 #fff1,inset -5px 0 #0005}
.pixel-orb .orb-fill-hp{background:repeating-linear-gradient(0deg,#9b2730 0 4px,#bd3f43 4px 8px)}.pixel-orb .orb-fill-mp{background:repeating-linear-gradient(0deg,#244e7b 0 4px,#3978a2 4px 8px)}
.pixel-orb .orb-gloss{border-radius:50%;background:linear-gradient(130deg,#e6e0c02b,transparent 50%);inset:7px;z-index:1}.pixel-orb>div:last-child{z-index:3}.pixel-orb{clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
#joystickZone{width:112px;height:112px;background:url('assets/pixel/joystick.png') center/contain no-repeat!important;border:0!important;backdrop-filter:none!important;box-shadow:none!important;border-radius:0!important;opacity:.88;bottom:165px}
#joystickKnob{width:40px;height:40px;background:url('assets/pixel/joystick.png') center/contain no-repeat!important;border:0!important;border-radius:0!important;box-shadow:2px 2px #0008!important}
.experience-panel{position:absolute;bottom:max(4px,env(safe-area-inset-bottom));left:12px;right:12px;pointer-events:none;height:24px}.experience-caption{display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1px;color:#b7a477;text-shadow:1px 1px #000;margin-bottom:3px}.experience-track{height:7px;background:#0a0b0e;border:1px solid #655b43;box-shadow:1px 1px #000}.experience-track>div{height:100%;background:repeating-linear-gradient(90deg,#9f7d3a 0 7px,#b89958 7px 8px);transition:width .2s linear}
.pixel-modal{padding:22px;background:#06090edb;backdrop-filter:blur(2px)}.pixel-window{width:min(100%,960px);max-height:90dvh;overflow:auto;background-color:#101318;background-image:linear-gradient(#11141be0,#101318ed),var(--pixel-panel);background-size:100% 100%;border:3px solid #76664a;outline:1px solid #272a29;box-shadow:inset 0 0 0 2px #22262c,7px 7px #0008;padding:22px;color:#c2baa6;scrollbar-color:#786545 #17191e;scrollbar-width:thin}
.window-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;margin-bottom:17px;border-bottom:2px solid #423f32}.window-header small{font:9px monospace;letter-spacing:3px;color:#8c8065}.window-header h2{font-size:21px;font-weight:800;letter-spacing:2px;color:#d9c48d;margin:5px 0 0}.close-pixel{background:#1a1d22;border:2px solid #655c47;width:32px;height:32px;color:#b7ad94;font:25px monospace;line-height:24px;flex-shrink:0}
.pixel-window button:not(.bag-item):not(.equip-slot):not(.skill-root):not(.talent-node):not(.map-pin):not(.close-pixel){border:2px solid #706348;background:#252a2d;color:#d1bd88;padding:8px 12px;box-shadow:inset 1px 1px #a7986844,2px 2px #0007;font-size:12px;font-weight:700}
.section-caption{font-size:12px;letter-spacing:2px;font-weight:700;color:#d0bb86;text-transform:uppercase;margin-bottom:10px}.microcopy{font-size:11px;line-height:1.7;color:#878a8c;margin:6px 0 12px}.inventory-layout{display:grid;grid-template-columns:320px 1fr;gap:25px}.paperdoll-section{padding-right:23px;border-right:1px solid #414034}.paperdoll{height:310px;position:relative;background:radial-gradient(ellipse,#282d31,#101318 70%);border:2px solid #383b3c}
.doll-hero{position:absolute;width:180px;height:180px;object-fit:contain;left:calc(50% - 90px);top:65px;opacity:.85;image-rendering:pixelated}.equip-slot{position:absolute;width:61px;height:68px;background:#0b0e1399;border:2px solid #48483c;box-shadow:inset 2px 2px #000,1px 1px #6b625344;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.equip-slot .pixel-icon{width:44px;height:44px}.equip-slot span:last-child{font-size:9px;color:#aaa08a}.equip-slot.empty .pixel-icon{filter:grayscale(1);opacity:.25}.slot-helmet{top:12px;left:calc(50% - 30px)}.slot-weapon{top:85px;left:12px;height:105px}.slot-shield{top:85px;right:12px;height:105px}.slot-armor{top:88px;left:calc(50% - 30px);height:90px;background:#0b0e1390}.slot-gloves{bottom:16px;left:12px}.slot-boots{bottom:16px;right:12px}.slot-belt{bottom:16px;left:calc(50% - 30px)}.slot-ring{top:190px;left:calc(50% - 30px);height:40px;flex-direction:row}.slot-ring .pixel-icon{width:30px;height:30px}.character-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:14px 0;font-size:11px;color:#858b8e}.character-stats b{float:right;color:#cbc4af;font-family:monospace}
.tetris-bag{display:grid!important;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);aspect-ratio:10/6;gap:0!important;padding:0!important;min-height:0!important;background-color:#0b0e14;background-image:linear-gradient(#5a5b572f 1px,transparent 1px),linear-gradient(90deg,#5a5b572f 1px,transparent 1px);background-size:10% 16.6667%;border:2px solid #55513f;overflow:visible!important;position:relative}
.tetris-bag.legacy-overflow{grid-template-rows:repeat(18,30px);aspect-ratio:auto;max-height:350px;overflow-y:auto!important;background-size:10% 30px}
.bag-item{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid #515044!important;background:#27304425;box-shadow:inset 0 0 12px #0009}.bag-item:hover,.bag-item.selected{background:#95845235;outline:1px solid #d1bd86;z-index:2}.bag-item .pixel-icon{width:95%;height:95%;max-width:86px;max-height:86px;aspect-ratio:1;flex-shrink:1}.item-rarity-dot{position:absolute;bottom:2px;right:3px;font-size:7px}
.rarity-normal{color:#bfc0bc!important;border-color:#656964!important}.rarity-magic{color:#81a1c9!important;border-color:#456384!important}.rarity-rare{color:#d4ba68!important;border-color:#8f7944!important}.rarity-set{color:#83b792!important;border-color:#4c7754!important}.rarity-unique{color:#caa465!important;border-color:#977b42!important}
.inventory-actions{display:flex;gap:8px;margin:12px 0}.danger-button{color:#c89786!important;border-color:#775347!important;background:#352321!important}.item-detail{min-height:126px;background:#0b0e13b3;border:1px solid #424237;padding:14px;margin-top:14px;font-size:12px;line-height:1.7}.item-detail h3{font-size:15px;color:inherit;font-weight:700}.item-detail p{color:#989a96;margin:5px 0}.detail-heading{display:flex;align-items:center;gap:11px}.detail-heading small{font-size:10px;color:#8c897b}.detail-actions{display:flex;gap:8px;margin-top:10px}.positive{color:#89b394!important}.negative{color:#c18c7d!important}.window-footer{display:flex;justify-content:space-between;gap:10px;margin-top:15px;padding-top:12px;border-top:1px solid #3b3c32;font:10px monospace;color:#8c8267}
.skill-window{max-width:950px}.skill-summary{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#9d9c8b}.skill-summary strong{color:#dac187}.skill-tree{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}.skill-branch{text-align:center}.branch-heading{color:var(--branch-color);font:11px monospace;letter-spacing:2px;margin-bottom:14px}.skill-root{width:100%;display:flex;align-items:center;flex-direction:column;gap:6px;border:2px solid var(--branch-color);background:#192027;padding:12px 5px;box-shadow:3px 3px #0007}.skill-root .pixel-icon{width:54px;height:54px}.skill-root strong{font-size:12px;color:#d0c6ad}.skill-root span{font:11px monospace;color:var(--branch-color)}.skill-root small{font-size:10px;color:#969e9f;line-height:1.7}.skill-root em{font-size:10px;color:#c7b37c;font-style:normal;border-top:1px solid #3d4440;width:100%;padding-top:7px}.tree-connector{width:3px;height:24px;background:#373d3f;margin:auto;position:relative}.tree-connector:after{content:'';position:absolute;bottom:0;left:-3px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #474c4b}.tree-connector.active{background:var(--branch-color);opacity:.7}.talent-node{margin:auto;display:flex;align-items:center;flex-direction:column;gap:4px;width:92px;padding:7px 4px;background:#13181e;border:2px solid #454b48;box-shadow:2px 2px #0007}.talent-node .pixel-icon{width:32px;height:32px}.talent-node span{font-size:10px;color:#b9b8a5}.talent-node b{font:10px monospace;color:#8c978f}.talent-node.locked{filter:grayscale(1);opacity:.4}.talent-node.invested{border-color:var(--branch-color)}.talent-node.selected{outline:2px solid #d6c284;outline-offset:3px}
.world-window{max-width:1040px}.world-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}.world-atlas{position:relative;min-height:420px;background:url('assets/pixel/world.png') center/cover;border:2px solid #514a38;isolation:isolate}.world-atlas:before{content:'';position:absolute;inset:0;background:#06101828;z-index:-1}.world-atlas>svg{position:absolute;width:100%;height:100%;inset:0}.world-atlas>svg path{stroke:#dcc58b;stroke-width:.5;stroke-dasharray:1.5 1.5;fill:none;opacity:.65}.map-pin{position:absolute;transform:translate(-50%,-50%);width:37px;height:37px;background:#121c24;border:3px solid #94794c;color:#d9c68d;box-shadow:3px 3px #000a;font:18px serif}.pin-0{left:22%;top:28%}.pin-1{left:50%;top:52%}.pin-2{left:78%;top:73%}.map-pin.selected{outline:2px solid #dfcb93;outline-offset:5px}.map-pin.current{background:#3d5b53}.map-pin.locked{filter:grayscale(1)}.map-legend{position:absolute;bottom:10px;left:12px;right:12px;font-size:9px;color:#cfbd90;background:#10151ac2;padding:6px}.region-detail{padding:12px 0}.region-detail>small{color:#948663;font:10px monospace;letter-spacing:2px}.region-detail h3{font-size:25px;font-weight:700;color:#dbceaa;margin:15px 0}.region-state{color:#88ac9c;font-size:12px;margin-bottom:20px}.region-detail dl{font-size:12px;line-height:1.8}.region-detail dt{color:#837d6b;font-size:10px;letter-spacing:1px;margin-top:13px}.region-detail dd{color:#b9bba9}.travel-button{width:100%;margin-top:25px}
#forgeModal>.dark-panel,#assetModal>.dark-panel{background-image:linear-gradient(#13171ee8,#11141bea),var(--pixel-panel);background-size:cover}
@media(max-width:760px){.pixel-modal{padding:10px}.pixel-window{padding:14px;max-height:92dvh}.window-header h2{font-size:16px;letter-spacing:1px}.window-header small{font-size:8px;letter-spacing:2px}.inventory-layout{grid-template-columns:1fr;gap:16px}.paperdoll-section{border:0;padding:0;display:grid;grid-template-columns:1fr 110px;gap:10px}.paperdoll-section .section-caption{grid-column:1/-1}.paperdoll{height:265px}.doll-hero{width:150px;height:150px;left:calc(50% - 75px);top:55px}.equip-slot{width:48px;height:55px}.equip-slot .pixel-icon{width:34px;height:34px}.slot-helmet,.slot-armor,.slot-belt,.slot-ring{left:calc(50% - 24px)}.slot-weapon,.slot-shield{top:70px;height:85px}.slot-armor{top:74px;height:75px}.slot-ring{top:162px;height:35px}.slot-gloves,.slot-belt,.slot-boots{bottom:11px}.slot-weapon,.slot-gloves{left:7px}.slot-shield,.slot-boots{right:7px}.character-stats{grid-template-columns:1fr;align-content:center;gap:18px;font-size:10px}.character-stats b{display:block;float:none;font-size:13px;margin-top:5px}.window-footer{flex-wrap:wrap}.skill-tree{grid-template-columns:repeat(2,1fr);gap:26px 18px;margin:18px 0}.skill-summary{flex-wrap:wrap;font-size:11px}.talent-node{width:100px}.world-layout{grid-template-columns:1fr;gap:12px}.world-atlas{min-height:280px}.region-detail{display:block}.region-detail h3{font-size:21px;margin:10px 0}.region-detail dl{display:grid;grid-template-columns:90px 1fr;gap:8px}.region-detail dt{margin:0}.region-state{margin-bottom:14px}.travel-button{margin-top:15px}.experience-caption{font-size:8px;letter-spacing:0}.experience-caption>span:first-child{display:none}}
@media(max-width:639px){.pixel-orb{width:44px;height:44px}.pixel-orb:after{inset:-7px}#joystickZone{width:88px;height:88px;bottom:166px;left:8px}#joystickKnob{width:32px;height:32px}#uiLayer>div:first-child>div:first-child{width:48%}#targetPanel{width:43%}#uiLayer .max-w-3xl{margin-bottom:3px}.experience-panel{left:8px;right:8px;height:22px}#uiLayer .fixed{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.pixel-window{background:#11151b;border:22px solid transparent;border-image:url('assets/pixel/panel.png') 28 fill /22px stretch;padding:13px 17px}
.pixel-orb .orb-fill-hp,.pixel-orb .orb-fill-mp{clip-path:none}
@media(max-width:760px){.pixel-window{border-width:12px;border-image-width:12px;padding:12px}.window-header{padding-bottom:12px;margin-bottom:12px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#uiLayer button[onclick="usePotion('hp')"]>i,#uiLayer button[onclick="usePotion('mp')"]>i{font-size:0;width:18px;height:24px;background:center/contain no-repeat}
#uiLayer button[onclick="usePotion('hp')"]>i{background-image:url('assets/pixel/potion-red.svg')}
#uiLayer button[onclick="usePotion('mp')"]>i{background-image:url('assets/pixel/potion-blue.svg')}
