/* Le Tape-Taupe : chargée seulement sur /jeu/tape-taupe (src/html-jeux.js). Style Le Parc, sans lueur.
   Tout ce qui bouge passe par transform et opacity. */

.jeu[data-jeu="tape-taupe"] {
  --jeu: var(--rouge);
  --fourrure: #8c5a3c;
  --ventre: #e9c39b;
  --nez: #f28fad;
  gap: 0.45rem;
}

/* Score, temps, combo, record : une ligne de pastilles de taille fixe. */
.taupe-tableau {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.taupe-compteur {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  padding: 0.15rem 0.6rem;
  font-family: var(--police);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--encre);
  background: var(--blanc);
  border: 3px solid var(--encre);
  border-radius: 999px;
}

.taupe-compteur strong {
  min-width: 2.2ch;
  text-align: right;
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.taupe-etiquette {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jeu[data-jeu="tape-taupe"]:has(.est-frenesie) #taupe-temps {
  color: var(--rouge-fonce);
}

/* Le terrain tient dans l’écran sans défilement : carré en 3x3, 4/3 en 3x4. */
.taupe-scene {
  --reserve-taupe: 15rem;
  --ratio: 1;
  position: relative;
  width: min(100%, calc((100dvh - var(--reserve-taupe)) * var(--ratio)), 30rem);
  min-width: 11rem;
  aspect-ratio: var(--ratio);
}

.taupe-scene[data-cases="12"] {
  --ratio: 4 / 3;
  width: min(100%, calc((100dvh - var(--reserve-taupe)) * 4 / 3), 40rem);
}

@media (min-width: 721px) {
  .taupe-scene:not([data-cases]) {
    --ratio: 4 / 3;
    width: min(100%, calc((100dvh - var(--reserve-taupe)) * 4 / 3), 40rem);
  }
}

.taupe-grille {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2%;
  padding: 3%;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgb(255 255 255 / 0.35) 18px 36px),
    var(--jaune-pale);
  border: 4px solid var(--encre);
  border-radius: 18px;
  box-shadow: var(--ombre-carte);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.taupe-scene[data-cases="12"] .taupe-grille {
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 721px) {
  .taupe-scene:not([data-cases]) .taupe-grille {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (hover: hover) and (pointer: fine) {
  .taupe-scene.en-jeu .taupe-grille {
    cursor: none;
  }
}

/* Un trou : la fosse sombre, la taupe qui en sort, son bord devant. */
.taupe-trou {
  position: relative;
  min-width: 44px;
  min-height: 44px;
}

.taupe-trou[hidden] {
  display: none;
}

.taupe-trou::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  height: 28%;
  background: var(--encre);
  border-bottom: 5px solid #b9824f;
  border-radius: 50%;
}

.taupe-fosse {
  position: absolute;
  left: 8%;
  right: 8%;
  top: -6%;
  bottom: 22%;
  overflow: hidden;
  pointer-events: none;
}

.taupe-bete {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -2%;
  height: 92%;
  transform: translateY(105%);
  transform-origin: 50% 100%;
  transition: transform 160ms var(--ease-sortie);
}

.taupe-bete svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.est-sortie .taupe-bete {
  transform: translateY(0);
  transition-duration: 110ms;
}

/* Taupe touchée : écrasée d’un coup, puis elle rentre. */
.est-touchee .taupe-bete {
  transform: translateY(22%) scale(1.14, 0.6);
  transition-duration: 60ms;
}

.est-ratee .taupe-bete {
  transform: translateY(8%) rotate(-6deg);
  transition-duration: 120ms;
}

.taupe-corps {
  fill: var(--fourrure);
}

.taupe-ventre {
  fill: var(--ventre);
}

.t-doree .taupe-corps {
  fill: var(--jaune);
}

.t-doree .taupe-ventre {
  fill: var(--blanc);
}

.taupe-casque,
.taupe-fele,
.taupe-yeux-x,
.taupe-langue,
.taupe-etoile,
.taupe-barto,
.taupe-bulle {
  display: none;
}

.t-casque .taupe-casque,
.est-fele .taupe-fele,
.t-doree .taupe-etoile {
  display: inline;
}

.est-touchee .taupe-yeux,
.est-touchee .taupe-dents {
  display: none;
}

.est-touchee .taupe-yeux-x,
.est-ratee .taupe-langue {
  display: inline;
}

/* Barto, le ticket du parc : il ne faut pas le taper. */
.t-barto .taupe-dessin {
  display: none;
}

.t-barto .taupe-barto {
  display: block;
}

.taupe-bulle {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -6%;
  margin: 0;
  padding: 0.05rem 0.45rem;
  font-family: var(--police-titre);
  font-size: clamp(0.7rem, 2.6vw, 1rem);
  white-space: nowrap;
  color: var(--encre);
  background: var(--blanc);
  border: 3px solid var(--encre);
  border-radius: 999px;
  pointer-events: none;
  transform: translateX(-50%);
}

.t-barto.est-sortie .taupe-bulle,
.t-barto.est-touchee .taupe-bulle {
  display: block;
}

.taupe-touche {
  position: absolute;
  right: 4%;
  top: 2%;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--encre-douce);
  pointer-events: none;
}

@media not ((hover: hover) and (pointer: fine)) {
  .taupe-touche {
    display: none;
  }
}

/* Le maillet en mousse suit le doigt ou la souris. */
.taupe-maillet {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
}

.taupe-scene.maillet-visible .taupe-maillet {
  opacity: 1;
}

.taupe-maillet-tete,
.taupe-maillet-manche {
  position: absolute;
  border: 3px solid var(--encre);
}

.taupe-maillet-tete {
  left: -30px;
  top: -52px;
  width: 60px;
  height: 34px;
  background:
    linear-gradient(90deg, transparent 0 38%, var(--blanc) 38% 52%, transparent 52%),
    var(--rouge-bouton);
  border-radius: 12px;
  transform-origin: 70% 100%;
}

.taupe-maillet-manche {
  left: 10px;
  top: -22px;
  width: 12px;
  height: 46px;
  background: var(--jaune);
  border-radius: 6px;
  transform: rotate(-28deg);
  transform-origin: 50% 0;
}

/* Points, POC et étoiles : un petit groupe d’éléments réutilisés. */
.taupe-eclats {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.taupe-eclat {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 0;
  height: 0;
  opacity: 0;
}

.taupe-eclat > span {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--police-titre);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.eclat-poc {
  font-size: clamp(1rem, 4vw, 1.5rem);
  color: var(--encre);
  -webkit-text-stroke: 0;
  text-shadow: 2px 2px 0 var(--blanc);
}

.eclat-points {
  margin-top: -1.4em;
  font-size: clamp(1.1rem, 4.6vw, 1.7rem);
  color: var(--rouge-fonce);
  text-shadow: 2px 2px 0 var(--blanc);
}

.est-dore .eclat-points {
  color: var(--encre);
  text-shadow: 2px 2px 0 var(--jaune);
}

.est-moins .eclat-points {
  color: var(--rouge-fonce);
}

.eclat-etoile {
  font-size: 1rem;
  color: var(--jaune);
  -webkit-text-stroke: 1px var(--encre);
}

/* Le combo en gros, la Frénésie, au milieu du terrain. */
.taupe-gros {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  margin: 0;
  padding: 0.1rem 0.9rem;
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  white-space: nowrap;
  color: var(--encre);
  background: var(--jaune);
  border: 4px solid var(--encre);
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.taupe-gros.est-frenesie-titre {
  color: var(--blanc);
  background: var(--rouge-fonce);
}

.taupe-scene.est-frenesie .taupe-grille {
  border-color: var(--rouge-fonce);
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgb(255 255 255 / 0.35) 18px 36px),
    #ffd6d9;
}

/* Départ, 3-2-1 et pause, posés sur le terrain. */
.taupe-depart {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 18px;
  background: rgb(255 246 229 / 0.72);
}

.taupe-depart[hidden] {
  display: none;
}

.taupe-jouer {
  min-height: 56px;
  min-width: 10rem;
  font-size: 1.3rem;
}

.taupe-decompte {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(3.5rem, 18vw, 6rem);
  line-height: 1;
  color: var(--encre);
}

.taupe-decompte[hidden] {
  display: none;
}

/* Fin de partie : un ticket posé sur le terrain. */
.taupe-fin {
  position: absolute;
  z-index: 5;
  inset: 3% 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.7rem;
  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);
}

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

.taupe-nouveau-record {
  margin: 0;
  padding: 0.15rem 1rem;
  font-family: var(--police-titre);
  font-size: clamp(1.4rem, 6vw, 2rem);
  color: var(--blanc);
  background: var(--rouge-fonce);
  border: 4px solid var(--encre);
  border-radius: 12px;
  transform: rotate(-2deg);
}

.taupe-nouveau-record[hidden] {
  display: none;
}

.taupe-fin-score {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.2rem;
}

.taupe-fin-score strong {
  font-size: 2.4rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.taupe-bilan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
  gap: 0.25rem 0.6rem;
  width: 100%;
  max-width: 26rem;
  margin: 0;
}

.taupe-bilan div {
  display: flex;
  flex-direction: column;
}

.taupe-bilan dt {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--encre-douce);
}

.taupe-bilan dd {
  margin: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

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

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

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

.taupe-message {
  min-height: 1.4em;
  margin: 0;
  text-align: center;
}

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

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

  /* Les quatre compteurs tiennent sur une ligne, même à 320 px. */
  .taupe-tableau {
    flex-wrap: nowrap;
    gap: 0.2rem;
  }

  .taupe-compteur {
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border-width: 2px;
  }

  .taupe-etiquette {
    font-size: 0.62rem;
    letter-spacing: 0;
  }

  .taupe-compteur strong {
    min-width: 1.6ch;
    font-size: 0.95rem;
  }
}

/* Petit téléphone (320 × 568) : le bandeau du site prend trois lignes, le terrain rétrécit. */
@media (max-width: 720px) and (max-height: 600px) {
  .taupe-scene {
    --reserve-taupe: 22.5rem;
  }
}

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

  .jeu[data-jeu="tape-taupe"] > .taupe-scene {
    width: calc((100dvh - 7.5rem) * var(--ratio));
    grid-column: 1;
    grid-row: 1 / span 6;
  }

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

/* Les mouvements : rejoués en alternant deux noms d’animation (aucun reflow forcé). */
@media (prefers-reduced-motion: no-preference) {
  .taupe-maillet.tape-a .taupe-maillet-tete {
    animation: taupe-coup-a 160ms var(--ease-sortie);
  }

  .taupe-maillet.tape-b .taupe-maillet-tete {
    animation: taupe-coup-b 160ms var(--ease-sortie);
  }

  .taupe-eclat.joue-a {
    animation: taupe-eclat-a 620ms var(--ease-sortie) forwards;
  }

  .taupe-eclat.joue-b {
    animation: taupe-eclat-b 620ms var(--ease-sortie) forwards;
  }

  .joue-a .eclat-points,
  .joue-b .eclat-points {
    animation: taupe-envol 620ms var(--ease-sortie) forwards;
  }

  .joue-a .eclat-poc {
    animation: taupe-poc-a 300ms var(--ease-rebond);
  }

  .joue-b .eclat-poc {
    animation: taupe-poc-b 300ms var(--ease-rebond);
  }

  .joue-a .eclat-etoile,
  .joue-b .eclat-etoile {
    animation: taupe-etoile 520ms var(--ease-sortie) forwards;
  }

  .taupe-gros.pop-a {
    animation: taupe-gros-a 900ms var(--ease-rebond) forwards;
  }

  .taupe-gros.pop-b {
    animation: taupe-gros-b 900ms var(--ease-rebond) forwards;
  }

  .est-bonk .taupe-bete {
    animation: taupe-bonk 160ms ease-out;
  }

  .t-doree.est-sortie .taupe-etoile {
    animation: taupe-scintille 500ms ease-in-out infinite alternate;
  }

  /* La dorée touchée : le terrain tremble un instant. */
  .taupe-scene.tremble-a .taupe-grille {
    animation: taupe-tremble 220ms linear;
  }

  .taupe-scene.tremble-b .taupe-grille {
    animation: taupe-tremble-b 220ms linear;
  }

  .taupe-decompte.pop-a {
    animation: taupe-gros-chiffre-a 900ms var(--ease-rebond);
  }

  .taupe-decompte.pop-b {
    animation: taupe-gros-chiffre-b 900ms var(--ease-rebond);
  }

  .taupe-fin:not([hidden]) {
    animation: taupe-ticket 320ms var(--ease-sortie);
  }

  .taupe-nouveau-record:not([hidden]) {
    animation: taupe-record 520ms var(--ease-rebond) 120ms backwards;
  }

  @keyframes taupe-coup-a {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(-38deg); }
    100% { transform: rotate(0deg); }
  }

  @keyframes taupe-coup-b {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(-38deg); }
    100% { transform: rotate(0deg); }
  }

  @keyframes taupe-eclat-a {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes taupe-eclat-b {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes taupe-envol {
    from { transform: translate(-50%, -30%); }
    to { transform: translate(-50%, -190%); }
  }

  @keyframes taupe-poc-a {
    from { transform: translate(-50%, -50%) scale(0.5); }
    to { transform: translate(-50%, -50%) scale(1); }
  }

  @keyframes taupe-poc-b {
    from { transform: translate(-50%, -50%) scale(0.5); }
    to { transform: translate(-50%, -50%) scale(1); }
  }

  @keyframes taupe-etoile {
    from { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
    to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; }
  }

  @keyframes taupe-gros-a {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
  }

  @keyframes taupe-gros-b {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
  }

  @keyframes taupe-bonk {
    0% { transform: translateY(0) rotate(0deg); }
    35% { transform: translateY(10%) rotate(7deg); }
    70% { transform: translateY(0) rotate(-4deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }

  @keyframes taupe-scintille {
    from { opacity: 0.35; }
    to { opacity: 1; }
  }

  @keyframes taupe-tremble {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-4px, 2px); }
    50% { transform: translate(4px, -2px); }
    75% { transform: translate(-2px, -1px); }
  }

  @keyframes taupe-tremble-b {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-4px, 2px); }
    50% { transform: translate(4px, -2px); }
    75% { transform: translate(-2px, -1px); }
  }

  @keyframes taupe-gros-chiffre-a {
    from { transform: scale(1.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  @keyframes taupe-gros-chiffre-b {
    from { transform: scale(1.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  @keyframes taupe-ticket {
    from { transform: translateY(1rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  @keyframes taupe-record {
    from { transform: rotate(-2deg) scale(0.6); opacity: 0; }
    to { transform: rotate(-2deg) scale(1); opacity: 1; }
  }
}

/* Mouvement réduit : pas de tremblement, pas d’étoiles, des fondus courts à la place. */
@media (prefers-reduced-motion: reduce) {
  .taupe-bete {
    transition-duration: 1ms;
  }

  .eclat-etoile {
    display: none;
  }

  .taupe-eclat.joue-a {
    animation: taupe-fondu-a 520ms linear forwards;
  }

  .taupe-eclat.joue-b {
    animation: taupe-fondu-b 520ms linear forwards;
  }

  .taupe-gros.pop-a {
    animation: taupe-fondu-a 900ms linear forwards;
  }

  .taupe-gros.pop-b {
    animation: taupe-fondu-b 900ms linear forwards;
  }

  @keyframes taupe-fondu-a {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes taupe-fondu-b {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
  }
}