* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(120% 100% at 50% 0%, #2a3550 0%, #141a28 65%);
  color: #eef2fa;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  display: flex; justify-content: center;
}
.wrap { width: 100%; max-width: 760px; padding: 20px 16px 40px; }
.head { text-align: center; }
.head h1 { margin: 0; font-size: 1.7rem; letter-spacing: .05em; }
.sub { color: #9aa6c0; margin: 6px 0 0; font-size: .88rem; }

.hud {
  display: flex; justify-content: space-between; align-items: center;
  margin: 16px 0 8px; font-weight: 700;
}
.money { color: #ffd866; font-size: 1.1rem; }
.wave { color: #9aa6c0; font-size: .9rem; letter-spacing: .1em; }

canvas {
  width: 100%; height: auto; display: block;
  background: linear-gradient(180deg, #1b2740 0%, #243a2c 70%, #2e4a35 100%);
  border-radius: 12px; border: 2px solid #2a3650;
  image-rendering: auto;
}

.units {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: 14px 0 4px;
}
.unit-btn {
  background: #1c2438; border: 2px solid #34405c; border-radius: 12px;
  padding: 10px 8px; min-width: 92px; cursor: pointer; color: #eef2fa;
  text-align: center; display: flex; flex-direction: column; gap: 3px;
  transition: transform .08s, border-color .15s, opacity .15s;
}
.unit-btn .emo { font-size: 1.6rem; }
.unit-btn .nm { font-size: .82rem; font-weight: 700; }
.unit-btn .cost { font-size: .78rem; color: #ffd866; }
.unit-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: #6fcf97; }
.unit-btn:active:not(:disabled) { transform: scale(.95); }
.unit-btn:disabled { opacity: .4; cursor: not-allowed; }

.msg {
  text-align: center; margin: 18px 0 0; padding: 18px;
  background: #1c2438; border-radius: 12px;
}
.msg p { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; }
.msg button {
  background: #6fcf97; color: #0c2018; border: none; border-radius: 10px;
  padding: 10px 26px; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.msg button:active { transform: scale(.96); }

.foot { margin-top: 20px; color: #8b96ad; font-size: .76rem; text-align: center; line-height: 1.6; }