/* RO Next presentation adapter. Art and login styling are copied from the current client. */
[hidden]{display:none!important}
#login-dialog{padding:0;border:0;background:transparent;color:#264567;width:min(394px,calc(100vw - 24px));max-height:96dvh;border-radius:18px;overflow:auto}
#login-dialog::backdrop{background:linear-gradient(#daeaff22,#10264244),url('/ui/loading/courtyard-soft.webp') center/cover}


#login-status{margin:0;padding:12px 20px;background:#edf6fff5;color:#315675;font-size:12px}
#login-dialog.selecting{width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0;background:linear-gradient(#eef7ff33,#eef7ff88),url('/ui/loading/courtyard-soft.webp') center/cover}
#login-dialog.selecting #login-dialog.selecting #login-status{position:absolute;bottom:0;left:0;right:0;text-align:center}
#character-screen{padding:clamp(16px,4vw,60px);height:100%;overflow:auto}#character-screen h1{font-size:28px;color:#294a70;margin:0 0 24px;text-shadow:0 1px white}
.character-layout{display:grid;grid-template-columns:minmax(180px,300px) minmax(160px,1fr) minmax(200px,340px);align-items:center;gap:24px;height:calc(100% - 90px);max-width:1340px;margin:auto}


#character-details{background:#f4f8fff0;padding:24px;border:1px solid #d4deee;border-radius:18px;color:#33465f}#character-details button{width:100%;background:#7a8cdb;border:1px solid #b4c0f1;border-radius:24px;color:white;font-weight:700}#character-details #back-login{background:white;color:#516791}
#map-loading{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;background:linear-gradient(#142b4544,#142b4599),url('/ui/loading/courtyard-soft.webp') center/cover;z-index:100}
#map-loading[open]{display:grid;place-items:center;padding:70px 10px 24px;box-sizing:border-box}
#map-loading .load-card{position:relative;box-sizing:border-box;text-align:center;width:min(700px,94vw);padding:100px 54px 104px;background:url('/ui/loading/frame.webp') center/100% 100% no-repeat;color:#303d85}
#map-loading .load-crest{position:absolute;width:186px;height:186px;object-fit:contain;top:-86px;left:50%;transform:translateX(-50%)}
#map-loading h2{font:700 clamp(24px,3.4vw,40px)/1.15 Georgia,serif;margin:0 0 16px;color:#292d7b}
#map-loading .load-description{font-size:14px;line-height:1.4;margin:0}
#map-loading .load-divider{color:#7fa4e3;margin:9px 0;display:flex;align-items:center;gap:9px}
#map-loading .load-divider:before,#map-loading .load-divider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#d2b980,transparent)}
#map-loading .load-progress-row{display:flex;align-items:center;gap:16px}
#map-loading .load-track{position:relative;flex:1;height:25px;box-sizing:border-box;border:3px double #d0aa61;border-radius:20px;background:linear-gradient(#a9abba,#f2efe6);box-shadow:0 1px 0 white,inset 0 1px 3px #576f9b80}
#map-loading .load-track:before,#map-loading .load-track:after{content:"◆";position:absolute;z-index:2;top:50%;transform:translateY(-50%);color:#75bbf3;text-shadow:1px 0 #ae8439,-1px 0 #ae8439,0 1px #ae8439,0 -1px #ae8439;font-size:24px;line-height:1}
#map-loading .load-track:before{left:-11px}#map-loading .load-track:after{right:-11px}
#loading-fill{position:relative;width:0;height:100%;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#b5f5ff 0%,#65bfff 24%,#2c8ef0 62%,#77d6ff);box-shadow:inset 0 0 3px white;transition:width .18s ease-out}
#loading-fill i{position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#ffffff80 48%,transparent 76%);transform:translateX(-100%)}
#map-loading[open] #loading-fill i{animation:load-shimmer 1.8s linear infinite}
#loading-fill b{position:absolute;left:32%;top:50%;transform:translateY(-50%);color:white;font-size:20px;font-weight:400}
#loading-progress{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#loading-percent{font-size:21px;min-width:3ch;font-variant-numeric:tabular-nums}
#loading-phase{font-size:14px;min-height:20px;margin:14px 0 20px}
#map-loading .load-tip{display:flex;align-items:center;gap:16px;border:1px solid #dfcda5;border-radius:12px;background:#f0e9dc88;padding:14px 18px;text-align:left;font-size:12px;line-height:1.4}
#map-loading .load-tip strong{flex:none;border-radius:18px;padding:4px 12px;background:linear-gradient(#dac698,#b89a6c);color:white;font-size:16px}
@keyframes load-shimmer{to{transform:translateX(100%)}}
@media(max-width:520px){#map-loading .load-card{padding:77px 27px 88px}#map-loading .load-crest{width:150px;height:150px;top:-68px}#map-loading .load-description{font-size:12px}#map-loading .load-tip{gap:8px;padding:10px;font-size:11px}#loading-percent{font-size:17px}#loading-phase{font-size:12px}}
@media(max-height:500px){#map-loading[open]{padding:40px 10px 10px}#map-loading .load-card{width:min(580px,94vw);padding:55px 40px 72px}#map-loading .load-crest{width:110px;height:110px;top:-49px}#map-loading h2{font-size:26px;margin-bottom:8px}#loading-phase{margin:8px 0}#map-loading .load-tip{padding:7px 12px}#map-loading .load-divider{margin:5px 0}}
@media(prefers-reduced-motion:reduce){#map-loading[open] #loading-fill i{animation:none}#loading-fill{transition:none}}
body.game-shell header,body.game-shell aside,body.game-shell footer{display:none}body.game-shell.show-diagnostics header{display:flex;z-index:20;top:110px}body.game-shell.show-diagnostics aside{display:block;z-index:20;top:210px}body.game-shell.show-diagnostics aside label,body.game-shell.show-diagnostics aside output{display:block}body.game-shell #self-hp{display:none}
#game-hud{position:fixed;inset:0;pointer-events:none;z-index:7;color:white;text-shadow:0 1px 3px #081321,0 1px 2px black}#game-hud button{pointer-events:auto}#player-profile{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(16px,env(safe-area-inset-top));width:205px}#hud-name{display:block;font-size:16px}#hud-level{color:white;margin:3px 0}#hud-hp-text,#hud-sp-text{font-size:10px}.resource{height:12px;border-radius:3px;overflow:hidden;background:#14252caa;margin:3px 0}.resource i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9ddd28,#deff53);transition:width .15s linear}.resource.sp{height:7px}.resource.sp i{background:#6ce8f6}
#world-location{position:absolute;right:18px;top:18px;text-align:right;display:grid;gap:8px}#hud-coordinates{font-size:12px}#hud-menu{position:absolute;right:20px;bottom:22px;display:grid;grid-template-columns:repeat(5,54px);gap:8px}#hud-menu button{display:grid;justify-items:center;gap:2px;border:0;padding:0;background:none;color:white;font-size:11px;text-shadow:0 1px 3px black}#hud-menu img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 1px 2px #192634)}#hud-lab{position:absolute;left:16px;bottom:16px;background:#142b4577;font-size:11px}#hud-hotkeys{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:3px}#hud-hotkeys>span{width:34px;height:34px;border:1px solid #d8e8ee99;border-radius:5px;background:#0d243044;font-size:9px;padding:2px}
body.game-shell #attack-target{background:transparent url('/ui/hud-attack-blue.webp') center/contain no-repeat;border:0;font-size:0;width:90px;height:90px;bottom:150px}body.game-shell #move-stick{background:url('/ui/hud-joystick-pad.webp') center/contain no-repeat;border:0}body.game-shell #stick-knob{background:url('/ui/hud-joystick-analog.webp') center/contain no-repeat;border:0}
body.login-screen #combat-controls,body.login-screen #game-hud{display:none}
@media(max-width:800px){.character-layout{grid-template-columns:minmax(130px,1fr) minmax(160px,1fr);gap:12px}#character-details{grid-column:1/-1;padding:12px}#character-details h2{margin:0}#character-details p{margin:6px 0}#character-screen h1{font-size:22px;margin-bottom:12px}#hud-menu{top:105px;bottom:auto;grid-template-columns:repeat(2,44px);gap:10px;right:10px}#hud-menu img{width:34px;height:34px}#hud-hotkeys{display:none}#player-profile{width:155px}body.game-shell #attack-target{bottom:110px}body.game-shell.show-diagnostics header{max-height:180px;overflow:auto}body.game-shell.show-diagnostics aside{top:300px}}
@media(max-height:500px){#character-screen{padding:14px 22px}.character-layout{grid-template-columns:minmax(150px,1fr) minmax(100px,1fr) minmax(180px,1fr);height:calc(100% - 65px)}#character-details{grid-column:auto}#hud-menu{top:50px;right:12px;grid-template-columns:repeat(5,36px);gap:6px}#hud-menu img{width:29px;height:29px}#hud-menu button{font-size:9px}#player-profile{width:150px}body.game-shell #attack-target{bottom:24px;width:76px;height:76px}body.game-shell #move-stick{bottom:40px;width:90px;height:90px}}
@media(prefers-reduced-motion:reduce){.load-spinner{animation:none}.resource i{transition:none}}







#hud-menu{align-content:start;grid-auto-rows:56px}#hud-menu button{grid-template-rows:40px 14px;align-content:start}
@media(max-height:500px){#hud-menu{bottom:auto;grid-auto-rows:44px}#hud-menu button{grid-template-rows:29px 12px}#hud-hotkeys{display:none}}

body.game-shell #move-stick{background:radial-gradient(circle,#9dd9ee25 0 58%,#c5eeff40 60%,#16334330 64%);border:1.5px solid #c8edff;border-radius:50%;opacity:.5;box-shadow:inset 0 0 18px #83c9f530;transition:opacity .12s;}
body.game-shell #stick-knob{width:40%;height:40%;background:linear-gradient(145deg,#dcf5ff,#7fb5d4);border:1.5px solid #e7faff;border-radius:50%;box-shadow:0 2px 8px #102b4b55;}
body.game-shell #move-stick:active{opacity:.65}
#hud-menu{position:static;display:contents}#hud-menu button{overflow:visible;min-height:0;gap:2px}
#hud-portrait{position:fixed;border-radius:50%;border:2px solid #c9f1ff;background:radial-gradient(circle,#d4f4ff,#52a2d5);box-shadow:0 0 8px #c2edff88;width:66px;height:66px;pointer-events:none}
#hud-minimap{position:fixed;border:1px solid #b5c8d0;border-radius:50%;width:96px;height:96px;background:#102135c9;pointer-events:none}
#hud-name{font-size:14px}#world-location{font-size:11px}

#hud-hp-text,#hud-sp-text{display:none}#hud-lab{left:80px}



#skill-window{width:min(540px,90vw);max-height:85dvh;overflow:auto;background:#f4f9ff;color:#19406e;border:1px solid #b3cdf5;border-radius:14px;padding:18px}#skill-window h2{margin:0}#skill-window .close{float:right}#skill-window p{font-size:13px}#skill-list{display:grid;gap:6px;margin-top:12px}#skill-list button{text-align:left;background:#e9f2ff;color:#244574;border:1px solid #bbd0ef;padding:10px}#skill-list button:disabled{opacity:.5}
#hud-hotkeys .skill-slot{width:46px;height:46px;padding:3px;font-size:9px;overflow:hidden;touch-action:none;background:#142e4880;border:1px solid #b9def499;border-radius:9px;color:white}#skill-cancel{position:fixed;right:16px;top:42%;z-index:30;width:56px;height:56px;border-radius:50%;background:#591e4077;color:#ffb8c9;border:1px solid #ff9dbb;font-size:32px;animation:castCancelPulse 1.2s ease-in-out infinite}#skill-cancel.over{background:#ad254dcc;transform:scale(1.15)}#skill-aim-hint{position:fixed;left:50%;top:18%;transform:translateX(-50%);pointer-events:none;background:#183c5099;color:white;padding:5px 9px;border-radius:8px;z-index:29;font-size:12px}#skill-marker{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20;overflow:visible}#skill-marker path{fill:#75cfff22;stroke:#74d6ff;stroke-width:2;filter:drop-shadow(0 0 4px #42baff);animation:castMarkerPulse 1s ease-in-out infinite}
@keyframes castCancelPulse{0%,100%{opacity:.8}50%{opacity:1}}@keyframes castMarkerPulse{50%{opacity:.55}}@media(pointer:coarse),(max-width:800px),(max-height:500px){body.game-shell #hud-hotkeys{display:grid;grid-template-columns:repeat(3,46px);left:auto;right:12px;bottom:190px;transform:none;gap:5px}}@media(pointer:coarse),(max-width:600px),(max-height:500px){#skill-window{box-sizing:border-box;width:100vw;height:100dvh;max-height:100dvh;max-width:100vw;border-radius:0;margin:0}}@media(prefers-reduced-motion:reduce){#skill-marker path,#skill-cancel{animation:none}}

#respawn{z-index:40;position:fixed}body:has(#respawn:not([hidden])) #hud-hotkeys{visibility:hidden}

#game-chat{pointer-events:auto;background:#14233088;color:white;font-size:11px;display:flex;flex-direction:column;z-index:12;border-radius:5px;overflow:hidden}#game-chat .chat-history{flex:1;min-height:0;overflow:auto;padding:5px;overflow-wrap:anywhere}#game-chat form{display:flex;min-height:28px}#game-chat :is(.chat-compact-input,.chat-whisper-target){width:0;min-width:0;flex:1;background:#12253bb0;color:white;border:0;padding:5px;font-size:12px}#game-chat button{padding:2px 9px;border:0}body[data-hud-layout="portrait"] #hud-hotkeys,body[data-hud-layout="landscape"] #hud-hotkeys{display:contents}#hud-hotkeys .skill-slot[hidden]{display:none}

#skill-window{padding:0;width:min(760px,96vw);height:min(560px,90dvh);overflow:visible;background:linear-gradient(#ffffffdf,#ffffffe8),url('/ui/skill-scenery.webp') center/cover;border:3px solid #c5dcff;border-radius:20px;color:#17438b}#skill-window .skill-title{position:relative;display:flex;align-items:center;padding:9px 15px 9px 112px;min-height:42px;background:transparent;border-bottom:1px solid #c5dcff}#skill-window .skill-title img{position:absolute;left:18px;top:-19px;width:84px;height:75px;object-fit:contain}#skill-window .skill-title h2{font-size:24px}#skill-window .skill-title small{font-size:11px;color:#6880bb}#skill-window .close{margin-left:auto;color:#5271a7;background:none;border:0;font-size:22px;padding:0}#skill-window .skill-tiers{display:flex;gap:5px;padding:8px}#skill-window .skill-tiers button{flex:1;background:#c7d9ff;border:0;border-radius:20px;color:#234c90;padding:7px 2px;font-size:11px}#skill-window .skill-tiers .selected{background:url('/ui/active-tab.webp') center/100% 200%;color:white;box-shadow:inset 0 0 0 1px #bf9b49,inset 0 0 0 3px #fff0c0}#skill-window .skill-workspace{display:grid;grid-template-columns:40% 1fr;gap:9px;height:calc(100% - 158px);padding:0 10px;box-sizing:border-box}#skill-window .skill-workspace>section,#skill-detail{border:1px solid #c8dafa;border-radius:13px;padding:8px;min-height:0;overflow:auto;background:#f9fcff66}#skill-window #skill-search{box-sizing:border-box;width:100%;background:#f0f6ff;border:1px solid #c8dbff;border-radius:9px;color:#234573;padding:8px}#skill-window #skill-list button.selected{background:#fff4d8;border-color:#dabb65}#skill-window #skill-detail h3{display:flex;align-items:center;gap:8px;font-size:17px}#skill-detail h3 button{margin-left:auto;border-radius:50%;background:#8b95e9;width:32px;height:32px;padding:0;color:white}#skill-window footer{display:flex;align-items:center;gap:8px;padding:9px;font-size:11px}#skill-window footer button,#skill-window select{padding:5px;font-size:11px}#skill-points{margin-right:auto}#skill-applying{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:18px;background:#edf5ffdd;font-size:20px;z-index:2}#skill-applying[hidden]{display:none}#skill-applying small{font-size:12px;margin-top:8px;animation:castMarkerPulse 1s infinite}@media(pointer:coarse),(max-width:600px),(max-height:500px){#skill-window{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;box-sizing:border-box}#skill-window .skill-title img{top:0;height:60px}#skill-window .skill-title{padding-left:95px}#skill-window .skill-workspace{grid-template-columns:43% 1fr}#skill-window footer{gap:4px}}
#skill-window footer{position:static;inset:auto;width:auto;transform:none;background:transparent;box-sizing:border-box}#skill-window .skill-title{inset:auto;width:auto;max-height:none;box-sizing:border-box}#skill-window[open]{display:flex;flex-direction:column}#skill-window .skill-workspace{flex:1;height:auto;min-height:0}#skill-window footer,#skill-window .skill-tiers,#skill-window .skill-title{flex-shrink:0}
#skill-window footer{pointer-events:auto;color:#234c90}

#game-chat{background:none;border:0;overflow:visible;display:block}#game-chat #chatbox{width:100%;height:100%;position:relative;left:auto;top:auto;bottom:auto}#game-chat .header{display:table}#game-chat .options{display:flex}#game-chat .contentwrapper{overflow:auto}#game-chat .content{height:100%;overflow:auto}#game-chat :is(.chat-compact-input,.chat-whisper-target){width:auto}#game-chat .chat-compact-input{flex:1;width:0}#game-chat form{min-height:0}#game-chat .chat-function{display:none}#skill-window{background:none!important;border:0!important;padding:0!important;width:auto!important;height:auto!important;max-width:100vw!important;max-height:100dvh!important;overflow:visible!important;box-shadow:none!important}body[data-hud-layout="portrait"] #hud-hotkeys .skill-slot,body[data-hud-layout="landscape"] #hud-hotkeys .skill-slot{display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.64);border-radius:999px;background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.92),rgba(146,204,255,.5) 40%,rgba(56,104,146,.56) 100%);box-shadow:inset 0 1px 2px #ffffffb3,inset 0 -8px 14px #1e40684d,0 2px 6px #0005}.skill-slot img{width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain}
html #game-chat #chatbox#chatbox#chatbox#chatbox:not(.mobile-chat-panel-open){width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;min-height:0!important;left:0!important;top:0!important}html #game-chat #chatbox:not(.mobile-chat-panel-open) .body{width:100%!important;height:100%!important}html #game-chat #chatbox:not(.mobile-chat-panel-open) .input{display:none!important}

#player-profile{visibility:hidden}

#skill-cycle{border:1px solid #ffffff99;border-radius:999px;background:#14222c8f;color:white;padding:0;pointer-events:auto}#skill-cycle[hidden]{display:none}
#hud-hotkeys .skill-slot[hidden]{display:none!important}

/* The source compact toolbar/composer are the only desktop chat chrome. */
html #game-chat #chatbox.desktopChatModern .input,
html #game-chat #chatbox.desktopChatModern .chat-minimize-toggle{display:none!important}
html #game-chat #chatbox.desktopChatModern .chat-compact-toolbar{display:flex!important}
html #game-chat #chatbox.desktopChatModern .chat-height-controls button{min-height:0;margin:0;padding:0;border:0;box-shadow:none}

html #game-chat #chatbox.desktopChatModern .header{display:none!important}
html #game-chat #chatbox#chatbox#chatbox#chatbox.desktopChatModern{position:relative!important;inset:0!important;transform:none!important}

#hud-menu-toggle{position:fixed;right:16px;top:16px;width:44px;height:44px;pointer-events:auto;display:block;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;touch-action:manipulation}
#hud-menu-toggle img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#hud-menu-toggle[aria-expanded="false"] img{transform:scaleX(-1)}
#hud-menu-toggle:focus-visible{outline:2px solid #91dfff;outline-offset:3px}

/* Closed mobile chat stays inside its HUD bounds, never over the viewport. */
html #game-chat #chatbox#chatbox#chatbox#chatbox.mobileChat:not(.mobile-chat-panel-open){position:relative!important;inset:0!important;transform:none!important}

/* Touch controls belong to the mobile HUD only. */
body[data-hud-layout="desktop"] :is(#attack-target,#move-stick){display:none!important}

/* Small, passive stats; no debug drawer or touch controls over desktop play. */
#metrics{position:fixed;left:50%;top:max(30px,env(safe-area-inset-top));bottom:auto;z-index:12;transform:translateX(-50%);margin:0;padding:3px 6px;width:max-content;max-width:calc(100vw - 12px);box-sizing:border-box;white-space:pre-line;border:0;border-radius:3px;background:rgba(8,16,22,.78);color:#f1f6fa;font:11px/1.35 system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:center;pointer-events:none;text-shadow:0 1px 1px #000;}
@media (hover:hover) and (pointer:fine){#attack-target,#move-stick{display:none!important}}

.skill-drag-ghost{position:fixed;width:38px;height:38px;transform:translate(-50%,-50%);pointer-events:none;z-index:15000;filter:drop-shadow(0 0 5px #83d8ff)}.skill-drop-hover{outline:2px solid #8ae1ff!important;box-shadow:0 0 12px #5dc7ff!important}

/* Skill allocation is a floating game window; it must not make the HUD inert. */
#skill-window{position:fixed!important;left:0;top:0;right:auto;bottom:auto;margin:0;z-index:40}

/* Current MobileUI desktop icon/label rules (art is 44px, independent of hit bounds). */
body[data-hud-layout="desktop"] #hud-menu button{display:block;padding:0;border:0;background:transparent;overflow:visible;transform:none}
body[data-hud-layout="desktop"] #hud-menu button img{position:absolute;inset:0;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.56));pointer-events:none}
body[data-hud-layout="desktop"] #hud-menu button span{position:absolute;left:50%;top:40px;display:block;width:max-content;max-width:62px;height:12px;margin:0;color:#fff;font-size:9px;font-weight:800;line-height:11px;letter-spacing:0;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.82);white-space:nowrap;overflow:hidden;transform:translateX(-50%);pointer-events:none}
body[data-hud-layout="desktop"] #hud-menu button[data-hud="Settings"] span{display:block}

/* The imported drawer owns typography; do not inherit world-HUD shadows. */
#game-chat #chatbox.mobile-chat-panel-open{text-shadow:none;color:#34434c}
body.mobile-chat-expanded #combat-controls,
body.mobile-chat-expanded #game-hud>:not(#game-chat){visibility:hidden!important;pointer-events:none!important}
body.mobile-chat-expanded #game-chat{z-index:100!important}
html #game-chat #chatbox.mobile-chat-panel-open .header input{pointer-events:none}

/* Latest MobileUI lightweight shortcut skin and stack geometry. */
body[data-hud-layout="desktop"] #hud-hotkeys{display:block;overflow:visible;pointer-events:none}
body[data-hud-layout="desktop"] #hud-hotkeys .skill-slot{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;margin:0;pointer-events:auto;background:rgba(9,17,20,.25);border:1px solid rgba(255,255,255,.28);border-radius:6px;box-shadow:none;backdrop-filter:none;animation:none;transition:background-color 120ms ease-out,border-color 120ms ease-out}
body[data-hud-layout="desktop"] #hud-hotkeys .skill-slot.filled{border-color:rgba(255,255,255,.55);background-color:rgba(255,255,255,.12)}
body[data-hud-layout="desktop"] #hud-hotkeys .skill-slot:hover{background-color:rgba(255,255,255,.22);border-color:rgba(255,255,255,.75)}
body[data-hud-layout="desktop"] #hud-hotkeys .skill-slot:focus-visible{outline:1px solid white;outline-offset:2px}
#hud-hotkeys .shortcut-key{display:none}
body[data-hud-layout="desktop"] #hud-hotkeys .shortcut-key{display:block;position:absolute;left:2px;top:1px;width:auto;height:auto;min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:white;font:700 9px/11px Arial,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.85);pointer-events:none}
#shortcut-expand{padding:0;border:0;background:transparent url('/ui/hud-shortcut-expand.png') center/contain no-repeat;box-shadow:none;pointer-events:auto}
#shortcut-expand[hidden],#hud-hotkeys .skill-slot[hidden]{display:none!important}

/* Keep the real shortcut targets above floating panels during assignment. */
body.skill-assigning #game-hud{z-index:auto}
body.skill-assigning #hud-hotkeys{z-index:14000}

/* Composited press feedback; static shadow avoids animated filter/blur passes. */
body.game-shell #attack-target{border-radius:50%;box-shadow:0 5px 10px #0006;transition:scale 90ms ease-out,translate 90ms ease-out;}
body.game-shell #attack-target:is(.pressed,:active){scale:.92;translate:0 2px;}
@media(prefers-reduced-motion:reduce){body.game-shell #attack-target{transition:none;}}

/* Held-skill cancel sits at the marked upper-right corner, clear of attack slots. */
#skill-cancel{top:max(8px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;font-size:27px;}

/* Game controls provide their own pressed feedback, not browser selection paint. */
body.game-shell :is(button,[role="button"],#move-stick,[data-hud]) {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body.game-shell :is(button,[role="button"],#move-stick,[data-hud]) img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
body.game-shell :is(button,[role="button"],[data-hud]):focus:not(:focus-visible) { outline: none; }

/* Message viewport fills resized desktop chat, independently of legacy pixel heights. */
html #game-chat #chatbox#chatbox#chatbox#chatbox.desktopChatModern .body{position:relative!important;padding:7px 10px 36px!important;box-sizing:border-box!important}
html #game-chat #chatbox#chatbox#chatbox#chatbox.desktopChatModern .contentwrapper{position:absolute!important;left:10px!important;right:10px!important;top:7px!important;bottom:36px!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
html #game-chat #chatbox#chatbox#chatbox#chatbox.desktopChatModern .content.active{height:100%!important;min-height:0!important;max-height:none!important;overflow-y:auto!important}
body.game-shell,body.game-shell *{user-select:none!important;-webkit-user-select:none!important;-webkit-tap-highlight-color:transparent}
body.game-shell input:not([readonly]),body.game-shell textarea:not([readonly]),body.game-shell [contenteditable=true]{user-select:text!important;-webkit-user-select:text!important}
html body.game-shell #game-chat #chatbox#chatbox#chatbox#chatbox,html body.game-shell #game-chat #chatbox#chatbox#chatbox#chatbox *{cursor:url('/ui/cursors/default.png') 0 0,auto!important}

/* Entry UI is shown before body.game-shell; retain the game pointer there too. */
html body #login-dialog,html body #login-dialog *,html body #login-entrance,html body #login-entrance *{cursor:url('/ui/cursors/default.png') 0 0,auto!important}
#login-dialog::backdrop,#login-entrance::backdrop{cursor:url('/ui/cursors/default.png') 0 0,auto}


#map-loading .load-tip{box-sizing:border-box;min-height:88px;padding:16px 7% 16px 29%;border:0;border-radius:0;background:url("/ui/loading/tip.webp") center/100% 100% no-repeat;font-size:12px;line-height:1.5}#map-loading .load-tip strong{display:none}@media(max-width:520px){#map-loading .load-tip{min-height:82px;padding:12px 7% 12px 29%;font-size:10px}}@media(max-height:500px){#map-loading .load-tip{min-height:66px;padding-top:10px;padding-bottom:10px;font-size:11px}}

/* Current MobileUI final slot overrides; no blur/filter or animated idle chrome. */
body[data-hud-layout="landscape"] #hud-hotkeys .skill-slot{border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.28);box-shadow:none;border-radius:999px}
body[data-hud-layout="landscape"] #hud-hotkeys .skill-slot:not(.filled){background:rgba(0,0,0,.18)}
.shortcut-clear-progress{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:220px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:6px;border:0;border-radius:0;background:transparent;color:#fff;text-shadow:0 1px 2px #000;text-align:center;pointer-events:none;z-index:80;contain:layout style paint;font:12px/1.4 Arial,sans-serif}
.shortcut-clear-progress strong{display:block;font-size:12px;font-weight:600}
.shortcut-clear-progress small{display:block;margin-top:3px;font-size:10px;color:#c6e1ec}
.shortcut-clear-track{height:4px;margin-top:8px;border-radius:3px;overflow:hidden;background:#ffffff26}
.shortcut-clear-track i{display:block;width:100%;height:100%;background:#a5f7ff;transform-origin:left center}

#skill-cycle{overflow:visible}#skill-cycle svg{width:65%;height:65%;vertical-align:middle}#skill-cycle span{position:absolute;right:0;top:100%;white-space:nowrap;font:10px/1.4 Arial,sans-serif;text-shadow:0 1px 2px #000;pointer-events:none}
body:not([data-hud-layout="desktop"]) #hud-hotkeys .item-quick-slot{border-radius:5px;background:#14222c99;box-shadow:none}

#hud-hotkeys .shortcut-value{width:auto;height:auto;min-width:0;min-height:0;border:0;position:absolute;bottom:2px;left:50%;transform:translateX(-50%);z-index:11;pointer-events:none;white-space:nowrap;font:bold 11px/1.2 Arial,sans-serif;color:#fff;text-shadow:0 1px 2px #000,1px 0 2px #000,-1px 0 2px #000;background:#07131b99;border-radius:3px;padding:0 2px}

/* Both HUD roots stay out of layout/paint until exported positions are ready.
   Combat controls are siblings of game-hud, not its descendants. */
body:not([data-hud-ready="true"]) #combat-controls,
body:not([data-hud-ready="true"]) #game-hud{visibility:hidden!important;pointer-events:none!important}
/* Safe intrinsic size, including a failed layout request. */
#auto-hunt-button{width:40px;height:40px;right:180px;bottom:80px}

/* Keyboard may resize visual controls, but must not resize/reallocate the world. */
#world{height:var(--game-viewport-height,100dvh)}
#npc-storage-window,#cart-window,#player-trade{max-height:calc(var(--game-viewport-height,100dvh) - 16px)!important}
#metrics{pointer-events:auto;cursor:text;user-select:text}#metrics[hidden]{display:none!important}
#metrics:focus-visible{outline:none;background:#173347}
@media(pointer:coarse){input[type=text],input:not([type]),input[type=number],textarea,[contenteditable=true]{font-size:16px!important}}
html[data-input-layout=touch] :is(input[type=text],input:not([type]),input[type=number],textarea,[contenteditable=true]){font-size:16px!important}

#export-client-error{position:fixed;right:8px;bottom:8px;z-index:31;padding:5px 8px;border:1px solid #7693a5;border-radius:4px;background:#10202de8;color:#eef7ff;font:11px system-ui;cursor:pointer}#export-client-error[hidden]{display:none}
/* Current minimap: round wing controls and pale blue expanded map frame. */
#minimap-wings{position:fixed;display:grid;gap:6px;pointer-events:auto}
#minimap-wings .minimap-wing{position:relative;width:40px;height:40px;padding:2px;border:1px solid #ebf9f3a6;border-radius:50%;background:#8ac7d061;cursor:pointer;color:white}
#minimap-wings img{width:32px;height:32px;object-fit:contain}#minimap-wings span{position:absolute;right:1px;bottom:0;font:700 10px Arial;text-shadow:0 1px 2px black}#minimap-wings button:disabled{opacity:.45;cursor:default}
#hud-map{font:800 13px/18px 'Trebuchet MS',Arial,sans-serif;text-shadow:0 1px 2px #263126;display:block;overflow-wrap:anywhere;cursor:pointer}#hud-coordinates{font:700 12px/18px Arial;white-space:nowrap;text-shadow:0 1px 2px black}
#expanded-minimap{box-sizing:border-box;width:min(410px,94vw,calc(100dvh - 24px));padding:8px;border:1px solid #9cc0da;border-radius:3px;background:linear-gradient(135deg,#f3fcfff5,#cfe8f7f5);color:#5889c9;box-shadow:0 3px 16px #1738553d,inset 0 0 0 2px #fff9;overflow:hidden;font:14px Arial}
#expanded-minimap::backdrop{background:#10203044}#expanded-minimap header{display:flex;align-items:center;justify-content:space-between;height:28px;gap:8px}#expanded-minimap strong{flex:1;text-align:center;font-size:15px}#expanded-minimap header button{border:0;background:none;color:#5889ec;font-size:26px;line-height:24px;padding:0 4px;cursor:pointer}#expanded-minimap canvas{display:block;width:100%;height:auto;aspect-ratio:1;border:2px solid #ffffffe6;box-sizing:border-box;touch-action:none;cursor:crosshair}#expanded-minimap .map-zoom{display:flex;gap:8px;margin-top:6px;height:26px;align-items:center}#expanded-minimap .map-zoom input{flex:1;min-width:0;accent-color:#6798d8}#expanded-minimap .map-zoom button{width:26px;border:1px solid #d2e9fa;background:#f0faff;color:#6798d8;cursor:pointer}#expanded-minimap p{font-size:11px;margin:5px 0 0;text-align:center;min-height:13px}
#expanded-minimap{width:min(410px,94vw,calc(100dvh - 112px))}
#hud-map{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Keep map pixels square; controls use their own column on every landscape size. */
#expanded-minimap{width:min(540px,94vw,calc(100dvh + 54px));padding:12px;border:1px solid #adc5d9;border-radius:12px;background:#edf5fa;box-shadow:0 8px 28px #102c4e45;color:#466680}
#expanded-minimap header{height:30px;margin-bottom:8px}#expanded-minimap header strong{text-align:left;font:700 16px 'Trebuchet MS',Arial}
#expanded-minimap .map-body{display:grid;grid-template-columns:minmax(0,1fr) 126px;gap:12px;align-items:start}#expanded-minimap .map-stage{min-width:0}#expanded-minimap canvas{aspect-ratio:1;width:100%;height:auto;border:1px solid #b3c9d5;border-radius:7px;background:#243b33}
#expanded-minimap aside{display:grid;gap:12px;padding-top:6px}#expanded-minimap aside small{font:700 9px Arial;letter-spacing:1.2px;color:#6c859b}#expanded-minimap p{margin:0;min-height:46px;text-align:left;font:600 12px/1.5 Arial;color:#385774;overflow-wrap:anywhere}
#expanded-minimap .map-zoom{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;gap:3px;margin:4px 0;height:30px}#expanded-minimap .map-zoom input{width:100%;margin:0}#expanded-minimap .map-zoom button{width:24px;height:26px;border-radius:5px}
#expanded-minimap .map-recenter,#expanded-minimap .map-stop{border:1px solid #b5cbdc;border-radius:6px;background:#ffffffb0;color:#436c92;padding:8px 5px;font:600 11px Arial;cursor:pointer}#expanded-minimap .map-help{display:block;font:10px/16px Arial;color:#657e91;text-align:center;margin-top:5px}
@media(max-height:400px){#expanded-minimap{padding:9px}#expanded-minimap .map-body{grid-template-columns:minmax(0,1fr) 116px;gap:9px}#expanded-minimap aside{gap:9px}}
#expanded-minimap{background:#edf5fa url("/ui/minimap/panel-surface.webp") center/cover no-repeat}
#expanded-minimap header,#expanded-minimap aside{position:static;inset:auto;background:none;border:0;border-radius:0;padding:0;max-width:none}#expanded-minimap header{padding:0 2px}#expanded-minimap aside{padding-top:6px}
#expanded-minimap aside,#expanded-minimap aside *{pointer-events:auto!important}
#map-arrival{position:fixed;left:50%;top:19%;transform:translateX(-50%);z-index:10000;display:flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid #aacadd;border-radius:12px;background:#edf7fcf5;color:#355971;font:600 14px Arial;box-shadow:0 4px 16px #14324c33;pointer-events:none}#map-arrival[hidden]{display:none}#map-arrival svg{width:30px;height:30px;animation:arrival-pin 600ms ease-out 1}@keyframes arrival-pin{0%{transform:translateY(-8px) scale(.8)}65%{transform:translateY(2px) scale(1.08)}100%{transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){#map-arrival svg{animation:none}}
#map-arrival{margin:0;right:auto;bottom:auto}
#expanded-minimap .map-viewport{position:relative;overflow:hidden;border-radius:7px}
#expanded-minimap .destination-pulse{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #ffe6a0;border-radius:50%;pointer-events:none;box-sizing:border-box}
#expanded-minimap .destination-pulse[hidden]{display:none}
#expanded-minimap[open] .destination-pulse:not([hidden]){animation:destination-pulse 1.4s ease-out infinite}
@keyframes destination-pulse{0%{transform:scale(.75);opacity:.95}85%,100%{transform:scale(2);opacity:0}}
@media(prefers-reduced-motion:reduce){#expanded-minimap[open] .destination-pulse{animation:none;opacity:.6}}
/* Expanded controls: compact static chrome; shared inventory actions, no idle animation. */
#expanded-minimap aside{align-self:stretch;display:flex;flex-direction:column;gap:10px;min-width:0}
#expanded-minimap p[hidden]{display:none}
#expanded-minimap p{min-height:0}
#expanded-minimap .map-zoom{display:flex;gap:6px;height:32px;margin:0}
#expanded-minimap .map-zoom button{flex:0 0 28px;width:28px;height:30px;border:1px solid #c3d4e0;background:#f9fcff;border-radius:8px;font:20px/1 Arial;color:#385f80}
#expanded-minimap .map-zoom input{appearance:none;-webkit-appearance:none;height:4px;border:0;border-radius:3px;background:#bccfdd;min-width:0;flex:1;cursor:pointer;padding:0}
#expanded-minimap .map-zoom input::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:#528bb1;box-shadow:0 0 0 1px #719cb8}
#expanded-minimap .map-zoom input::-moz-range-thumb{width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#528bb1}
#expanded-minimap .map-recenter,#expanded-minimap .map-stop{min-height:32px;padding:7px 8px;border-radius:8px;background:#f9fcff;border-color:#c3d4e0;color:#385f80}
#expanded-minimap button:hover:not(:disabled){background:#dcebf5}
#expanded-minimap button:focus-visible,#expanded-minimap input:focus-visible{outline:2px solid #568eaf;outline-offset:2px}
#expanded-minimap .expanded-wings{display:flex;justify-content:center;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid #cbdce7}
#expanded-minimap .minimap-wing{position:relative;width:44px;height:44px;padding:4px;border:1px solid #bccfdd;border-radius:10px;background:#f7fbfd;cursor:pointer}
#expanded-minimap .minimap-wing img{display:block;width:32px;height:32px;object-fit:contain}
#expanded-minimap .minimap-wing span{position:absolute;right:3px;bottom:2px;padding:0 2px;color:#35566f;background:#f7fbfddd;border-radius:3px;font:700 10px Arial}
#expanded-minimap .minimap-wing:disabled{opacity:.45;cursor:default}
#expanded-minimap{width:min(540px,94vw,calc(100dvh + 20px));max-height:calc(100dvh - 16px)}
#expanded-minimap .expanded-wings button{flex:0 0 44px;min-height:44px;max-height:44px;box-sizing:border-box}
/* Explicit margins prevent global button defaults from widening action spacing. */
#expanded-minimap .map-recenter,#expanded-minimap .map-stop{margin:0;min-height:30px;height:30px;padding:0 10px;line-height:28px;flex:0 0 30px;box-sizing:border-box}
#expanded-minimap aside{gap:8px}
#expanded-minimap .map-brand{display:flex;flex:1;min-height:32px;align-items:center;justify-content:center;overflow:hidden}
#expanded-minimap .map-brand img{display:block;width:100%;max-width:110px;height:100%;max-height:70px;object-fit:contain;opacity:.88}
#expanded-minimap .expanded-wings{margin:0;flex-shrink:0}
#expanded-minimap{touch-action:none;user-select:none}
#expanded-minimap .map-brand img{pointer-events:none;-webkit-user-drag:none}
/* Mobile travel items: thumb reach above combat, with distinct 44px targets. */
body[data-hud-layout="landscape"] #minimap-wings,body[data-hud-layout="portrait"] #minimap-wings{grid-template-columns:repeat(2,44px);gap:16px}
body[data-hud-layout="landscape"] #minimap-wings .minimap-wing,body[data-hud-layout="portrait"] #minimap-wings .minimap-wing{width:44px;height:44px;touch-action:manipulation}
/* Map labels share the circle center and sit above its edge. */
#world-location #hud-map,#hud-coordinates{background:#10202d38;border-radius:4px;color:#fff;text-shadow:-1px 0 #07131bbb,1px 0 #07131bbb,0 -1px #07131bbb,0 1px #07131bbb;line-height:16px}
#world-location #hud-map{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
#hud-coordinates{font-size:10px;text-align:center;z-index:3}
body:not([data-hud-layout="desktop"]) #hud-menu-toggle{z-index:4;touch-action:none;border-radius:0;background:transparent}
body:not([data-hud-layout="desktop"]) #hud-menu-toggle img{width:26px;height:26px;margin:auto}
body.game-shell #hud-menu button,body.game-shell #skill-cycle,body.game-shell #auto-hunt-button,body.game-shell #minimap-wings button{touch-action:none}

body[data-hud-layout="desktop"] #hud-hotkeys{display:block}
body #hud-menu-toggle .menu-tiles{position:absolute;left:20%;top:5%;width:60%;height:60%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;pointer-events:none;filter:drop-shadow(0 1px 1px #0007)}
body #hud-menu-toggle .menu-tiles i{display:block;background:url('/ui/menu-tile.webp') center/contain no-repeat}
body #hud-menu-toggle .menu-caption{position:absolute;top:70%;left:0;width:100%;color:white;font:10px/1.1 Arial;text-shadow:0 1px 2px #000;pointer-events:none}
/* Center artwork and captions on the same button axis, including wider hit areas. */
body[data-hud-layout="desktop"] #hud-menu button img{inset:auto;left:50%;top:0;transform:translateX(-50%)}
body #hud-menu-toggle .menu-caption{text-align:center}
body[data-hud-layout="desktop"] #hud-menu-toggle .menu-tiles{left:50%;top:2px;width:38px;height:38px;transform:translateX(-50%);gap:3px}
body[data-hud-layout="desktop"] #hud-menu-toggle .menu-caption{top:40px;height:12px;font-size:9px;font-weight:800;line-height:11px}
.next-class-presets{position:absolute;right:4%;top:18%;width:25%;padding:18px;background:#ffffffde;border-radius:8px;color:#23445d}.next-class-presets h3{margin:0 0 8px}.next-class-presets p{font-size:12px}.preset-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preset-options button{padding:9px 5px;background:#eaf4fc;border:1px solid #9db5c9;border-radius:4px;color:#23445d}.preset-options button.selected{background:#315f86;color:white}.next-class-presets output{display:block;margin-top:12px;font-size:11px}.creation-message{color:#a32323}@media(max-height:500px){.next-class-presets{padding:9px;top:16%;right:3%;width:25%}.preset-options button{padding:6px 3px;font-size:11px}.next-class-presets h3{font-size:14px}.next-class-presets p{font-size:10px}}
html body #charcreate_v4#charcreate_v4#charcreate_v4 .modern-creator-layout{left:3vw!important;top:16vh!important;width:30vw!important;transform:none!important;max-height:73vh!important;overflow-y:auto;scrollbar-width:none}html body #charcreate_v4#charcreate_v4#charcreate_v4 #style{left:35vw!important;top:16vh!important;width:30vw!important;height:64vh!important;right:auto!important}#charcreate_v4 .next-class-presets{right:3vw;top:20vh;width:28vw;text-shadow:none}#charcreate_v4 .next-class-presets *{text-shadow:none}#charcreate_v4 .next-class-presets button{position:static;width:auto;height:auto;min-width:0}#charcreate_v4 .next-class-presets p{color:#23445d}@media(max-height:500px){html body #charcreate_v4#charcreate_v4#charcreate_v4 .modern-identity{padding:12px!important}#charcreate_v4 .next-class-presets{top:12vh}html body #charcreate_v4#charcreate_v4#charcreate_v4 #style{top:8vh!important;height:62vh!important}}

body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body input:not([readonly]),body textarea:not([readonly]),body [contenteditable=true]{-webkit-user-select:text;user-select:text}

.mobile-combat-extra{position:fixed;pointer-events:auto;touch-action:none;width:44px;height:44px;padding:3px;border:1px solid #c5edffb0;border-radius:50%;background:#173c59d9;color:#fff;display:none;place-items:center;gap:0;box-shadow:0 2px 5px #0005;z-index:9}.mobile-combat-extra svg{width:24px;height:24px}.mobile-combat-extra span{font:9px/10px sans-serif}.mobile-combat-extra.selected{border-color:#ffde69;background:#735c23e8}.mobile-combat-extra:active{scale:.95}body[data-hud-layout="desktop"] .mobile-combat-extra{display:none!important}
#mobile-target-picker{position:fixed!important;inset:max(48px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) auto auto!important;margin:0!important;width:min(300px,calc(100vw - 24px));max-height:min(calc(100dvh - 60px),400px);padding:8px;border:1px solid #ffffff1f;border-radius:16px;background:#0f141bd9;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 12px 32px #0009,inset 0 1px 0 #ffffff14;color:#eef3f8;z-index:160;pointer-events:auto;font:500 13px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;flex-direction:column;gap:6px;animation:picker-in .16s ease-out}
#mobile-target-picker[open]{display:flex}
@keyframes picker-in{from{opacity:0;translate:0 8px}}
#mobile-target-picker .picker-head{display:flex;align-items:center;gap:8px;padding:0 2px 0 6px}
#mobile-target-picker .picker-title{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#cfd8e3}
#mobile-target-picker .picker-count{min-width:20px;padding:1px 7px;border-radius:999px;background:#ffffff14;color:#aab6c3;font-size:11px;font-weight:700;text-align:center}
#mobile-target-picker .picker-close{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:#ffffff0f;color:#cfd8e3;padding:0}
#mobile-target-picker .picker-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
#mobile-target-picker .picker-close:active{background:#ffffff24}
#mobile-target-picker .picker-filters{display:flex;gap:6px}
#mobile-target-picker .picker-filters[hidden]{display:none}
#mobile-target-picker .picker-filters button{flex:1;min-height:30px;border:1px solid #ffffff1a;border-radius:999px;background:transparent;color:#aab6c3;font:600 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;padding:0 8px}
#mobile-target-picker .picker-filters button.active{background:#f5c96a;border-color:#f5c96a;color:#1b1406}
#mobile-target-picker .target-choices{display:flex;flex-direction:column;gap:4px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 14px),transparent);mask-image:linear-gradient(#000 calc(100% - 14px),transparent);padding-bottom:6px}
#mobile-target-picker .target-choices::-webkit-scrollbar{display:none}
#mobile-target-picker .target-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;min-height:46px;width:100%;padding:5px 10px 5px 6px;border:1px solid transparent;border-radius:12px;background:#ffffff0a;color:inherit;text-align:left;font:inherit;touch-action:manipulation}
#mobile-target-picker .target-row:active{background:#ffffff1f;scale:.985}
#mobile-target-picker .target-row.selected{border-color:#f5c96acc;background:#f5c96a1f}
#mobile-target-picker .target-face{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 35%,#2b3542,#151b23);box-shadow:inset 0 0 0 1px #ffffff1f}
#mobile-target-picker .target-face img{width:100%;height:100%;object-fit:contain}
#mobile-target-picker .target-face svg{width:22px;height:22px;fill:#9fb0c2}
#mobile-target-picker .target-row.is-player .target-face{background:radial-gradient(circle at 50% 35%,#4a2329,#1e1114);box-shadow:inset 0 0 0 1px #ff7d8a55}
#mobile-target-picker .target-row.is-player .target-face svg{fill:#ff9aa5}
#mobile-target-picker .target-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
#mobile-target-picker .target-copy strong{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mobile-target-picker .target-copy small{font-size:11px;color:#93a1b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mobile-target-picker .target-hp{display:block;height:3px;border-radius:2px;background:linear-gradient(90deg,#5fd37a calc(var(--hp)*100%),#ffffff1a 0)}
#mobile-target-picker .target-distance{font-size:12px;font-weight:700;color:#cfd8e3;font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:999px;background:#ffffff0f}
#mobile-target-picker .picker-hint{font-size:11px;color:#7f8c99;text-align:center}
@media(max-height:480px){#mobile-target-picker .picker-hint{display:none}}
@media(prefers-reduced-motion:reduce){#mobile-target-picker{animation:none}}

body[data-hud-layout="landscape"] .mobile-combat-extra{display:grid}

/* Text-only aiming label; no panel, icon or animated decoration. */
#skill-aim-hint{display:block;max-width:calc(100vw - 32px);padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#fff;font:600 13px Arial;text-align:center;text-shadow:-1px -1px 1px #000,1px -1px 1px #000,-1px 1px 1px #000,1px 1px 1px #000,0 0 4px #000;white-space:nowrap}
#skill-aim-hint[hidden]{display:none}

#hud-menu button .store-expiry{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap;color:#fff;background:rgba(15,24,29,.28);border-radius:3px;padding:1px 3px;font:9px Arial;pointer-events:none;text-shadow:0 1px 2px #000}
/* Bag button: dot while unseen new items exist. */
#open-inventory{position:relative}
#open-inventory.has-new-items::after{content:"";position:absolute;top:3px;right:3px;width:10px;height:10px;border-radius:50%;background:#e8572a;box-shadow:0 0 0 2px #fff;pointer-events:none}
/* WoE objective shortcut: Emperium lock (mobile layouts only). */
#emperium-target{position:fixed;pointer-events:auto;touch-action:none;padding:0;border:0;border-radius:50%;background:url('/ui/soft-crest-skill-slot.svg') center/100% 100% no-repeat;box-shadow:none;display:grid;place-items:center;overflow:visible;color:#fff;z-index:2}
#emperium-target[hidden]{display:none!important}
#emperium-target img{width:64%;height:64%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 1px 1px #000a)}
#emperium-target span{position:absolute;bottom:-14px;left:50%;translate:-50% 0;font:700 10px/1 system-ui,sans-serif;white-space:nowrap;text-shadow:0 1px 2px #000,0 0 2px #000;pointer-events:none}
#emperium-target.locked{box-shadow:0 0 0 2px #ffd25acc,0 0 14px 4px #ffc84199;animation:emperium-lock 1.4s ease-in-out infinite}
#emperium-target:active{scale:.92}
@keyframes emperium-lock{50%{box-shadow:0 0 0 5px #ffb20044,0 0 20px 7px #ffc841bb,0 4px 10px #0007}}
@media(prefers-reduced-motion:reduce){#emperium-target.locked{animation:none}}
body[data-hud-layout="desktop"] #emperium-target{display:none!important}

/* GM @debug panel: sectioned key/value grid, colour = likely FPS cause (green ok, yellow watch, red cause). */
#metrics:not([hidden]){left:8px;right:auto;top:max(56px,env(safe-area-inset-top));transform:none;white-space:normal;display:grid!important;grid-template-columns:repeat(3,minmax(0,150px));gap:6px;padding:8px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 120px);overflow:auto;font:11px/1.35 "Segoe UI",system-ui,sans-serif;color:#e8eef5;background:rgba(10,18,28,.86);border:1px solid rgba(255,255,255,.12);border-radius:8px;text-align:left}
#metrics section{background:rgba(255,255,255,.05);border-radius:6px;padding:4px 6px}
#metrics h4{margin:0 0 2px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8fb4d8}
#metrics section div{display:flex;justify-content:space-between;gap:8px}
#metrics section span{color:#a9b6c4}
#metrics b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
#metrics .dbg-l0 b{color:#7ee08a}#metrics .dbg-l1 b{color:#ffd166}#metrics .dbg-l2 b{color:#ff6b6b}
#metrics .dbg-l2{background:rgba(255,80,80,.12);border-radius:3px}
@media (max-width:700px),(pointer:coarse){#metrics:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr));font-size:12px;width:min(340px,calc(100vw - 16px))}#metrics h4{font-size:11px}}
#metrics .info .dbg-l0 b{color:#e8eef5}
@media (max-height:500px){#metrics:not([hidden]){grid-template-columns:repeat(5,minmax(0,1fr));width:min(760px,calc(100vw - 16px));top:max(40px,env(safe-area-inset-top));max-height:calc(100dvh - 50px);font-size:10.5px;gap:4px;padding:5px}#metrics h4{font-size:9.5px}}
#metrics:not([hidden]){z-index:13000;cursor:move;user-select:none;touch-action:none}#metrics.dragging{opacity:.75;outline:1px solid #8fb4d8}
/* Desktop WASD walk pad (Settings > Gameplay > WASD walk): passive key hint centred between the chat window and the shortcut bar, same translucent
   language as the desktop slots; held keys light up. Hidden on touch layouts and when the setting is off. */
#wasd-pad{display:none;position:fixed;left:240px;bottom:240px;z-index:13;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px);gap:5px;pointer-events:none;opacity:.55;transition:opacity .2s}
body.game-shell.wasd-walk[data-hud-layout="desktop"] #wasd-pad{display:grid}
#wasd-pad span{display:grid;place-items:center;box-sizing:border-box;border-radius:9px;background:rgba(9,17,20,.32);border:1px solid rgba(255,255,255,.26);color:rgba(255,255,255,.82);font:600 15px/1 system-ui,sans-serif;letter-spacing:.02em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);transition:background .08s,border-color .08s,box-shadow .08s,transform .08s}
#wasd-pad span[data-key="KeyW"]{grid-column:2;grid-row:1}#wasd-pad span[data-key="KeyA"]{grid-column:1;grid-row:2}#wasd-pad span[data-key="KeyS"]{grid-column:2;grid-row:2}#wasd-pad span[data-key="KeyD"]{grid-column:3;grid-row:2}
#wasd-pad span.held{background:rgba(64,214,170,.28);border-color:rgba(130,255,214,.75);color:#fff;box-shadow:0 0 8px rgba(80,255,200,.35);transform:translateY(1px)}
body.game-shell.wasd-walk #wasd-pad:has(span.held){opacity:.9}
body:has(#respawn:not([hidden])) #wasd-pad{visibility:hidden}