:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body {
  margin: 0;
  background: #0b1020;
  color: #eef3ff;
}

.layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
}

.hud {
  background: #131a2f;
  border: 1px solid #2a355e;
  border-radius: 10px;
  padding: 12px;
}

.hud h1 {
  margin: 0 0 6px;
  font-size: 20px;
}

.hud p {
  margin: 4px 0;
  color: #b9c8f1;
}

.stats {
  display: flex;
  gap: 20px;
  margin: 10px 0 6px;
  font-weight: 700;
}

.message {
  color: #ffd966;
}

canvas {
  width: min(100%, 960px);
  height: auto;
  justify-self: center;
  border: 1px solid #2a355e;
  border-radius: 10px;
  background: #1f2a45;
}