/* ===========================================================================
   LES MINI-JEUX EN 3D (js/neo-minijeux.js) — habillage neo seulement.
   La scène prend la place de l'illustration de la carte ; le texte, l'enjeu et
   les boutons restent dessous, comme sur toutes les cartes.
   =========================================================================== */
html.neo #card-zone .game-card.mj3d-carte {
  padding: 0 0 16px !important;
  overflow: hidden !important;
}
html.neo #card-zone .game-card.mj3d-carte > :not(.mj3d):not(.btn):not(.ev-options) {
  margin-left: 14px !important;
  margin-right: 14px !important;
}
html.neo #card-zone .game-card.mj3d-carte > .btn,
html.neo #card-zone .game-card.mj3d-carte > .ev-options {
  margin-left: 14px !important;
  margin-right: 14px !important;
  width: calc(100% - 28px) !important;
}
.mj3d {
  position: relative;
  height: clamp(300px, 54vh, 470px);
  margin: 0 0 12px;
  background: #1a1d24;
  border-radius: var(--n-r, 18px) var(--n-r, 18px) 0 0;
  overflow: hidden;
  touch-action: none;           /* le glissé vise, il ne fait pas défiler */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}
.mj3d:focus-visible { box-shadow: inset 0 0 0 2px var(--n-chakra, #4cb3ff); }
.mj3d-question { height: clamp(210px, 34vh, 300px); touch-action: auto; }
.mj3d-chakra { height: clamp(300px, 50vh, 440px); }
.mj3d-toile {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.mj3d.pret .mj3d-toile { opacity: 1; }
/* Le bas de la scène se fond dans la carte, comme les décors illustrés. */
.mj3d::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, rgba(19, 21, 28, 0), var(--n-s1, #13151c));
  pointer-events: none;
  z-index: 1;
}
.mj3d-plaque {
  position: absolute;
  left: 12px; top: 12px; right: 12px;
  z-index: 3;
  pointer-events: none;
}
.mj3d-plaque .km-banner {
  display: inline-block !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(10, 11, 15, 0.74) !important;
  color: var(--n-encre, #f3f1ec) !important;
  font: 800 11px/1.25 var(--n-titre, system-ui) !important;
  letter-spacing: 0.12em !important;
  text-align: left !important;
  width: auto !important;
  max-width: 100%;
}
.mj3d-charge {
  position: absolute;
  inset: auto 0 44% 0;
  z-index: 2;
  margin: 0;
  text-align: center;
  font: 600 13px/1.3 var(--n-titre, system-ui);
  color: var(--n-doux, #b5b8c4);
  transition: opacity 0.3s;
}
.mj3d.pret .mj3d-charge { opacity: 0; }
.mj3d-score {
  position: absolute;
  right: 12px; top: 46px;
  z-index: 3;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(10, 11, 15, 0.74);
  font: 700 12px/1 var(--n-titre, system-ui);
  letter-spacing: 0.04em;
  color: var(--n-encre, #f3f1ec);
  font-variant-numeric: tabular-nums;
}
.mj3d-consigne {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  z-index: 3;
  margin: 0;
  text-align: center;
  font: 600 12.5px/1.3 var(--n-titre, system-ui);
  color: var(--n-encre, #f3f1ec);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
/* Le trait de visée : il part du kunai et suit le doigt. */
.mj3d-visee {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.mj3d-visee.on { opacity: 1; }
.mj3d-visee line {
  stroke: rgba(243, 241, 236, 0.75);
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}
.mj3d-visee.vise line { stroke: var(--n-or, #f2c14e); stroke-width: 2.5; stroke-dasharray: none; }

/* La jauge de chakra : debout, la zone à tenir au milieu. Mêmes bornes que
   celles jugées (0,5 ± demi-largeur), posées en style par le script. */
.mj3d-jauge {
  position: absolute;
  right: 16px; top: 84px; bottom: 46px;
  width: 12px;
  z-index: 3;
  border-radius: 6px;
  background: rgba(10, 11, 15, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.mj3d-zone {
  position: absolute;
  left: 0; right: 0;
  border-radius: 3px;
  background: rgba(140, 200, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(170, 215, 255, 0.55);
  transition: background 0.1s;
}
.mj3d-jauge.dedans .mj3d-zone { background: rgba(170, 215, 255, 0.5); }
.mj3d-tete {
  position: absolute;
  left: -5px; right: -5px;
  height: 4px;
  margin-bottom: -2px;
  bottom: 0;
  border-radius: 2px;
  background: #f3f1ec;
  box-shadow: 0 0 0 1px rgba(10, 11, 15, 0.6);
}
.mj3d-tete.bon { background: var(--n-or, #f2c14e); }
.mj3d-tete.rate { background: var(--n-rouge, #ff4d4d); }
.mj3d-tenir { touch-action: none; user-select: none; -webkit-user-select: none; }
.mj3d.tient ~ .mj3d-tenir,
.mj3d-tenir:active { filter: brightness(1.12); }

/* La question : l'énoncé sous l'examinateur, les réponses dessous. */
.mj3d-question.sans3d { height: auto; background: none; overflow: visible; }
.mj3d-question.sans3d .mj3d-toile, .mj3d-question.sans3d .mj3d-charge, .mj3d-question.sans3d::after { display: none; }
.mj3d-question.sans3d .mj3d-plaque { position: static; padding: 14px 14px 0; }
.mj3d-enonce { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .mj3d-toile, .mj3d-charge, .mj3d-visee { transition: none; }
}

/* La réponse jugée : la bonne en or, la fausse en rouge, comme l'ancien jeu. */
html.neo #card-zone .mj3d-carte .btn-choice.rep-juste {
  border-color: var(--n-or, #f2c14e) !important;
  background: rgba(242, 193, 78, 0.16) !important;
}
html.neo #card-zone .mj3d-carte .btn-choice.rep-faux {
  border-color: var(--n-rouge, #ff4d4d) !important;
  background: rgba(255, 77, 77, 0.14) !important;
}
html.neo #card-zone .mj3d-carte .btn-choice:disabled { opacity: 1 !important; }