* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #333;
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
}

#hud {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  color: #fff;
  font: 800 1.2rem / 1.2 "Segoe UI", Arial, sans-serif;
  letter-spacing: 1px;
  padding: 14px 22px;
  border-radius: 14px;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  background: rgba(10, 14, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

#hud.hidden {
  display: none;
}

#hud.anim {
  animation: hudPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hudPop {
  0% { transform: translateX(-50%) scale(0.6); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

#hud.cart {
  color: #ffd200;
  border-color: rgba(255, 210, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.12), 0 0 24px rgba(255, 210, 0, 0.35), 0 8px 30px rgba(0, 0, 0, 0.5);
}

#hud.item {
  color: #6fe3ff;
  border-color: rgba(111, 227, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(111, 227, 255, 0.12), 0 0 24px rgba(111, 227, 255, 0.3), 0 8px 30px rgba(0, 0, 0, 0.5);
}

#hud.blocked {
  color: #ff5d5d;
  border-color: rgba(255, 93, 93, 0.55);
  background: rgba(40, 10, 14, 0.78);
  box-shadow: 0 0 0 3px rgba(255, 93, 93, 0.15), 0 0 26px rgba(255, 60, 60, 0.4), 0 8px 30px rgba(0, 0, 0, 0.5);
  animation: hudShake 0.4s;
}

@keyframes hudShake {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 8px)); }
  40% { transform: translateX(calc(-50% + 8px)); }
  60% { transform: translateX(calc(-50% - 5px)); }
  80% { transform: translateX(calc(-50% + 5px)); }
}