/* The world keeps the centre of the screen. Information lives in small edge controls. */
#hud{position:fixed;inset:0;pointer-events:none;--hud-bg:#263d31d9;--hud-line:#e5d2a659;--hud-ink:#fff0cb;--hud-muted:#c7ccb4}
.in-mine #hud{--hud-bg:#292937d9;--hud-muted:#ccc4d5}
#hud button,#touch #stick{pointer-events:auto}
#hud-top{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#loc,#clock,#purse,#menu-key{background:var(--hud-bg);border:1px solid var(--hud-line);box-shadow:0 2px #17251b24;color:var(--hud-ink);min-height:34px}
#loc{display:flex;gap:7px;align-items:center;padding:7px 10px;max-width:min(28vw,200px);font-size:12px;line-height:18px;white-space:nowrap;text-align:left;min-width:0}
#loc-name{overflow:hidden;text-overflow:ellipsis;font-weight:600}.loc-leaf{font-size:10px;color:#d9bc70;flex-shrink:0}
#hud-status{display:flex;gap:6px;align-items:stretch;flex-shrink:0}
#clock{display:flex;align-items:center;gap:8px;padding:5px 9px;white-space:nowrap;line-height:22px}
#date{font-size:11px;font-weight:500;color:var(--hud-muted)}#time{font:600 13px/1.1 monospace;font-variant-numeric:tabular-nums;color:var(--hud-ink)}.sky{font:16px/1 sans-serif;color:#e5c579}
#purse{display:flex;align-items:center;gap:5px;padding:5px 9px;font-size:11px;line-height:22px;font-variant-numeric:tabular-nums}.coin-dot{width:7px;height:9px;background:#d7b85c;box-shadow:inset 1px 1px #f3d88e;border:1px solid #9b7d35}#purse b{font-weight:500}#purse>span:last-child{font-size:9px;color:var(--hud-muted)}
#menu-key{position:relative;width:36px;min-height:34px;padding:4px;font:19px/1 monospace}
#menu-key.has-reward:after{content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;background:#edc668;box-shadow:0 0 0 1px #725b39}
#meters{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));display:grid;gap:4px;padding:5px 7px;color:var(--hud-ink);background:var(--hud-bg);border:1px solid var(--hud-line);font:10px/1 monospace}
.vital{display:flex;align-items:center;gap:5px;min-height:9px}.vital>span{font-size:9px;width:9px;text-align:center;color:#b6ce8a}.vital>div{width:62px;height:5px;background:#111b2388;overflow:hidden}.vital i{display:block;height:100%;background:#91b76a;transition:width .16s linear}.vital output{width:23px;text-align:right;color:#d7dcc6;font-size:9px;font-variant-numeric:tabular-nums}.vital.health{display:none}.show-health .vital.health{display:flex}.health>span{color:#e2a08a}.health i{background:#cc8d79}.low-energy #energy{background:#d9aa55}.low-hp #hp{background:#e16d59}.low-hp #hp-text,.low-energy #energy-text{color:#ffe5a2}
#dock{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
#quickbar{display:flex;gap:3px;align-items:center;padding:4px;background:var(--hud-bg);border:1px solid var(--hud-line);box-shadow:0 2px #17251b30;pointer-events:auto}
#belt{display:flex;gap:3px}#belt button,#quickbar>button{position:relative;width:38px;height:38px;padding:4px;background:#e6d6a9d9;border:1px solid #b09a6d;box-shadow:inset 0 1px #fff0cd66;color:#51472f}
#belt button.selected{background:#e8cf88;border-color:#ffedb9;box-shadow:inset 0 -3px #ac8440}#belt button.selected:after{content:'';position:absolute;bottom:3px;left:16px;width:4px;height:2px;background:#6c673c}
#belt .ico{width:25px;height:25px}#belt kbd{position:absolute;left:3px;top:1px;font:8px monospace;color:#786b4c}#belt .tool-count{position:absolute;right:2px;bottom:0;font:9px monospace;color:#4f4b36;background:#e7d69a}
#quickbar>button{background:transparent;border-color:#e2d1a647;box-shadow:none;color:#e7ddba}#quickbar>button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;shape-rendering:crispEdges;vertical-align:middle}#bag-key{margin-left:3px}
#tool-label{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:var(--hud-bg);color:var(--hud-ink);border:1px solid var(--hud-line);padding:3px 8px;max-width:300px;white-space:nowrap;font-size:11px;line-height:16px;opacity:0;transition:opacity .18s;pointer-events:none}
.tool-peek #tool-label,#dock:hover #tool-label,#dock:focus-within #tool-label{opacity:1}
#near{position:absolute;bottom:max(70px,calc(env(safe-area-inset-bottom) + 58px));left:50%;transform:translateX(-50%);max-width:min(320px,64vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--hud-bg);color:var(--hud-ink);border:1px solid var(--hud-line);box-shadow:none;padding:4px 9px;min-height:27px;font-size:11px;line-height:17px}
.tool-peek #near,.moving #near{visibility:hidden}#near.exit-cue{color:#ffe6a2;border-color:#d7be7f88}.in-combat #near{visibility:hidden}
#touch{display:none}
#toasts{position:fixed;z-index:35;left:max(14px,env(safe-area-inset-left));bottom:max(70px,calc(env(safe-area-inset-bottom) + 58px));max-width:min(280px,28vw);pointer-events:none}
.toast{background:#263d31ee;color:#fff0cc;border:1px solid #decd9d80;box-shadow:0 2px #17251b24;padding:6px 9px;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.toast.important{border-color:#dfbd71;color:#ffe7a5}
.paused #toasts{left:50%;transform:translateX(-50%);top:10px;bottom:auto;max-width:min(440px,80vw)}
.compact #hud-top{top:max(7px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));gap:6px;align-items:flex-start}
.compact #loc{max-width:min(29vw,135px);padding:7px 7px;gap:4px;font-size:11px;line-height:19px;min-height:35px}
.compact #hud-status{gap:4px}.compact #clock{gap:6px;min-height:35px;padding:5px 7px}.compact #date{font-size:10px}.compact #time{font-size:12px}.compact .sky{font-size:14px}.compact #menu-key{width:36px;min-height:35px}.compact #purse{display:none}
.compact #dock,.compact #near{display:none}.compact #meters{left:max(10px,env(safe-area-inset-left));bottom:max(117px,calc(env(safe-area-inset-bottom) + 103px));padding:4px 5px;gap:3px}.compact .vital>div{width:49px}.compact .vital output{width:19px;font-size:9px}
.compact #touch{display:block;pointer-events:none}.compact #stick{pointer-events:auto;touch-action:none;position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:84px;height:84px;border:1px solid #f5e6bd88;border-radius:50%;background:#2c423342;display:grid;place-items:center}.compact #stick i{width:38px;height:38px;background:#e9e1bf9c;border:1px solid #f4ebc5aa;border-radius:50%;transform:translate(var(--stick-x,0px),var(--stick-y,0px));pointer-events:none}.compact #stick.held{background:#2c423365}
.compact #pocket-tool,.compact #pocket-use{position:absolute;pointer-events:auto;right:max(13px,env(safe-area-inset-right));background:var(--hud-bg);color:var(--hud-ink);border:1px solid #e9dab5aa;box-shadow:0 2px #15241833;min-width:44px;padding:4px;font-size:11px}
.compact #pocket-tool{width:45px;height:46px;bottom:max(87px,calc(env(safe-area-inset-bottom) + 71px))}.compact #pocket-tool .ico{width:27px;height:27px}.compact #pocket-use{width:60px;height:58px;bottom:max(16px,env(safe-area-inset-bottom))}
.compact.paused #touch,.arcade-open #touch{display:none}.compact #toasts{left:50%;transform:translateX(-50%);top:max(50px,calc(env(safe-area-inset-top) + 44px));bottom:auto;max-width:min(300px,76vw);width:max-content}.compact .toast{padding:5px 8px;font-size:10px}
.in-combat #clock,.in-combat #purse{opacity:.58}.in-combat #clock:hover{opacity:1}
.menu-headline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:#705339;font-size:12px;padding:0 0 12px}.menu-headline b{font-size:14px}.menu-headline small{font-size:11px;color:#927b54}.menu-summary{margin-bottom:12px!important;padding:9px 12px;border-left:3px solid #9d8959;background:#ead8a84d}.menu-utilities{display:flex;gap:7px;flex-wrap:wrap;border-top:1px solid #b9a17166;padding-top:12px;margin-top:14px}.menu-utilities button{font-size:12px}
@media(max-width:350px){.compact #date{display:none}.compact #loc{max-width:36vw}.compact #clock{gap:5px}.compact #hud-status{gap:4px}}
@media(max-height:530px) and (orientation:landscape){.compact #loc{max-width:180px}.compact #purse{display:flex;min-height:35px;padding:5px 7px}.compact #stick{width:72px;height:72px;bottom:max(10px,env(safe-area-inset-bottom))}.compact #stick i{width:32px;height:32px}.compact #meters{bottom:max(91px,calc(env(safe-area-inset-bottom) + 81px))}.compact #pocket-tool{right:max(84px,calc(env(safe-area-inset-right) + 72px));bottom:max(15px,env(safe-area-inset-bottom));width:44px;height:46px}.compact #pocket-use{bottom:max(11px,env(safe-area-inset-bottom));width:58px;height:54px}.compact #toasts{top:max(50px,calc(env(safe-area-inset-top) + 44px));max-width:44vw}}
@media(prefers-reduced-motion:reduce){#tool-label,.vital i{transition:none}}
.immersive #loc,.immersive #clock,.immersive #purse,.immersive #dock,.immersive #near{display:none}.immersive #hud-top{justify-content:flex-end}.immersive:not(.in-mine):not(.low-energy):not(.low-hp) #meters{display:none}