/* ═══════════════ LES FENÊTRES « ? » COMMENT JOUER, NOUVEAUTÉS ET PARAMÈTRES (Js', 03/10) ═══════════════
   « refait les UI des boutons ? et nouveautés et paramètres dans le thème des autres UI » : les trois fenêtres qu'ouvrent
   ces boutons prennent le thème de celle du groupe (css/groupe.css) et du coffre — une boîte de couleur en dégradé, de
   fines rayures et un reflet, le gros trait d'encre, les coins arrondis et l'ombre décalée ; un bandeau de titre avec
   l'icône du bouton dans un rond blanc et le titre blanc cerclé d'encre ; dedans, des cartes blanches posées dessus ; les
   boutons du menu (.hub-btn, .hub-seg) et le principal en or, comme .hub-go. Chacune sa couleur : Comment jouer en bleu,
   Nouveautés en orange et or (comme l'étoile du bouton), Paramètres en violet.
   - Ce fichier vient après tous les autres et ses règles partent de l'id de la fenêtre : il l'emporte sur les anciennes
     (css/br.css, css/tel.css). Les classes refaites (fn-…) remplacent celles d'avant, dont les règles ne s'appliquent plus.
   - Les Nouveautés gardent leur HTML tel quel (le script qui les refait remplace tout le bloc #news de br.html) : leur
     icône et leur bouton « Trop bien, on joue » sont dessinés ici, à partir des classes d'avant.
   - Ordinateur : tout en --u (10 px à 1 920 × 1 080, comme l'entrée). Téléphone en paysage (520 px de haut ou moins) :
     des pixels, et tout tient sans défiler jusqu'à 667 × 300 — seules la liste des mises à jour et leur contenu défilent,
     chacun dans sa carte. */

/* les mesures et les contours d'encre : ces fenêtres sont hors de #hub (comme celle du groupe), elles reçoivent ici leur
   unité (sinon les boutons .hub-btn et .hub-seg perdent bordure, ombre et police) */
#help, #news, #settings, #credits {
  --u: clamp(6px, min(0.521vw, 0.926vh), 15px);
  --out: 2px 2px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 0 2px 0 var(--ink);
  --out3: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 3px 0 var(--ink), 3px 0 0 var(--ink);
}
/* chaque fenêtre sa couleur : --fx celle du bouton, --fx-l la claire (le reflet), --fx-d la profonde (les titres dans les
   cartes), --fx-a → --fx-b le dégradé de la boîte, --fx-h1 → --fx-h2 celui du bandeau, --fx-ico l'icône du bandeau (le
   dessin du bouton : « ? », l'étoile des Nouveautés, la roue dentée) */
#help {
  --fx: #2D8CFF; --fx-l: #BCDDFF; --fx-d: #1557B8; --fx-a: #52A9FF; --fx-b: #1A5BC4; --fx-h1: #5AAEFF; --fx-h2: #1F74E0;
  --fx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 8.5a3.4 3.4 0 1 1 4.9 3.1c-1 .5-1.5 1.2-1.5 2.3v.5' fill='none' stroke='%231F74E0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='18.8' r='1.9' fill='%231F74E0'/%3E%3C/svg%3E");
}
#news {
  --fx: #FF8A1F; --fx-l: #FFE2A8; --fx-d: #A94700; --fx-a: #FFB23E; --fx-b: #D85A00; --fx-h1: #FFBA4A; --fx-h2: #F07A0C;
  --fx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z' fill='%23FF6B57' stroke='%23151515' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#settings {
  --fx: #8E44E8; --fx-l: #E0C8FF; --fx-d: #5B25A8; --fx-a: #A766FF; --fx-b: #5E24B0; --fx-h1: #A968FF; --fx-h2: #7A35D6;
  --fx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A35D6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

/* ─── la boîte : la couleur de la fenêtre en dégradé, de fines rayures, un reflet en haut ─── */
:is(#help, #news, #settings, #credits) > .modal-box {
  --mbx: calc(var(--u) * 2.6);
  gap: calc(var(--u) * 1.6);
  padding: 0 var(--mbx) calc(var(--u) * 2.4);
  border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2.2); color: #fff;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.35) color-mix(in srgb, var(--fx-l) 45%, transparent), calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink);
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, color-mix(in srgb, var(--fx-l) 35%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)),
    linear-gradient(170deg, var(--fx-a), var(--fx) 45%, var(--fx-b));
}
/* le bandeau du titre : l'icône du bouton dans un rond blanc, le titre blanc cerclé d'encre, ✕ */
:is(#help, #news, #settings, #credits) > .modal-box > header {
  flex: none; display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 1.2); min-width: 0;
  margin: 0 calc(-1 * var(--mbx)); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4) calc(var(--u) * 1.1) var(--mbx);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)), linear-gradient(var(--fx-h1), var(--fx-h2));
  border-bottom: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.7) calc(var(--u) * 1.7) 0 0;
}
:is(#help, #news, #settings, #credits) > .modal-box > header::before {
  content: ''; flex: none; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); min-width: 32px; min-height: 32px; box-sizing: border-box;
  border: calc(var(--u) * 0.35) solid var(--ink); border-radius: 50%; background: #fff var(--fx-ico) center / 62% no-repeat;
  box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink);
}
/* (3 px de marge à gauche, rendus aussitôt : le contour d'encre de la première lettre n'est pas rogné) */
:is(#help, #news, #settings, #credits) > .modal-box > header h2 {
  flex: 1; min-width: 0; margin: 0 0 0 -3px; padding: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.3) 3px;
  font: italic 800 calc(var(--u) * 4.8)/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; color: #fff;
  text-shadow: var(--out3), calc(var(--u) * 0.4) calc(var(--u) * 0.5) 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(#help, #news, #settings, #credits) > .modal-box > header .icon-btn {
  flex: none; width: max(40px, calc(var(--u) * 5.6)); height: max(40px, calc(var(--u) * 5.6)); border-width: max(3px, calc(var(--u) * 0.35));
  border-radius: calc(var(--u) * 1.2); font-size: max(20px, calc(var(--u) * 2.8)); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink);
}
/* le bouton qui ferme en bas (« C'est parti », « Trop bien, on joue », « OK ») : en or, comme « Jouer » et « Prêt »
   (.hub-go) — il garde ses classes d'avant (.btn.primary), restylées ici. Au téléphone, « C'est parti » reste caché :
   la croix ferme (css/tel.css, Js' le 1er/10) */
:is(#help, #news, #settings, #credits) .modal-box .btn.primary[data-close] {
  flex: none; align-self: flex-end; min-width: calc(var(--u) * 24); min-height: 44px; margin: 0;
  padding: calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * 1.2);
  border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.4); background: var(--gold); color: var(--ink);
  box-shadow: inset 0 calc(var(--u) * -0.6) 0 rgba(180, 110, 0, 0.35), calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink);
  font: italic 800 max(18px, calc(var(--u) * 3))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; text-shadow: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
}
:is(#help, #news, #settings, #credits) .modal-box .btn.primary[data-close]:hover {
  transform: translate(calc(var(--u) * -0.2), calc(var(--u) * -0.2)); background: #FFDC5E;
  box-shadow: inset 0 calc(var(--u) * -0.6) 0 rgba(180, 110, 0, 0.35), calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 var(--ink);
}
:is(#help, #news, #settings, #credits) .modal-box .btn.primary[data-close]:active { transform: translate(calc(var(--u) * 0.4), calc(var(--u) * 0.4)); box-shadow: calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 var(--ink); }
/* les cartes blanches posées sur la couleur (celles du groupe) */
:is(#help, #settings) :is(.fn-card, .fn-set) {
  box-sizing: border-box; min-width: 0; margin: 0;
  border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.6); background: var(--card); color: var(--ink);
  box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink);
}
#help .fn-card h3 { margin: 0; font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: var(--fx-d); }

/* ═══ COMMENT JOUER : bleu ═══ */
/* (html.tel : l'ancienne largeur au doigt, css/tel.css, ne vaut plus) */
#help > .modal-box, html.tel #help > .modal-box { width: min(max(calc(var(--u) * 100), 740px), 100%); }
/* le bandeau : le titre en entier, puis les trois onglets (comme ceux du coffre), puis ✕ */
#help > .modal-box > header h2 { flex: 0 1 auto; }
#help .fn-tabs { flex: none; margin-left: auto; }
#help .fn-tabs button { min-height: max(36px, calc(var(--u) * 4.8)); padding: 0 calc(var(--u) * 1.9); font-size: max(14px, calc(var(--u) * 2.1)); }
#help .fn-tabs button:not([aria-pressed="true"]):hover { background: #fff; }
/* les commandes : au clavier et à la souris, ou au doigt, selon l'appareil (comme avant : css/br.css) */
html:not(.touch) #help .fn-touch, html.touch #help .fn-keys { display: none !important; }
/* — au clavier : deux cartes côte à côte, « Se battre » et « Et aussi » ; les touches, puis ce qu'elles font */
#help .fn-keys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 1.8); align-items: stretch; }
#help .fn-keys .fn-card { display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8) calc(var(--u) * 1.5); }
#help .fn-keys .fn-card > div { display: flex; align-items: center; gap: calc(var(--u) * 1.4); min-height: calc(var(--u) * 4.8); font: 500 max(13px, calc(var(--u) * 1.8))/1.25 var(--fb); }
#help .fn-keys .fn-card > div + div { padding-top: calc(var(--u) * 0.8); border-top: 2px dashed rgba(21, 21, 21, 0.12); }
#help .fn-keys .k { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 0.45); width: calc(var(--u) * 17); min-width: 0; font-weight: 800; }
#help .fn-keys kbd { min-width: calc(var(--u) * 3.6); padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8) calc(var(--u) * 0.55); border-width: calc(var(--u) * 0.32); border-bottom-width: calc(var(--u) * 0.62); border-radius: calc(var(--u) * 0.8); font-size: max(13px, calc(var(--u) * 1.9)); }
/* — au doigt : trois cartes côte à côte (le dessin, puis la phrase), l'astuce dessous, en pointillés blancs */
#help .fn-touch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); align-items: stretch; }
#help .fn-tc { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.4) calc(var(--u) * 1.6); text-align: center; }
#help .fn-tc p { margin: 0; font: 500 max(13px, calc(var(--u) * 1.9))/1.35 var(--fb); }
#help .fn-tip { grid-column: 1 / -1; margin: 0; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.6); border: 2px dashed rgba(255, 255, 255, 0.8); border-radius: calc(var(--u) * 1.2); background: rgba(255, 255, 255, 0.12); color: #fff; text-align: center; font: 700 max(12px, calc(var(--u) * 1.75))/1.3 var(--fb); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
/* les règles : une carte, sur deux colonnes, une pastille d'or devant chacune ; la dernière (qui gagne) sur toute la largeur */
#help .fn-rules { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 1.5) calc(var(--u) * 3.2); padding: calc(var(--u) * 2) calc(var(--u) * 2.4) calc(var(--u) * 2.2); font: 500 max(13px, calc(var(--u) * 1.9))/1.4 var(--fb); }
#help .fn-rules > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
#help .fn-rules > li, #help .fn-list > li { position: relative; padding-left: calc(var(--u) * 2.6); }
#help .fn-rules > li::before, #help .fn-list > li::before { content: ''; position: absolute; left: 0; top: 0.32em; width: max(9px, calc(var(--u) * 1.4)); height: max(9px, calc(var(--u) * 1.4)); box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50%; background: var(--gold); }
#help .fn-rules b, #help .fn-list b { font-weight: 800; }
/* le jeu : l'accroche, les modes, les pages du site (en ligne seulement), puis Crédits et Nouveautés */
#help .fn-game { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4) calc(var(--u) * 2); }
#help .fn-game > p { margin: 0; font: 500 max(13px, calc(var(--u) * 1.9))/1.45 var(--fb); }
#help .fn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 0.9); font: 500 max(13px, calc(var(--u) * 1.85))/1.4 var(--fb); }
#help .fn-game > .help-site { font-size: max(12px, calc(var(--u) * 1.7)); color: rgba(21, 21, 21, 0.72); }
#help .help-site a { color: var(--fx-d); }
#help .fn-more { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.2); margin: 0; }
#help .fn-more .hub-btn { margin: 0; }
/* (un écran trop bas pour tout montrer : c'est la carte qui défile, jamais la fenêtre — les onglets à deux cartes
   gardent la place de leurs ombres) */
#help > .modal-box > .help-pane { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#help > .modal-box > :is(.fn-touch, .fn-keys) { margin: 0 -6px -6px 0; padding: 0 6px 6px 0; }

/* ═══ PARAMÈTRES : violet ═══ */
/* (display: flex — l'ancienne mise en page sur deux colonnes, css/br.css, ne vaut plus) */
#settings > .modal-box { width: min(max(calc(var(--u) * 80), 580px), 100%); display: flex; }
/* un réglage par carte blanche : son icône, son nom (et ce qu'il fait, sur ordinateur), son bouton à droite */
#settings .fn-sets { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); min-width: 0; }
#settings .fn-set { display: flex; align-items: center; gap: calc(var(--u) * 1.6); min-height: calc(var(--u) * 8.2); padding: calc(var(--u) * 1) calc(var(--u) * 1.8) calc(var(--u) * 1) calc(var(--u) * 1.3); }
/* (« Images/s max » : au doigt seulement, comme avant — css/tel.css) */
#settings .fn-set.set-fps { display: none; }
html.tel #settings .fn-set.set-fps { display: flex; }
#settings .fn-set .ni { width: max(30px, calc(var(--u) * 5)); height: max(30px, calc(var(--u) * 5)); border-width: max(2.5px, calc(var(--u) * 0.35)); border-radius: calc(var(--u) * 1.1); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); }
#settings .fn-set .ni svg { width: 60%; height: 60%; }
#settings .fn-st { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.45); }
#settings .fn-st b { padding-right: 2px; font: italic 800 max(16px, calc(var(--u) * 2.7))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; }
#settings .fn-st small { font: 500 max(12px, calc(var(--u) * 1.65))/1.3 var(--fb); color: rgba(21, 21, 21, 0.62); }
/* l'interrupteur : gris éteint, vert allumé, le rond blanc cerclé d'encre qui glisse (--k le rond, --p le jour autour,
   --b le trait) */
#settings .fn-sw {
  --k: max(22px, calc(var(--u) * 3.2)); --p: max(3px, calc(var(--u) * 0.45)); --b: max(3px, calc(var(--u) * 0.4));
  position: relative; flex: none; box-sizing: content-box; width: calc(var(--k) * 2 + var(--p) * 2 + 4px); height: calc(var(--k) + var(--p) * 2); padding: 0;
  border: var(--b) solid var(--ink); border-radius: 99px; background: #D9D3C6; cursor: pointer;
  box-shadow: inset 0 3px 0 rgba(21, 21, 21, 0.12), calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); transition: background-color 0.15s ease;
}
#settings .fn-sw i { position: absolute; top: var(--p); left: var(--p); width: var(--k); height: var(--k); box-sizing: border-box; border: max(2px, calc(var(--u) * 0.3)) solid var(--ink); border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
#settings .fn-sw[aria-pressed="true"] { background: #3DDC84; }
#settings .fn-sw[aria-pressed="true"] i { transform: translateX(calc(var(--k) + 4px)); }
/* les choix (Haute · Rapide, 60 · 120) : ceux du menu (.hub-seg), le choix pris en or sur l'encre — la classe .seg reste,
   js/br/app.js s'en sert */
#settings .fn-seg { flex: none; display: inline-flex; border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: var(--card); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); overflow: hidden; }
#settings .fn-seg button { height: auto; min-height: max(36px, calc(var(--u) * 4.8)); min-width: 44px; justify-content: center; padding: 0 calc(var(--u) * 1.7); border: 0; border-left: calc(var(--u) * 0.3) solid var(--ink); border-radius: 0; background: none; color: var(--ink); font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; }
#settings .fn-seg button:first-child { border-left: 0; }
#settings .fn-seg button:hover { background: #fff; }
#settings .fn-seg button[aria-pressed="true"] { background: var(--ink); color: var(--gold); }
/* (la note sous « Images/s max », quand l'écran reste bloqué à 60 : un papier jaune sur toute la largeur) */
html.tel #settings .fn-sets > .set-hint:not([hidden]) { display: block; grid-column: 1 / -1; margin: 0; padding: 6px 10px 7px; border: 2.5px solid var(--ink); border-radius: 10px; background: #FFF4D0; color: var(--ink); font: 600 12.5px/1.35 var(--fb); box-shadow: 3px 3px 0 var(--ink); }
/* le bas : Comment jouer, Nouveautés et Crédits (les boutons blancs du menu), puis « OK » en or */
#settings .fn-foot { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 1.2); min-width: 0; }
#settings .fn-foot .hub-btn { margin: 0; }
#settings .fn-foot .btn.primary[data-close] { margin-left: auto; align-self: center; }
/* (Max, 03/10 : « gérer les différents sons » et « changer ses touches ») les deux pages qui prennent la place de la liste :
   « Régler » (les sons) et « Changer » (les touches, au clavier seulement) sont des boutons blancs dans leur carte ; un curseur
   par catégorie de sons, une touche à choisir par commande. L'attribut hidden l'emporte sur les mises en page. */
#settings :is(.fn-sets, .fn-hint, .fn-main, .fn-subb)[hidden] { display: none !important; }
html.touch #settings .set-keys, html.tel #settings .set-keys { display: none; }
#settings .fn-go { flex: none; margin: 0; min-height: max(36px, calc(var(--u) * 4.8)); padding: 0 calc(var(--u) * 1.6); font-size: max(14px, calc(var(--u) * 2.1)); }
/* le curseur : un rail gris qui se remplit de vert, le rond blanc cerclé d'encre (comme l'interrupteur) */
#settings .fn-vol {
  --k: max(22px, calc(var(--u) * 3.2)); --th: calc(var(--k) * 0.62);
  flex: 0 1 calc(var(--u) * 27); min-width: 84px; height: var(--k); margin: 0; padding: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; outline-offset: 4px;
}
#settings .fn-vol::-webkit-slider-runnable-track { height: var(--th); box-sizing: border-box; border: max(3px, calc(var(--u) * 0.4)) solid var(--ink); border-radius: 99px; background: linear-gradient(90deg, #3DDC84 var(--v, 100%), #D9D3C6 0); box-shadow: inset 0 3px 0 rgba(21, 21, 21, 0.12), calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); }
#settings .fn-vol::-webkit-slider-thumb { -webkit-appearance: none; width: var(--k); height: var(--k); margin-top: calc((var(--th) - var(--k)) / 2); box-sizing: border-box; border: max(2px, calc(var(--u) * 0.3)) solid var(--ink); border-radius: 50%; background: #fff; box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--ink); }
#settings .fn-vol::-moz-range-track { height: var(--th); box-sizing: border-box; border: max(3px, calc(var(--u) * 0.4)) solid var(--ink); border-radius: 99px; background: #D9D3C6; box-shadow: inset 0 3px 0 rgba(21, 21, 21, 0.12), calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); }
#settings .fn-vol::-moz-range-progress { height: calc(var(--th) - max(6px, calc(var(--u) * 0.8))); border-radius: 99px; background: #3DDC84; }
#settings .fn-vol::-moz-range-thumb { width: var(--k); height: var(--k); box-sizing: border-box; border: max(2px, calc(var(--u) * 0.3)) solid var(--ink); border-radius: 50%; background: #fff; box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--ink); }
#settings .fn-vol:focus-visible { outline: 3px solid var(--fx); }
#settings .fn-val { flex: none; min-width: 3.6em; text-align: right; font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; }
#settings .fn-val.off { color: #C0392B; }
/* la liste des touches : deux colonnes, chaque commande et sa touche (une touche en relief, en or quand on attend la prochaine) */
#settings .fn-keys-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 1.2) calc(var(--u) * 1.6); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0; }
#settings .fn-key { flex: none; min-width: calc(var(--u) * 10); min-height: max(34px, calc(var(--u) * 4.6)); padding: 0 calc(var(--u) * 1.4); border: calc(var(--u) * 0.32) solid var(--ink); border-bottom-width: calc(var(--u) * 0.7); border-radius: calc(var(--u) * 0.9); background: #fff; color: var(--ink); font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; }
#settings .fn-key:hover { background: #FFF4D0; }
#settings .fn-key.wait { background: var(--gold); animation: fn-attend 0.9s ease-in-out infinite alternate; }
@keyframes fn-attend { to { transform: translateY(2px); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); } }
/* (les notes : un papier jaune sur toute la largeur, sous la liste) */
#settings :is(#sndHint, #keyHint):not([hidden]) { display: block; grid-column: 1 / -1; margin: 0; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: #FFF4D0; color: var(--ink); font: 600 max(12.5px, calc(var(--u) * 1.8))/1.35 var(--fb); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }

/* ═══ NOUVEAUTÉS : orange et or ═══
   La boîte devient une grille : le bandeau ; la liste des mises à jour à gauche (des cartes blanches, celle qu'on lit en
   encre et or) ; son contenu à droite, dans une grande carte blanche qui défile ; « Trop bien, on joue » en or dessous.
   (.news-body s'efface — display: contents — : la liste et le contenu se rangent dans la grille de la boîte) */
#news > .modal-box {
  width: min(max(calc(var(--u) * 132), 960px), 100%); height: min(max(calc(var(--u) * 90), 620px), 100%);
  display: grid; grid-template-columns: max(240px, calc(var(--u) * 33)) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "nav pages" "nav ok"; gap: calc(var(--u) * 1.6) calc(var(--u) * 2.2);
}
#news > .modal-box > header { grid-area: head; }
#news .news-body { display: contents; }
/* (la liste défile seule ; ses marges laissent la place aux ombres des cartes et à l'étiquette « Nouveau ») */
#news .news-nav {
  grid-area: nav; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2);
  margin: 0 calc(var(--u) * -1.2) 0 -4px; padding: calc(var(--u) * 2.6) calc(var(--u) * 1.2) calc(var(--u) * 1.2) 4px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.6) transparent;
}
#news .news-nav button {
  flex: none; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 0.9) calc(var(--u) * 1.3) calc(var(--u) * 0.9) calc(var(--u) * 0.9);
  border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.4); background: var(--card); color: var(--ink);
  box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--ink);
}
#news .news-nav button:hover { background: #fff; transform: translate(-1px, -1px); box-shadow: calc(var(--u) * 0.5 + 1px) calc(var(--u) * 0.5 + 1px) 0 var(--ink); }
#news .news-nav button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
#news .news-nav .ni { width: max(28px, calc(var(--u) * 4.4)); height: max(28px, calc(var(--u) * 4.4)); border-width: max(2.5px, calc(var(--u) * 0.35)); border-radius: calc(var(--u) * 1); }
#news .news-nav .ni svg { width: 58%; height: 58%; }
#news .news-nav b { padding-right: 2px; font: italic 800 max(15px, calc(var(--u) * 2.4))/1 var(--fc); letter-spacing: 0.3px; }
#news .news-nav small { font: 700 max(12px, calc(var(--u) * 1.45))/1 var(--fc); letter-spacing: 1px; color: rgba(21, 21, 21, 0.55); }
/* (la mise à jour qu'on lit : en encre, son titre en or — comme le choix pris des menus —, son ombre orange foncé) */
#news .news-nav button[aria-selected="true"] { background: var(--ink); color: var(--gold); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--fx-d); }
#news .news-nav button[aria-selected="true"] small { color: rgba(255, 255, 255, 0.72); }
/* (« Nouveau » : une étiquette d'or posée sur le coin, penchée comme celles du groupe — assez haut pour ne pas cacher le titre) */
#news .news-nav .nv-new { top: calc(var(--u) * -2.4); right: calc(var(--u) * 1); padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8) calc(var(--u) * 0.4); border-width: max(2px, calc(var(--u) * 0.25)); border-radius: calc(var(--u) * 0.7); font: italic 800 max(12px, calc(var(--u) * 1.4))/1 var(--fc); letter-spacing: 0.8px; box-shadow: 1.5px 1.5px 0 var(--ink); transform: rotate(-3deg); }
/* le contenu : une grande carte blanche qui défile (le bandeau de la mise à jour, puis ses rubriques) */
#news .news-pages {
  grid-area: pages; min-height: 0; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 2);
  border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.6); background: var(--card); color: var(--ink);
  box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); scrollbar-width: thin; scrollbar-color: rgba(21, 21, 21, 0.3) transparent;
}
#news .news-date { font-size: max(13px, calc(var(--u) * 1.6)); }
#news .news-lead { font-size: max(14px, calc(var(--u) * 1.95)); }
#news .news-page h4 { font-size: max(15px, calc(var(--u) * 2.1)); }
#news .news-page ul { font-size: max(14px, calc(var(--u) * 1.95)); }
#news .news-page li::marker { color: var(--fx-b); }
#news .modal-box > .btn.primary[data-close] { grid-area: ok; justify-self: end; align-self: center; }

/* ─── LE TÉLÉPHONE EN PAYSAGE (et toute fenêtre de 520 px de haut ou moins) : des pixels, tout tient sans défiler ─── */
@media (max-height: 520px) {
  #help, #news, #settings, #credits { --u: 4px; }
  :is(#help, #news, #settings, #credits) > .modal-box { --mbx: 12px; gap: 8px; padding-bottom: 10px; border-width: 4px; border-radius: 14px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fx-l) 45%, transparent), 6px 6px 0 var(--ink); }
  :is(#help, #news, #settings, #credits) > .modal-box > header { gap: 8px; padding: 4px 6px 4px var(--mbx); border-bottom-width: 3px; border-radius: 10px 10px 0 0; }
  :is(#help, #news, #settings, #credits) > .modal-box > header::before { width: 30px; height: 30px; min-width: 0; min-height: 0; border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); }
  :is(#help, #news, #settings, #credits) > .modal-box > header h2 { font-size: 24px; text-shadow: var(--out), 2px 3px 0 var(--ink); }
  :is(#help, #news, #settings, #credits) > .modal-box > header .icon-btn { width: 36px; height: 36px; font-size: 18px; border-width: 3px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
  :is(#help, #news, #settings, #credits) .modal-box .btn.primary[data-close] { min-width: 0; min-height: 40px; padding: 4px 18px 6px; border-width: 3px; border-radius: 12px; box-shadow: inset 0 -3px 0 rgba(180, 110, 0, 0.35), 4px 4px 0 var(--ink); font-size: 20px; }
  :is(#help, #settings) :is(.fn-card, .fn-set) { border-width: 3px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); }
  #help .fn-card h3 { font-size: 13px; }

  /* — Comment jouer — */
  #help > .modal-box, html.tel #help > .modal-box { width: min(700px, 100%); }
  #help .fn-tabs { border-width: 3px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
  #help .fn-tabs button { min-height: 32px; padding: 0 11px; border-left-width: 2.5px; font-size: 14px; }
  #help .fn-touch { gap: 8px; }
  #help .fn-tc { gap: 4px; padding: 6px 8px 8px; }
  #help .fn-tc p { font-size: 12.5px; line-height: 1.3; }
  #help .fn-tip { padding: 5px 10px; border-radius: 9px; font-size: 12.5px; }
  /* (au clavier, un ordinateur dans une fenêtre basse : les deux cartes, serrées) */
  #help .fn-keys { gap: 10px; }
  #help .fn-keys .fn-card { gap: 3px; padding: 6px 10px 8px; }
  #help .fn-keys .fn-card > div { gap: 8px; min-height: 26px; font-size: 12.5px; }
  #help .fn-keys .fn-card > div + div { padding-top: 3px; }
  #help .fn-keys .k { width: 100px; gap: 3px; }
  #help .fn-keys kbd { min-width: 22px; padding: 2px 5px 3px; border-width: 2px; border-bottom-width: 3.5px; border-radius: 6px; font-size: 12px; }
  #help .fn-rules { gap: 6px 18px; padding: 9px 12px 10px; font-size: 12.5px; line-height: 1.32; }
  #help .fn-rules > li, #help .fn-list > li { padding-left: 15px; }
  #help .fn-rules > li::before, #help .fn-list > li::before { width: 9px; height: 9px; }
  /* (le jeu sur deux colonnes : l'accroche, le site et les boutons à gauche ; les modes à droite) */
  #help .fn-game { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "lead list" "site list" "more list"; gap: 6px 16px; padding: 8px 12px 10px; }
  #help .fn-game > p:first-child { grid-area: lead; }
  #help .fn-game > .fn-list { grid-area: list; }
  #help .fn-game > .help-site { grid-area: site; }
  #help .fn-game > .fn-more { grid-area: more; align-self: end; }
  #help .fn-game > p, #help .fn-list { font-size: 12.5px; line-height: 1.32; }
  #help .fn-list { gap: 5px; }
  #help .fn-game > .help-site { font-size: 12px; }
  #help .fn-more { gap: 8px; }
  #help .fn-more .hub-btn { min-height: 36px; padding: 3px 12px 5px; font-size: 14px; }

  /* — Paramètres : les réglages sur deux colonnes, sans leur phrase (peu de texte au doigt) — */
  #settings > .modal-box { width: min(720px, 100%); }
  #settings .fn-sets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; }
  #settings .fn-set { min-height: 48px; gap: 8px; padding: 5px 10px 5px 7px; }
  #settings .fn-set .ni { width: 28px; height: 28px; min-width: 0; min-height: 0; border-width: 2.5px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); }
  #settings .fn-st small { display: none; }
  #settings .fn-st b { font-size: 17px; }
  #settings .fn-sw { --k: 22px; --p: 3px; --b: 3px; box-shadow: inset 0 2px 0 rgba(21, 21, 21, 0.12), 2px 2px 0 var(--ink); }
  #settings .fn-sw i { border-width: 2px; }
  #settings .fn-seg { border-width: 3px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
  #settings .fn-seg button { min-height: 34px; min-width: 40px; padding: 0 10px; border-left-width: 2.5px; font-size: 14px; }
  #settings .fn-foot { flex-wrap: nowrap; gap: 8px; }
  #settings .fn-foot .hub-btn { min-height: 38px; padding: 3px 10px 5px; font-size: 14px; }
  #settings .fn-foot .btn.primary[data-close] { min-width: 96px; }
  /* (la note « bloqué à 60 » prend la case libre à côté d'« Images/s max », dont elle parle : la fenêtre grandit à peine) */
  html.tel #settings .fn-sets > .set-hint:not([hidden]) { grid-column: auto; align-self: center; }
  /* — la page des sons : une carte par ligne, le curseur au milieu (la phrase de chaque catégorie reste cachée) — */
  #settings #subSons { grid-template-columns: minmax(0, 1fr); }
  #settings .fn-go { min-height: 34px; padding: 0 12px; font-size: 14px; }
  #settings .fn-vol { --k: 22px; flex: 1 1 auto; }
  #settings .fn-val { min-width: 3.4em; font-size: 14px; }
  #settings .fn-key { min-height: 32px; min-width: 84px; padding: 0 12px; border-width: 2.5px; border-bottom-width: 4px; font-size: 14px; }
  #settings :is(#sndHint, #keyHint):not([hidden]) { padding: 4px 9px 5px; border-width: 2.5px; font-size: 12.5px; line-height: 1.3; box-shadow: 3px 3px 0 var(--ink); }

  /* — Nouveautés : la liste à gauche avec « Trop bien, on joue » dessous ; le contenu prend toute la hauteur — */
  #news > .modal-box { width: min(780px, 100%); height: min(720px, 100%); grid-template-columns: 190px minmax(0, 1fr); grid-template-areas: "head head" "nav pages" "ok pages"; gap: 8px 12px; }
  #news .news-nav { gap: 8px; margin-right: -8px; padding: 14px 8px 6px 4px; }
  #news .news-nav button { gap: 7px; padding: 5px 8px 5px 6px; border-width: 3px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
  #news .news-nav button[aria-selected="true"] { box-shadow: 3px 3px 0 var(--fx-d); }
  #news .news-nav .ni { width: 26px; height: 26px; min-width: 0; min-height: 0; border-width: 2.5px; border-radius: 8px; }
  #news .news-nav b { font-size: 15px; }
  #news .news-nav small { font-size: 12px; letter-spacing: 0.6px; }
  #news .news-nav .nv-new { top: -15px; right: 6px; padding: 1px 5px 2px; border-width: 2px; font-size: 12px; }
  #news .news-pages { padding: 8px 12px 10px; border-width: 3px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); }
  #news .news-date { font-size: 12px; }
  #news .news-lead, #news .news-page ul { font-size: 13px; }
  #news .news-page h4 { font-size: 13px; }
  #news .modal-box > .btn.primary[data-close] { justify-self: stretch; align-self: end; padding: 4px 8px 6px; font-size: 16px; }
}
/* (le plus bas — 340 px de haut et moins, un Android avec la barre du navigateur : tout se resserre de quelques pixels) */
@media (max-height: 340px) {
  :is(#help, #news, #settings, #credits) > .modal-box { gap: 6px; padding-bottom: 8px; }
  :is(#help, #news, #settings, #credits) > .modal-box > header { padding-top: 2px; padding-bottom: 2px; }
  :is(#help, #news, #settings, #credits) > .modal-box > header::before { width: 28px; height: 28px; }
  :is(#help, #news, #settings, #credits) > .modal-box > header h2 { font-size: 21px; }
  :is(#help, #news, #settings, #credits) > .modal-box > header .icon-btn { width: 32px; height: 32px; }
  #help .fn-tabs button { min-height: 28px; padding: 0 9px; font-size: 13px; }
  #help .fn-tc { padding: 4px 7px 6px; }
  #help .fn-tc p, #help .fn-rules, #help .fn-game > p, #help .fn-list { font-size: 12px; line-height: 1.26; }
  #help .fn-tip { padding: 3px 8px; font-size: 12px; }
  #help .fn-rules { gap: 4px 16px; padding: 6px 10px 8px; }
  #help .fn-game { gap: 4px 14px; padding: 6px 10px 8px; }
  #help .fn-list { gap: 3px; }
  #help .fn-more .hub-btn { min-height: 32px; }
  #settings .fn-sets { gap: 6px 10px; }
  #settings .fn-set { min-height: 40px; padding-top: 2px; padding-bottom: 2px; }
  #settings .fn-sw { --k: 18px; }
  #settings .fn-seg button { min-height: 28px; }
  #settings .fn-go { min-height: 30px; }
  #settings .fn-foot .hub-btn, #settings .fn-foot .btn.primary[data-close] { min-height: 34px; }
  html.tel #settings .fn-sets > .set-hint:not([hidden]) { padding: 3px 8px; font-size: 12px; line-height: 1.22; }
}
/* (Comment jouer › Le jeu, au téléphone de 400 px de haut et moins : des lignes un peu plus serrées, tout tient) */
@media (max-height: 400px) {
  #help .fn-game > p, #help .fn-list { font-size: 12px; line-height: 1.24; }
  #help .fn-list { gap: 3px; }
}
/* (une fenêtre étroite et haute — moins de 700 px de large — : la liste des mises à jour passe en une rangée au-dessus) */
@media (max-width: 700px) and (min-height: 521px) {
  #news > .modal-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "head" "nav" "pages" "ok"; }
  #news .news-nav { flex-direction: row; margin: 0 -4px; padding: calc(var(--u) * 1.5) 4px calc(var(--u) * 1.2); overflow-x: auto; overflow-y: hidden; }
  #news .news-nav button { width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#help, #news, #settings, #credits) .modal-box .btn.primary[data-close], #settings .fn-sw, #settings .fn-sw i, #news .news-nav button { transition: none; }
}

/* ═══ CRÉDITS : vert (Js', 03/10 : « les crédits sont encore sur l'ancienne UI ») ═══
   Le même thème que les trois autres fenêtres : la boîte verte en dégradé, le bandeau avec un cœur dans le rond blanc, et
   les noms sur une carte blanche ; « Fermer » en or. */
#credits {
  --fx: #22B25F; --fx-l: #B8F5CF; --fx-d: #127A3E; --fx-a: #3FD07C; --fx-b: #0F7A3C; --fx-h1: #46D584; --fx-h2: #179A4E;
  --fx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3s-7.6-4.6-7.6-10.3a4.3 4.3 0 0 1 7.6-2.8 4.3 4.3 0 0 1 7.6 2.8c0 5.7-7.6 10.3-7.6 10.3z' fill='%23FF4D6D' stroke='%23151515' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#credits > .modal-box { width: min(max(calc(var(--u) * 62), 460px), 100%); }
#credits .credits {
  box-sizing: border-box; margin: 0; padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4) calc(var(--u) * 2);
  border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.6); background: var(--card); color: var(--ink);
  box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink);
}
#credits .credits .cr-role { color: var(--fx-d); }
#credits .modal-box > .btn.primary[data-close] { align-self: center; }
@media (max-height: 520px) {
  #credits > .modal-box { width: min(440px, 100%); }
  #credits .credits { padding: 8px 14px 10px; border-width: 3px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); }
}