html, body { margin: 0; height: 100%; background: #0b0908; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; }
#game { image-rendering: pixelated; image-rendering: crisp-edges; cursor: none; display: block; touch-action: none; }
.nojs { color: #d9caa6; font: 16px Georgia, serif; }

#devhud {
  position: fixed; top: 8px; right: 8px; width: 330px; max-height: calc(100% - 16px); overflow: auto;
  background: rgba(20, 17, 16, 0.96); color: #d9caa6; border: 1px solid #4d3828;
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; padding: 8px; z-index: 10; box-sizing: border-box;
}
#devhud .hd { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; }
#devhud .hd span { color: #8e8a82; flex: 1; }
#devhud .sec { color: #e39a3b; margin: 8px 0 3px; font-weight: bold; }
#devhud label { display: block; }
#devhud input { background: #1d1916; color: #ebe0c4; border: 1px solid #4d3828; font: inherit; padding: 1px 3px; }
#devhud input[type=number] { width: 52px; }
#devhud table { width: 100%; border-collapse: collapse; }
#devhud td { padding: 1px 2px; vertical-align: top; word-break: break-all; }
#devhud td input { width: 120px; }
#devhud select { background: #1d1916; color: #ebe0c4; border: 1px solid #4d3828; font: inherit; max-width: 200px; }
#devhud button { background: #2e2219; color: #d9caa6; border: 1px solid #614732; font: inherit; padding: 1px 6px; cursor: pointer; }
#devhud button:hover { border-color: #e39a3b; color: #f5c96a; }
#devhud .row { display: flex; gap: 4px; flex-wrap: wrap; margin: 3px 0; }
#devhud i { color: #706d67; font-style: normal; }