/* ============================================================
   Particularite QJ2Gw2 : voiture obstacle a klaxonner
   ============================================================
   Klaxon : bouton rond blanc avec bordure noire 3px, contenant
   l'icone Material Symbols "campaign" (retournee horizontalement
   pour pointer dans le bon sens). Positionne sous la voiture
   joueur (centre ecran), legerement decale en bas a droite.
*/

.honk-btn {
  position: fixed;
  top: calc(50% + 28px);
  left: calc(50% + 28px);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  z-index: 110;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease,
              background 0.1s ease, color 0.1s ease;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.honk-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.honk-btn .material-symbols-outlined {
  font-size: 28px;
  font-variation-settings:
    'FILL' 1,
    'wght' 500,
    'GRAD' 0,
    'opsz' 24;
  transform: scaleX(-1);
}

/* Feedback au tap : inversion noir/blanc */
.honk-btn:active {
  background: var(--ink);
  color: var(--paper);
}