/* ==========================================================================
   Le coin des enfants — habillage commun des jeux d'entraînement.
   Gros boutons, contrastes francs, tout à portée de pouce en portrait.
   La couleur du jeu arrive par --c-jeu, posé sur .game-stage.
   ========================================================================== */

.ec{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:10px 12px 12px;
  gap:10px;
  background:var(--board-bg);   /* repli si color-mix() n'est pas connu */
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--c-jeu) 22%, transparent), transparent 70%),
    var(--board-bg);
}

/* ---------- bandeau : progression, série, chrono, points ---------- */
.ec-barre{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.ec-jauge{
  height:8px;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb, var(--ink) 12%, transparent);
}
.ec-jauge i{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--c-jeu);
  transition:width .35s ease;
}
.ec-infos{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ec-info{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);
  font-size:.92rem;font-weight:600;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.ec-info b{color:var(--ink);font-weight:700}
.ec-chrono.urgent{border-color:var(--c-hockey);color:var(--c-hockey)}
.ec-chrono.urgent b{color:var(--c-hockey)}
.ec-serie{border-color:color-mix(in srgb, var(--c-solitaire) 55%, var(--line))}

/* ---------- la question ---------- */
.ec-scene{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  border-radius:var(--radius);
  background:var(--surface);
  border:2px solid var(--line);
  transition:border-color .2s, background .2s, transform .12s;
}
.ec-scene.juste{border-color:var(--c-mahjong);background:color-mix(in srgb, var(--c-mahjong) 12%, var(--surface))}
.ec-scene.faux{border-color:var(--c-hockey);background:color-mix(in srgb, var(--c-hockey) 10%, var(--surface))}
.ec-calcul{
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:clamp(2.4rem,13vw,4.2rem);font-weight:600;line-height:1;
  letter-spacing:.02em;color:var(--ink);
}
.ec-calcul .op{color:var(--c-jeu);margin:0 .18em}
.ec-consigne{font-size:1rem;color:var(--ink-soft);text-align:center;padding:0 14px}
.ec-consigne b{color:var(--ink)}

/* ---------- retour : bravo / presque ---------- */
.ec-verdict{
  flex:0 0 auto;min-height:1.5em;
  text-align:center;font-weight:600;font-size:.98rem;
  color:transparent;
}
.ec-verdict.ok{color:var(--c-mahjong)}
.ec-verdict.ko{color:var(--c-hockey)}

/* ---------- saisie ---------- */
.ec-saisie{flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.ec-ecran{
  display:flex;align-items:center;justify-content:center;
  height:52px;border-radius:14px;
  background:var(--surface);border:2px solid var(--line);
}
.ec-saisi{
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:1.9rem;font-weight:600;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.ec-saisi.vide{color:var(--ink-soft);opacity:.45}
.ec-ecran.secoue{animation:ec-secoue .3s}
@keyframes ec-secoue{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}
  75%{transform:translateX(7px)}
}

.ec-pave{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ec-touche{
  -webkit-appearance:none;appearance:none;
  min-height:clamp(46px,8.5vh,62px);
  border-radius:14px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:1.5rem;font-weight:600;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 3px 0 rgba(29,36,51,.10);
  transition:transform .08s, background .12s;
}
.ec-touche:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(29,36,51,.10)}
.ec-touche.eff{font-size:1.25rem;color:var(--ink-soft)}
.ec-touche.ok{
  background:var(--c-jeu);color:#fff;border-color:transparent;
  font-size:1.15rem;letter-spacing:.04em;
}
.ec-touche:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}

/* validation d'une réponse « libre » (aiguilles placées, par exemple) */
.ec-valider{
  -webkit-appearance:none;appearance:none;width:100%;
  min-height:clamp(50px,8.5vh,62px);
  border:0;border-radius:16px;
  background:var(--c-jeu);color:#fff;
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:1.2rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 0 rgba(29,36,51,.18);
  transition:transform .08s;
}
.ec-valider:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(29,36,51,.18)}
.ec-valider:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}

.ec-choix{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ec-rep{
  -webkit-appearance:none;appearance:none;
  min-height:clamp(54px,9vh,70px);
  border-radius:16px;border:2px solid var(--line);
  background:var(--surface);color:var(--ink);
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:1.25rem;font-weight:600;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 3px 0 rgba(29,36,51,.10);
  transition:transform .08s, border-color .12s;
}
.ec-rep:active,.ec-rep.choisi{transform:translateY(2px);border-color:var(--c-jeu)}
.ec-rep:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}

/* ---------- écran de fin : ce qu'il faut revoir ---------- */
.ec-revoir{
  margin:14px 0 4px;padding:12px 14px;
  border-radius:14px;text-align:left;
  background:color-mix(in srgb, var(--c-solitaire) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--c-solitaire) 40%, transparent);
}
.ec-revoir h3{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;opacity:.75}
.ec-revoir ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ec-revoir li{
  padding:4px 10px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);
  font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums;
}

/* ---------- réglages d'avant-partie (tables à réviser, niveau…) ---------- */
.ec-reglage{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:2px 0 4px}
.ec-case{
  -webkit-appearance:none;appearance:none;
  padding:9px 13px;border-radius:12px;
  border:2px solid var(--line);background:var(--surface);color:var(--ink-soft);
  font-family:'Fredoka','Outfit',system-ui,sans-serif;
  font-size:1rem;font-weight:600;cursor:pointer;
  transition:border-color .12s, color .12s;
}
.ec-case[aria-pressed="true"]{border-color:var(--c-jeu);color:var(--ink);background:color-mix(in srgb, var(--c-jeu) 14%, var(--surface))}
.ec-case:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}

@media (min-width:720px){
  .ec{padding:16px 18px 18px;gap:12px}
  .ec-pave{max-width:340px;margin:0 auto;width:100%}
  .ec-ecran{max-width:340px;margin:0 auto;width:100%}
  .ec-choix{max-width:460px;margin:0 auto;width:100%}
}
@media (prefers-reduced-motion: reduce){
  .ec-jauge i,.ec-touche,.ec-rep,.ec-scene{transition:none}
  .ec-ecran.secoue{animation:none}
}