/* Styles propres à Hyper Drift Grid.
   Les styles communs (boutons, en-tête, modale, stats...) viennent
   déjà de css/style.css : ici uniquement la zone de jeu (canvas). */

.hdg-panel {
  padding: 0;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 82vh;
  min-height: 420px;
  max-height: 860px;
  background: #0a0514;
  cursor: default;
}

/* ---------- Pilotage tactile (téléphone, tablette) ---------- */
#gameCanvas { touch-action: none; }

.hdg-panel { position: relative; }

/* Deux triangles discrets rappellent où poser le doigt pour tourner. */
.hdg-hint {
  display: none;
  position: absolute;
  bottom: 18px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  opacity: 0.4;
  pointer-events: none;
}
.hdg-hint-left { left: 18px; border-right: 30px solid #ffffff; }
.hdg-hint-right { right: 18px; border-left: 30px solid #ffffff; }

@media (hover: none) and (pointer: coarse) {
  .hdg-hint { display: block; }
  #gameCanvas { height: 70vh; min-height: 320px; }
}