/* One compact HUD layout; measured anchors keep panels clear of the world. */
:root{--ui-edge:6px;--ui-top:env(safe-area-inset-top,0px);--ui-hud-width:258px;--ui-map-width:112px;--ui-nav-size:44px;--ui-skill-size:38px;--ui-quest-top:105px;--ui-chat-width:240px}
#topActions{top:var(--ui-top);left:calc(var(--ui-hud-width) + 12px + env(safe-area-inset-left));right:auto;transform:none;width:max-content;max-width:calc(100vw - var(--ui-hud-width) - var(--ui-map-width) - 30px - env(safe-area-inset-left) - env(safe-area-inset-right));justify-content:flex-start;gap:2px;padding:3px;border-radius:0 0 12px 12px;overflow-x:auto;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
#topActions button{position:relative;box-sizing:border-box;flex:0 0 var(--ui-nav-size);width:var(--ui-nav-size);min-width:0;height:51px;padding:1px;gap:2px;border:1px solid #dbba73;border-radius:9px 3px 9px 3px;background:linear-gradient(145deg,#316d69ed,#142a39ed 58%,#091925ed);box-shadow:inset 0 0 0 1px #09232e,inset 0 1px #fff3be99,inset 0 -2px #0b1428,0 2px 4px #0005;color:#ffedbe}
#topActions button:hover,#topActions button:focus-visible{border-color:#fff0ac;background:linear-gradient(145deg,#458f85,#193e50 58%,#112337);outline:1px solid #63eedbaa;outline-offset:-3px}
#topActions span:not(.menu-icon){font-size:9px;line-height:12px}
#topActions .menu-icon{width:32px;height:32px;border:1px solid #e5c57c;border-radius:7px;background:radial-gradient(at 35% 20%,#617582,#102432 75%);box-shadow:inset 0 0 0 1px #17232d,inset 0 1px #fff8,0 2px 4px #0006;overflow:hidden}
#topActions .menu-icon svg{width:100%;height:100%;visibility:visible;filter:none}
#topActions #heroButton .menu-icon{background-position:center 18%;background-size:cover}
#topActions #heroButton .menu-icon img{width:100%;height:100%;object-fit:cover}
#hud{top:var(--ui-top);left:calc(var(--ui-edge) + env(safe-area-inset-left));width:var(--ui-hud-width);padding:6px;gap:7px;border-radius:0 0 12px 12px}
#portrait{width:44px;height:56px;flex:none}.vitals{width:calc(100% - 51px);padding:0;min-width:0}
/* Dawn's cut-gold frame and luminous crystal gauges are static paint. */
#hud{isolation:isolate;background:linear-gradient(135deg,#214e4ff2,#101f35f5 55%,#112f38f2);border:1px solid #e3bd71;border-top:0;border-radius:0 0 18px 5px;box-shadow:inset 0 0 0 2px #081727,inset 0 -3px 0 #d9ad4d55,0 4px 12px #02091370;filter:none}
#hud:before{content:"";position:absolute;inset:3px;z-index:-1;pointer-events:none;border-bottom:1px solid #f6dc9d66;border-left:1px solid #71e9e55c;border-radius:0 0 14px 3px;background:linear-gradient(120deg,#ffffff0a,transparent 40%)}
#portrait{--ui-portrait-diameter:44px;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:0;border:0;border-radius:50%;overflow:visible;box-shadow:none;background:transparent}#portrait img{box-sizing:border-box;flex:none;width:var(--ui-portrait-diameter);height:var(--ui-portrait-diameter);border:2px solid #ffe4a0;border-radius:50%;object-fit:cover;object-position:center 15%;background:#173644;box-shadow:0 0 0 1px #704821,0 0 0 3px #efbb6044,inset 0 0 6px #e7e8b5}#badge{position:absolute;left:-3px;right:auto;top:auto;bottom:3px;transform:none;min-width:23px;height:17px;padding:0 3px;line-height:15px;font-size:10px;border:1px solid #ffe6a0;border-radius:5px 1px 5px 1px;background:linear-gradient(135deg,#9a6633,#213854 65%,#122238);box-shadow:0 1px 4px #0008,inset 0 1px #fff6b988;color:#fff3c6}
#hud .bar{border:1px solid #ffb768;border-radius:4px 0 4px 0;background:#170e23;box-shadow:inset 0 1px 3px #000b,0 0 3px #ff833e44}#hud .bar i{background:linear-gradient(180deg,#ffe9a7 0%,#ff735e 24%,#ef244c 57%,#b51146 85%,#ff5c55 100%);box-shadow:inset 0 1px #fff8,inset 0 -1px #ffb052}
#hud .bar.mp{border-color:#76f9f2;background:#051b34;box-shadow:inset 0 1px 3px #000b,0 0 3px #22e3fb44}#hud .mp i{background:linear-gradient(180deg,#e9ffff 0%,#46f4ff 25%,#0dbced 58%,#187be7 85%,#53ddff 100%);box-shadow:inset 0 1px #fff9,inset 0 -1px #45fcff}
#hud .bar:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#1022374d calc(25% - 1px),#1022374d 25%)}#hud .bar span{z-index:1;color:#fff;font-weight:700;text-shadow:0 1px 2px #081220,0 0 2px #081220}#heroName{color:#fff0bd;text-shadow:0 1px 3px #030b17}
.hero-name{font-size:11px;margin-bottom:3px;gap:4px}.hero-name b{max-width:70%;overflow:hidden;text-overflow:ellipsis}.hero-name small{font-size:9px}
.bar{height:14px;margin:3px 0}.mp{height:12px}.bar span,.mp span{font-size:9px}
.hud-meta{gap:7px;font-size:9px;flex-wrap:wrap;margin-top:2px}#cloudStatus{font-size:8px}#onlineStatus{font-size:9px;display:block;line-height:13px}#buffs{font-size:9px;line-height:12px}
#minimapWrap{top:var(--ui-top);right:calc(var(--ui-edge) + env(safe-area-inset-right));width:var(--ui-map-width);height:78px;border-radius:0 0 10px 10px}
#quest{top:var(--ui-quest-top);left:calc(var(--ui-edge) + env(safe-area-inset-left));right:auto;width:var(--ui-hud-width);padding:5px 7px;border-radius:8px;font-size:10px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .35s,transform .35s,visibility .35s;pointer-events:none}
#quest.ui-quest-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.quest-heading{font-size:10px;gap:5px}.quest-heading span{font-size:12px}.quest-heading button{font-size:15px;height:20px;padding:0 3px}
#questLines{display:block;max-height:38px;overflow:hidden}#quest p{font-size:10px;line-height:15px;margin:3px 0;display:none}#quest p[data-ui-active]{display:block}#quest.ui-quest-pinned #questLines{max-height:100px;overflow:auto;display:block}#quest.ui-quest-pinned p:not(.done){display:block}#questLines[hidden]{display:none}
#activityFeed{position:fixed;z-index:7;top:var(--ui-feed-top,140px);left:calc(var(--ui-edge) + env(safe-area-inset-left));width:var(--ui-hud-width);max-height:var(--ui-feed-max-height,100px);overflow:hidden;pointer-events:none;display:grid;gap:3px}
.activity-note{padding:4px 7px;border-radius:6px;border-left:2px solid #e8cc85;background:#0b2826de;box-shadow:0 2px 5px #0003;color:#f5e6bb;font:10px/1.5 Tahoma,sans-serif;overflow-wrap:anywhere;animation:ui-note-in .2s ease-out}.activity-note.leaving{opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s}
.activity-note.activity-reward{display:flex;align-items:center;gap:5px;padding:3px 7px}.activity-monster{flex:none;width:22px;height:24px;border:1px solid #bbce8866;border-radius:5px;background-repeat:no-repeat;background-color:#163335}.activity-reward-copy{min-width:0;display:grid;gap:1px;line-height:1.2}.activity-monster-name{color:#c6ffe4;font-weight:600;font-size:10px}.activity-reward-values{font-size:9px;color:#fff0be}
#topActions .menu-badge{display:block;position:absolute;z-index:2;right:0;top:0;box-sizing:border-box;min-width:14px;height:14px;padding:0 3px;border:1px solid #ffd2b0;border-radius:9px;background:linear-gradient(#ff6053,#d52044 60%,#a90936);box-shadow:0 1px 3px #080a19,inset 0 1px #fff9;color:#fff;font:700 8px/12px Tahoma,sans-serif;pointer-events:none}#topActions .menu-badge[hidden]{display:none}
@keyframes ui-note-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
#toast{display:none}#target{top:var(--ui-target-top,67px);font-size:10px;width:170px}
#bottom{left:50%;right:auto;transform:translateX(-50%);bottom:calc(6px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);width:max-content}
.skill-row{grid-template-columns:repeat(16,var(--ui-skill-size));gap:3px}.skill,.utility-row .skill,.auto{width:var(--ui-skill-size);height:var(--ui-skill-size)}
.combat-dock{padding:4px;gap:5px;border-radius:10px;flex-direction:row;align-items:flex-end}.utility-row{position:static;flex-direction:row;gap:3px}.skill>.ability-art,.utility-row .skill>.ability-art{width:100%;height:100%;margin:0}.skill small,.utility-row .skill small{display:none}#experience{font-size:9px;min-height:11px;margin:0 4px 3px}#xpLabel{display:inline}.timer{font-size:14px;top:7px}
.game-chat,.game-chat.chat-open{left:calc(var(--ui-edge) + env(safe-area-inset-left));bottom:calc(6px + env(safe-area-inset-bottom));top:auto;max-width:var(--ui-chat-width);z-index:22;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:4px}
.game-chat .chat-toggle,.game-chat.chat-open .chat-toggle{display:block;padding:5px 10px;font-size:10px;line-height:16px;border-radius:9px}.chat-panel{margin:0;width:var(--ui-chat-width);max-width:var(--ui-chat-width);border-radius:10px;backdrop-filter:none}.chat-messages{height:76px;font-size:10px}.chat-head{padding:5px 7px}.chat-head b{font-size:10px}.chat-controls{padding:4px 7px;gap:3px}.chat-controls select{font-size:10px;padding:3px}.chat-form{padding:5px}.chat-form input{padding:5px;font-size:11px}.chat-form button{width:27px}
#joystick{bottom:var(--ui-joystick-bottom,50px);left:calc(9px + env(safe-area-inset-left));width:70px;height:70px}#joystick i{width:30px;height:30px;left:calc(50% - 15px);top:calc(50% - 15px)}#joystick span{display:none}
#interact{bottom:var(--ui-interact-bottom,75px);padding:6px 12px;font-size:11px}#fullscreen{left:auto;top:auto;bottom:var(--ui-interact-bottom,75px);right:calc(6px + env(safe-area-inset-right));width:27px;height:27px}
@media(orientation:landscape) and (max-width:1100px){:root{--ui-hud-width:180px;--ui-map-width:82px;--ui-nav-size:29px;--ui-skill-size:32px}#hud{padding:4px;gap:5px}#portrait{width:33px;height:44px}.vitals{width:calc(100% - 38px)}.hero-name small,#cloudStatus{display:none}.hero-name b{max-width:100%}.hud-meta{gap:5px;font-size:8px}#onlineStatus{font-size:8px;line-height:11px}#topActions button{height:44px}#topActions .menu-icon{width:25px;height:25px}#topActions span:not(.menu-icon){font-size:8px;line-height:11px}#minimapWrap{height:62px}.skill-row{grid-template-columns:repeat(16,var(--ui-skill-size))}#bottom{left:auto;right:calc(36px + env(safe-area-inset-right));transform:none;max-width:calc(100vw - 100px)}.chat-messages{height:50px}}
@media(orientation:landscape) and (max-width:760px){:root{--ui-skill-size:29px}.skill-row{grid-template-columns:repeat(8,var(--ui-skill-size))}.utility-row{flex-direction:column}.chat-messages{height:48px}}
/* Keep the three touch controls beside one another on short, wide screens. */
@media(orientation:landscape) and (max-width:1100px) and (max-height:540px){.skill-row{grid-template-columns:repeat(8,var(--ui-skill-size))}.utility-row{flex-direction:column}#joystick{left:calc(9px + env(safe-area-inset-left));bottom:calc(6px + env(safe-area-inset-bottom))}.game-chat,.game-chat.chat-open{left:calc(91px + env(safe-area-inset-left));bottom:calc(26px + env(safe-area-inset-bottom))}}
.profession-detail .profession-portrait{display:block;width:100%;max-width:260px;height:260px;object-fit:contain;border-radius:12px;background:radial-gradient(ellipse at center,#334958,#14232a);border:1px solid #b49c69}
@media(orientation:landscape) and (max-height:450px){#questLines{max-height:20px}#quest p[data-ui-active="2"]{display:none}.chat-head b{letter-spacing:0}}
@media(orientation:portrait){:root{--ui-hud-width:216px;--ui-map-width:100px;--ui-nav-size:35px;--ui-skill-size:30px}#topActions{left:calc(3px + env(safe-area-inset-left));top:var(--ui-top);max-width:calc(100vw - 6px - env(safe-area-inset-left) - env(safe-area-inset-right));gap:1px;padding:2px}#topActions button{height:43px}#topActions .menu-icon{width:27px;height:27px}#topActions span:not(.menu-icon){font-size:8px;line-height:11px}#hud,#minimapWrap{top:var(--ui-portrait-row,49px)}#bottom{left:auto;right:calc(6px + env(safe-area-inset-right));transform:none;max-width:calc(100vw - 100px)}.combat-dock{display:grid;grid-template-columns:repeat(6,var(--ui-skill-size));gap:3px}.skill-row,.utility-row{display:contents}#experience{font-size:8px}#xpLabel{display:none}#target{top:var(--ui-target-top,155px)}.chat-panel{width:var(--ui-chat-width)}.chat-messages{height:90px}.chat-head b{letter-spacing:0;font-size:9px}}
@media(orientation:portrait) and (max-width:350px){:root{--ui-hud-width:190px;--ui-map-width:83px;--ui-skill-size:27px;--ui-nav-size:31px}#portrait{width:36px;height:48px}.vitals{width:calc(100% - 43px)}.combat-dock{grid-template-columns:repeat(5,var(--ui-skill-size))}.hero-name small,#cloudStatus{display:none}.chat-head b{font-size:8px}.chat-controls{flex-wrap:wrap}.chat-controls select{max-width:100%}}
@media(prefers-reduced-motion:reduce){#quest,.activity-note{animation:none;transition:none}}
@media(orientation:landscape) and (max-width:1100px){#portrait{--ui-portrait-diameter:33px}#badge{min-width:17px;height:14px;font-size:8px;line-height:12px;bottom:1px;padding:0 2px}#topActions span:not(.menu-icon):not(.menu-badge){font-size:7.5px}}
@media(orientation:portrait) and (max-width:760px){#topActions span:not(.menu-icon):not(.menu-badge){font-size:7.5px}}
@media(orientation:portrait) and (max-width:350px){#portrait{--ui-portrait-diameter:36px}#badge{min-width:19px;height:15px;font-size:9px;line-height:13px;bottom:2px;padding:0 2px}}
#networkStatus{pointer-events:auto;display:block;padding:0 4px;margin-top:2px;font:9px/14px Tahoma,sans-serif;color:#9effd9;background:#102c37;border-color:#53c6b9;border-radius:5px}#networkDetails{width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:18px;color:#fff0d5;background:linear-gradient(145deg,#244d50,#111b30);border:1px solid #f3d08b;border-radius:12px}#networkDetails::backdrop{background:#020a1599}#networkDetails p{font:12px/1.8 Tahoma,sans-serif;white-space:pre-line}#networkDetails small{display:block;font:10px/1.6 Tahoma,sans-serif;margin:10px 0;color:#bbdcd5}

#networkStatus{display:inline;pointer-events:none;padding:0;margin:0;border:0;background:none;font:8px/12px Tahoma,sans-serif;white-space:nowrap}.hud-meta{gap:4px}#fps{font-size:8px;white-space:nowrap}
#hud{padding-bottom:20px}#performanceStatus{position:absolute;left:6px;right:6px;bottom:3px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;font-size:8px}#performanceStatus #fps{display:inline!important}