/* ==========================================================================
   ORBITAL DRIFT — page-local styles
   Only what the game page needs beyond the shared design system:
   responsive canvas presentation and the HUD chip row.
   ========================================================================== */

#game-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 600;
  background: #070b16;
  border: 1px solid #2f2f38;
  touch-action: none;             /* keep touch steering, block scroll hijack */
  cursor: pointer;
  user-select: none;
}

.game-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.hud-chip {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: #ededf1;
  background: #121217;
  border: 1px solid #2f2f38;
  padding: 8px 12px;
  white-space: nowrap;
}

.hud-chip--state {
  color: #c8ff3e;
  border-color: rgba(200, 255, 62, 0.45);
}

.hud-chip--hot {
  color: #ff5d5d;
  border-color: rgba(255, 93, 93, 0.55);
}

.hud-chip--pulse {
  color: #ffb454;
  border-color: rgba(255, 180, 84, 0.65);
  animation: pulseGlow 0.9s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  from { box-shadow: 0 0 2px rgba(255, 180, 84, 0.25); }
  to   { box-shadow: 0 0 10px rgba(255, 180, 84, 0.75); }
}

.hud-chip--combo {
  color: #3ddc97;
  border-color: rgba(61, 220, 151, 0.65);
}

@media (max-width: 640px) {
  .hud-chip { font-size: 10px; padding: 6px 10px; }
}