/**
 * Mystery Machine Runner — CSS
 * @file  Minimal styles for the Canvas-based runner game.
 * @version 2.0.0
 * @author Kindware / Brutus1066
 */

.runner-page h1 {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, #4aa8d8, var(--color-lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.game-canvas-wrap {
  aspect-ratio: 16 / 9;
  max-height: 500px;
  box-shadow: 0 4px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
}

.runner-controls-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: var(--space-sm);
}

.runner-controls-hint kbd {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.75rem;
}