:root {
  --bg: #111827;
  --panel: #172033;
  --accent: #facc15;
  --accent-text: #211900;
  --page-glow: rgba(96, 165, 250, 0.2);
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(239, 68, 68, 0.17), transparent 24rem),
    radial-gradient(circle at 84% 12%, rgba(59, 130, 246, 0.18), transparent 25rem),
    linear-gradient(180deg, #111827, #070b13);
}

#game-canvas {
  background: #111827;
  touch-action: manipulation;
}

.stage,
.side-panel,
.camera-card,
.control-card {
  background: rgba(19, 27, 43, 0.92);
}

.direction-key {
  display: grid;
  grid-template-columns: repeat(3, 2rem);
  justify-content: center;
  gap: 0.3rem;
  margin-top: 1rem;
  color: var(--muted);
  text-align: center;
}

.direction-key span {
  display: grid;
  min-height: 2rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.direction-key span:first-child {
  grid-column: 2;
  grid-row: 1;
}

.direction-key span:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.direction-key span:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.direction-key span:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}