/* ============================================================
   defi-spikto.css — le défi spiKto de fin d'exercice (defi-spikto.js)
   Tient dans 360 × 640 sans défilement : la grille en miniature, la
   question, puis le pavé numérique ou les quatre mots.
   ============================================================ */
.defi-overlay { flex-direction: column; z-index: 10050; }   /* au-dessus des boutons flottants du jeu (💡, signalement) */
/* Le joK apporte le défi : il entre en tournoyant par le haut à droite, rebondit
   au centre, puis monte se percher sur la carte qui s'ouvre sous lui. */
.defi-jok { width: 64px; height: 64px; object-fit: contain; position: relative; z-index: 2; margin-bottom: -30px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.defi-arrivee .defi-jok { animation: defi-jok-arrive 1.1s cubic-bezier(.2,.8,.3,1) both; }
.defi-overlay .defi-box { transform-origin: 50% 0; }
.defi-arrivee:not(.defi-ouvert) .defi-box { opacity: 0; transform: scale(.4); }
.defi-ouvert .defi-box { animation: defi-carte-ouvre .35s ease-out both; }
@keyframes defi-jok-arrive {
    0%   { transform: translate(46vw, -60vh) rotate(-540deg) scale(.5); }
    55%  { transform: translate(0, 34vh) rotate(0deg) scale(1.9); }
    70%  { transform: translate(0, 26vh) scale(1.6, 1.9); }
    82%  { transform: translate(0, 34vh) scale(1.9, 1.6); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes defi-carte-ouvre { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .defi-arrivee .defi-jok, .defi-ouvert .defi-box { animation: none; }
    .defi-arrivee:not(.defi-ouvert) .defi-box { opacity: 1; transform: none; }
}
.defi-overlay .defi-box {
    width: 100%; max-width: 360px; max-height: calc(96vh - 36px); background: #fff; border-radius: 20px;
    padding: 30px 14px 10px; box-shadow: 0 10px 34px rgba(0,0,0,.25);
    display: flex; flex-direction: column; align-items: center; gap: 7px; color: #3a2a22; text-align: center;
}
.defi-bandeau { margin: 0; }
.defi-bandeau b { display: inline-block; background: #FFD700; color: #3a2a22; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-radius: 50px; padding: 3px 12px; }
.defi-titre { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.defi-grille { display: grid; gap: 3px; padding: 5px; background: #e9dfcf; border: 3px solid #c9b79b; border-radius: 12px; }
.defi-case { position: relative; background: #fbf8f2; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: opacity .3s; }
.defi-case img { width: 84%; height: 84%; object-fit: contain; }
.defi-grille.allume .defi-case { opacity: .3; }
.defi-grille.allume .defi-case.choisie { opacity: 1; box-shadow: 0 0 0 3px #0089D4; }
.defi-num { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: #0089D4; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.defi-eq { display: flex; align-items: flex-start; justify-content: center; gap: 5px; min-height: 66px; flex-wrap: nowrap; }
.defi-pik { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.defi-pik span { width: 46px; height: 46px; background: #fbf8f2; border: 2px solid #e4d8c6; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.defi-pik img { width: 82%; height: 82%; object-fit: contain; }
.defi-pik small { font-size: 15px; font-weight: 800; color: #0089D4; min-height: 18px; }
.defi-op { font-size: 24px; font-weight: 800; padding-top: 7px; }
.defi-res { min-width: 56px; height: 46px; border: 2px dashed #e4d8c6; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; }
.defi-res.juste { border: 2px solid #2E7D32; color: #2E7D32; background: #e8f5e9; }
.defi-res.faux { border: 2px solid #b3261e; color: #b3261e; background: #fdecea; }
.defi-verdict { margin: 0; font-size: 15px; line-height: 1.4; min-height: 0; }
.defi-verdict:empty { display: none; }
.defi-v { color: #2E7D32; } .defi-r { color: #b3261e; }

.defi-zone { width: 100%; display: flex; justify-content: center; }
.defi-pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 290px; }
.defi-pave button { font: inherit; font-size: 23px; font-weight: 700; min-height: 44px; border: 0; border-radius: 12px; background: #f1ece3; color: #3a2a22; cursor: pointer; touch-action: manipulation; }
.defi-pave button:active { background: #e4d8c6; }
.defi-pave .defi-ok { background: #0089D4; color: #fff; font-size: 18px; }
.defi-mots { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; max-width: 310px; }
.defi-mots button { font: inherit; font-size: 20px; font-weight: 800; letter-spacing: .08em; min-height: 58px; border: 2px solid #e4d8c6; border-radius: 14px; background: #fff; color: #3a2a22; cursor: pointer; }
.defi-mots button.juste { border-color: #2E7D32; background: #e8f5e9; color: #2E7D32; }
.defi-mots button.faux { border-color: #b3261e; background: #fdecea; color: #b3261e; }
.defi-mots button:disabled { cursor: default; }
.defi-suite { font: inherit; font-size: 17px; font-weight: 800; min-height: 50px; width: 100%; max-width: 290px; border: 0; border-radius: 50px; background: #FFD700; color: #3a2a22; cursor: pointer; }
.defi-passer { font: inherit; font-size: 14px; min-height: 44px; border: 0; background: none; color: #8b7d6f; text-decoration: underline; cursor: pointer; }
.defi-passer[hidden] { display: none; }

/* Une marque au K pivoté ne se coupe jamais en fin de ligne. */
.defi-nowrap { white-space: nowrap; }
/* Un piKto dans une phrase (« [triangle rose] = A = 1 ») : à la hauteur du texte. */
.defi-pik-texte { width: 1.45em; height: 1.45em; object-fit: contain; vertical-align: -0.38em; }
/* Le K du joK : memorY, spiKtoLine et 2viZu ne déclarent pas spikto-k-style
   (il restait droit et noir dans « Défi du joK »). */
.defi-overlay .spikto-k-style { display: inline-block; color: #0089D4; font-weight: 800; transform: rotate(-10deg); }

/* Les liens du bas : les règles du défi à gauche, « Passer » à droite. */
.defi-liens { display: flex; justify-content: center; align-items: center; gap: 4px 18px; flex-wrap: wrap; }
.defi-aide { font: inherit; font-size: 14px; font-weight: 700; min-height: 44px; border: 0; background: none; color: #0b5c8a; cursor: pointer; display: inline-flex; align-items: center; }
.defi-aide .gf-icone { width: 1.3em; height: 1.3em; margin-right: 0.3em; }

/* LES RÈGLES DU DÉFI (12 oct.) : la carte des règles des jeux (game-ux.css),
   au-dessus du défi quand on l'ouvre en cours de route. */
.defi-regles .instr-box { max-width: 400px; padding-bottom: 0.9rem; }
.defi-regles-jok .instr-box { padding-top: 30px; }   /* le joK perché dessus */
.defi-regles-titre { margin: 0.25rem 0 0.55rem; font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: #3a2a22; }
.defi-regles .instr-text { margin-bottom: 0.7rem; }
.defi-regles .instr-dots { margin-bottom: 0.8rem; }
/* La pile : trois rangées — titres, encadrés, textes — communes aux trois
   cartes (chaque carte en display: contents y pose ses trois morceaux).
   Chaque rangée prend la hauteur du plus grand des trois : la boîte, les
   encadrés et les textes ne bougent plus d'une carte à l'autre. */
.defi-regles-pile { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
.defi-regles-carte { display: contents; }
.defi-regles-carte > .defi-regles-titre { grid-row: 1; grid-column: 1; }
.defi-regles-carte > .defi-ex-visuel { grid-row: 2; grid-column: 1; }
.defi-regles-carte > .instr-text { grid-row: 3; grid-column: 1; }
.defi-regles-carte:not(.on) > * { visibility: hidden; }
.defi-ex-visuel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
                  margin-bottom: 0.7rem; padding: 8px; background: #faf7f0; border-radius: 16px; }
/* Le Kadran prend toute la largeur de la carte : ses lettres restent lisibles
   sur un 360 × 640 (15 px environ). Sur un écran bas, il cède à la hauteur
   plutôt que de faire défiler la carte. */
.defi-ex-kadran { display: block; width: 100%; max-width: 340px; max-width: min(330px, calc(100vh - 356px)); max-width: min(330px, calc(100dvh - 356px)); aspect-ratio: 1; height: auto; border-radius: 14px; box-shadow: 0 2px 10px rgba(60, 40, 15, .12); }
.defi-ex-grille .defi-grille { margin: 4px auto 0; }
.defi-ex-ligne { display: flex; align-items: flex-start; justify-content: center; gap: 5px; background: #fff; border-radius: 14px; padding: 8px 10px 6px; }
.defi-ex-pik { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.defi-ex-pik > span { width: 44px; height: 44px; background: #fff; border: 2px solid #e4d8c6; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.defi-ex-pik img { width: 82%; height: 82%; object-fit: contain; }
.defi-ex-pik small { font-size: 14px; font-weight: 800; color: #0089D4; white-space: nowrap; }
.defi-ex-op { font-size: 22px; font-weight: 800; padding-top: 8px; color: #3a2a22; }
.defi-ex-res { min-width: 44px; height: 44px; padding: 0 8px; border: 2px solid #2E7D32; border-radius: 10px; background: #e8f5e9; color: #2E7D32; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
.defi-ex-mot { font-size: 17px; letter-spacing: .08em; }
@media (max-width: 380px) {
    .defi-ex-pik > span { width: 38px; height: 38px; }
    .defi-ex-ligne { gap: 3px; padding: 7px 6px 5px; }
    .defi-ex-op { font-size: 19px; }
}

/* ---- Niveaux 1 à 3 : retenir, puis répondre (13 oct.) ---- */
.dm-retenir { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.dm-pastille { display: inline-block; padding: 0.35rem 1.1rem; border-radius: 50px; background: #FFD600; color: #3A2A00; font-size: 1.15rem; font-weight: 900; }
.dm-etape { display: block; font-size: 13px; font-weight: 700; color: #8b7d6f; margin-bottom: 2px; }
.dm-valeur { display: inline-block; min-width: 1.6em; padding: 0 0.3em; border-radius: 8px; background: #e9f4fb; color: #0b5c8a; font-size: 1.25em; }
/* 8 px : quatre propositions de 72 px tiennent sur une ligne à 360 px (niveau 3). */
.dm-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 320px; }
.dm-choix button { font: inherit; cursor: pointer; border: 2px solid #e4d8c6; border-radius: 14px; background: #fff; color: #3a2a22; touch-action: manipulation; }
.dm-choix-pik button { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.dm-choix-pik img { width: 80%; height: 80%; object-fit: contain; }
.dm-choix-val button { min-width: 72px; min-height: 58px; font-size: 24px; font-weight: 800; letter-spacing: .04em; }
.dm-choix button.juste { border-color: #2E7D32; background: #e8f5e9; color: #2E7D32; }
.dm-choix button.faux { border-color: #b3261e; background: #fdecea; color: #b3261e; }
.dm-choix button:disabled { cursor: default; }
.defi-memoire .defi-pik small { white-space: nowrap; }
/* La carte garde sa hauteur (min-height posée par le script) : les liens
   restent en bas, la ligne vide des piKto ne prend pas de place. */
.defi-memoire .defi-liens { margin-top: auto; }
.defi-memoire .defi-eq:empty { min-height: 0; }
.defi-ex-q { margin: 0; font-size: 15px; font-weight: 800; color: #3a2a22; }