/* Styles du jeu de tir */

.tableau-bord {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 12px;
}

.zone-tir {
  position: relative;
  height: 440px;
  border: 2px solid var(--violet);
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 255, 255, 0.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.05) 39px 40px),
    linear-gradient(#0a1a6e, #3a1a8a);            /* un quadrillage de stand de tir */
  overflow: hidden;
  cursor: crosshair;                               /* le curseur en forme de viseur */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  touch-action: manipulation;
}

/* Une cible : des cercles rouges et blancs, dessinés en CSS */
.cible {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: crosshair;
  background: radial-gradient(circle, #ff3b3b 0 18%, #fff 18% 36%, #ff3b3b 36% 54%, #fff 54% 72%, #ff3b3b 72%);
  box-shadow: 0 0 12px rgba(255, 59, 59, 0.7);
  /* elle rétrécit jusqu'à disparaître ; la durée est choisie par le JavaScript */
  animation: retrecir linear forwards;
}
@keyframes retrecir { from { transform: scale(1); } to { transform: scale(0); } }

/* Le petit « +1 » qui s'envole quand on touche */
.touche {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  color: #3ddc84;
  pointer-events: none;
  animation: envol 0.6s forwards;
}
@keyframes envol { to { transform: translateY(-40px); opacity: 0; } }

#jouer { border: none; cursor: pointer; color: var(--texte); margin: 0; }
.fin { font-size: 26px; font-weight: bold; text-align: center; margin: 0; }