* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: #0a140a;
  color: #d8e0d8;
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
}

#topbar {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 16px;
  background: linear-gradient(#23301f, #16200f);
  border-bottom: 2px solid #3a5a2a;
}
.logo { font-weight: 800; letter-spacing: 2px; font-size: 20px; color: #c9a227; }
.logo span { color: #6fa8ff; }
.res { font-size: 15px; }
.res b { color: #fff; }
.ico.gold { color: #ffd23f; }
.ico.wood { color: #8b5a2b; }
.hint { margin-left: auto; font-size: 12px; opacity: 0.6; }

#game {
  display: block;
  background: #0a140a;
  cursor: crosshair;
  margin: 0 auto;
}

#bottombar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  background: linear-gradient(#16200f, #23301f);
  border-top: 2px solid #3a5a2a;
}
#selinfo {
  min-width: 180px;
  font-size: 13px;
  line-height: 1.3;
  color: #cfe0cf;
}
#commands { display: flex; gap: 8px; flex: 1; }
button.cmd {
  background: #2c3a22;
  border: 1px solid #4a6a34;
  color: #e6efe0;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  font-size: 12px;
}
button.cmd:hover { background: #3a4d2c; }
button.cmd.disabled, button.cmd:disabled {
  opacity: 0.4; cursor: not-allowed;
}
button.cmd .lbl { font-weight: 600; }
button.cmd .sub { font-size: 10px; color: #c9a227; }

#messages {
  min-width: 200px;
  text-align: right;
  font-size: 12px;
  color: #ffd27a;
}
#messages div { opacity: 0.9; }