/* La cueillette : un verger de nuit, neuf branches où poussent pommes et poires. Chaque état se lit par la forme
   autant que par la couleur : coche ou croix, fruit qui monte, fruit qui tombe, rond pointillé. */

/* La consigne du moment, juste au-dessus du verger. Inversée (les poires), elle s'allume et se cercle. */
.cueillette-regle {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 40px;
  margin-top: auto;
  padding: 0 var(--e-4) 0 var(--e-2);
  border-radius: var(--r-pilule);
  background: var(--surface);
  font-weight: 700;
  transition: background-color var(--d-court) ease, box-shadow var(--d-court) ease;
}

.cueillette-regle[data-regle="poire"] {
  background: color-mix(in oklab, var(--fam) 26%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--fam);
}

.cueillette-regle-fruit {
  width: 28px;
  height: 28px;
}

/* Le verger : un panneau carré sous le pouce, qui rapetisse sur les écrans bas pour que tout tienne. */
.cueillette-verger {
  position: relative;
  flex: none;
  width: 100%;
  width: clamp(220px, 100dvh - 290px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-grand);
  background: radial-gradient(100% 75% at 50% 0%, var(--studio-900), var(--studio-950));
  box-shadow: inset 0 0 0 1px var(--studio-800), inset 0 14px 28px -18px rgb(0 0 0 / 0.9);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.cueillette-decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Le décor reste dans l'ombre pour que les fruits passent devant. Couleurs de contenu (le bois, les feuilles),
   mêlées au bleu nuit du studio : un brun et un vert éteints. */
.cueillette-feuillage {
  fill: color-mix(in oklab, var(--studio-900) 84%, #2f6b4f);
}

.cueillette-bois {
  fill: color-mix(in oklab, var(--studio-700) 70%, #7a5236);
}

.cueillette-brindille {
  fill: none;
  stroke: color-mix(in oklab, var(--studio-700) 70%, #7a5236);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.cueillette-feuilles {
  fill: color-mix(in oklab, var(--studio-800) 55%, #2f6b4f);
}

/* Neuf cases égales, alignées sur le décor : chaque case est une grande cible à toucher. */
.cueillette-grille {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  transition: opacity var(--d-court) ease;
}

.cueillette-branche {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  border-radius: var(--r-moyen);
  -webkit-touch-callout: none;
}

.cueillette-branche:focus-visible {
  outline-offset: -4px;
}

/* Les fruits pendent de leur brindille : la queue touche le nœud de feuilles (position propre à chaque fruit). */
.cueillette-fruit {
  position: absolute;
  width: 66%;
  height: 66%;
  pointer-events: none;
  animation: cueillette-pousse 180ms var(--ease-out) both;
}

.cueillette-pomme {
  left: 12.5%;
  top: 17.8%;
  transform-origin: 58% 15%;
}

.cueillette-poire {
  left: 21.9%;
  top: 23.3%;
  transform-origin: 44% 7%;
}

.cueillette-dessin {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Les couleurs des fruits, contenu du jeu : pomme rouge, poire vert-jaune (très différentes aussi en clarté),
   feuille verte, queue brune. Le contour sombre vient du dessin, comme pour les objets de Méninges. */
.cueillette-dessin-pomme .cueillette-chair {
  fill: #e5483f;
}

.cueillette-dessin-poire .cueillette-chair {
  fill: #cdd660;
}

.cueillette-feuille {
  fill: #5bb36a;
}

.cueillette-queue {
  stroke: #8b5e3c;
}

.cueillette-reflet {
  stroke: rgb(255 255 255 / 0.6);
}

@keyframes cueillette-pousse {
  from {
    opacity: 0;
    transform: scale(0.35);
  }
}

/* Cueilli : le fruit monte et s'efface, une coche le remplace. */
.cueillette-fruit.cueillette-cueilli {
  animation: cueillette-cueilli 340ms var(--ease-out) forwards;
}

@keyframes cueillette-cueilli {
  30% {
    opacity: 1;
    transform: scale(1.12);
  }
  to {
    opacity: 0;
    transform: translateY(-26%) scale(0.6);
  }
}

/* Touché par erreur : le fruit tremble, pâlit, et une croix le barre. */
.cueillette-fruit.cueillette-raye {
  opacity: 0.6;
  animation: secousse 220ms var(--ease-out);
}

/* Raté : le fruit tombe, sans pénalité. Un rond pointillé marque un instant sa place. */
.cueillette-fruit.cueillette-tombe {
  animation: cueillette-tombe 440ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes cueillette-tombe {
  to {
    opacity: 0;
    transform: translateY(42%) rotate(18deg);
  }
}

/* Leurre laissé sur l'arbre : il s'efface simplement. */
.cueillette-fruit.cueillette-fane {
  animation: cueillette-efface 220ms ease forwards;
}

@keyframes cueillette-efface {
  to {
    opacity: 0;
  }
}

.cueillette-marque {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: cueillette-marque 160ms var(--ease-out);
}

.cueillette-marque svg {
  width: 18px;
  height: 18px;
}

.cueillette-marque-juste {
  background: var(--fam);
  color: var(--studio-950);
}

.cueillette-marque-faux {
  background: var(--erreur);
  color: var(--studio-50);
}

@keyframes cueillette-marque {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
}

/* La coche, la croix et le rond pointillé se posent au centre du fruit. */
.cueillette-sur-pomme {
  left: 45.5%;
  top: 55%;
}

.cueillette-sur-poire {
  left: 55%;
  top: 65%;
}

.cueillette-trace {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border: 2px dashed var(--texte-3);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: cueillette-efface 480ms ease-out forwards;
}

/* La bannière qui change la consigne : un carton à l'encre au milieu du verger, le temps de lire. */
.cueillette-annonce {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  width: min(84%, 300px);
  padding: var(--e-4) var(--e-4) var(--e-5);
  border-radius: var(--r-grand);
  background: var(--fiche);
  box-shadow: var(--ombre-fiche);
  color: var(--encre);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 160ms ease, transform 220ms var(--ease-out), visibility 0s linear 220ms;
}

.cueillette-verger.cueillette-pause .cueillette-annonce {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, transform 220ms var(--ease-out);
}

.cueillette-verger.cueillette-pause .cueillette-grille {
  opacity: 0.25;
}

.cueillette-annonce-fruit {
  width: 56px;
  height: 56px;
}

.cueillette-annonce-texte {
  font-family: var(--police-titre);
  font-stretch: 110%;
  font-weight: 800;
  font-size: clamp(1.0625rem, 0.6rem + 2.4vw, 1.375rem);
  line-height: 1.15;
  text-wrap: balance;
}

/* Aperçu sur la fiche : le verger en petit, une pomme qu'on touche et une poire barrée. */
.cueillette-apercu {
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
}

.cueillette-verger.cueillette-verger-mini {
  width: 168px;
  border-radius: var(--r-moyen);
}

.cueillette-verger-mini .cueillette-fruit {
  animation: none;
}

.cueillette-verger-mini .cueillette-marque.cueillette-sur-poire {
  left: 76%;
  top: 78%;
  width: 22px;
  height: 22px;
  animation: none;
}

.cueillette-verger-mini .cueillette-marque svg {
  width: 14px;
  height: 14px;
}

.cueillette-doigt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  fill: var(--fiche);
  stroke: var(--encre);
}

.cueillette-doigt-eclat {
  stroke: var(--fiche);
}

@media (prefers-reduced-motion: reduce) {
  .cueillette-fruit,
  .cueillette-fruit.cueillette-raye,
  .cueillette-marque {
    animation: none;
  }

  .cueillette-fruit.cueillette-cueilli,
  .cueillette-fruit.cueillette-tombe {
    animation: cueillette-efface 200ms ease forwards;
  }

  .cueillette-annonce,
  .cueillette-verger.cueillette-pause .cueillette-annonce {
    transform: translate(-50%, -50%);
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }

  .cueillette-verger.cueillette-pause .cueillette-annonce {
    transition: opacity 160ms ease;
  }
}