body {
  font-family: Arial, sans-serif;
  background:#1e1e1e;
  color:#f0f0f0;
  padding:20px;
}

#game {
  max-width:700px;
  margin:auto;
}

#story {
  margin-bottom:20px;
  font-size:18px;
}

.choice {
  /*display:block; stack elements vertically*/
  margin:3px 6px;
  padding:10px;
  background:#333;
  border:none;
  border-radius:8px;
  cursor:pointer;
  color:#fff;
  text-align:left;
}

.choice:hover {
  background:#444;
}

#inventory, #battleLog, #shop {
  margin-top:20px;
  padding:10px;
  background:#2c2c2c;
  border-radius:8px;
}

#healthBar, #CapitalBar {
  height:16px;
  width:100%;
  border:1px solid #555;
  background:#444;
  position:relative;
  padding:0;
  margin:0;
}

#healthFill, #CapitalFill {
  height:100%;
  background:#27ae60;
  width:100%;
  transition:width 0.3s;
}

#healthText, #CapitalText {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
}

#chartContainer {
  margin-top:20px;
  background:#2c2c2c;
  padding:10px;
  border-radius:8px;
}

canvas {
  width:100%;
  height:300px;
}

#topBar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 0 20px 0;
}

#bars {
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
  max-width:65%;
}

#controls {
  display:flex;
  gap:8px;
}


.smallBtn {
  margin:0;
  padding:4px 8px;
  font-size:13px;
  border-radius:6px;
}