/* One layout owns the entire bottom HUD, including safe-area spacing. */
#game{--dock-height:calc(64px + env(safe-area-inset-bottom));--combat-height:212px}
#game .bottom{bottom:calc(var(--dock-height) + 10px);left:10px;right:10px;height:var(--combat-height);display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);gap:10px 12px;align-items:end;justify-content:normal}
#game .combatUtilities{position:static;grid-column:2;grid-row:1;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;gap:6px;pointer-events:none}
#game .potionRow{position:relative;width:54px;height:44px;gap:0;justify-content:flex-start}
#game #herb{width:44px;height:44px;flex:none;padding:3px}
#game #herb .artIcon{width:32px;height:32px;min-width:0;flex:none}
#game #herb .herbCount{right:-2px;bottom:-2px;min-width:22px;max-width:58px;padding:0 3px;font:700 12px/17px var(--font-ui);white-space:nowrap}
#game #potionSettingsButton{position:absolute;right:0;top:-7px;width:32px;min-width:32px;height:22px;min-height:22px;padding:0;border:1px solid #a89a70;border-radius:7px;font:700 12px/20px var(--font-ui);color:#c7c8b3;background:#18352df5;z-index:2;touch-action:manipulation}
#game #potionSettingsButton.enabled{color:#fff2b3;border-color:#efce75;background:#62502bf5}
#game #herb.autoPotionOn{border-color:#efcf78;box-shadow:0 0 0 1px #edc56388,0 0 9px #e7b95266;animation:herbAutoGlow 2.4s ease-in-out infinite}
@keyframes herbAutoGlow{50%{box-shadow:0 0 0 1px #ffe6a7bb,0 0 13px #e7b95299}}
#game #pad{grid-column:1;grid-row:2;width:88px;height:88px;margin-bottom:3px;align-self:end}
#game #dodge{position:static;grid-column:1;grid-row:1;min-width:0;width:88px;height:44px;min-height:44px;gap:3px;padding:5px;font-size:12px;white-space:nowrap}
#game #dodge .artIcon{width:24px;height:24px;flex:none}
#game .controls{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:2px;padding:0;width:min(100%,238px);justify-self:end;height:158px}
#game #skillBar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;align-items:start;width:100%}
#game .controls .hotbarSkill{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;margin:0;padding:0;width:100%;height:80px;min-width:0;border:0;border-radius:0;background:none;box-shadow:none;position:relative;overflow:visible;color:#fff0c6;opacity:1;filter:none;touch-action:manipulation}
.hotbarFace{display:block;flex:none;position:relative;aspect-ratio:1;width:100%;max-width:48px;align-self:center;overflow:hidden;border:1px solid #d9bf7c;border-radius:50%;padding:2px;background:#102a21;box-shadow:0 2px 6px #0009}
#game .hotbarArt,#game .hotbarArt .artIcon{display:block;width:100%;height:100%;border-radius:50%}
.hotbarShade{position:absolute;inset:0;pointer-events:none;background:conic-gradient(#06120de6 var(--cooldown-angle,0deg),transparent 0deg)}
.hotbarCooldown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff8dc;text-shadow:0 1px 4px #000;font:700 20px/1 var(--font-ui);z-index:2}
.hotbarName{order:-1;flex:none;font:500 12px/14px var(--font-ui);height:28px;white-space:normal;overflow:hidden;text-align:center;word-break:keep-all;text-shadow:0 1px 3px #031b10,1px 0 2px #031b10}
.hotbarKey{position:absolute;top:1px;left:3px;color:#f9e2a2;font:700 10px/12px var(--font-ui);text-shadow:0 1px 3px #000;z-index:3}
.hotbarAuto{position:absolute;bottom:0;left:0;right:0;text-align:center;background:#183e28ed;color:#dbffb6;font:700 10px/13px var(--font-ui);z-index:3}
#game .hotbarSkill.unlearned .hotbarArt{opacity:.38;filter:grayscale(1)}
#game .hotbarSkill.unlearned .hotbarCooldown{font-size:12px}
#game .hotbarSkill.effectActive .hotbarFace{border-color:#b5e3a6;box-shadow:0 0 0 1px #6daa79}
#game .hotbarSkill:disabled:not(.cooling) .hotbarArt{opacity:.55}
.hotbarCooldown[hidden],.hotbarAuto[hidden]{display:none}
#game .attackRow{display:flex;justify-content:flex-end;align-items:center;gap:10px;height:76px;padding:0 2px}
#game .controls .attack{width:66px;height:66px;margin:0;flex:none}
#game .controls .auto{width:48px;height:48px;margin:0;flex:none}
#game .attackRow button small{bottom:-5px;padding:2px 4px;font-size:12px;line-height:15px;border:0}
#game .controls #autoSkills{position:static;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:58px;height:52px;min-height:44px;padding:4px;margin:0;border:1px solid #bca872;border-radius:9px;box-shadow:none;font:500 12px/14px var(--font-ui);color:#e8dbb3;background:#132d23e8}
#game #autoSkills b{font-size:14px;color:#b9c6ad}
#game #autoSkills[aria-pressed=true]{background:#31523be8;border-color:#b7d790}
#game #autoSkills[aria-pressed=true] b{color:#ddffb6}
#game #autoSkills:disabled{opacity:.65;filter:none}
#game #interact{position:absolute;bottom:auto;left:0;top:0;transform:none;width:112px;min-height:40px;height:40px;display:flex;align-items:center;justify-content:flex-start;gap:5px;padding:3px 7px 3px 4px;border:0;border-radius:7px;background:#102b2270;box-shadow:none;font:500 13px/18px var(--font-ui);color:#fff0c6;text-shadow:0 1px 3px #000;z-index:5;white-space:nowrap}
#game #interact.hidden{display:none}
#game #interact .npcMarker{font:700 28px/32px var(--font-ui);width:17px;text-align:center;color:#ffe292;text-shadow:0 1px 3px #372807,0 0 5px #b38823}
#game #interact .npcAction{overflow:hidden;text-overflow:ellipsis}
#game #interact.guideFocus{animation:none;outline:0;box-shadow:none}
#game #interact:focus-visible{outline:2px solid #ffe292}

#game #activeEffect{bottom:calc(var(--dock-height) + var(--combat-height) + 76px)}
#game #feed{bottom:calc(var(--dock-height) + var(--combat-height) + 76px)}
/* Keep the level inside its own visible strip, above the portrait clipping. */
#game header .portrait{width:48px;height:60px;margin-top:8px;overflow:hidden;background-repeat:no-repeat;border-radius:24px 24px 7px 7px}
#game header #level{left:0;right:0;bottom:0;width:auto;min-height:18px;padding:1px 0;margin:0;border:0;border-top:1px solid #c3a969;border-radius:0;font:700 12px/16px var(--font-ui);color:#ffecb1;background:#102c21;white-space:nowrap;z-index:2}
/* Every dock entry has the same icon frame and label baseline. */
#game .dock{height:var(--dock-height);padding:4px 0 calc(4px + env(safe-area-inset-bottom));align-items:stretch}
#game .dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;min-width:0;min-height:48px;padding:0 2px;font:500 14px/18px var(--font-ui);color:#eddbac}
#game .dock .dockIcon{display:flex;align-items:center;justify-content:center;width:27px;height:27px;flex:none;color:#e4c47f}
#game .dock .menuSymbol{width:26px;height:26px;margin:0}
#game #characterDockIcon{display:block;width:27px;height:27px}
#game .dock .dockLabel,#game #characterDock>span:last-of-type{font:500 14px/18px var(--font-ui);white-space:nowrap}
#game .dock .partyBadge,#game #characterDockBadge{position:absolute;top:0;right:calc(50% - 26px);min-width:18px;padding:1px 3px;font:700 11px/14px var(--font-ui);border-radius:7px;background:#a34524;color:#fff1d3;border:1px solid #d9a979}
@media(max-width:360px){#game .bottom{grid-template-columns:72px minmax(0,1fr);column-gap:8px;left:8px;right:8px}#game #pad{width:72px;height:72px}#game #dodge{width:72px;font-size:12px}#game #dodge .artIcon{width:19px;height:19px}#game .attackRow{gap:8px}}
@media(max-height:700px){#game{--combat-height:208px}#game .bottom{bottom:calc(var(--dock-height) + 6px);row-gap:6px}#game .controls{height:158px}}

/* Field-sized visual rewards, reusing existing item images. No quantity labels. */
#lootLayer{position:absolute;inset:0;pointer-events:none;z-index:12;overflow:hidden;contain:strict}
.lootSprite{position:absolute;left:0;top:0;width:20px;height:20px;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 2px 2px #031b12b0)}
.lootSprite .artIcon{display:block;width:100%;height:100%;border:0;border-radius:3px;box-shadow:none}
#game #mapRail .location{position:static;inset:auto;width:100%;min-height:22px;max-width:100%;margin:0;padding:2px 0;display:block;background:none;border:0;border-radius:0;box-shadow:none;letter-spacing:0;text-align:center;font:500 12px/16px var(--font-ui);color:#f8e7bf;text-shadow:0 1px 3px #10251b}
#game #mapRail .location span{display:none}
#game #mapRail .location span:nth-child(2){display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important;color:inherit}
#game header .currencyIcon .commerceIcon{display:block;width:20px;height:20px;overflow:hidden}
@media(prefers-reduced-motion:reduce){#game #herb.autoPotionOn{animation:none}.lootSprite{will-change:opacity}}