/* Les Auto-Tampons : chargée seulement sur /jeu/auto-tampons (src/html-jeux.js). Style Le Parc, sans lueur. */

.carte-jeu[data-jeu="auto-tampons"],
.jeu[data-jeu="auto-tampons"] {
  --jeu: var(--bleu);
}

.jeu[data-jeu="auto-tampons"] {
  gap: 0.45rem;
}

/* Badge puis statut, l’un sous l’autre : la hauteur ne bouge pas quand le texte change. */
.tampons-bandeau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  max-width: 34rem;
}

.tampons-badge {
  margin: 0;
  padding: 0.2rem 0.7rem;
  font-family: var(--police);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--encre);
  background: var(--jaune);
  border: 3px solid var(--encre);
  border-radius: 999px;
}

.tampons-statut {
  /* Deux lignes gardées : le texte change sans pousser la piste. */
  min-height: 2.8em;
  text-align: center;
  margin: 0;
  line-height: 1.4;
  font-family: var(--police);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--encre);
}

/* La piste tient dans l’écran, sans défilement, en portrait comme en paysage. */
.tampons-scene {
  --reserve-tampons: 16.5rem;
  position: relative;
  width: min(100%, calc(100dvh - var(--reserve-tampons)), 34rem);
  min-width: 14rem;
  aspect-ratio: 1;
}

.toile-tampons {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
}

/* Joystick virtuel : il naît sous le doigt. */
.tampons-joystick {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tampons-joystick::before,
.tampons-manette {
  position: absolute;
  border: 3px solid var(--encre);
  border-radius: 50%;
}

.tampons-joystick::before {
  content: "";
  left: -44px;
  top: -44px;
  width: 88px;
  height: 88px;
  background: color-mix(in srgb, var(--blanc) 55%, transparent);
}

.tampons-manette {
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  background: var(--jaune);
}

.tampons-joystick[hidden] {
  display: none;
}

.tampons-klaxon {
  min-height: 48px;
  width: min(100%, 20rem);
  touch-action: manipulation;
}

/* Fin de manche : un ticket posé sur la piste. Sur un petit écran, il peut couvrir
   le bouton Klaxon (inutile pendant la pause) plutôt que de sortir de l’écran. */
.tampons-fin {
  position: absolute;
  z-index: 2;
  inset: 4% -0.25rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-height: calc(96% + 3.5rem);
  overflow: auto;
  padding: 0.8rem 0.8rem 1rem;
  text-align: center;
  font-family: var(--police);
  color: var(--encre);
  background: var(--blanc);
  border: 4px solid var(--encre);
  border-radius: 18px;
  box-shadow: var(--ombre-carte);
}

.tampons-fin[hidden] {
  display: none;
}

.tampons-fin-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.3rem;
  line-height: 1.2;
}

.tampons-classement {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tampons-classement .tampons-moi {
  color: var(--rouge-fonce);
  font-weight: 800;
}

.tampons-fin .ligne-boutons {
  flex-wrap: wrap;
  justify-content: center;
}

.tampons-fin .bouton {
  min-height: 44px;
  padding-inline: 0.9rem;
}

.tampons-fin .consigne {
  margin: 0;
}

@media (max-width: 720px) {
  .tampons-scene {
    --reserve-tampons: 24rem;
  }

  /* Le titre laisse la place à la bulle de discussion, en haut à gauche. */
  .jeu[data-jeu="auto-tampons"] .ligne-jeu {
    padding-left: 3.4rem;
  }
}

/* Paysage sur téléphone : la piste à gauche, le reste à droite. */
@media (orientation: landscape) and (max-height: 520px) {
  .jeu[data-jeu="auto-tampons"] {
    display: grid;
    grid-template-columns: auto minmax(10rem, 18rem);
    column-gap: 0.75rem;
    align-items: start;
    justify-content: center;
  }

  .jeu[data-jeu="auto-tampons"] > .tampons-scene {
    grid-column: 1;
    grid-row: 1 / span 6;
    width: calc(100dvh - 5.5rem);
  }

  .jeu[data-jeu="auto-tampons"] > :not(.tampons-scene) {
    grid-column: 2;
  }
}

/* Le ticket de fin arrive en glissant. */
@media (prefers-reduced-motion: no-preference) {
  .tampons-fin:not([hidden]) {
    animation: tampons-ticket 0.35s ease-out;
  }

  @keyframes tampons-ticket {
    from {
      transform: translateY(1.2rem);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}