.game-racer {
  --rally-gold: #ffd76a;
  --rally-cyan: #61efff;
  --rally-ink: #07162f;
}

.game-racer .launch-panel {
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--rally-gold) 70%, transparent);
  background:
    radial-gradient(circle at 84% 12%, rgba(97, 239, 255, .26), transparent 32%),
    linear-gradient(145deg, rgba(5, 24, 53, .97), rgba(12, 69, 76, .94));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .45), inset 0 0 40px rgba(97, 239, 255, .09);
}

.game-racer .racer-brand-lockup {
  display: grid;
  gap: .2rem;
  margin: -.2rem auto 1rem;
  text-align: center;
  text-transform: uppercase;
}

.game-racer .racer-brand-lockup span {
  color: var(--rally-gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .28em;
}

.game-racer .racer-brand-lockup strong {
  color: #f7fffc;
  font-size: clamp(1.7rem, 5vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.04em;
  text-shadow: 0 3px 0 #14375f, 0 0 24px rgba(97, 239, 255, .42);
}

.game-racer .racer-brand-lockup small {
  color: #b9f7e8;
  letter-spacing: .08em;
}

.game-racer .canvas-wrap {
  border: 4px solid var(--rally-gold);
  background: repeating-linear-gradient(45deg, #f8f4df 0 12px, #15314d 12px 24px);
  box-shadow: 0 0 0 5px #102a49, 0 18px 55px rgba(0, 0, 0, .46), 0 0 35px rgba(97, 239, 255, .18);
}

.game-racer .scorebar {
  border-color: rgba(255, 215, 106, .62);
  background: linear-gradient(90deg, rgba(8, 31, 61, .96), rgba(12, 76, 76, .9));
}

.game-racer .controls button,
.game-racer .arcade-toolbar button,
.game-racer .arcade-toolbar select {
  border-color: rgba(97, 239, 255, .56);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
}

@media (max-width: 720px) {
  .game-racer .racer-brand-lockup strong { font-size: 2rem; }
  .game-racer .canvas-wrap { border-width: 3px; }
}
