body {
  background: #201c1b;
  color: #eee;
  font-family: 'Georgia', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}
#game-container {
  background: #2e2826;
  padding: 2em;
  border-radius: 10px;
  max-width: 600px;
  box-shadow: 0 6px 24px #000a;
}
#hud {
  background: #241f1e;
  color: #f0e6d2;
  border-radius: 8px;
  padding: 0.75em 1em;
  margin-bottom: 1em;
  box-shadow: inset 0 0 6px #0007;
  font-size: 0.95em;
}
#hud .hud-top {
  margin-bottom: 0.5em;
}
#hud .hud-hp {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
#hud .hp-bar {
  flex: 1;
  height: 10px;
  background: #3a2f2b;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 4px #000a;
}
#hud .hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #b33, #e66);
  width: 0%;
  transition: width 0.25s ease;
}
#hud .hp-text {
  font-family: 'Consolas', 'Monaco', monospace;
  color: #edd19b;
}
#hud .hud-inv {
  margin-top: 0.5em;
}
#hud .hud-actions {
  margin-top: 0.5em;
}
#hud .hud-actions button {
  padding: 0.35em 0.9em;
  font-size: 0.9em;
  border-radius: 6px;
  border: none;
  background: #5b7c3b;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
#hud .hud-actions button:hover {
  background: #749d4a;
}
#story {
  margin-bottom: 1.5em;
  font-size: 1.12em;
  min-height: 6em;
}
#choices button {
  margin: 0.33em 0.5em 0.33em 0;
  font-size: 1em;
  padding: 0.6em 1.5em;
  border-radius: 6px;
  border: none;
  background: #7c5d41;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
#choices button:hover {
  background: #a78453;
}
#dice {
  margin-top: 1.2em;
  font-size: 1em;
  color: #edd19b;
  font-family: 'Consolas', 'Monaco', monospace;
}
#map {
  margin: 0.5em 0 1em 0;
  display: grid;
  grid-template-columns: repeat(5, 18px);
  gap: 4px;
}
#map .cell {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #3a2f2b;
  box-shadow: inset 0 0 3px #000a;
  opacity: 0.4;
}
#map .cell.discovered {
  opacity: 1;
}
#map .cell.player {
  outline: 2px solid #edd19b;
  outline-offset: -2px;
}
#map .cell.special { background: #5a463f; }
#map .cell.start { background: #4a3b35; }
#map .cell.goblin { background: #7a3b34; }
#map .cell.trap { background: #6a4e2e; }
#map .cell.treasure { background: #8b6b2a; }
#map .cell.npc { background: #355b7a; }
#map .cell.building { background: #3f6a4e; }
#map .cell.plant { background: #2f6a3a; }
#map .cell.satchel { background: #5c3a7a; }

#legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 0.5em;
  color: #edd19b;
  font-size: 0.9em;
}
#legend .item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#legend .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: inset 0 0 2px #000a;
}
#movement {
  display: grid;
  grid-template-columns: 48px 48px 48px;
  grid-template-rows: 36px 36px 36px;
  gap: 6px;
  justify-content: start;
  margin: 0.25em 0 0.75em 0;
}
#movement button {
  font-size: 0.9em;
  padding: 0.25em 0.5em;
  border-radius: 6px;
  border: none;
  background: #7c5d41;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
#movement button:hover { background: #a78453; }
#movement button:disabled {
  background: #574536;
  cursor: not-allowed;
  opacity: 0.6;
}
#move-n { grid-column: 2; grid-row: 1; }
#move-w { grid-column: 1; grid-row: 2; }
#move-e { grid-column: 3; grid-row: 2; }
#move-s { grid-column: 2; grid-row: 3; }
#quests {
  background: #241f1e;
  color: #f0e6d2;
  border-radius: 8px;
  padding: 0.75em 1em;
  margin-bottom: 1em;
  box-shadow: inset 0 0 6px #0007;
  font-size: 0.95em;
}
#quests .q-title {
  font-weight: bold;
  margin-bottom: 0.25em;
}
#quests .q-item {
  margin: 0.15em 0;
  opacity: 0.95;
}
#quests .q-item.completed {
  opacity: 0.6;
  text-decoration: line-through;
}