:root {
    --bg: #14141c; --fg: #f0f0f5; --accent: #ffb454;
    --hero: #5ab0ff; --enemy: #ff6b6b; --ki: #b48cff;
    --panel: #20202c; --ok: #6bd98a;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--fg);
    font-family: system-ui, -apple-system, sans-serif; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; padding: 1rem; }
  h1 { font-size: 1.3rem; margin: 0.3rem 0; }
  .sub { color: #9a9ab0; font-size: 0.85rem; margin-bottom: 1rem; text-align:center;}
  button.big { font-size: 1.4rem; padding: 1rem 2rem; margin: 1rem 0;
    background: var(--accent); color: #14141c; border: none; border-radius: 12px;
    cursor: pointer; font-weight: bold; }
  button.big:focus { outline: 4px solid #fff; }
  .menu { max-width: 640px; width: 100%; }
  fieldset { border: 2px solid #3a3a4a; border-radius: 10px; margin: 1rem 0; padding: 0.8rem 1rem; }
  legend { padding: 0 0.5rem; font-weight: bold; color: var(--accent); }
  details.settings-section { margin: 1rem 0; }
  details.settings-section > summary { cursor: pointer; font-weight: bold; color: var(--accent);
    font-size: 1.05rem; padding: 0.6rem 0.8rem; background: var(--panel); border: 2px solid #3a3a4a; border-radius: 10px; }
  details.settings-section[open] > summary { border-radius: 10px 10px 0 0; border-bottom: none; }
  details.settings-section > summary:focus { outline: 3px solid #fff; }
  details.settings-section fieldset { margin-top: 0; border-radius: 0 0 10px 10px; }
  .opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-size: 1rem; }
  /* ===== [hidden] DOIT VRAIMENT CACHER (Med, 14/09/2026) =====
     Defaut trouve en cherchant pourquoi Med entendait encore des reglages « masques » : la regle
     du navigateur pour [hidden] est display:none, mais elle a la specificite la plus faible qui
     soit -- la classe .opt ci-dessus (display:flex) la bat sans meme la croiser. Les TREIZE labels
     marques hidden dans index.html etaient donc affiches, focusables, et lus au lecteur d'ecran
     comme les autres : masquer une option ne masquait rien du tout. Regle globale et !important
     pour qu'aucune classe future ne repasse devant (aucun code JS du projet ne pose ni ne retire
     l'attribut hidden -- verifie par grep -- donc rien ne depend de l'ancien comportement). */
  [hidden] { display: none !important; }
  .opt input { width: 22px; height: 22px; }
  .opt:focus-within { outline: 2px solid var(--accent); border-radius: 6px; }
  .bars { display: flex; gap: 2rem; width: 100%; max-width: 640px; margin-bottom: 1rem; }
  .fighter { flex: 1; }
  .fighter h2 { font-size: 1rem; margin: 0 0 0.3rem; }
  .bar-wrap { background: #000; border-radius: 8px; overflow: hidden; height: 22px; margin-bottom: 0.4rem; position: relative; }
  .bar-fill { height: 100%; transition: width 0.15s; }
  .hp .bar-fill { background: var(--hero); }
  .enemy-hp .bar-fill { background: var(--enemy); }
  .ki .bar-fill { background: var(--ki); }
  .bar-label { position: absolute; left: 8px; top: 2px; font-size: 0.75rem; font-weight: bold; text-shadow: 0 0 3px #000; }
  #state-display { font-size: 1.5rem; font-weight: bold; text-align: center; min-height: 2.5rem; margin: 1rem 0; color: var(--accent); }
  #log { width: 100%; max-width: 640px; height: 120px; overflow-y: auto; background: var(--panel); border-radius: 8px; padding: 0.6rem; font-size: 0.85rem; line-height: 1.5; }
  #log p { margin: 0 0 0.2rem; }
  .cross { display: grid; grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(3, 70px); gap: 6px; margin: 1.2rem 0; }
  .key { background: var(--panel); border: 2px solid #3a3a4a; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; text-align: center; }
  .key.up { grid-column: 2; grid-row: 1; } .key.left { grid-column: 1; grid-row: 2; }
  .key.center { grid-column: 2; grid-row: 2; } .key.right { grid-column: 3; grid-row: 2; }
  .key.lit { background: var(--accent); color: #14141c; border-color: #fff; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .help { max-width: 640px; font-size: 0.85rem; color: #9a9ab0; line-height: 1.6; }
  .help code { background: #2a2a38; padding: 1px 6px; border-radius: 4px; color: var(--fg); }

/* ===== Mode Arcade (23/07/2026) : masque tout le menu sauf les actions arcade ===== */
#arcade-actions{ display:none; }
#menu.arcade-mode > *:not(#arcade-actions){ display:none !important; }
#menu.arcade-mode > #arcade-actions{ display:block !important; }

/* La version du jeu, sous le titre. Discrete a l'oeil, entiere pour le lecteur d'ecran :
   pas de display:none, pas de aria-hidden -- ce qui est dit par F8 doit rester LISIBLE.
   (chantier du 09/08/2026) */
.version { margin: 0 0 .6rem; font-size: .85rem; opacity: .75; }

/* Étoiles de menace (17/09/2026) : visuelles seulement, texte alternatif vide, jamais lues. */
.etoiles-menace { margin-left: .35em; color: var(--accent); letter-spacing: .05em; white-space: nowrap; }
.etoiles-menace[data-etoiles="1"]::after { content: "★☆☆☆☆☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="2"]::after { content: "★★☆☆☆☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="3"]::after { content: "★★★☆☆☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="4"]::after { content: "★★★★☆☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="5"]::after { content: "★★★★★☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="6"]::after { content: "★★★★★★☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="7"]::after { content: "★★★★★★★☆☆☆" / ""; }
.etoiles-menace[data-etoiles="8"]::after { content: "★★★★★★★★☆☆" / ""; }
.etoiles-menace[data-etoiles="9"]::after { content: "★★★★★★★★★☆" / ""; }
.etoiles-menace[data-etoiles="10"]::after { content: "★★★★★★★★★★" / ""; }

/* ===== MODE RPG (lot 2, 24/09/2026) : terrain en rangees, de affiche en gros ===== */
#rpg-zone .rpg-rangee{display:flex;flex-wrap:wrap;gap:.4em;margin:.3em 0;padding:.3em;border:1px solid #555;border-radius:.4em}
#rpg-zone .rpg-rangee button{flex:1 1 12em}
#rpg-zone .rpg-inerte{opacity:.65}
#rpg-zone .rpg-de{font-size:4em;font-weight:bold;text-align:center;margin:.2em 0}
#rpg-zone .rpg-ligne{padding:.3em .5em;margin:.2em 0}
/* Conseil didactique des aventures (30/09/2026) : une autre couleur que le récit, et un liseré pour le repérer sans la couleur seule. */
#rpg-zone .rpg-ligne.rpg-conseil{color:#ffe08a;border-left:4px solid #ffb703;padding-left:.7em}

/* MENU DE RÉACTION (Med, 26/09/2026, soir 5, js/tactique.js) : la pause réduite aux actions de la phase et à Reprendre. */
body.menu-reaction #ecran-pause > *:not(#pause-titre):not(#pause-actions-phase):not(#pause-reprendre-btn){ display:none !important; }
/* MENU D'ACTIONS DU MODE RPG EN COLONNES (Med, 26/09/2026, soir 5) : deux colonnes côte à côte, une seule sur petit écran. */
#rpg-zone .rpg-colonnes{ display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
@media (max-width:600px){ #rpg-zone .rpg-colonnes{ grid-template-columns:1fr; } }
#rpg-zone .rpg-colonne{ display:flex; flex-direction:column; gap:0.25rem; }