/* ==========================================================================
   ECHO DEEP — page-local styles
   Canvas presentation + HUD chips (sonar palette).
   ========================================================================== */

#game-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 600;
  background: #02060d;
  border: 1px solid #2f2f38;
  touch-action: none;
  cursor: crosshair;
  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: #8fffd0;
  border-color: rgba(143, 255, 208, 0.45);
}

.hud-chip--hot {
  color: #ff3d6e;
  border-color: rgba(255, 61, 110, 0.55);
}

.hud-chip--pulse {
  color: #8fffd0;
  border-color: rgba(143, 255, 208, 0.65);
  animation: pingReady 0.9s ease-in-out infinite alternate;
}

@keyframes pingReady {
  from { box-shadow: 0 0 2px rgba(143, 255, 208, 0.25); }
  to   { box-shadow: 0 0 10px rgba(143, 255, 208, 0.7); }
}

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