/* Les deux jeux, dans une fenêtre <dialog> : plein écran sur téléphone, une carte au centre sur ordinateur.
   Trois gestes, trois contrôles distincts : ÉCOUTER (haut-parleur), CHOISIR (case), VALIDER (bouton du pied).
   Une couleur ne dit jamais rien seule : toujours une coche ou une croix ET un mot. */
#alphabet dialog.jeu { width:min(580px, calc(100vw - 24px)); height:min(760px, calc(100dvh - 24px)); max-height:calc(100dvh - 24px); padding:0; margin:auto; border:1px solid var(--bord); border-radius:18px;
  background:var(--papier); color:var(--encre); overflow:hidden; }
#alphabet dialog.jeu[open] { display:flex; flex-direction:column; }
#alphabet dialog.jeu::backdrop { background:rgba(24,20,16,.64); }
@media (max-width:600px) { #alphabet dialog.jeu { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; } }

#alphabet .jeu-tete { display:flex; align-items:center; gap:12px; padding:12px 12px 12px 20px; border-bottom:1px solid var(--filet); }
#alphabet .jeu-tete .titre-jeu { margin:0; flex:1; min-width:0; font:600 15px/1.35 'Jost',sans-serif; color:var(--titre); }
#alphabet .fermer { flex:none; width:44px; height:44px; border-radius:50%; border:1.5px solid #cdb995; background:transparent; font:400 20px/1 'Jost',sans-serif; color:var(--nuit); }
#alphabet .fermer:hover { border-color:var(--nuit); }

#alphabet .jeu-corps { flex:1; overflow:auto; padding:18px 20px 12px; }
#alphabet .progression { margin:0 0 4px; font:600 13px/1.4 'Jost',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--sourd); }
#alphabet .progression:focus { outline:none; }
#alphabet .barre { height:4px; background:#eee3d1; border-radius:4px; margin:0 0 16px; overflow:hidden; }
#alphabet .barre i { display:block; height:100%; width:0; background:var(--or); transition:width .3s; }
#alphabet fieldset { border:0; margin:0; padding:0; min-width:0; }
#alphabet .consigne { margin:0 0 16px; font-size:17px; line-height:1.6; }

/* le grand haut-parleur (jeu 1) */
#alphabet .ecouter-grand { display:flex; flex-direction:column; align-items:center; gap:8px; margin:6px auto 18px; padding:0; background:none; border:0; font:600 15px/1.3 'Jost',sans-serif; color:var(--titre); }
#alphabet .ecouter-grand .hp { position:relative; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:var(--nuit); color:#f1e7d8; }
#alphabet .ecouter-grand:hover .hp { background:#3b322b; }
#alphabet .hp svg { width:44%; height:44%; }

/* les trois lettres (jeu 1) : des cases à choisir, rien ne joue avant la correction */
#alphabet .options3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 6px; }
#alphabet .opt { position:relative; display:grid; place-items:center; aspect-ratio:1 / 1.05; border:2px solid var(--bord); border-radius:16px; background:var(--carte); cursor:pointer; }
/* le radio ne prend JAMAIS le pointeur : placé par la grille au centre exact de la case, il avalait le clic une fois désactivé
   (après la correction, toucher une lettre ne jouait plus rien). Le <label> transmet le choix ; le focus clavier reste sur le radio. */
#alphabet .opt input { position:absolute; top:0; left:0; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
#alphabet .opt .gl { font-family:'Noto Naskh Arabic',serif; font-size:clamp(42px,13vw,66px); line-height:1.1; color:#211c1a; }
#alphabet .opt:hover { border-color:#c29a5f; }
#alphabet .opt:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:3px; }
#alphabet .opt.choisie, #alphabet .prop.choisie { border-color:var(--nuit); background:#f3e8d5; box-shadow:inset 0 0 0 1.5px var(--nuit); }

/* les trois propositions audio (jeu 2) : ÉCOUTER à gauche, CHOISIR à droite, jamais le même geste */
#alphabet .glyphe-grand { display:grid; place-items:center; width:min(180px,52vw); aspect-ratio:1; margin:0 auto 18px; border:1.5px solid var(--bord); border-radius:20px; background:var(--carte); }
#alphabet .glyphe-grand .gl { font-family:'Noto Naskh Arabic',serif; font-size:min(96px,28vw); line-height:1.1; color:#211c1a; }
#alphabet .props { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
#alphabet .prop { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 10px; border:2px solid var(--bord); border-radius:14px; background:var(--carte); }
#alphabet .prop .num { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#efe3cd; color:var(--titre); font:600 15px/1 'Jost',sans-serif; }
#alphabet .ecouter { position:relative; justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px 8px 10px; border-radius:999px; border:1.5px solid var(--nuit); background:var(--nuit); color:#f1e7d8; font:500 15px/1.2 'Jost',sans-serif; }
#alphabet .ecouter svg { width:20px; height:20px; flex:none; }
#alphabet .ecouter:hover { background:#3b322b; }
#alphabet .choisir { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; border-radius:999px; border:1.5px solid #b39c7b; cursor:pointer; font:500 15px/1.2 'Jost',sans-serif; background:#fff; }
#alphabet .choisir input { appearance:none; -webkit-appearance:none; margin:0; width:20px; height:20px; border-radius:50%; border:2px solid #8d714d; display:grid; place-items:center; }
#alphabet .choisir input:checked { border-color:var(--nuit); }
#alphabet .choisir input:checked::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--nuit); }
#alphabet .choisir:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:3px; }

/* après la correction : ✓ ou ✗, et un mot */
#alphabet .marque { position:absolute; top:6px; left:6px; display:none; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font:600 12px/1.4 'Jost',sans-serif; }
#alphabet .prop .marque { position:static; grid-column:1 / -1; justify-self:start; }
#alphabet .opt .marque { width:28px; height:28px; padding:0; justify-content:center; border-radius:50%; font-size:15px; line-height:1; }
#alphabet .bonne .marque, #alphabet .fausse .marque { display:inline-flex; }
#alphabet .bonne { border-color:#a96b1f !important; background:#f6e5c4 !important; box-shadow:inset 0 0 0 1.5px #a96b1f !important; }
#alphabet .bonne .marque { background:#7a4d12; color:#fff; }
#alphabet .fausse { border-style:dashed !important; border-color:#8a3b1c !important; background:#fbf1ea !important; box-shadow:none !important; }
#alphabet .fausse .marque { background:#fff; color:#8a3b1c; border:1.5px solid #8a3b1c; }
#alphabet .verrou .opt, #alphabet .verrou .choisir { cursor:default; }

/* le retour, puis le pied qui porte VALIDER puis CONTINUER */
#alphabet .retour { margin:14px 0 0; }
#alphabet .retour p { margin:0 0 10px; font-weight:600; font-size:17px; color:#211c1a; }
#alphabet .retour:empty { margin:0; }
#alphabet .jeu-pied { padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--filet); display:flex; gap:10px; flex-wrap:wrap; }
#alphabet .jeu-pied .btn { flex:1 1 200px; }
#alphabet .avertissement { margin:10px 0 0; color:#8a3b1c; font-size:15px; font-weight:500; min-height:0; }

/* le bilan */
#alphabet .bilan h3 { margin:6px 0 6px; font:600 30px/1.25 'Fredoka','Jost',sans-serif; color:var(--titre); }
#alphabet .bilan h3:focus { outline:none; }
#alphabet .score { margin:0 0 16px; font-size:19px; font-weight:600; color:#211c1a; }
#alphabet .a-revoir { list-style:none; margin:8px 0 16px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; direction:rtl; }
#alphabet .a-revoir .case { width:66px; }
#alphabet .a-revoir .case .gl { font-size:34px; }
#alphabet .bilan-actions { display:grid; gap:10px; margin:14px 0 4px; }
#alphabet .bilan-actions .btn { width:100%; }