/* Démineur — habillage.
   Cinquième ambiance : graphite et acier, en accord avec un jeu de déduction
   froide. Grille en DOM (et non en canevas) : chaque case est un bouton, donc
   navigable au clavier et annonçable par un lecteur d'écran. Mobile d'abord. */

.game-demineur .game-stage{
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(120,160,200,.30), transparent 62%),
    linear-gradient(170deg, #2B3440 0%, #1E252F 52%, #141A21 100%);
}
@media(min-width:720px){
  .game-demineur .game-stage{border-color:rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(20,26,33,.4)}
}

.dm{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 10px calc(8px + env(safe-area-inset-bottom));
  gap:10px;color:#E9EFF6;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}

/* ---------- bandeau ---------- */
.dm-haut{display:flex;gap:8px;width:100%;max-width:520px;flex:none}
.dm-stat{
  flex:1;min-width:0;padding:5px 11px;line-height:1.15;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.dm-stat small{
  display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;
  color:rgba(233,239,246,.6);font-weight:500;
}
.dm-stat b{display:block;font-family:'Fredoka','Outfit',sans-serif;font-size:1.2rem;font-weight:600;color:#fff}
.dm-aide-btn{
  flex:none;width:46px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:13px;color:#fff;
  font-family:'Fredoka','Outfit',sans-serif;font-weight:600;font-size:1.1rem;
}
.dm-aide-btn:hover{background:rgba(255,255,255,.16)}
.dm-aide-btn:focus-visible{outline:3px solid #8FC2E8;outline-offset:2px}

/* ---------- explication illustrée ---------- */
.dm-lecon{text-align:left;margin:4px 0 10px}
.dm-lecon p{font-size:.94rem;line-height:1.5;margin:0 0 10px;color:var(--ink)}
.dm-exemple{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.dm-mini{display:grid;grid-template-columns:repeat(3,34px);gap:3px;flex:none}
.dm-mini span{
  width:34px;height:34px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka','Outfit',sans-serif;font-weight:600;font-size:1rem;
  background:linear-gradient(180deg,#5A6B7E,#46566A);color:#fff;
  border:1px solid rgba(0,0,0,.18);
}
.dm-mini span.vide{background:#E7EAF1;border-color:#D5DAE4}
:root[data-theme="dark"] .dm-mini span.vide{background:#2A3240;border-color:#232B3A}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dm-mini span.vide{background:#2A3240;border-color:#232B3A}
}
.dm-mini span.n1{background:#E7EAF1;color:#2F6BD8;border-color:#D5DAE4}
.dm-mini span.n2{background:#E7EAF1;color:#1C9C63;border-color:#D5DAE4}
.dm-mini span.drapeau{background:#7E5A5A;color:#fff}
.dm-exemple em{font-style:normal;font-size:.9rem;line-height:1.45;color:var(--ink-soft)}

/* ---------- grille ---------- */
.dm-plateau{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;
}
.dm-grille{
  display:grid;gap:3px;
  padding:8px;border-radius:14px;
  background:rgba(0,0,0,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 14px 36px rgba(0,0,0,.42);
}
.dm-case{
  width:var(--taille);height:var(--taille);
  display:flex;align-items:center;justify-content:center;
  border-radius:5px;cursor:pointer;padding:0;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,#5A6B7E,#46566A);
  font-family:'Fredoka','Outfit',sans-serif;
  font-size:calc(var(--taille) * .58);font-weight:600;line-height:1;
  color:#fff;
  transition:background-color .1s ease, transform .06s ease;
}
.dm-case:active{transform:scale(.94)}
.dm-case:focus-visible{outline:2px solid #8FC2E8;outline-offset:1px;z-index:2}
.dm-case.ouverte{
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.07);
  cursor:default;
}
.dm-case.drapeau{background:linear-gradient(180deg,#7E5A5A,#6A4646)}
.dm-case.mine{background:#C0453B;border-color:#C0453B}
.dm-case.mine.fatale{background:#FF5C57;box-shadow:0 0 0 2px #fff}
/* couleurs classiques des chiffres, éclaircies pour le fond sombre */
.dm-case.n1{color:#7FB8FF}
.dm-case.n2{color:#6ADf9E}
.dm-case.n3{color:#FF8A8A}
.dm-case.n4{color:#C39BFF}
.dm-case.n5{color:#FFC46B}
.dm-case.n6{color:#6FE0E0}
.dm-case.n7{color:#FFFFFF}
.dm-case.n8{color:#B9C4D0}

/* ---------- commandes ---------- */
.dm-actions{flex:none;display:flex;gap:8px;width:100%;max-width:440px}
.dm-btn{
  flex:1;min-height:58px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:15px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.1);color:#fff;
  font-family:'Fredoka','Outfit',sans-serif;font-weight:600;font-size:1rem;
  box-shadow:0 4px 0 rgba(0,0,0,.3);
}
.dm-btn:active{transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,.3)}
.dm-btn:focus-visible{outline:3px solid #8FC2E8;outline-offset:2px}
/* le mode drapeau est un interrupteur : sur mobile, l'appui long seul n'est
   ni découvrable ni confortable, et une fausse manœuvre fait sauter la partie */
.dm-btn.mode.actif{
  background:linear-gradient(180deg,#7EA4C9,#5A7391);border-color:transparent;
  box-shadow:0 4px 0 #3E5165;
}
.dm-btn .ico{font-size:1.3rem}

.dm-aide{
  flex:none;text-align:center;font-size:.8rem;line-height:1.35;
  color:rgba(233,239,246,.6);font-weight:500;
}
.dm-aide[hidden]{display:none}

/* ---------- bilan ---------- */
.dm-bilan{display:flex;justify-content:center;gap:18px;margin:2px 0 12px;flex-wrap:wrap}
.dm-bilan div{text-align:center;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.dm-bilan b{display:block;font-family:'Fredoka','Outfit',sans-serif;font-size:1.5rem;color:var(--ink);font-weight:600}
.dm-niveaux{display:flex;gap:8px;margin-bottom:12px}
.dm-niveaux button{
  flex:1;min-height:48px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);
  font:inherit;font-weight:600;font-size:.92rem;
}
.dm-niveaux button.actif{background:var(--c-demineur);border-color:transparent;color:#fff}

@media(min-width:720px){
  .dm{padding:18px;gap:14px;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .dm-case,.dm-btn{transition:none}
}

/* drapeau posé sur une case sans mine : c'est là qu'était l'erreur */
.dm-case.erreur{
  background:rgba(255,255,255,.055);border-color:rgba(255,138,138,.6);
  color:#FF8A8A;
}