* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0d0d1a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

canvas {
  image-rendering: pixelated;
  border: 2px solid #333;
}

#controls-bar {
  width: 960px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#controls-ref {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  flex: 1;
}

.key-group {
  color: #666;
  font: 11px/1.4 monospace;
  white-space: nowrap;
}

.key-group kbd {
  display: inline-block;
  background: #1a1a2e;
  color: #8ab4f8;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 0 4px;
  font: bold 10px/1.6 monospace;
  margin-right: 2px;
}

.key-group small {
  color: #555;
  font-size: 9px;
  margin-left: -1px;
  margin-right: 2px;
}

#new-game {
  color: #444;
  font: 11px monospace;
  text-decoration: none;
  white-space: nowrap;
}

#new-game:hover {
  color: #aaa;
}

#site-nav {
  width: 960px;
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

#site-nav a {
  font: 11px/1.4 monospace;
  color: #58a6ff;
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #1a1a2e;
}

#site-nav a:hover {
  color: #79c0ff;
  border-color: #58a6ff;
}