/* Sudoku — habillage.
   Encre et papier : c'est un jeu de journal, et le rappeler aide à le lire.
   Fond chaud plutôt que sombre, grille claire, chiffres donnés en gras foncé,
   chiffres du joueur dans le bleu de l'encre — la distinction entre les deux
   est la première chose que l'œil doit saisir.

   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-sudoku .game-stage{
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(220,190,140,.22), transparent 62%),
    linear-gradient(170deg, #3A2E22 0%, #2A2118 52%, #1E1712 100%);
}
@media(min-width:720px){
  .game-sudoku .game-stage{border-color:rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(30,23,18,.4)}
}

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

/* ---------- bandeau ---------- */
.sd-haut{display:flex;gap:8px;width:100%;max-width:520px;flex:none;align-items:stretch}
.sd-stat{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5px 4px;border-radius:10px;
  background:rgba(255,248,236,.07);border:1px solid rgba(255,248,236,.10);
}
.sd-stat small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.sd-stat b{font-size:15px;font-variant-numeric:tabular-nums}
.sd-aide-btn{
  flex:none;width:34px;border-radius:10px;font:600 15px/1 inherit;color:inherit;cursor:pointer;
  background:rgba(255,248,236,.07);border:1px solid rgba(255,248,236,.10);
}

/* ---------- la grille ----------
   `aspect-ratio` et une largeur bornée par la hauteur disponible : la grille
   doit rester CARRÉE quoi qu'il arrive. Un sudoku aplati est illisible — on
   ne repère plus les blocs. */
.sd-plateau{
  flex:1;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
}
.sd-grille{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  aspect-ratio:1;
  width:min(100%, 62vh, 460px);
  background:#F7F1E4;
  border:2px solid #6B5136;
  border-radius:8px;overflow:hidden;
  box-shadow:0 8px 26px rgba(20,14,8,.35);
}

.sd-case{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;
  font:600 clamp(14px,4.2vw,26px)/1 inherit;
  color:#2B5C9B;                      /* l'encre du joueur */
  background:#F7F1E4;
  border:1px solid #DCCFB4;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
}
/* Les séparations de bloc : deux fois plus épaisses, et plus sombres. C'est ce
   qui fait lire la grille comme neuf blocs et non comme 81 cases. */
.sd-case.bord-g{border-left:2px solid #8A7352}
.sd-case.bord-h{border-top:2px solid #8A7352}

.sd-case.donne{color:#2A2219;background:#EFE6D3;font-weight:800;cursor:default}
.sd-case.liee{background:#EFE9DA}
.sd-case.donne.liee{background:#E7DCC6}
.sd-case.jumelle{background:#DCEAF7}
.sd-case.choisie{background:#C9DFF4;box-shadow:inset 0 0 0 2px #2B5C9B}
.sd-case.faux{color:#B3261E;background:#F8DEDA}
.sd-case.faux.choisie{box-shadow:inset 0 0 0 2px #B3261E}
.sd-case:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #2B5C9B}

/* Les notes : neuf emplacements fixes dans la case, chacun à sa place.
   Un chiffre noté doit rester au MÊME endroit d'une case à l'autre, sinon on
   ne peut pas comparer deux cases d'un coup d'œil — et c'est tout l'usage
   qu'on fait des notes. */
.sd-notes-grille{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  width:100%;height:100%;
}
.sd-notes-grille i{
  display:flex;align-items:center;justify-content:center;
  font:500 clamp(7px,1.9vw,11px)/1 inherit;font-style:normal;color:#8A7352;
}

/* ---------- niveaux ---------- */
.sd-niveaux{display:flex;gap:5px;flex:none;flex-wrap:wrap;justify-content:center}
.sd-niv{
  padding:5px 11px;border-radius:999px;cursor:pointer;
  font:600 12px/1 inherit;color:#E4D8C4;
  background:rgba(255,248,236,.07);border:1px solid rgba(255,248,236,.12);
}
.sd-niv:hover{background:rgba(255,248,236,.13)}
.sd-niv.actif{background:#C9A227;border-color:#C9A227;color:#2A2219}

/* ---------- le mot du jeu ---------- */
.sd-mot{
  margin:0;flex:none;min-height:1.3em;max-width:520px;
  text-align:center;font-size:12.5px;line-height:1.35;color:#E4D8C4;opacity:0;
  transition:opacity .15s;
}
.sd-mot.plein{opacity:.95}

/* ---------- le pavé de chiffres ---------- */
.sd-pave{
  display:grid;grid-template-columns:repeat(9,1fr);
  gap:4px;width:min(100%,460px);flex:none;
}
.sd-touche{
  position:relative;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;cursor:pointer;color:#F3EADC;
  background:rgba(255,248,236,.09);border:1px solid rgba(255,248,236,.14);
  font:700 clamp(14px,3.6vw,20px)/1 inherit;
}
.sd-touche:hover{background:rgba(255,248,236,.16)}
.sd-touche b{font-weight:700}
/* Le compteur de restants, en coin : une information qu'on consulte sans
   arrêt, mais qui ne doit pas concurrencer le chiffre lui-même. */
.sd-touche i{
  position:absolute;right:3px;bottom:1px;
  font:500 9px/1 inherit;font-style:normal;opacity:.55;
}
.sd-touche.fini{opacity:.32}

/* ---------- actions ---------- */
.sd-actions{display:flex;gap:5px;flex:none;flex-wrap:wrap;justify-content:center;width:100%;max-width:520px}
.sd-btn{
  flex:1 1 auto;min-width:88px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 10px;border-radius:10px;cursor:pointer;
  font:600 12.5px/1 inherit;color:#F3EADC;
  background:rgba(255,248,236,.09);border:1px solid rgba(255,248,236,.14);
}
.sd-btn:hover{background:rgba(255,248,236,.16)}
.sd-btn.actif{background:#C9A227;border-color:#C9A227;color:#2A2219}
.sd-btn .ico{font-size:14px;line-height:1}

.sd-aide{
  margin:0;flex:none;text-align:center;font-size:11.5px;color:#E4D8C4;opacity:.6;
  min-height:1.2em;
}

/* Sur un écran court, le pavé et les boutons prennent trop de place : on
   rétrécit la grille plutôt que de faire déborder la page. */
@media(max-height:620px){
  .sd-grille{width:min(100%, 52vh, 460px)}
  .sd-aide{display:none}
}
@media(max-width:380px){
  .sd-btn{min-width:0;flex:1 1 40%}
}