/* Top-left HUD: title, HP / MP / food bars, clock / Lv / EXP / coins, the bag button and bag panel. */
#hud{position:fixed;left:16px;top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
#title{padding:8px 14px;background:var(--hud);border:1px solid var(--hud-line);border-radius:10px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);line-height:1.15}
#title b{display:block;font-size:16px;letter-spacing:.04em}
#title span{font-size:12px;opacity:.8}
/* leave room for the three buttons at the top right on a phone */
@media (max-width:480px){#title{max-width:calc(100vw - 32px - 3*44px - 2*8px - 10px);box-sizing:border-box}#title b{font-size:14px}}
#vitals{display:flex;flex-direction:column;gap:5px;width:min(220px,56vw)}
.bar{position:relative;height:18px;border-radius:9px;background:var(--hud);border:1px solid var(--hud-line);overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:8px;transition:width .15s}
.bar.hp i{background:linear-gradient(#ff8a7a,#e0483e)}
.bar.mp i{background:linear-gradient(#7cc4ff,#3f86e0)}
.bar.food{height:14px}
.bar.food i{background:linear-gradient(#ffc27a,#e0822e)}
.bar.food span{font-size:10px}
.bar.food.low{animation:low 0.9s ease-in-out infinite}
@keyframes low{50%{border-color:#ff6a5a;box-shadow:0 0 0 2px rgba(255,106,90,.5)}}
#bagHint{font-size:11px;opacity:.8;pointer-events:none}
#bagHint[hidden]{display:none}
.bar span{position:absolute;inset:0;display:flex;align-items:center;padding:0 9px;font-size:11px;font-weight:700;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#info{display:flex;gap:6px;flex-wrap:wrap}
#info>span[hidden]{display:none}
#swExp{color:#cfe3ff}
#helmText{color:#fff1b8}
#info>span,#bagBtn{padding:2px 9px;border-radius:9px;background:var(--hud);border:1px solid var(--hud-line);font-size:11px;font-weight:700;letter-spacing:.04em}
#coinText{display:inline-flex;align-items:center;gap:4px}
#coinText svg{width:14px;height:14px;fill:#e8b53a;stroke:#a8741a;stroke-width:2}
#bagBtn{pointer-events:auto;min-height:24px;display:inline-flex;align-items:center;gap:4px;font-family:inherit;cursor:pointer;background:var(--gold);color:#3b2410;border-color:transparent}
#bagBtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#sleepBtn{pointer-events:auto;min-height:24px;padding:2px 9px;display:inline-flex;align-items:center;border-radius:9px;background:var(--hud);border:1px solid var(--hud-line);color:var(--ink);cursor:pointer}
#sleepBtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#sleepBtn[aria-pressed="true"]{background:#6f86c9;color:#fff;border-color:transparent}
#sleepBtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#bagBtn.got{animation:got .7s ease-out}
@keyframes got{0%{transform:scale(1)}30%{transform:scale(1.25);box-shadow:0 0 0 6px rgba(255,217,128,.45)}100%{transform:scale(1)}}
#bagBtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#bag{pointer-events:auto;display:grid;grid-template-columns:repeat(3,56px);gap:6px;padding:8px;width:max-content;background:var(--hud);border:1px solid var(--hud-line);border-radius:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#bag[hidden]{display:none}
#bag.big{grid-template-columns:repeat(4,56px)}
#bag .slot[hidden]{display:none}
.slot{position:relative;width:56px;height:56px;padding:0;border-radius:9px;background:rgba(4,20,22,.45);border:1px solid var(--hud-line);color:var(--ink);font:inherit}
.slot.food{cursor:pointer}
.slot.food:hover{border-color:var(--gold)}
.slot.held{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.slot.full{background:rgba(255,236,190,.14)}
.slot svg{position:absolute;left:12px;top:4px;width:32px;height:32px}
.slot .nm{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-size:10px;line-height:1;opacity:.85;white-space:nowrap;overflow:hidden}
.slot b{position:absolute;right:4px;top:2px;font-size:11px;font-weight:700;color:var(--gold);text-shadow:0 1px 2px rgba(0,0,0,.7)}
/* the performance box (perf.js): under the minimap (top right), clear of the joystick and the skill buttons */
#perf{position:fixed;right:8px;top:186px;padding:6px 8px;background:rgba(0,0,0,.72);color:#e8f0e4;border-radius:8px;z-index:9;pointer-events:auto;cursor:copy;max-width:calc(100vw - 16px);overflow:auto}
#perf pre{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.35;white-space:pre}
#perf b{font-weight:700}
#perf b.g{color:#7ee07a}
#perf b.y{color:#ffd54a}
#perf b.r{color:#ff5a4f}
#perf i{display:block;margin-top:3px;max-width:15em;white-space:normal;font-style:normal;opacity:.75;font-size:.8em;line-height:1.3}
#perf button{float:right;margin:0 0 4px 8px;min-width:40px;min-height:30px;border-radius:7px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font:700 14px system-ui,sans-serif;cursor:pointer}
#perf[hidden]{display:none}