/* Shared LULO pixel interface tokens; gameplay controls retain their existing handlers. */
body.pixel-ui{--bg:#101923;--bg-2:#15222d;--panel:#23333e;--panel-2:#2b414b;--panel-edge:#60706c;--gold:#c4ab72;--gold-2:#e2ce96;--gold-deep:#877047;--text:#ece6d3;--dim:#a4b6b4;--hp:#ba6356;--mp:#56839a;--exp:#a68d51;--grad-panel:linear-gradient(#263a45,#1d2e38);--grad-gold:linear-gradient(#d0ba80,#a48b58);--shadow-1:2px 2px 0 #09131c;--shadow-2:4px 4px 0 #09131c;--glow-gold:none;--font-hud:'Microsoft JhengHei','Noto Sans TC',sans-serif;background:#101923!important;color:var(--text);padding:18px 18px 130px;font-family:'Microsoft JhengHei','Noto Sans TC',sans-serif;}
body.pixel-ui h1{color:#dfca94!important;-webkit-text-fill-color:#dfca94;background:none!important;filter:none!important;animation:none!important;font:700 25px Georgia,'Microsoft JhengHei',serif;letter-spacing:4px;text-shadow:2px 2px #080f17;}
body.pixel-ui .sub{color:#91aaa7;letter-spacing:2px;margin-bottom:18px;}
#pixelStage{display:grid;grid-template-columns:230px minmax(0,864px);gap:18px;width:min(1112px,100%);align-items:start;}
#pixelSidebar{display:flex;flex-direction:column;gap:12px;min-width:0;}
#pixelSidebar{position:relative;z-index:2}#pixelStage>#frame{position:relative;z-index:0}
body.pixel-ui #hudDrawer{width:100%;min-width:0;max-width:100%;box-sizing:border-box;flex-wrap:wrap;overflow-x:hidden;overflow-y:auto;max-height:min(55dvh,420px);gap:6px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.pixel-ui #hudDrawer:not([style*="display:none"]):not([style*="display: none"]){display:grid!important}
body.pixel-ui #hudDrawer .hbtn{min-width:0!important;max-width:100%;width:auto!important;white-space:normal!important;overflow-wrap:anywhere;box-sizing:border-box;justify-content:center;padding:7px 4px}
body.pixel-ui.hud-menu-open #pixelSidebar{z-index:200000}
body.pixel-ui.hud-menu-open #joyZone,body.pixel-ui.hud-menu-open #quickPad,body.pixel-ui.hud-menu-open #potionBar,body.pixel-ui.hud-menu-open #btnZone,body.pixel-ui.hud-menu-open #mPanelTab{visibility:hidden!important;pointer-events:none!important}
body.pixel-ui.hud-menu-open #rotateHint{visibility:hidden!important;pointer-events:none!important}
body.pixel-ui #frame{width:100%!important;max-width:864px;overflow:hidden;border:2px solid #7d826c;border-radius:0!important;box-shadow:0 0 0 3px #172530,0 0 0 4px #485c60,4px 6px 0 #080f17;}
body.pixel-ui .hud-top{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;background:#20323d!important;border:2px solid #65736d!important;border-radius:0!important;box-shadow:inset 2px 2px #3b5057,inset -2px -2px #13222e!important;padding:12px!important;backdrop-filter:none!important;cursor:default;font-size:12px;}
body.pixel-ui .hud-top .name{font-size:15px;color:#ead5a0;margin-bottom:8px;}
body.pixel-ui .bar{border:1px solid #83908a!important;border-radius:0!important;background:#101c26!important;box-shadow:inset 1px 1px #09121c!important;height:15px;margin:6px 0;}
body.pixel-ui .bar i{border-radius:0!important;box-shadow:inset 0 2px #ffffff24!important;filter:none!important;}
body.pixel-ui .bar.hp i{background:#b76658!important;}body.pixel-ui .bar.mp i{background:#548b9f!important;}body.pixel-ui .bar.exp i{background:#b39c62!important;}
body.pixel-ui .hud-btns{gap:6px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
body.pixel-ui button,body.pixel-ui .hbtn,body.pixel-ui .tb-btn,body.pixel-ui .slot,body.pixel-ui .tbtn,body.pixel-ui .panel,body.pixel-ui .chat-bar,body.pixel-ui .chat-history,body.pixel-ui .gmodal,body.pixel-ui .modal-box,body.pixel-ui .login-card,body.pixel-ui .zone-hud,body.pixel-ui .boss-hud,body.pixel-ui input,body.pixel-ui select{border-radius:0!important;backdrop-filter:none!important;box-shadow:inset 1px 1px #61716c,inset -2px -2px #14212b,2px 2px #0a121b!important;border-color:#7e8775!important;}
body.pixel-ui button,body.pixel-ui .hbtn,body.pixel-ui .tb-btn,body.pixel-ui .tbtn{background:#2b454e!important;color:#e8e1c8!important;text-shadow:1px 1px #101923;transition:background .12s;min-height:32px;}
body.pixel-ui button:hover,body.pixel-ui .hbtn:hover,body.pixel-ui .tb-btn:hover{background:#3b5960!important;}
body.pixel-ui button:focus-visible,body.pixel-ui [role=button]:focus-visible,body.pixel-ui input:focus-visible,body.pixel-ui select:focus-visible{outline:2px solid #edd397!important;outline-offset:3px;}
body.pixel-ui .hbtn-main,body.pixel-ui .tbtn-atk{border-color:#c4ab72!important;background:#6c593c!important;}
body.pixel-ui .panel,body.pixel-ui .gmodal,body.pixel-ui .modal-box,body.pixel-ui .login-card{background:#1f303a!important;}
body.pixel-ui .panel h3{font-size:13px;letter-spacing:1px;color:#d6bc80;border-bottom:2px solid #526764;padding-bottom:10px;}
body.pixel-ui .slot{background:#192a34!important;border-style:solid!important;min-height:66px;}
body.pixel-ui .slabel{color:#9fb6b5!important;font-size:10px;letter-spacing:.5px;}
body.pixel-ui input,body.pixel-ui select,body.pixel-ui textarea{background:#15242e!important;color:#e9e2cd!important;}
body.pixel-ui #questTracker{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;background:#1b2d36!important;border:1px solid #60746c!important;border-left:3px solid #b49e69!important;border-radius:0!important;padding:12px!important;font-size:12px;}
body.pixel-ui #hintBox{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;border:1px solid #536963!important;background:#192a34!important;border-radius:0!important;font-size:11px;color:#adc0b9;}
body.pixel-ui #hintBox.collapsed{height:28px;width:100%!important;}
body.pixel-ui #hintBox.collapsed::before{content:'操作說明';color:#c6ba91;}
body.pixel-ui #pixelFeed{width:min(1112px,100%);margin-top:18px;}
body.pixel-ui #log{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;max-height:90px;min-height:28px;overflow:auto;background:#172831!important;border:1px solid #3e595b;border-left:3px solid #678b83;border-radius:0;padding:8px 12px;font-size:11px;}
body.pixel-ui .panels{width:min(1112px,100%)!important;max-width:1112px;gap:16px;margin-top:16px;}
body.pixel-ui #pixelActions{width:min(864px,100%);margin:18px 0 0;}
body.pixel-ui #pixelActions #btnZone{position:relative!important;inset:auto!important;transform:none!important;display:flex;justify-content:center;align-items:end;gap:8px;padding-top:14px;}
body.pixel-ui #pixelActions .tbtn{width:58px!important;height:54px!important;font-size:13px;border:2px solid #657d75!important;box-shadow:inset 2px 2px #617c7b,inset -2px -2px #16252f,3px 3px #080f17!important;}
body.pixel-ui #pixelActions .surv-col{display:flex;flex-direction:row;gap:8px;align-items:end;position:relative;}
body.pixel-ui #pixelActions .stam-ring{position:absolute;top:-7px;left:0;width:100%;height:3px;border-radius:0;}
body.pixel-ui #pixelActions .bz-ctrl{top:-8px!important;right:0;}
body.pixel-ui .tbtn small{font:10px Consolas,monospace;color:#acbcb9;}
body.pixel-ui .zone-hud,body.pixel-ui .boss-hud{background:#152c34ed!important;color:#e5d4a8!important;border:1px solid #8b927a;}
body.pixel-ui .ui-fold,body.pixel-ui .panel-toggle{color:#ddc48b!important;border-radius:0!important;}
body.pixel-ui .banner{border-radius:0!important;text-shadow:2px 2px #162028;}
body.pixel-ui .joy-base,body.pixel-ui .joy-knob{box-shadow:none!important;border:2px solid #728b81!important;background:#314b52cc!important;}
@media(min-width:1100px){body.pixel-ui .panels{padding-left:248px;}body.pixel-ui #pixelFeed{padding-left:248px;}body.pixel-ui #pixelActions{margin-left:248px;}body.pixel-ui #joyZone{opacity:.7;}}
@media(max-width:900px){body.pixel-ui{padding:10px 10px 150px;}#pixelStage{grid-template-columns:190px minmax(0,1fr);gap:10px;}body.pixel-ui .hud-top{padding:8px!important;}body.pixel-ui .hud-btns{gap:3px!important;}body.pixel-ui .hbtn{font-size:10px!important;}}
@media(max-width:640px){body.pixel-ui{padding:6px 6px 160px;}body.pixel-ui h1,body.pixel-ui .sub{display:none;}#pixelStage{display:flex;flex-direction:column;gap:9px;}#pixelSidebar{width:100%;gap:7px;}body.pixel-ui .hud-top{padding:7px!important;font-size:10px;}body.pixel-ui #questTracker{font-size:10px;padding:5px 8px!important;}body.pixel-ui #hintBox{display:none!important;}body.pixel-ui #pixelActions{margin-top:12px;}body.pixel-ui #pixelActions #btnZone{flex-wrap:wrap;gap:6px;}body.pixel-ui #pixelActions .surv-col{gap:6px;}body.pixel-ui #pixelActions .tbtn{width:48px!important;height:46px!important;}body.pixel-ui .panels{max-height:80dvh;overflow:auto;}body.pixel-ui #log{font-size:10px;max-height:52px;}body.pixel-ui #pixelFeed{margin-top:10px;}}
@media(prefers-reduced-motion:reduce){body.pixel-ui *{scroll-behavior:auto!important;}}
:fullscreen #pixelStage{display:block;width:100%;}:fullscreen #pixelSidebar{position:fixed;left:8px;top:8px;width:190px;z-index:90;}:fullscreen #pixelActions{position:fixed;right:10px;bottom:12px;width:auto;margin:0;z-index:95;}
body.pixel-ui .tbtn::before,body.pixel-ui .tbtn::after{border-radius:0!important;box-shadow:none!important;background:none!important;border:none!important;}
#pixelUtility{width:min(864px,100%);display:flex;justify-content:space-between;gap:16px;margin-top:14px;align-items:start;flex-wrap:wrap;}
body.pixel-ui #pixelUtility #potionBar,body.pixel-ui #pixelUtility #quickPad{position:relative!important;inset:auto!important;transform:none!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap;width:auto!important;max-width:100%!important;padding:5px!important;gap:5px!important;background:#182c35!important;border:1px solid #5d736a!important;border-radius:0!important;}
body.pixel-ui #quickPad div,body.pixel-ui #quickPad button,body.pixel-ui #potionBar>div{border-radius:0!important;box-shadow:none!important;background:#253d47!important;border-color:#657f75!important;}
@media(min-width:1100px){#pixelUtility{margin-left:248px;}}
@media(max-width:640px){#pixelUtility{gap:6px;justify-content:center;margin-top:8px;}body.pixel-ui #quickPad div,body.pixel-ui #quickPad button{min-height:40px;}body.pixel-ui #pixelFeed{margin-top:8px;}}
/* Preserve the canvas aspect ratio: legacy mobile rules stretched its CSS box. */
html:not(:fullscreen) body.pixel-ui #frame{height:auto!important;min-height:0!important;aspect-ratio:864/544;}
html:not(:fullscreen) body.pixel-ui #frame #game{display:block;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:864/544;object-fit:fill;}
body.pixel-ui #pixelSidebar .hud-top{width:100%!important;max-width:none!important;min-width:0!important;}
@media(max-width:640px){body.pixel-ui #pixelSidebar{width:100%;}body.pixel-ui #hintBox{display:block!important;}body.pixel-ui #pixelActions #btnZone{position:relative!important;bottom:auto!important;}body.pixel-ui #pixelUtility{margin-top:10px;}}
@media(max-height:500px) and (max-width:1000px) and (orientation:landscape){
 body.pixel-ui{padding:6px 8px 80px!important;overflow:auto!important;height:auto!important;}
 body.pixel-ui h1,body.pixel-ui .sub{display:none!important;}
 body.pixel-ui #pixelStage{grid-template-columns:160px minmax(0,calc((100dvh - 82px)*1.588));justify-content:center;gap:10px;}
 body.pixel-ui #questTracker,body.pixel-ui #hintBox{display:none!important;}
 body.pixel-ui #pixelActions{width:auto;margin-top:8px;margin-left:170px;}
 body.pixel-ui #pixelActions #btnZone{padding-top:6px;gap:5px;}
 body.pixel-ui #pixelActions .tbtn{width:48px!important;height:44px!important;font-size:11px;}
 body.pixel-ui #pixelActions .surv-col{gap:5px;}
 body.pixel-ui #pixelUtility{margin-left:170px;width:auto;}
 body.pixel-ui #pixelSidebar .hud-top{padding:6px!important;}
}
@media(max-width:640px){
 body.pixel-ui #pixelActions{position:relative;min-height:112px;padding-left:100px;box-sizing:border-box;}
 body.pixel-ui #pixelActions #btnZone{justify-content:flex-end;align-items:center;}
 body.pixel-ui #pixelActions #joyZone{position:absolute!important;inset:auto!important;left:0!important;top:16px!important;transform:none!important;}
}
@media(max-height:500px) and (max-width:1000px) and (orientation:landscape){
 body.pixel-ui #pixelActions{position:fixed;bottom:8px;left:calc(50% + 85px - (100dvh - 82px)*.794);width:calc((100dvh - 82px)*1.588);margin:0!important;z-index:90;}
}
body.pixel-ui #mPanelTab{position:relative!important;inset:auto!important;transform:none!important;border:1px solid #8e987e;border-radius:0!important;background:#253d47!important;box-shadow:inset 1px 1px #728678,inset -2px -2px #13242e;width:100%;text-align:center;padding:9px;box-sizing:border-box;}
body.pixel-ui #banner{max-width:calc(100vw - 24px)!important;white-space:normal!important;overflow-wrap:anywhere;box-sizing:border-box;text-align:center;}
body.pixel-ui #rotateHint{border-radius:0!important;background:#20333e!important;border:1px solid #819181!important;box-shadow:2px 2px #0a141d!important;}