html, body { margin: 0; padding: 0; height: 100%; background: #050505; overflow: hidden; }
#c { display: block; width: 100vw; height: 100vh; image-rendering: pixelated; image-rendering: crisp-edges; }
#hud {
  position: fixed; top: 10px; left: 12px; color: #d8c9a3;
  font: 13px/1.5 monospace; text-shadow: 0 1px 2px #000; pointer-events: none;
}
#loader {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: #050505; color: #d8c9a3; font: 14px monospace; z-index: 10;
  transition: opacity 0.4s;
}
#barwrap { width: 320px; height: 8px; background: #1a1712; border: 1px solid #3a3226; }
#bar { width: 0%; height: 100%; background: #b98a4a; transition: width 0.15s; }
#die {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; background: rgba(5,5,5,0.9); color: #e0cfa0;
  font: 15px monospace; z-index: 20;
}
#die button { font: 14px monospace; padding: 6px 14px; background: #2a2216; color: #e8d8b0; border: 1px solid #6a5530; cursor: pointer; }