#hud { --hud: clamp(.78, 100vmin / 860, 1.12); }
.dh-dev { display: none !important; }
body.dh-debug .dh-dev { display: revert !important; }
body.dh-debug .top-controls.dh-dev { display: flex !important; }

#hud .needs {
  position: absolute;
  top: 372px;
  right: 12px;
  bottom: auto;
  left: auto;
  display: grid;
  width: 214px;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}
.need {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr 36px;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgb(4 14 20 / 46%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 8%) inset;
}
.need svg { width: 15px; height: 15px; fill: currentColor; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 55%)); }
.need[data-stat="health"] { color: #ff5d66; }
.need[data-stat="hunger"] { color: #f0a03a; }
.need[data-stat="thirst"] { color: #49c4ef; }
.need[data-stat="stamina"] { color: #4ed484; }
.need[data-stat="oxygen"] { color: #7ed4c8; }
.need span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.need b {
  color: #f4f8f8;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
}
.need.critical { background: rgb(72 16 18 / 55%); }
.need.critical svg { animation: dh-need-alert 1.6s ease-in-out infinite; }
@keyframes dh-need-alert { 50% { opacity: .45; } }
.meter { height: 5px; background: rgb(232 244 247 / 22%); }
#health { background: #e23b48; }
#hunger { background: #ef9224; }
#thirst { background: #2eafdf; }
#stamina { background: #2fce6e; }
#oxygen { background: #5ed0c4; }

#hud .hotbar { top: auto; right: auto; bottom: 18px; left: 50%; gap: 8px; transform: translateX(-50%); }
.slot {
  width: calc(64px);
  height: calc(64px);
  border: 1px solid rgb(166 214 220 / 28%);
  border-radius: 12px;
  background: rgb(7 22 32 / 70%);
  color: #e7f4f6;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.slot.selected {
  border-color: #e1c27a;
  background: rgb(22 58 68 / 88%);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgb(225 194 122 / 35%), 0 10px 24px rgb(2 10 16 / 30%);
}
.slot small { color: #9fd0d6; }
.slot b { color: #f3f7f8; letter-spacing: .02em; }

.player-count, .player-list {
  position: absolute;
  top: calc(16px * var(--hud));
  left: calc(16px * var(--hud));
  z-index: 3;
  border: 1px solid rgb(140 196 204 / 24%);
  border-radius: 12px;
  background: rgb(8 24 34 / 62%);
  color: #e7f3f6;
  backdrop-filter: blur(8px);
}
.player-count { padding: 7px 12px; font: inherit; font-size: 12px; letter-spacing: .04em; cursor: pointer; }
.player-list { top: calc(52px * var(--hud)); min-width: 180px; margin: 0; padding: 8px 0; list-style: none; }
.player-list li { padding: 6px 14px; font-size: 13px; }
.player-list .is-host { color: #e1c27a; }
#nameplates { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.nameplate {
  position: absolute;
  transform: translate(-50%, -120%);
  padding: 2px 8px;
  border-radius: 8px;
  background: rgb(6 20 28 / 55%);
  color: #e7f6f8;
  font-size: 13px;
  white-space: nowrap;
}
.boat-build-menu{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:6;display:grid;gap:8px;width:min(280px,80vw);padding:16px;pointer-events:auto;border:1px solid rgb(225 194 122 / 45%);border-radius:14px;background:rgb(8 24 34 / 88%);color:#e7f3f6}
.boat-build-menu button{padding:10px 12px;border:1px solid rgb(140 196 204 / 35%);border-radius:8px;background:#17323c;color:#e7f3f6;cursor:pointer}
#minimap-canvas { position: static; inset: auto; }
.minimap {
  border: 1px solid rgb(140 196 204 / 22%);
  border-radius: 14px;
  background: rgb(8 24 34 / 55%);
  transform: scale(var(--hud));
  transform-origin: top right;
}
.raft-upgrade { left: calc(16px * var(--hud)); bottom: calc(168px * var(--hud)); top: auto; right: auto; }
@media (max-width: 760px) {
  #hud .needs { top: 268px; right: 10px; width: 170px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  #hud .needs { top: 292px; width: 185px; }
  .hotbar { gap: 4px; }
  .slot { width: 54px; height: 54px; }
}