/* Field HUD layout only. The independent camera scale lives in field-view.mjs. */
#game{--dock-height:calc(44px + env(safe-area-inset-bottom));--combat-height:150px;--hud-pad:78px;--hud-control-width:212px;--hud-controls:106px;--hud-skill-touch:44px;--hud-skill-art:40px;--hud-attack-row:60px;--hud-attack:52px;--hud-auto:42px;--hud-auto-skill:46px;--hud-potion:38px;--hud-gap:6px;--hud-quest:176px;--hud-map:76px;--hud-top:77px;--hud-map-art:76px}
#game[data-hud-size=compact]{--dock-height:calc(38px + env(safe-area-inset-bottom));--chat-height:24px;--combat-height:120px;--hud-pad:64px;--hud-control-width:176px;--hud-controls:82px;--hud-skill-touch:40px;--hud-skill-art:34px;--hud-attack-row:40px;--hud-attack:38px;--hud-auto:34px;--hud-auto-skill:34px;--hud-potion:34px;--hud-gap:4px;--hud-quest:154px;--hud-map:60px;--hud-top:68px;--hud-map-art:52px}
#game[data-hud-size=tiny]{--dock-height:calc(34px + env(safe-area-inset-bottom));--chat-height:22px;--combat-height:108px;--hud-pad:58px;--hud-control-width:160px;--hud-controls:74px;--hud-skill-touch:36px;--hud-skill-art:30px;--hud-attack-row:36px;--hud-attack:34px;--hud-auto:32px;--hud-auto-skill:32px;--hud-potion:30px;--hud-gap:4px;--hud-quest:146px;--hud-map:54px;--hud-top:66px;--hud-map-art:46px}
#game.chatHudHidden{--chat-height:0px}
/* Names are tooltips, never a permanent row. Touch holds do not delay a cast. */
#game .controls .hotbarSkill{height:var(--hud-skill-touch);min-height:var(--hud-skill-touch);justify-content:center;gap:0}
#game .hotbarFace{width:var(--hud-skill-art);max-width:100%}
#game .hotbarName{display:none;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);width:max-content;max-width:104px;height:auto;padding:5px 7px;border:1px solid #b6a06b;border-radius:4px;background:#102820f5;color:#fff0cb;font:11px/16px var(--font-ui);z-index:5;pointer-events:none;white-space:normal;overflow-wrap:anywhere}
#game .hotbarSkill:last-child .hotbarName{left:auto;right:0;transform:none}
#game .hotbarSkill:active .hotbarName,#game .hotbarSkill:focus-visible .hotbarName{display:block}
@media(hover:hover) and (pointer:fine){#game .hotbarSkill:hover .hotbarName{display:block}}
#game .bottom{height:var(--combat-height);bottom:calc(var(--dock-height) + var(--chat-height) + 6px);grid-template-columns:var(--hud-pad) minmax(0,1fr);grid-template-rows:var(--hud-potion) minmax(0,1fr);gap:var(--hud-gap) 8px;left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right))}
#game #pad{width:var(--hud-pad);height:var(--hud-pad);margin-bottom:0}
#game #dodge{justify-self:start;width:var(--hud-potion);height:var(--hud-potion);min-height:var(--hud-potion);padding:2px;gap:0;position:relative;border-radius:50%}
#game .controls{width:min(100%,var(--hud-control-width));height:var(--hud-controls);gap:2px}
#game #skillBar{gap:4px}
#game .attackRow,#game .attackRow.pkControls{height:var(--hud-attack-row);gap:var(--hud-gap);padding:0}
#game .controls .attack{width:var(--hud-attack);height:var(--hud-attack)}
#game .controls .auto{width:var(--hud-auto);height:var(--hud-auto)}
#game .controls #autoSkills,#game .controls .pkControls #autoSkills{width:var(--hud-auto-skill);min-width:var(--hud-auto-skill);height:var(--hud-auto);min-height:var(--hud-auto);gap:2px;padding:2px}
#game .controls #pkAuto{min-width:var(--hud-auto);width:var(--hud-auto);height:var(--hud-auto);font-size:10px;line-height:12px;gap:1px;padding:2px}
#game :is(#feed,#activeEffect){bottom:calc(var(--dock-height) + var(--chat-height) + var(--combat-height) + 12px)}
#game:not([data-hud-size=standard]) .controls .attackRow button small{font-size:10px;line-height:12px;padding:1px 3px;bottom:0}
#game:not([data-hud-size=standard]) #autoSkills b{font-size:11px}
#game:not([data-hud-size=standard]) #autoSkills .skillAutoBadge{font-size:10px}
#game:not([data-hud-size=standard]) .hotbarCooldown{font-size:16px}
#game:not([data-hud-size=standard]) .hotbarAuto{font-size:9px;line-height:11px}
#game #herb{width:var(--hud-potion);height:var(--hud-potion);padding:2px;border-radius:6px}
#game #herb .artIcon{width:calc(var(--hud-potion) - 6px);height:calc(var(--hud-potion) - 6px)}
#game .potionRow{height:var(--hud-potion);width:var(--hud-potion)}
#game:not([data-hud-size=standard]) .dock{padding:2px 0 calc(2px + env(safe-area-inset-bottom))}
#game:not([data-hud-size=standard]) .dock button{gap:0;min-height:30px}
#game:not([data-hud-size=standard]) .dock :is(.dockIcon,#characterDockIcon){width:22px;height:22px}
#game:not([data-hud-size=standard]) .dock .menuSymbol{width:22px;height:22px}
#game:not([data-hud-size=standard]) .dock :is(.dockLabel,#characterDock>span:last-of-type){font-size:11px;line-height:15px}
#game:not([data-hud-size=standard]) #chatHud{height:calc(var(--chat-height) - 2px);padding:2px 5px;gap:0}
#game:not([data-hud-size=standard]) .chatHudLine{font-size:10px;line-height:16px;gap:4px}
#game:not([data-hud-size=standard]) .chatHudLine>b{font-size:10px}
/* Compact top bars retain all currencies, HP, MP, EXP and important boss alerts. */
#game:not([data-hud-size=standard])>header{height:var(--hud-top);padding:8px 6px 2px;gap:4px}
#game:not([data-hud-size=standard])>header .portrait{width:36px;height:44px;margin-top:10px;border-width:1px;background-size:108px 72px}
#game:not([data-hud-size=standard])>header .portrait.rosterPortrait{background-size:216px 144px}
#game:not([data-hud-size=standard])>header .identity{width:calc(100% - 157px);max-width:210px;min-width:105px;margin-top:10px}
#game:not([data-hud-size=standard])>header .identityTitle{height:14px;gap:3px}
#game:not([data-hud-size=standard])>header .identityTitle #name{font-size:10px;line-height:14px}
#game:not([data-hud-size=standard])>header .powerLine b{font-size:9px}
#game:not([data-hud-size=standard])>header .currencies{right:5px;top:2px;width:108px;max-width:108px;gap:1px 2px}
#game:not([data-hud-size=standard])>header .currency{height:16px;gap:1px;min-width:0}
#game:not([data-hud-size=standard])>header .currency b{font-size:9px}
#game:not([data-hud-size=standard])>header .currencyIcon :is(.artIcon,.commerceIcon,.menuSymbol){width:14px;height:14px}
#game:not([data-hud-size=standard])>header .headerActions{top:37px;right:5px;gap:2px}
#game:not([data-hud-size=standard])>header .headerActions button{width:26px;height:28px;padding:2px}
#game:not([data-hud-size=standard])>header .headerActions .menuSymbol{width:21px;height:21px}
#game:not([data-hud-size=standard])>header #alphaContribution{left:6px;max-width:calc(100% - 124px);overflow:hidden;gap:3px;padding-inline:3px;font-size:8px}
#game:not([data-hud-size=standard])>header #alphaContribution :is(b,small){font-size:8px;flex:none}
#game:not([data-hud-size=standard])>header #alphaContribution>span{overflow:hidden;text-overflow:ellipsis}
#game .fieldHud{top:calc(env(safe-area-inset-top) + var(--hud-top));width:max-content;max-width:var(--hud-quest)}
#game #mapRail{top:calc(env(safe-area-inset-top) + var(--hud-top));width:var(--hud-map)}
#game #miniMapOpen,#game #miniMapCanvas{height:var(--hud-map-art)}
#game:not([data-hud-size=standard]) .fieldHud{left:max(6px,env(safe-area-inset-left))}
#game:not([data-hud-size=standard]) #mapRail{right:max(6px,env(safe-area-inset-right))}
#game:not([data-hud-size=standard]) #questFold{min-height:26px;line-height:18px;padding:2px 5px;margin-bottom:1px}
#game:not([data-hud-size=standard]) .fieldHud #quest{padding:2px 4px}
#game:not([data-hud-size=standard]) #quest strong{font-size:10px;line-height:13px}
#game:not([data-hud-size=standard]) #questRewards{margin-top:2px;gap:3px}
#game:not([data-hud-size=standard]) #questRewards .questReward{width:14px;height:14px}
#game:not([data-hud-size=standard]) .questAutoBox{gap:2px;padding-top:2px}
#game:not([data-hud-size=standard]) .questAutoBox>button{min-height:24px;padding:2px 4px;font-size:9px;line-height:16px}
#game:not([data-hud-size=standard]) :is(#worldBossAlert,#marsRaidAlert){min-height:30px;padding:3px 4px;gap:3px;line-height:1.25;margin:2px 0}
#game:not([data-hud-size=standard]) :is(#worldBossAlert,#marsRaidAlert)>span:first-child{font-size:16px}
#game:not([data-hud-size=standard]) :is(#worldBossAlert,#marsRaidAlert) strong{font-size:10px}
#game:not([data-hud-size=standard]) :is(#worldBossAlert,#marsRaidAlert) small{font-size:9px}
#game:not([data-hud-size=standard]) #mapTravelOpen{font-size:9px;min-height:24px;padding:1px;gap:2px}
#game:not([data-hud-size=standard]) #miniMapToggle{min-height:22px;height:22px}
#game:not([data-hud-size=standard]) #networkLatency{font-size:9px;line-height:11px;padding:1px 2px}
#game:not([data-hud-size=standard]) #mapRail .location{font-size:10px;line-height:14px}
.hudSettings{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #b6a16c55}
#game #panel .hudSettings h3{font-size:14px;margin:2px 0 7px}
#game #panel .hudSettings p{font-size:12px;margin:6px 0;line-height:1.5}
.hudSizeChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
#game #panel .hudSizeChoices button{min-height:40px;padding:5px 2px;font-size:12px;white-space:nowrap}
.hudSettings small{display:block;font-size:11px;color:#b8cbbd;line-height:1.5}
.hudSizeCurrent{color:#f1d28c}
/* Four actions still fit beside the joystick in PK maps, even in basic size. */
#game .attackRow.pkControls{gap:3px}

#game:not([data-hud-size=standard])>header .bars{gap:1px}
/* A single compact quest card: no nested buttons, no separate action bar below. */
#game #questCard{display:block;width:max-content;max-width:var(--hud-quest);padding:3px 4px;border-left:2px solid #cfb47a;border-radius:3px;background:linear-gradient(90deg,#102f23d4,#102f23a8)}
#game.questFolded #questCard{display:none}
#game .fieldHud #questCard #quest{width:100%;max-width:100%;padding:0;border:0;background:none}
#game #questCard #quest strong{white-space:normal;overflow-wrap:anywhere}
#game #questCard #questProgress{display:block;max-width:calc(var(--hud-quest) - 10px)}
#game #questCard .questAutoBox{width:100%;max-width:100%;padding:3px 0 0;gap:2px}
#game #questCard .questAutoBox>button{margin:0;min-height:24px;padding:2px 4px;font-size:9px;line-height:16px}
#game #questCard #questAutoStatus{max-width:100%;font-size:10px}
#game :is(#worldBossAlert,#marsRaidAlert){width:fit-content;max-width:var(--hud-quest)}
/* Overlay labels on the icon frame so the bottom menu needs only one short row. */
#game .dock{padding:2px 0 calc(2px + env(safe-area-inset-bottom));height:var(--dock-height)}
#game .dock button{position:relative;min-height:30px;gap:0;padding:0;justify-content:center;overflow:visible}
#game .dock :is(.dockIcon,#characterDockIcon){position:absolute;top:0;width:26px;height:26px;opacity:.75}
#game .dock .menuSymbol{width:26px;height:26px}
#game .dock .dockLabel,#game .dock #characterDock>span:last-of-type{position:relative;z-index:1;margin-top:10px;padding:0 3px;border-radius:3px;background:#10271ea8;color:#fff2d0;font:600 11px/15px var(--font-ui);text-shadow:0 1px 2px #000}
#game .dock :is(.partyBadge,#characterDockBadge){top:-3px;right:calc(50% - 23px);font-size:9px;line-height:12px;min-width:14px;padding:0 2px}
#game:not([data-hud-size=standard]) .dock :is(.dockIcon,#characterDockIcon){width:22px;height:22px}
#game:not([data-hud-size=standard]) .dock .menuSymbol{width:22px;height:22px}
#game:not([data-hud-size=standard]) .dock .dockLabel,#game:not([data-hud-size=standard]) .dock #characterDock>span:last-of-type{font-size:10px;line-height:13px;margin-top:8px}
/* The compact field strip shows the newest real message; opening chat keeps all history. */
#game:not([data-hud-size=standard]) #chatHud{height:calc(var(--chat-height) - 2px);min-height:20px;background:#0a211a85;border:0;padding:1px 4px}
#game:not([data-hud-size=standard]) #chatHud .chatHudLine:not(.compactLatest){display:none}
#game:not([data-hud-size=standard]) #chatHud .chatHudLine{font-size:9px;line-height:16px}
#game:not([data-hud-size=standard]) #chatHud .chatHudLine>b{font-size:9px;max-width:58px}
/* Small round dodge, small potion, and auto badges inside their own controls. */
#game #dodge .artIcon{width:calc(var(--hud-potion) - 4px);height:calc(var(--hud-potion) - 4px)}
#game #dodge .actionCaption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:0 2px;background:#10271eb8;border-radius:3px;font:9px/12px var(--font-ui);white-space:nowrap}
#game #potionSettingsButton{top:-5px;right:-3px;width:24px;min-width:24px;height:16px;min-height:16px;border-radius:4px;font:9px/14px var(--font-ui)}
#game #herb .herbCount{font-size:9px;line-height:12px;min-width:14px;padding:0 2px}
#game .controls #autoSkills .skillAutoBadge{position:static;transform:none;min-width:0;padding:0 2px;font-size:9px;line-height:12px;border:0;border-radius:2px}
#game .controls #autoSkills b{font-size:10px;line-height:12px}
#game:not([data-hud-size=standard]) .controls .attackRow button small{font-size:9px;line-height:11px;padding:0 2px}
#game:not([data-hud-size=standard]) .controls .attack,#game:not([data-hud-size=standard]) .controls .auto{padding:2px;border-width:1px}
#game:not([data-hud-size=standard]) .hotbarAuto{font-size:8px;line-height:10px}
#game:not([data-hud-size=standard]) .hotbarFace{padding:1px}
#game:not([data-hud-size=standard]) #networkLatency{line-height:10px}
#game:not([data-hud-size=standard]) #mapRail .location{font-size:9px;line-height:12px;min-height:14px}
#game:not([data-hud-size=standard]) :is(#worldBossAlert,#marsRaidAlert){min-height:28px}
.fieldViewChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:8px 0}
#game #panel .fieldViewChoices button{padding:5px 3px;min-height:36px;white-space:nowrap;font-size:12px}
/* Anchor dodge directly above the joystick; clear the old off-grid offset. */
#game #dodge{position:absolute;top:auto;left:0;bottom:calc(var(--hud-pad) + 4px)}
#game:not([data-hud-size=standard]) .controls #auto{font-size:18px;line-height:1}
#game:not([data-hud-size=standard]) .controls #auto small{white-space:normal;width:100%;max-width:100%;padding:0 1px;font-size:9px;line-height:10px;bottom:0}
#game:not([data-hud-size=standard]) .controls #attack{font-size:20px;line-height:1}
/* The complete small-screen HUD uses the same scale, including text and floating guidance. */
#game{--hud-float-scale:1;--hud-combat-font:10px}
#game[data-hud-size=compact]{--hud-top:57px;--hud-quest:134px;--hud-float-scale:.78;--hud-combat-font:8px;--hud-identity:128px;--hud-portrait:30px;--hud-portrait-height:37px}
#game[data-hud-size=tiny]{--hud-top:52px;--hud-quest:122px;--hud-float-scale:.68;--hud-combat-font:7px;--hud-identity:112px;--hud-portrait:27px;--hud-portrait-height:33px}
#game:not([data-hud-size=standard])>header{padding:6px 5px 1px;gap:3px}
#game:not([data-hud-size=standard])>header .portrait{width:var(--hud-portrait);height:var(--hud-portrait-height);margin-top:10px;border-radius:15px 15px 3px 3px;background-size:calc(var(--hud-portrait) * 3) calc(var(--hud-portrait) * 2)}
#game:not([data-hud-size=standard])>header .portrait.rosterPortrait{background-size:calc(var(--hud-portrait) * 6) calc(var(--hud-portrait) * 4)}
#game:not([data-hud-size=standard])>header #level{min-height:10px;font-size:8px;line-height:10px;padding:0}
#game:not([data-hud-size=standard])>header .identity{flex:none;width:var(--hud-identity);max-width:var(--hud-identity);min-width:0;margin-top:9px}
#game:not([data-hud-size=standard])>header .identityTitle{height:11px;margin-bottom:1px;gap:2px}
#game:not([data-hud-size=standard])>header .identityTitle #name{font-size:8px;line-height:10px}
#game:not([data-hud-size=standard])>header .identityTitle .powerLine{height:10px;gap:2px;line-height:10px}
#game:not([data-hud-size=standard])>header .identityTitle .powerLine span{font-size:7px!important}
#game:not([data-hud-size=standard])>header .identityTitle .powerLine b{font-size:8px;line-height:10px}
#game:not([data-hud-size=standard])>header .bars{gap:1px}
#game:not([data-hud-size=standard])>header .resourceBar{height:8px;line-height:7px;border-width:1px}
#game:not([data-hud-size=standard])>header .resourceBar :is(label,span){font-size:7px;line-height:7px;top:-1px}
#game:not([data-hud-size=standard])>header .currencies{width:96px;max-width:96px}
#game:not([data-hud-size=standard])>header .currency{height:13px}
#game:not([data-hud-size=standard])>header .currency b{font-size:8px}
#game:not([data-hud-size=standard])>header .currencyIcon :is(.artIcon,.commerceIcon,.menuSymbol){width:11px;height:11px}
#game:not([data-hud-size=standard])>header .headerActions{top:29px;gap:2px}
#game:not([data-hud-size=standard])>header .headerActions button{width:22px;height:22px;padding:1px}
#game:not([data-hud-size=standard])>header .headerActions .menuSymbol{width:18px;height:18px}
#game:not([data-hud-size=standard])>header #alphaContribution{font-size:7px;max-width:calc(100% - 105px)}
#game:not([data-hud-size=standard])>header #alphaContribution :is(b,small){font-size:7px}
#game:not([data-hud-size=standard]) #questFold{min-height:19px;height:19px;padding:1px 4px;font-size:8px;line-height:13px;margin-bottom:1px;text-align:center}
#game:not([data-hud-size=standard]) #questCard{padding:2px 3px}
#game:not([data-hud-size=standard]) .fieldHud #questCard #quest{padding:0;line-height:1.2}
#game:not([data-hud-size=standard]) #questCard #quest small{font-size:7px;line-height:9px}
#game:not([data-hud-size=standard]) #questCard #quest strong{font-size:9px;line-height:11px;margin:0}
#game:not([data-hud-size=standard]) #questCard #quest>span{font-size:8px;line-height:10px}
#game:not([data-hud-size=standard]) #questCard #questRewards{margin-top:1px;gap:2px}
#game:not([data-hud-size=standard]) #questCard #questRewards .questReward{width:11px;height:11px}
#game:not([data-hud-size=standard]) #questCard .questAutoBox{padding:2px 0 0;gap:2px;border:0;background:none}
#game:not([data-hud-size=standard]) #questCard .questAutoBox>button{min-height:19px;height:19px;padding:1px 3px;font-size:8px;line-height:13px;letter-spacing:-.2px;text-align:center}
#game:not([data-hud-size=standard]) #questCard .teleportIcon{display:none}
#game:not([data-hud-size=standard]) #questCard #questAutoStatus{font-size:8px;line-height:10px;padding:1px 2px}
#game:not([data-hud-size=standard]) :is(#worldBossAlert,#marsRaidAlert){min-height:24px;padding:2px 3px;gap:2px}
#game:not([data-hud-size=standard]) :is(#worldBossAlert,#marsRaidAlert)>span:first-child{font-size:12px}
#game:not([data-hud-size=standard]) :is(#worldBossAlert,#marsRaidAlert) strong{font-size:8px;line-height:10px}
#game:not([data-hud-size=standard]) :is(#worldBossAlert,#marsRaidAlert) small{font-size:7px;line-height:9px}
#game:not([data-hud-size=standard]) #bossHud{padding:3px 4px;line-height:1.2}
#game:not([data-hud-size=standard]) #bossHud :is(#bossName,#bossCast,#bossHint,#bossPhaseHint,#bossHp){font-size:8px;line-height:10px}
#game:not([data-hud-size=standard]) #bossHud .bossHpBar{height:3px;margin:2px 0}
#game:not([data-hud-size=standard]) #interact{width:calc(112px * var(--hud-float-scale));height:calc(40px * var(--hud-float-scale));min-height:0;padding:2px 4px;gap:3px;font-size:calc(13px * var(--hud-float-scale));line-height:1.3}
#game:not([data-hud-size=standard]) #interact .npcMarker{font-size:calc(28px * var(--hud-float-scale));line-height:1;width:calc(17px * var(--hud-float-scale))}
#game:not([data-hud-size=standard]) #interact .npcAction{font-size:inherit;line-height:inherit}
#game #dodge .actionCaption{left:0;right:0;width:100%;transform:none;padding:0;text-align:center;line-height:10px}
#game:not([data-hud-size=standard]) #dodge .actionCaption{font-size:8px}
#game #mapTravelOpen{text-align:center;justify-content:center}
#game #mapTravelOpen>span[aria-hidden=true]{display:none}
#game:not([data-hud-size=standard]) #mapTravelOpen{font-size:8px;line-height:12px;min-height:20px;height:20px;padding:1px 0;gap:0}
#game:not([data-hud-size=standard]) #miniMapToggle{min-height:18px;height:18px;font-size:8px;line-height:12px;padding:1px}
#game:not([data-hud-size=standard]) #mapRail .location{font-size:8px;line-height:10px;min-height:12px}
#game:not([data-hud-size=standard]) #networkLatency{font-size:8px;line-height:9px}
#game:not([data-hud-size=standard]) #mapRail #pkStatus{min-height:18px;padding:2px 1px;font-size:8px;line-height:10px;text-align:center;word-break:keep-all}
#game:not([data-hud-size=standard]) #mapRail #pkLock{font-size:8px;line-height:10px}
#game:not([data-hud-size=standard]) .controls #auto small,#game:not([data-hud-size=standard]) .controls #attack small{font-size:var(--hud-combat-font);line-height:10px;white-space:nowrap;word-break:keep-all;left:0;right:0;width:auto;max-width:none;transform:none;padding:0;text-align:center;letter-spacing:-.2px}
#game:not([data-hud-size=standard]) .controls #pkAuto{font-size:8px;line-height:10px}
#game:not([data-hud-size=standard]) .controls #autoSkills b{font-size:8px;line-height:10px}
#game:not([data-hud-size=standard]) .controls #autoSkills .skillAutoBadge{font-size:7px;line-height:9px}
#game:not([data-hud-size=standard]) #potionSettingsButton{font-size:8px;line-height:12px;height:14px;min-height:14px;width:22px;min-width:22px}
#game:not([data-hud-size=standard]) #feed,#game:not([data-hud-size=standard]) #activeEffect{font-size:9px;line-height:12px}
#game:not([data-hud-size=standard]) #areaArrival{font-size:10px;line-height:13px}