* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0d2f16;
  color: #e9f5e0;
  font-family: "Courier New", monospace;
}

.layout {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: #1d4c2b;
  border: 2px solid #a4c2a0;
  box-shadow: 0 0 0 4px #0b2411;
  position: relative;
}

h1 {
  margin: 0;
  letter-spacing: 1px;
  color: #f2f7f0;
  text-shadow: 1px 1px 0 #0b2411;
}

#ui-panel {
  background: #e3f1da;
  color: #103019;
  border: 2px solid #a3c1a0;
  padding: 8px 12px;
  width: 800px;
  max-width: 100%;
  text-align: center;
  box-shadow: 0 2px 0 #0b2411;
}

#stats {
  font-weight: bold;
  margin-bottom: 4px;
}

#instructions {
  font-size: 14px;
}

#tower-legend {
  font-size: 13px;
  color: #184624;
  margin-bottom: 6px;
}

#tower-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.tower-button {
  font-family: "Courier New", monospace;
  background: #cde8d3;
  color: #0b2411;
  border: 2px solid #a3c1a0;
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: 0 2px 0 #0b2411;
}

.tower-button.active {
  background: #f7fff3;
  border-color: #d24b4b;
  box-shadow: 0 2px 0 #5a0f0f;
}

canvas {
  border: 3px solid #dce9d4;
  background: #b8d7c0;
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px #0b2411, 0 0 20px rgba(0, 0, 0, 0.35);
}

#level-complete {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

#level-complete.hidden {
  display: none;
}

#level-complete .modal {
  background: #f7fff3;
  color: #0b2411;
  border: 3px solid #d24b4b;
  box-shadow: 0 0 0 3px #5a0f0f, 0 6px 0 #0b2411;
  padding: 16px 24px;
  text-align: center;
  font-family: "Courier New", monospace;
}

#level-complete h2 {
  margin: 0 0 8px;
  color: #b02222;
}

#level-complete button {
  margin-top: 8px;
  font-family: "Courier New", monospace;
  padding: 8px 14px;
  border: 2px solid #a3c1a0;
  background: #cde8d3;
  cursor: pointer;
  box-shadow: 0 2px 0 #0b2411;
}