/* Moteur « série » (js/jeu-serie.js) en habillage « L'Arène des Mages » (27/10/2026).
   Chargé À LA PLACE de css/jeu-serie.css par les pages en <body class="fv-arena xm xm-classique">,
   après css/express-mages.css. Seuls les éléments propres au moteur sont ici ; le reste vient du bloc commun.
   Couleurs : variables de express-mages (--encre, --or…), donc thème et habillages suivent. */

.xm #game-root{ display:block; }
.xm #game-root[hidden]{ display:none; }

/* l'énoncé dans la tablette */
.xm .question .q-statement{ font-family:Georgia,"Times New Roman",serif; font-variant-numeric:lining-nums; font-weight:700;
  font-size:clamp(17px,3.4vw,23px); line-height:1.45; color:var(--chiffre); text-align:center; }
.xm .question .q-statement b{ color:var(--titre); }
.xm .question .q-statement code{ font-weight:800; padding:1px 8px; border-radius:8px; background:var(--chip); border:1px solid var(--chip-bord); color:var(--chiffre); }

.xm .q-mount{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:14px; }
.xm .hint{ color:var(--encre-douce); text-align:center; margin:0; }
.xm .inline-inputs{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; font-weight:700; font-size:1.15em; color:var(--encre); }
.xm .data-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.xm .data-chips .v{ background:var(--chip); border:1.5px solid var(--chip-bord); border-radius:10px; padding:6px 12px; font-weight:800; font-size:1.1em; color:var(--chiffre); }

/* cases de saisie du moteur et des pages : or sur nuit, comme #answer */
.xm #game-root input.rep, .xm #game-root input[type=text], .xm #game-root input[type=number], .xm #game-root input:not([type]){
  font:inherit; font-family:Georgia,"Times New Roman",serif; font-variant-numeric:lining-nums; font-size:1.2em; font-weight:700;
  padding:10px 12px; border-radius:12px; text-align:center; background:var(--saisie); color:var(--saisie-texte);
  border:2px solid var(--chip-bord); box-shadow:inset 0 2px 6px rgba(0,0,0,.35); }
.xm #game-root input:focus{ outline:none; border-color:var(--or-clair); box-shadow:0 0 0 3px rgba(255,204,61,.25), inset 0 2px 6px rgba(0,0,0,.35); }
.xm #game-root input:disabled{ opacity:.75; }

/* boutons : Valider / Suivant dorés (button.primary du bloc commun), Indice / Solution clairs */
.xm .answer-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.xm .answer-row button{ min-height:46px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.xm .answer-row button[hidden]{ display:none; }
.xm .answer-row .js-voir{ font-size:.92em; }
.xm .answer-row button:disabled{ opacity:.45; cursor:default; }

/* retour et explications */
.xm #game-root .feedback{ margin-top:14px; text-align:center; font-weight:700; min-height:1.4em; }
.xm #game-root .feedback.info{ color:var(--encre); font-weight:600; }
.xm #game-root .feedback .ysa{ text-align:left; font-weight:500; }
.xm #indices .ysa{ font-weight:600; }
.xm #note-indice{ text-align:center; font-size:.85em; color:var(--encre-douce); margin-top:6px; }

/* figures des jeux (repères…) : fond clair cerclé d'or, lisibles sous tous les thèmes */
.xm svg.repere{ background:#fffdf5; border:2px solid var(--tablette-bord); border-radius:12px; max-width:100%; height:auto; touch-action:none; }
.xm .shake{ animation:xmSerieShake .2s linear 1; }
@keyframes xmSerieShake{ 25%{ transform:translateX(-4px); } 50%{ transform:translateX(4px); } 75%{ transform:translateX(-2px); } }
@media (prefers-reduced-motion:reduce){ .xm .shake{ animation:none; } }