/* =========================================================================
   defi.css — le défi du jour.
   Volontairement sobre : la page a un seul travail, mettre le décor sous
   les yeux du visiteur. Tout ce qui distrait de l'image lui nuit.
   ========================================================================= */

.defi-page { max-width: 1040px; margin: 0 auto; padding: 18px 16px 56px; }

.defi-head { text-align: center; margin-bottom: 14px; }
.defi-head h1 { font-size: clamp(24px, 4.2vw, 38px); margin: 0 0 6px; }
.defi-sous { margin: 0; color: var(--muted, #6b6880); font-weight: 700; display: flex;
  gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
.defi-date { background: rgba(124, 92, 255, 0.12); color: #5b3fd6; padding: 3px 10px; border-radius: 999px; }

.defi-barre { display: flex; gap: 10px; justify-content: center; margin: 0 0 10px; flex-wrap: wrap; }
.defi-pill { background: #fff; border: 2px solid rgba(20, 16, 40, 0.08); border-radius: 999px;
  padding: 7px 14px; font-weight: 800; box-shadow: 0 2px 0 rgba(20, 16, 40, 0.06); }

/* Le décor : plein cadre, ratio préservé, curseur en viseur. */
.defi-zone { position: relative; border-radius: 18px; overflow: hidden;
  border: 3px solid rgba(20, 16, 40, 0.10); box-shadow: 0 10px 30px rgba(20, 16, 40, 0.16);
  background: #20242c; aspect-ratio: 3 / 2; }
.defi-zone canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.defi-zone.fini canvas { cursor: default; }
/* Tant que l'image n'est pas là, on ne montre pas un canvas vide qui donne
   l'impression d'une page cassée. */
.defi-zone:not(.pret)::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, #262b35 30%, #333949 50%, #262b35 70%);
  background-size: 220% 100%; animation: defiCharge 1.2s linear infinite; }
@keyframes defiCharge { from { background-position: 140% 0; } to { background-position: -40% 0; } }

.defi-res { text-align: center; font-weight: 800; min-height: 26px; margin: 12px 0 4px; font-size: 17px; }
.defi-res.ok { color: #1a9c6e; }
.defi-res.ko { color: #c8446a; }

.defi-fin { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
/* `display:flex` l'emporte sur l'attribut hidden : sans cette ligne, les
   boutons de fin s'affichent avant même qu'on ait cliqué. */
.defi-fin[hidden], .defi-vide[hidden], #defiJeu[hidden] { display: none; }

.defi-vide { text-align: center; padding: 40px 16px; }
.defi-vide p { font-weight: 700; margin-bottom: 16px; }

.defi-quoi { margin-top: 46px; text-align: center; background: #fff; border-radius: 20px;
  padding: 26px 22px; border: 2px solid rgba(20, 16, 40, 0.07); }
.defi-quoi h2 { margin: 0 0 10px; font-size: clamp(19px, 3vw, 25px); }
.defi-quoi p { margin: 0 auto 16px; max-width: 620px; line-height: 1.6; }

@media (max-width: 640px) {
  .defi-page { padding: 12px 10px 40px; }
  .defi-zone { border-width: 2px; border-radius: 14px; }
  .defi-fin .candy { width: 100%; }
}

/* Outils du chercheur, repris du jeu : la loupe pour scruter, l'indice pour
   celui qui sèche. L'indice divise le score par deux, comme en partie. */
.defi-outil {
  background: #fff; border: 2px solid rgba(20, 16, 40, 0.10); border-radius: 999px;
  padding: 7px 14px; font-family: inherit; font-weight: 800; font-size: 14px;
  cursor: pointer; box-shadow: 0 2px 0 rgba(20, 16, 40, 0.06); color: inherit;
}
.defi-outil:hover:not(:disabled) { border-color: rgba(124, 92, 255, 0.45); }
.defi-outil:disabled { opacity: .45; cursor: default; }
.defi-outil.actif { background: #7C5CFF; color: #fff; border-color: #7C5CFF; }

/* Le bilan de fin : ce que la manche aurait valu, dans le même barème que
   le jeu, pour que le défi ne raconte pas une autre histoire. */
.defi-bilan {
  max-width: 380px; margin: 14px auto 0; background: #fff; border-radius: 16px;
  padding: 14px 18px; border: 2px solid rgba(20, 16, 40, 0.07);
  box-shadow: 0 8px 22px rgba(59, 46, 82, 0.08);
}
.defi-bilan[hidden] { display: none; }
.db-row { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(20, 16, 40, 0.06); font-weight: 700; }
.db-row:last-of-type { border-bottom: 0; }
.db-row.fort { font-size: 19px; color: #5b3fd6; }
.db-note { margin: 10px 0 0; font-size: 13px; opacity: .75; text-align: center; line-height: 1.45; }

/* Le compte à rebours vit SUR l'image grisée : c'est elle qui devient le
   panneau « revenez demain », plutôt qu'une ligne de plus sous la page. */
.defi-rebours {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  margin: 0; padding: 9px 18px; border-radius: 999px;
  background: rgba(20, 16, 40, 0.72); color: #fff; font-weight: 800; font-size: 15px;
  backdrop-filter: blur(4px); white-space: nowrap; pointer-events: none;
}
.defi-rebours[hidden] { display: none; }

/* Une fois la tentative finie, l'image passe en retrait : elle n'est plus
   un terrain de jeu, elle devient une illustration. Le chrono et le score
   remontent au-dessus, là où l'œil va. */
.defi-zone.fini canvas { filter: grayscale(0.55) brightness(0.82); }
.defi-zone.fini { border-color: rgba(20, 16, 40, 0.06); box-shadow: none; }

/* Compte : proposé, jamais imposé. Le jeu reste entièrement jouable sans. */
.defi-compte {
  margin-top: 30px; text-align: center; background: #fff; border-radius: 18px;
  padding: 22px 20px; border: 2px dashed rgba(53, 182, 255, 0.40);
}
.defi-compte p { margin: 0 auto 14px; max-width: 560px; line-height: 1.6; }

/* =========================================================================
   LE DÉPART DU DÉFI

   Le chrono ne partait qu'au premier clic sur l'image. On pouvait donc
   l'étudier tout le temps qu'on voulait, repérer le caméléon tranquillement,
   puis cliquer dessus pour un temps parfait — et un score qui ne voulait rien
   dire. Le décor est flouté tant que le défi n'est pas lancé : le voile seul
   ne suffirait pas, il resterait lisible autour de la boîte.
   ========================================================================= */
.defi-depart {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(28, 22, 42, .34);
  border-radius: inherit;
}
.defi-zone.lance .defi-depart { display: none; }
/* Le flou porte sur le CANEVAS, pas sur la boîte : le texte du départ doit
   rester net par-dessus. */
.defi-zone:not(.lance) #defiCanvas { filter: blur(14px) saturate(.85); }
#defiCanvas { transition: filter .45s ease; }

.defi-depart-box {
  background: #fff; border-radius: 20px; padding: 22px 26px; max-width: 420px;
  text-align: center; box-shadow: 0 18px 40px rgba(28, 22, 42, .28);
}
.defi-depart-titre {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
  font-size: 23px; margin: 0 0 6px; color: var(--ink, #3B2E52);
}
.defi-depart-sous {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 700;
  font-size: 14px; line-height: 1.55; margin: 0 0 16px; color: var(--soft, #7C7191);
}
@media (max-width: 560px) {
  .defi-depart-box { padding: 18px 16px; }
  .defi-depart-titre { font-size: 20px; }
  .defi-depart-sous { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { #defiCanvas { transition: none; } }