body { margin: 0; background: #1c1612; color: #efe6d8; font-family: "Source Sans 3", sans-serif; }
.shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.hud { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: #2a2218; border-bottom: 1px solid #8a6a3e; }
.hud .hof { display: none !important; }
.viewport { padding: 20px; max-width: 42rem; }
.lede { color: #9a9184; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cat { background: #3a2c20; color: #efe6d8; border: 1px solid #8a6a3e; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.cat.on { background: #c4a574; color: #1c1612; }
.choices { display: grid; gap: 8px; margin: 14px 0; }
.choices button, .go, #fifty, #crowd, #again {
  font: inherit; background: #3a2c20; color: #efe6d8; border: 1px solid #8a6a3e;
  border-radius: 8px; padding: 10px 14px; cursor: pointer; text-align: left;
}
.go { background: #c4a574; color: #1c1612; font-weight: 700; }
button:disabled { opacity: 0.45; cursor: default; }
.hint-row { display: flex; flex-wrap: wrap; gap: 8px; }
.crowd-bar { display: grid; gap: 6px; margin: 8px 0 12px; }
.crowd-row { display: grid; grid-template-columns: 1fr minmax(3rem, 40%); gap: 8px; align-items: center; color: #9a9184; font-size: 0.85rem; }
.crowd-row b {
  display: block; background: #c4a574; color: #1c1612;
  border-radius: 4px; padding: 2px 6px; font-weight: 700; min-width: 2.5rem;
}