/* The HUD (hotbar, hearts, depth), tooltips, the chat log and achievement pop-ups. */
/* ---------- HUD */
#hud{position:fixed;inset:0 0 auto 0;height:82px;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;padding:8px 14px;pointer-events:none;background:linear-gradient(rgba(4,6,18,.7),rgba(4,6,18,.32) 70%,transparent)}
#hud>*{pointer-events:auto}
.itemname{font:700 15px var(--px);text-shadow:var(--ol1);height:21px;color:#fff}
.hotbar{display:flex;gap:4px}
.slot{position:relative;width:46px;height:46px;display:grid;place-items:center;background:var(--slot);border:2px solid var(--edge);border-radius:8px;box-shadow:inset 0 0 0 2px var(--hi);cursor:inherit;padding:0;transition:transform .08s}
.slot canvas{width:34px;height:34px;image-rendering:pixelated}
.slot.empty{opacity:.65}
.slot.sel{border-color:var(--gold);transform:scale(1.1);box-shadow:inset 0 0 0 2px rgba(255,212,71,.45),0 0 12px rgba(255,212,71,.45)}
.slot:hover{border-color:#fff}
.slot:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.hud-right{text-align:right}
.lifelabel{font:700 15px var(--px);text-shadow:var(--ol1)}
.hearts{display:flex;gap:2px;justify-content:flex-end;margin:3px 0}
.hearts canvas{width:22px;height:20px;image-rendering:pixelated}
.hearts.beat canvas:first-child{animation:beat 1.4s ease-in-out infinite}
@keyframes beat{15%{transform:scale(1.25)}30%{transform:scale(1)}}
.depth{font:600 13px var(--px);color:#d7e6ff;text-shadow:var(--ol1)}
.tip{position:fixed;z-index:80;pointer-events:none;padding:6px 10px;background:rgba(18,24,60,.94);border:2px solid var(--edge);border-radius:8px;font:600 14px var(--px);text-shadow:var(--ol1);max-width:260px}
.tip .t{color:var(--gold)}.tip .d{color:#fff;font-weight:400}

/* ---------- chat + achievements */
#chat{position:fixed;left:14px;bottom:14px;z-index:60;display:grid;gap:3px;justify-items:start;max-width:min(92vw,430px);pointer-events:none}
#chat .line{font:700 15px var(--px);text-shadow:var(--ol1);padding:2px 8px;background:rgba(0,0,0,.4);border-radius:6px;animation:chatIn .18s steps(3);transition:opacity .8s}
#chat .line.out{opacity:0}
@keyframes chatIn{from{transform:translateX(-10px);opacity:0}}
#achv{position:fixed;left:50%;top:92px;transform:translateX(-50%);z-index:70;pointer-events:none;width:max-content;max-width:92vw}
.achv{display:flex;gap:12px;align-items:center;padding:10px 16px 10px 10px;background:var(--panel);border:2px solid var(--gold);border-radius:12px;box-shadow:0 0 0 2px #000,0 8px 0 rgba(0,0,0,.4),0 0 24px rgba(255,212,71,.35);animation:achvIn .35s cubic-bezier(.2,1.4,.4,1);transition:opacity .4s,transform .4s}
.achv.out{opacity:0;transform:translateY(-16px)}
.achv small{display:block;font:600 12px var(--px);color:var(--muted)}
.achv b{display:block;font:700 19px var(--px);color:var(--gold);text-shadow:var(--ol1)}
.achv span{display:block;font-size:13px;color:#fff}
@keyframes achvIn{from{transform:translateY(-30px) scale(.8);opacity:0}}
@media (max-width:640px){
  #hud{height:66px;padding:6px 8px}
  .itemname{display:none}
  .hotbar{gap:3px;margin-top:2px}
  .slot{width:34px;height:34px;border-radius:6px}
  .slot canvas{width:24px;height:24px}
  .slot .k{font-size:9px;left:2px}
  .hearts canvas{width:10px;height:9px}
  .lifelabel{font-size:12px}
  .depth{font-size:11px}
  #chat .line{font-size:14px}
  #achv{top:72px}
}